privateboard 0.1.19 → 0.1.21

package/public/themes.css

@@ -76,22 +76,25 @@
 /* ─── DARK · regent · warm gold on near-black ───
        The product's default. Token names use the `--lime*` slot for
        the primary accent so every call-site that references the
-       primary keeps working — the actual hue is gold (#C9A46B). */
+       primary keeps working — the actual hue is gold (#C9A46B).
+       See `docs/theme-system.md` for the full token reference. */
 :root[data-theme="dark"] {
   --bg: #0A0A0A;
   --panel: #131312;
   --panel-2: #1A1A18;
   --panel-3: #21211E;
   --hi: #2A2A26;
+  --strip-bg: color-mix(in srgb, var(--lime) 6%, var(--bg));     /* topbar / bottombar — very subtle brand tint */
+  --accent-line: color-mix(in srgb, var(--lime) 22%, var(--bg)); /* brand-tinted hairlines for composer chrome */
 
   --line: #26241F;
   --line-bright: #3A3934;
-  --line-strong: #4D4B45;
+  --line-strong: #5A5852;     /* raised from #4D4B45 so input frames separate from line-bright */
 
   --text: #C8C5BE;
   --text-soft: #8E8B83;
-  --text-dim: #5C5A52;
-  --text-faint: #5C5A4D;
+  --text-dim: #7E7B70;        /* was #5C5A52; raised to ~4.3:1 vs bg, near WCAG AA */
+  --text-faint: #5A5848;      /* was #5C5A4D; clearly fainter than dim, OK for hints */
 
   --lime: #C9A46B;
   --lime-deep: #9A7B40;
@@ -107,40 +110,39 @@
 /* ─── LIGHT · atrium · ChatGPT-style clean white, OpenAI green ───
        Cool neutral grey palette modelled after chatgpt.com light mode:
        pure white main area, very-light-grey sidebar, light-grey lines,
-       crisp near-black text. Replaces the prior warm-cream "atrium"
-       palette which read as muddy.
-
-       Accent — `--lime` is OpenAI brand green (#10A37F). On light
-       cream the prior gold had marginal contrast (~5.5:1); the OpenAI
-       green hits a brighter, cleaner accent that matches ChatGPT's
-       visual language for primary highlights / focus rings / chips.
-       Dark mode still uses regent gold (#C9A46B) — themes can carry
-       different brand hues; semantic ("primary accent") is preserved.
-
-       Hierarchy delta is intentionally crisp:
-         bg #FFF (pure white) → panel #F9F9F9 (chat-rail grey) →
-         panel-2 #F4F4F4 → panel-3 #ECECEC → hi #E5E5E5
-       Each step ~2–3% L which is small but visible because we use
-       borders (`--line`) to demarcate, not just background fills. */
+       crisp near-black text.
+
+       Hierarchy ladder, each step ~3-5% L for perceptible elevation
+       even before borders apply:
+         bg #FFF → panel #FAFAFA → panel-2 #EEEEEE → panel-3 #E4E4E4
+         → hi #D4D4D4
+
+       Accent — `--lime` is OpenAI brand green (#10A37F). Dark mode
+       still uses regent gold (#C9A46B); both themes carry their own
+       brand hue, the semantic ("primary accent") is preserved across
+       both. See `docs/theme-system.md` for why the token is still
+       called `--lime` despite the hue swap. */
 :root[data-theme="light"] {
   --bg: #FFFFFF;
-  --panel: #F9F9F9;
-  --panel-2: #F1F1F1;
-  --panel-3: #ECECEC;
-  --hi: #E5E5E5;
-
-  --line: #ECECEC;
-  --line-bright: #D4D4D8;
-  --line-strong: #CCCCCC;
-
-  --text: #0D0D0D;
-  --text-soft: #5D5D5D;
-  --text-dim: #8E8EA0;
-  --text-faint: #B4B4B4;
-
-  --lime: #10A37F;       /* OpenAI green — primary accent          */
-  --lime-deep: #0D8868;  /* deeper green — hover / active depth    */
-  --lime-dim: #D1FAE5;   /* pale mint — subtle bg tints            */
+  --panel: #FAFAFA;           /* was #F9F9F9 — micro-adjust for ladder spacing  */
+  --panel-2: #EEEEEE;         /* was #F1F1F1 — clearer 1-step pop vs panel      */
+  --panel-3: #E4E4E4;         /* was #ECECEC — clearer 2-step                   */
+  --hi: #D4D4D4;              /* was #E5E5E5 — visible hover surface            */
+  --strip-bg: color-mix(in srgb, var(--lime) 6%, var(--bg));     /* topbar / bottombar — very subtle brand tint */
+  --accent-line: color-mix(in srgb, var(--lime) 22%, var(--bg)); /* brand-tinted hairlines for composer chrome */
+
+  --line: #E5E5E5;            /* was #ECECEC — actually visible on white (1.10:1) */
+  --line-bright: #C8C8CD;     /* was #D4D4D8 — clearer everyday border          */
+  --line-strong: #A6A6AC;     /* was #CCCCCC — structural divider / input frame */
+
+  --text: #0D0D0D;            /* primary — 18.7:1 on bg (AAA)                   */
+  --text-soft: #5D5D5D;       /* secondary — 7.0:1 (AAA for text > 18pt)        */
+  --text-dim: #717181;        /* was #8E8EA0; lifted to 4.7:1 (AA) for readable */
+  --text-faint: #9A9A9A;      /* hint level ~2.8:1 — for disabled/decoration   */
+
+  --lime: #10A37F;            /* OpenAI green — primary accent                  */
+  --lime-deep: #0D8868;       /* deeper green — hover / active depth            */
+  --lime-dim: #A7E8D0;        /* was #D1FAE5 — visible enough for hover / tints */
 
   --amber: #C2410C;
   --amber-dim: #FED7AA;
@@ -150,31 +152,8 @@
   --magenta: #BE185D;
 }
 
-/* ─── Light-mode topbar overrides ──────────────────────────────
-   The classification strips at the top of the new-room / new-agent
-   modals use `var(--panel-2)`. On the ChatGPT-grey palette, panel-2
-   is `#F4F4F4` which sits ~1.05:1 vs the modal's `#F9F9F9` panel —
-   the topbar disappears.
-
-   Override with a clearly deeper neutral grey so the strip reads as a
-   distinct title bar in ChatGPT's clean style (no warm chrome, no dark
-   olive — just clean grey + crisp hairline). */
-/* Composer topbar — the toolbar above the textarea in new-room /
-   new-agent composers. Defaults to `var(--panel-2)`, which on the
-   ChatGPT-grey light palette sits ~1:1 vs the surrounding panel.
-   Bump it one shade deeper in light mode so the toolbar reads as a
-   distinct strip without disturbing other `--panel-2` consumers. */
-:root[data-theme="light"] .cmp-topbar {
-  background: #E5E4E1;
-}
-
-/* Composer focus ring — `.cmp-input-frame` (new-room) and `.search-card`
-   default to `--lime-dim` on focus for a "softer" register. On the
-   light palette `--lime-dim` is the pale mint `#D1FAE5` which reads as
-   ghost-faded — there's no visible focus signal. Switch to the full
-   `--lime` (OpenAI green `#10A37F`) so the focused field has a real,
-   crisp ring matching the new-agent inputs. */
-:root[data-theme="light"] .cmp-input-frame:focus-within,
-:root[data-theme="light"] .search-card:focus-within {
-  border-color: var(--lime);
-}
+/* No scoped overrides needed.
+   - Topbar / classification strips: covered by `--strip-bg`.
+   - `.cmp-input-frame` / `.search-card`: default border is `--lime-dim`
+     (subtle brand tint), focus is `--lime` (full brand) — set inline
+     in index.html, no theme-specific override required. */