@timmo001/groundwork-tokens 0.9.39 → 0.10.0

package/generated/themes.json

@@ -2706,6 +2706,53 @@
         "row-padding": "var(--gw-space-3)"
       },
       "modes": {
+        "light": {
+          "surface-lower": "#d0d5e3",
+          "surface-low": "#dadbe0",
+          "surface-default": "#e1e2e7",
+          "surface-raised": "#e9e9ed",
+          "surface-overlay": "#e1e1e5",
+          "border-quiet": "#ced2e4",
+          "border-normal": "#c4c8da",
+          "border-loud": "#abafc0",
+          "text-strong": "#3760bf",
+          "text-primary": "#3760bf",
+          "text-secondary": "#6172b0",
+          "text-disabled": "#6172b099",
+          "fill-neutral-resting": "#dfdfe3",
+          "fill-neutral-hovered": "#d5d5d9",
+          "fill-neutral-pressed": "#ccccd0",
+          "fill-neutral-selected": "#cfcfd3",
+          "fill-neutral-disabled": "#e4e4e8",
+          "fill-primary-resting": "#3760bf",
+          "fill-primary-hovered": "#4772d3",
+          "fill-primary-pressed": "#537fe1",
+          "on-primary": "#e1e2e7",
+          "accent": "#2e7de9",
+          "fill-accent-resting": "#2e7de9",
+          "fill-accent-hovered": "#0042a5",
+          "fill-accent-pressed": "#0059c0",
+          "fill-accent-quiet": "#0051b729",
+          "border-accent": "#0051b780",
+          "on-accent": "#ffffff",
+          "focus": "#2e7de9",
+          "link": "#0051b7",
+          "info": "#2e7de9",
+          "fill-info-quiet": "#2e7de924",
+          "border-info": "#2e7de973",
+          "success": "#587539",
+          "fill-success-quiet": "#58753924",
+          "border-success": "#58753973",
+          "important": "#9854f1",
+          "fill-important-quiet": "#9854f124",
+          "border-important": "#9854f173",
+          "warning": "#8c6c3e",
+          "fill-warning-quiet": "#8c6c3e24",
+          "border-warning": "#8c6c3e73",
+          "danger": "#f52a65",
+          "fill-danger-quiet": "#f52a6524",
+          "border-danger": "#f52a6573"
+        },
         "dark": {
           "surface-lower": "#16161e",
           "surface-low": "#171823",
@@ -2803,9 +2850,9 @@
       }
     },
     {
-      "id": "tokyo-night-day",
-      "name": "Tokyo Night Day",
-      "description": "Tokyo Night Day, mapped onto the roles so it stays faithful to the Tokyo Night palette.",
+      "id": "tokyo-night-moon",
+      "name": "Tokyo Night Moon",
+      "description": "Tokyo Night Moon, mapped onto the roles so it stays faithful to the Tokyo Night palette.",
       "optional": true,
       "family": "Tokyo Night",
       "examples": [],
@@ -2925,86 +2972,7 @@
           "danger": "#f52a65",
           "fill-danger-quiet": "#f52a6524",
           "border-danger": "#f52a6573"
-        }
-      }
-    },
-    {
-      "id": "tokyo-night-moon",
-      "name": "Tokyo Night Moon",
-      "description": "Tokyo Night Moon, mapped onto the roles so it stays faithful to the Tokyo Night palette.",
-      "optional": true,
-      "family": "Tokyo Night",
-      "examples": [],
-      "style": {
-        "font": "Mona Sans",
-        "mono": "Geist Mono",
-        "radius": {
-          "panel": 10,
-          "control": 8,
-          "chip": 6
-        },
-        "border": {
-          "width": 1,
-          "strength": "hairline"
-        },
-        "weights": {
-          "regular": 400,
-          "strong": 600
-        },
-        "density": "normal",
-        "capitals": false,
-        "link": {
-          "color": "accent",
-          "underline": "thin"
         },
-        "surfaceAccent": "none",
-        "rows": "cards"
-      },
-      "properties": {
-        "font-sans": "\"Mona Sans Variable\", \"Mona Sans\", system-ui, sans-serif",
-        "font-figures": "\"Mona Sans Variable\", \"Mona Sans\", system-ui, sans-serif",
-        "font-mono": "\"Geist Mono Variable\", \"Geist Mono\", ui-monospace, monospace",
-        "font-weight-regular": "400",
-        "font-weight-strong": "600",
-        "density": "1",
-        "control-scale": "1",
-        "space-0-5": "calc(0.125rem * var(--gw-density))",
-        "space-1": "calc(0.25rem * var(--gw-density))",
-        "space-2": "calc(0.5rem * var(--gw-density))",
-        "space-3": "calc(0.75rem * var(--gw-density))",
-        "space-4": "calc(1rem * var(--gw-density))",
-        "space-5": "calc(1.25rem * var(--gw-density))",
-        "space-6": "calc(1.5rem * var(--gw-density))",
-        "space-7": "calc(1.75rem * var(--gw-density))",
-        "space-8": "calc(2rem * var(--gw-density))",
-        "space-9": "calc(2.25rem * var(--gw-density))",
-        "space-10": "calc(2.5rem * var(--gw-density))",
-        "space-11": "calc(2.75rem * var(--gw-density))",
-        "space-12": "calc(3rem * var(--gw-density))",
-        "space-13": "calc(3.25rem * var(--gw-density))",
-        "space-14": "calc(3.5rem * var(--gw-density))",
-        "space-15": "calc(3.75rem * var(--gw-density))",
-        "space-16": "calc(4rem * var(--gw-density))",
-        "space-17": "calc(4.25rem * var(--gw-density))",
-        "space-18": "calc(4.5rem * var(--gw-density))",
-        "space-19": "calc(4.75rem * var(--gw-density))",
-        "space-20": "calc(5rem * var(--gw-density))",
-        "radius-panel": "10px",
-        "radius-control": "8px",
-        "radius-chip": "6px",
-        "border-width": "1px",
-        "border-color": "var(--gw-color-border-quiet)",
-        "label-transform": "none",
-        "label-tracking": "normal",
-        "link-color": "var(--gw-color-link)",
-        "link-underline": "1px",
-        "panel-sheen": "none",
-        "panel-marker": "0px",
-        "panel-flange": "0px",
-        "panel-flange-color": "var(--gw-border-color)",
-        "row-padding": "var(--gw-space-3)"
-      },
-      "modes": {
         "dark": {
           "surface-lower": "#1e2030",
           "surface-low": "#202234",
@@ -3178,6 +3146,53 @@
         "row-padding": "var(--gw-space-3)"
       },
       "modes": {
+        "light": {
+          "surface-lower": "#d0d5e3",
+          "surface-low": "#dadbe0",
+          "surface-default": "#e1e2e7",
+          "surface-raised": "#e9e9ed",
+          "surface-overlay": "#e1e1e5",
+          "border-quiet": "#ced2e4",
+          "border-normal": "#c4c8da",
+          "border-loud": "#abafc0",
+          "text-strong": "#3760bf",
+          "text-primary": "#3760bf",
+          "text-secondary": "#6172b0",
+          "text-disabled": "#6172b099",
+          "fill-neutral-resting": "#dfdfe3",
+          "fill-neutral-hovered": "#d5d5d9",
+          "fill-neutral-pressed": "#ccccd0",
+          "fill-neutral-selected": "#cfcfd3",
+          "fill-neutral-disabled": "#e4e4e8",
+          "fill-primary-resting": "#3760bf",
+          "fill-primary-hovered": "#4772d3",
+          "fill-primary-pressed": "#537fe1",
+          "on-primary": "#e1e2e7",
+          "accent": "#2e7de9",
+          "fill-accent-resting": "#2e7de9",
+          "fill-accent-hovered": "#0042a5",
+          "fill-accent-pressed": "#0059c0",
+          "fill-accent-quiet": "#0051b729",
+          "border-accent": "#0051b780",
+          "on-accent": "#ffffff",
+          "focus": "#2e7de9",
+          "link": "#0051b7",
+          "info": "#2e7de9",
+          "fill-info-quiet": "#2e7de924",
+          "border-info": "#2e7de973",
+          "success": "#587539",
+          "fill-success-quiet": "#58753924",
+          "border-success": "#58753973",
+          "important": "#9854f1",
+          "fill-important-quiet": "#9854f124",
+          "border-important": "#9854f173",
+          "warning": "#8c6c3e",
+          "fill-warning-quiet": "#8c6c3e24",
+          "border-warning": "#8c6c3e73",
+          "danger": "#f52a65",
+          "fill-danger-quiet": "#f52a6524",
+          "border-danger": "#f52a6573"
+        },
         "dark": {
           "surface-lower": "#1f2335",
           "surface-low": "#222538",

package/generated/themes.ts

@@ -2707,6 +2707,53 @@ export const themes = [
       "row-padding": "var(--gw-space-3)"
     },
     "modes": {
+      "light": {
+        "surface-lower": "#d0d5e3",
+        "surface-low": "#dadbe0",
+        "surface-default": "#e1e2e7",
+        "surface-raised": "#e9e9ed",
+        "surface-overlay": "#e1e1e5",
+        "border-quiet": "#ced2e4",
+        "border-normal": "#c4c8da",
+        "border-loud": "#abafc0",
+        "text-strong": "#3760bf",
+        "text-primary": "#3760bf",
+        "text-secondary": "#6172b0",
+        "text-disabled": "#6172b099",
+        "fill-neutral-resting": "#dfdfe3",
+        "fill-neutral-hovered": "#d5d5d9",
+        "fill-neutral-pressed": "#ccccd0",
+        "fill-neutral-selected": "#cfcfd3",
+        "fill-neutral-disabled": "#e4e4e8",
+        "fill-primary-resting": "#3760bf",
+        "fill-primary-hovered": "#4772d3",
+        "fill-primary-pressed": "#537fe1",
+        "on-primary": "#e1e2e7",
+        "accent": "#2e7de9",
+        "fill-accent-resting": "#2e7de9",
+        "fill-accent-hovered": "#0042a5",
+        "fill-accent-pressed": "#0059c0",
+        "fill-accent-quiet": "#0051b729",
+        "border-accent": "#0051b780",
+        "on-accent": "#ffffff",
+        "focus": "#2e7de9",
+        "link": "#0051b7",
+        "info": "#2e7de9",
+        "fill-info-quiet": "#2e7de924",
+        "border-info": "#2e7de973",
+        "success": "#587539",
+        "fill-success-quiet": "#58753924",
+        "border-success": "#58753973",
+        "important": "#9854f1",
+        "fill-important-quiet": "#9854f124",
+        "border-important": "#9854f173",
+        "warning": "#8c6c3e",
+        "fill-warning-quiet": "#8c6c3e24",
+        "border-warning": "#8c6c3e73",
+        "danger": "#f52a65",
+        "fill-danger-quiet": "#f52a6524",
+        "border-danger": "#f52a6573"
+      },
       "dark": {
         "surface-lower": "#16161e",
         "surface-low": "#171823",
@@ -2804,9 +2851,9 @@ export const themes = [
     }
   },
   {
-    "id": "tokyo-night-day",
-    "name": "Tokyo Night Day",
-    "description": "Tokyo Night Day, mapped onto the roles so it stays faithful to the Tokyo Night palette.",
+    "id": "tokyo-night-moon",
+    "name": "Tokyo Night Moon",
+    "description": "Tokyo Night Moon, mapped onto the roles so it stays faithful to the Tokyo Night palette.",
     "optional": true,
     "family": "Tokyo Night",
     "examples": [],
@@ -2926,86 +2973,7 @@ export const themes = [
         "danger": "#f52a65",
         "fill-danger-quiet": "#f52a6524",
         "border-danger": "#f52a6573"
-      }
-    }
-  },
-  {
-    "id": "tokyo-night-moon",
-    "name": "Tokyo Night Moon",
-    "description": "Tokyo Night Moon, mapped onto the roles so it stays faithful to the Tokyo Night palette.",
-    "optional": true,
-    "family": "Tokyo Night",
-    "examples": [],
-    "style": {
-      "font": "Mona Sans",
-      "mono": "Geist Mono",
-      "radius": {
-        "panel": 10,
-        "control": 8,
-        "chip": 6
-      },
-      "border": {
-        "width": 1,
-        "strength": "hairline"
-      },
-      "weights": {
-        "regular": 400,
-        "strong": 600
-      },
-      "density": "normal",
-      "capitals": false,
-      "link": {
-        "color": "accent",
-        "underline": "thin"
       },
-      "surfaceAccent": "none",
-      "rows": "cards"
-    },
-    "properties": {
-      "font-sans": "\"Mona Sans Variable\", \"Mona Sans\", system-ui, sans-serif",
-      "font-figures": "\"Mona Sans Variable\", \"Mona Sans\", system-ui, sans-serif",
-      "font-mono": "\"Geist Mono Variable\", \"Geist Mono\", ui-monospace, monospace",
-      "font-weight-regular": "400",
-      "font-weight-strong": "600",
-      "density": "1",
-      "control-scale": "1",
-      "space-0-5": "calc(0.125rem * var(--gw-density))",
-      "space-1": "calc(0.25rem * var(--gw-density))",
-      "space-2": "calc(0.5rem * var(--gw-density))",
-      "space-3": "calc(0.75rem * var(--gw-density))",
-      "space-4": "calc(1rem * var(--gw-density))",
-      "space-5": "calc(1.25rem * var(--gw-density))",
-      "space-6": "calc(1.5rem * var(--gw-density))",
-      "space-7": "calc(1.75rem * var(--gw-density))",
-      "space-8": "calc(2rem * var(--gw-density))",
-      "space-9": "calc(2.25rem * var(--gw-density))",
-      "space-10": "calc(2.5rem * var(--gw-density))",
-      "space-11": "calc(2.75rem * var(--gw-density))",
-      "space-12": "calc(3rem * var(--gw-density))",
-      "space-13": "calc(3.25rem * var(--gw-density))",
-      "space-14": "calc(3.5rem * var(--gw-density))",
-      "space-15": "calc(3.75rem * var(--gw-density))",
-      "space-16": "calc(4rem * var(--gw-density))",
-      "space-17": "calc(4.25rem * var(--gw-density))",
-      "space-18": "calc(4.5rem * var(--gw-density))",
-      "space-19": "calc(4.75rem * var(--gw-density))",
-      "space-20": "calc(5rem * var(--gw-density))",
-      "radius-panel": "10px",
-      "radius-control": "8px",
-      "radius-chip": "6px",
-      "border-width": "1px",
-      "border-color": "var(--gw-color-border-quiet)",
-      "label-transform": "none",
-      "label-tracking": "normal",
-      "link-color": "var(--gw-color-link)",
-      "link-underline": "1px",
-      "panel-sheen": "none",
-      "panel-marker": "0px",
-      "panel-flange": "0px",
-      "panel-flange-color": "var(--gw-border-color)",
-      "row-padding": "var(--gw-space-3)"
-    },
-    "modes": {
       "dark": {
         "surface-lower": "#1e2030",
         "surface-low": "#202234",
@@ -3179,6 +3147,53 @@ export const themes = [
       "row-padding": "var(--gw-space-3)"
     },
     "modes": {
+      "light": {
+        "surface-lower": "#d0d5e3",
+        "surface-low": "#dadbe0",
+        "surface-default": "#e1e2e7",
+        "surface-raised": "#e9e9ed",
+        "surface-overlay": "#e1e1e5",
+        "border-quiet": "#ced2e4",
+        "border-normal": "#c4c8da",
+        "border-loud": "#abafc0",
+        "text-strong": "#3760bf",
+        "text-primary": "#3760bf",
+        "text-secondary": "#6172b0",
+        "text-disabled": "#6172b099",
+        "fill-neutral-resting": "#dfdfe3",
+        "fill-neutral-hovered": "#d5d5d9",
+        "fill-neutral-pressed": "#ccccd0",
+        "fill-neutral-selected": "#cfcfd3",
+        "fill-neutral-disabled": "#e4e4e8",
+        "fill-primary-resting": "#3760bf",
+        "fill-primary-hovered": "#4772d3",
+        "fill-primary-pressed": "#537fe1",
+        "on-primary": "#e1e2e7",
+        "accent": "#2e7de9",
+        "fill-accent-resting": "#2e7de9",
+        "fill-accent-hovered": "#0042a5",
+        "fill-accent-pressed": "#0059c0",
+        "fill-accent-quiet": "#0051b729",
+        "border-accent": "#0051b780",
+        "on-accent": "#ffffff",
+        "focus": "#2e7de9",
+        "link": "#0051b7",
+        "info": "#2e7de9",
+        "fill-info-quiet": "#2e7de924",
+        "border-info": "#2e7de973",
+        "success": "#587539",
+        "fill-success-quiet": "#58753924",
+        "border-success": "#58753973",
+        "important": "#9854f1",
+        "fill-important-quiet": "#9854f124",
+        "border-important": "#9854f173",
+        "warning": "#8c6c3e",
+        "fill-warning-quiet": "#8c6c3e24",
+        "border-warning": "#8c6c3e73",
+        "danger": "#f52a65",
+        "fill-danger-quiet": "#f52a6524",
+        "border-danger": "#f52a6573"
+      },
       "dark": {
         "surface-lower": "#1f2335",
         "surface-low": "#222538",

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@timmo001/groundwork-tokens",
-  "version": "0.9.39",
+  "version": "0.10.0",
   "description": "Groundwork's design tokens: the theme schema, the OKLCH solver and every theme as CSS and JSON",
   "license": "Apache-2.0",
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
     "./runtime": "./src/runtime.ts",
+    "./choices": "./src/choices.ts",
     "./page": "./src/page.ts",
     "./webmcp": "./src/webmcp.ts",
     "./omarchy-current": "./src/omarchy-current.ts",

package/src/choices.ts

@@ -0,0 +1,180 @@
+/**
+ * The built-in themes as choices, the optional themes' documents and the
+ * inline script that applies a stored pick before the first paint. It uses
+ * no DOM types, so a server or CLI building a page can import it without
+ * the DOM lib; `page` re-exports all of it for the browser.
+ *
+ * @module
+ */
+import base from "../themes/base.json" with { type: "json" };
+import bridge from "../themes/bridge.json" with { type: "json" };
+import catppuccinFrappe from "../themes/catppuccin-frappe.json" with { type: "json" };
+import catppuccinLatte from "../themes/catppuccin-latte.json" with { type: "json" };
+import catppuccinMacchiato from "../themes/catppuccin-macchiato.json" with { type: "json" };
+import catppuccinMocha from "../themes/catppuccin-mocha.json" with { type: "json" };
+import githubDimmed from "../themes/github-dimmed.json" with { type: "json" };
+import githubHighContrast from "../themes/github-high-contrast.json" with { type: "json" };
+import github from "../themes/github.json" with { type: "json" };
+import glazing from "../themes/glazing.json" with { type: "json" };
+import slate from "../themes/slate.json" with { type: "json" };
+import snag from "../themes/snag.json" with { type: "json" };
+import survey from "../themes/survey.json" with { type: "json" };
+import tokyoNightMoon from "../themes/tokyo-night-moon.json" with { type: "json" };
+import tokyoNightStorm from "../themes/tokyo-night-storm.json" with { type: "json" };
+import tokyoNight from "../themes/tokyo-night.json" with { type: "json" };
+
+/** How light the page is: `auto` follows the system. */
+export type ThemeMode = "auto" | "light" | "dark" | "darker";
+
+/** Light or dark: the side of a mode a theme has to cover. Darker is dark. */
+export type ThemeScheme = "light" | "dark";
+
+/** The theme id a visitor's own theme is solved under. */
+export const customThemeId = "custom";
+
+/** The id of the `<style>` holding a custom theme's CSS. */
+export const customThemeStyleId = "gw-custom-theme";
+
+/** The theme id the desktop's Omarchy theme is solved under. */
+export const omarchyThemeId = "omarchy";
+
+/** The id of the `<style>` holding the Omarchy theme's CSS. */
+export const omarchyThemeStyleId = "gw-omarchy-theme";
+
+/**
+ * A theme to offer, by id and name. A `Theme` document is one. `mode` marks
+ * a theme with only one scheme, such as Catppuccin Latte: while it's picked,
+ * the page stays in that scheme.
+ */
+export interface ThemeChoice {
+  readonly id: string;
+  readonly name: string;
+  readonly mode?: ThemeScheme | undefined;
+  /** The palette an optional theme comes from, such as `Catppuccin`. */
+  readonly family?: string | undefined;
+}
+
+/** Whether `choice` can show in `scheme`. */
+export const themeCovers = (choice: ThemeChoice, scheme: ThemeScheme) =>
+  choice.mode === undefined || choice.mode === scheme;
+
+/**
+ * Whether `mode` can be used with `choice`: any for a theme with both
+ * schemes, and only its own for one with one. Auto could land on the other
+ * scheme, so it's left out too.
+ */
+export const themeAllows = (choice: ThemeChoice, mode: ThemeMode) =>
+  choice.mode === undefined ||
+  (mode !== "auto" && themeCovers(choice, mode === "light" ? "light" : "dark"));
+
+/**
+ * Choices as a picker's options, grouped: a choice's `family`, or `group`
+ * for those without one. Order the choices as the picker should list them,
+ * usually the app's own theme, then the other core themes, then the optional
+ * ones.
+ */
+export const themeOptions = (
+  choices: readonly ThemeChoice[],
+  group = "Groundwork",
+) =>
+  choices.map(({ id, name, family }) => ({
+    value: id,
+    label: name,
+    group: family ?? group,
+  }));
+
+/** The core themes by id and name, in the order the docs list them. */
+export const coreThemeChoices: readonly ThemeChoice[] = [
+  base,
+  glazing,
+  survey,
+  slate,
+  bridge,
+  snag,
+].map(({ id, name }) => ({ id, name }));
+
+/**
+ * The optional themes' documents, by family and then from light to dark.
+ * They're bundled with the module, so an app compiled to one binary has them
+ * without reading `node_modules`. Decode one with the `MappedTheme` Schema.
+ */
+export const optionalThemeDocuments = [
+  catppuccinLatte,
+  catppuccinFrappe,
+  catppuccinMacchiato,
+  catppuccinMocha,
+  tokyoNight,
+  tokyoNightStorm,
+  tokyoNightMoon,
+  github,
+  githubDimmed,
+  githubHighContrast,
+] as const;
+
+/**
+ * The optional themes, mapped from other palettes, by family and then from
+ * light to dark. One with a single mode is offered for that scheme alone;
+ * one with both, such as GitHub's, for either.
+ */
+export const optionalThemeChoices: readonly ThemeChoice[] =
+  optionalThemeDocuments.map((theme) => ({
+    id: theme.id,
+    name: theme.name,
+    family: theme.family,
+    mode:
+      "otherPalette" in theme
+        ? undefined
+        : theme.mode === "light"
+          ? "light"
+          : "dark",
+  }));
+
+/** What the page's pick starts on, and where it's kept. */
+export interface ThemeBootOptions {
+  /** The local storage key prefix, such as `my-site:theme`. */
+  readonly key: string;
+  /** The theme id to start with. */
+  readonly defaultTheme: string;
+  /** The mode to start with. Defaults to `auto`. */
+  readonly defaultMode?: ThemeMode;
+}
+
+/** The local storage keys a pick is kept under. */
+export const themeStorageKeys = (key: string) => ({
+  mode: `${key}:mode`,
+  theme: `${key}:id`,
+  document: `${key}:custom`,
+  css: `${key}:custom-css`,
+  name: `${key}:custom-name`,
+  scheme: `${key}:custom-mode`,
+});
+
+/** The Omarchy theme's cache, kept apart so a reset doesn't drop it. */
+export const omarchyStorageKeys = (key: string) => ({
+  css: `${key}:omarchy-css`,
+  name: `${key}:omarchy-name`,
+  mode: `${key}:omarchy-mode`,
+});
+
+/**
+ * An inline script that applies the stored mode, theme and any custom or
+ * Omarchy theme's cached CSS before the first paint. Takes the same key and
+ * defaults as `pageTheme`. Picking a theme stores the mode it needs, so the
+ * two stay in step.
+ */
+export const themeBootScript = (options: ThemeBootOptions) => {
+  const config = JSON.stringify({
+    keys: themeStorageKeys(options.key),
+    omarchy: omarchyStorageKeys(options.key),
+    theme: options.defaultTheme,
+    mode: options.defaultMode ?? "auto",
+    custom: customThemeId,
+    style: customThemeStyleId,
+    omarchyId: omarchyThemeId,
+    omarchyStyle: omarchyThemeStyleId,
+  });
+
+  // An imported or Omarchy theme only applies once it's been picked, and
+  // falls back to the default when its CSS has gone
+  return `(()=>{const c=${config};let s;try{s=localStorage}catch{}const g=(k)=>{try{return s?.getItem(k)??null}catch{return null}};const r=document.documentElement;const a=(id,css)=>{const e=document.createElement("style");e.id=id;e.textContent=css;document.head.append(e)};let m=g(c.keys.mode)??c.mode;let t=g(c.keys.theme)??c.theme;const o=t===c.custom?g(c.keys.css):t===c.omarchyId?g(c.omarchy.css):null;if(t===c.custom||t===c.omarchyId){if(o)a(t===c.custom?c.style:c.omarchyStyle,o);else{t=c.theme;m=c.mode}}r.setAttribute("data-gw-theme",t);if(m==="auto")r.removeAttribute("data-gw-mode");else r.setAttribute("data-gw-mode",m)})();`;
+};

package/src/generate.ts

@@ -536,17 +536,17 @@ export const blumeTheme = (theme: ResolvedTheme) =>
   ].join("\n\n") + "\n";
 
 /**
- * Every core theme as Blume's tokens, each under `data-gw-docs-theme`, for a
- * site that lets readers pick one with the theme picker.
+ * Every theme, core and optional, as Blume's tokens, each under
+ * `data-gw-docs-theme`, for a site that lets readers pick one with the theme
+ * picker. An optional theme with one scheme has rules for that scheme only;
+ * the picker keeps the page in it.
  */
 export const blumeThemes = (themes: readonly ResolvedTheme[]) =>
   [
     `/* ${header} */`,
-    ...themes
-      .filter((theme) => !theme.optional)
-      .flatMap((theme) =>
-        blumeRules(theme, `:root[data-gw-docs-theme="${theme.id}"]`),
-      ),
+    ...themes.flatMap((theme) =>
+      blumeRules(theme, `:root[data-gw-docs-theme="${theme.id}"]`),
+    ),
   ].join("\n\n") + "\n";
 
 const hexRoles = (roles: Roles) =>
@@ -761,7 +761,7 @@ export const optionalPage = (themes: readonly ResolvedTheme[]) => {
     "",
     `{/* ${header} */}`,
     "",
-    "Most flavors are one mode of their palette, and GitHub's cover both light and dark. Each is mapped straight onto the roles rather than solved, so it looks the way the palette's authors intended. They take Base's style. The [contrast report](/themes/contrast) shows where a palette sits below the core targets.",
+    "Catppuccin's flavors are one mode each, so an app in one stays in its scheme. GitHub's cover both light and dark, and so do Tokyo Night's, each taking Day as its light side. Each is mapped straight onto the roles rather than solved, so it looks the way the palette's authors intended. They take Base's style. The [contrast report](/themes/contrast) shows where a palette sits below the core targets.",
     "",
     ...families.flatMap((family) => [
       `## ${family}`,