@gemboss/ui 0.13.0 → 0.25.0

package/src/theme-dark.css

@@ -1,66 +1 @@
-/* ═══ Dark palette — @gemboss/ui 0.7.2 ═══════════════════════════════════════════════════════════════
-   Split out of portal.css (04/10/2026). `ThemeToggle` / `themeScript` set data-theme on <html>, and this
-   file turns every --gemboss-* colour dark under it. It lives apart so that a surface which takes only
-   the leaderboard (gemboss-tokens.css + portal.css) does not inherit it: GemCommunity sets
-   data-theme="dark" for its own sign-in pages and remembers it, and the rule
-   `:root[data-theme="dark"] body` here outranks its body rule, so a member who once picked dark there
-   would get a dark page behind light cards. gemboss-ui.css still carries this file. */
-/* Dark palette. `ThemeToggle` / `themeScript` set data-theme on <html>; a surface without them stays
-   light. Only colours change: the components above and every kit class read these tokens. */
-:root[data-theme="dark"] {
-  color-scheme: dark;
-  --gemboss-primary: #f2f3f5;
-  --gemboss-primary-dark: #ffffff;
-  --gemboss-primary-soft: #23242a;
-  --gemboss-on-primary: #0d0d12;
-  --gemboss-accent: #7c84ff;
-  --gemboss-accent-strong: #a3a9ff;
-  --gemboss-accent-soft: #1f2140;
-  --gemboss-text-strong: #f2f3f5;
-  --gemboss-text: #e3e4e8;
-  --gemboss-text-muted: #9a9ca6;
-  --gemboss-surface: #16171d;
-  --gemboss-canvas: #0d0d12;
-  --gemboss-app-bg: #0d0d12;
-  --gemboss-rail-bg: #0d0d12;
-  --gemboss-panel-bg: #16171d;
-  --gemboss-topbar-bg: rgba(13, 13, 18, 0.96);
-  --gemboss-nav-bg: #0d0d12;
-  --gemboss-nav-hover: rgba(255, 255, 255, 0.06);
-  --gemboss-divider: #2a2b33;
-  --gemboss-divider-soft: #22232a;
-  --gemboss-hover: #22232b;
-  --gemboss-active-bg: #262833;
-  --gemboss-active-fg: #f2f3f5;
-  --gemboss-field-bg: #121318;
-  --gemboss-field-bg-hover: #17181e;
-  --gemboss-field-ink: #e3e4e8;
-  --gemboss-field-placeholder: #8a8c96;
-  --gemboss-field-line: #3a3c46;
-  --gemboss-field-line-hover: #50525e;
-  --gemboss-field-line-active: #c9cbd3;
-  --gemboss-chip-ink: #d6d8de;
-  --gemboss-chip-line: #3a3c46;
-  --gemboss-chip-line-hover: #50525e;
-  --gemboss-chip-bg-hover: #22232b;
-  --gemboss-success: #34c38f;
-  --gemboss-success-strong: #5fd6a8;
-  --gemboss-success-soft: #13291f;
-  --gemboss-success-border: #22533e;
-  --gemboss-warning: #e0b341;
-  --gemboss-warning-soft: #2b2412;
-  --gemboss-warning-border: #5a4a1d;
-  --gemboss-danger: #ff6b5a;
-  --gemboss-danger-strong: #ff8a7c;
-  --gemboss-danger-soft: #2e1714;
-  --gemboss-danger-border: #5c2a24;
-  --ui-accent-fg: #0d0d12;
-  --ui-warning-fg: #e8c063;
-  --ui-card-shadow: none; /* a dark drop under a dark card is noise */
-  --gb-brand-ink: #f2f3f5;
-}
-/* Avatar initials in dark: the tone's light end, so the text clears 4.5:1 on its tinted disc. */
-:root[data-theme="dark"] .gb-avatar[data-tone] { background: color-mix(in srgb, var(--gb-tone) 30%, #16171d); color: color-mix(in srgb, var(--gb-tone) 35%, #ffffff); }
-:root[data-theme="dark"] body { background: var(--gemboss-app-bg); color: var(--gemboss-text); }
-:root[data-theme="dark"] .gb-leaderboard-row.is-first .gb-leaderboard-value,
-:root[data-theme="dark"] .gb-podium-slot--1 .gb-podium-value { color: #e0b341; }
+:root[data-theme=dark]{color-scheme:dark;--gemboss-primary: #f2f3f5;--gemboss-primary-dark: #ffffff;--gemboss-primary-soft: #23242a;--gemboss-on-primary: #0d0d12;--gemboss-accent: #7c84ff;--gemboss-accent-strong: #a3a9ff;--gemboss-accent-soft: #1f2140;--gemboss-text-strong: #f2f3f5;--gemboss-text: #e3e4e8;--gemboss-text-muted: #9a9ca6;--gemboss-surface: #16171d;--gemboss-canvas: #0d0d12;--gemboss-app-bg: #0d0d12;--gemboss-rail-bg: #0d0d12;--gemboss-panel-bg: #16171d;--gemboss-topbar-bg: rgba(13, 13, 18, .96);--gemboss-nav-bg: #0d0d12;--gemboss-nav-hover: rgba(255, 255, 255, .06);--gemboss-divider: #2a2b33;--gemboss-divider-soft: #22232a;--gemboss-hover: #22232b;--gemboss-active-bg: #262833;--gemboss-active-fg: #f2f3f5;--gemboss-field-bg: #121318;--gemboss-field-bg-hover: #17181e;--gemboss-field-ink: #e3e4e8;--gemboss-field-placeholder: #8a8c96;--gemboss-field-line: #3a3c46;--gemboss-field-line-hover: #50525e;--gemboss-field-line-active: #c9cbd3;--gemboss-chip-ink: #d6d8de;--gemboss-chip-line: #3a3c46;--gemboss-chip-line-hover: #50525e;--gemboss-chip-bg-hover: #22232b;--gemboss-success: #34c38f;--gemboss-success-strong: #5fd6a8;--gemboss-success-soft: #13291f;--gemboss-success-border: #22533e;--gemboss-warning: #e0b341;--gemboss-warning-soft: #2b2412;--gemboss-warning-border: #5a4a1d;--gemboss-danger: #ff6b5a;--gemboss-danger-strong: #ff8a7c;--gemboss-danger-soft: #2e1714;--gemboss-danger-border: #5c2a24;--ui-accent-fg: #0d0d12;--ui-warning-fg: #e8c063;--ui-card-shadow: none;--gb-brand-ink: #f2f3f5}:root[data-theme=dark] .gb-avatar[data-tone]{background:color-mix(in srgb,var(--gb-tone) 30%,#16171d);color:color-mix(in srgb,var(--gb-tone) 35%,#ffffff)}:root[data-theme=dark] body{background:var(--gemboss-app-bg);color:var(--gemboss-text)}:root[data-theme=dark] .gb-leaderboard-row.is-first .gb-leaderboard-value,:root[data-theme=dark] .gb-podium-slot--1 .gb-podium-value{color:#e0b341}

package/src/theme-script.ts

@@ -0,0 +1,10 @@
+/**
+ * `themeScript` and `THEME_KEY` (@gemboss/ui 0.7.2; their own module since 0.23.0). The script goes in every root
+ * layout's <head>, so it must not bring `ThemeToggle`'s button styles (portal.css) to every route: it brings only the
+ * dark palette it switches on. theme.tsx says the rest.
+ */
+import "./theme-dark.css"; // the palette `data-theme="dark"` turns on (0.23.0)
+
+export const THEME_KEY = "gemboss-theme";
+
+export const themeScript = `(function(){try{var t=localStorage.getItem("${THEME_KEY}");if(t!=="dark"&&t!=="light"){t=matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}document.documentElement.setAttribute("data-theme",t)}catch(e){}})();`;

package/src/theme.tsx

@@ -10,15 +10,15 @@
  * every kit class (cards, tags, fields, buttons, the topbar) follows without a rule of its own.
  *
  * Opt-in: a surface without the toggle (the admin) never gets the attribute and stays light.
- * `themeScript` goes in <head> (`<script dangerouslySetInnerHTML={{ __html: themeScript }} />`): it applies
+ * `themeScript` (theme-script.ts since 0.23.0, so a root layout that only needs the script does not take portal.css
+ * with it) goes in <head> (`<script dangerouslySetInnerHTML={{ __html: themeScript }} />`): it applies
  * the stored choice, else the OS's, before the first paint, so a dark page never flashes white.
  */
+import "./theme-dark.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
+import "./portal.css"; // ThemeToggle's button (.gb-theme-toggle) is drawn there
 import React, { useEffect, useState } from "react";
 import { Icon } from "./icons";
-
-export const THEME_KEY = "gemboss-theme";
-
-export const themeScript = `(function(){try{var t=localStorage.getItem("${THEME_KEY}");if(t!=="dark"&&t!=="light"){t=matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}document.documentElement.setAttribute("data-theme",t)}catch(e){}})();`;
+import { THEME_KEY } from "./theme-script";
 
 export function ThemeToggle({ labels = { toDark: "Switch to dark mode", toLight: "Switch to light mode" } }: {
   labels?: { toDark: string; toLight: string };