@timmo001/groundwork-tokens 0.9.40 → 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,6 +1,6 @@
 {
   "name": "@timmo001/groundwork-tokens",
-  "version": "0.9.40",
+  "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",

package/src/choices.ts

@@ -19,7 +19,6 @@ 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 tokyoNightDay from "../themes/tokyo-night-day.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" };
@@ -44,8 +43,8 @@ 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: it's offered and
- * kept for that scheme alone, beside a pick for the other.
+ * 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;
@@ -59,6 +58,31 @@ export interface ThemeChoice {
 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,
@@ -79,7 +103,6 @@ export const optionalThemeDocuments = [
   catppuccinFrappe,
   catppuccinMacchiato,
   catppuccinMocha,
-  tokyoNightDay,
   tokyoNight,
   tokyoNightStorm,
   tokyoNightMoon,
@@ -114,22 +137,16 @@ export interface ThemeBootOptions {
   readonly defaultTheme: string;
   /** The mode to start with. Defaults to `auto`. */
   readonly defaultMode?: ThemeMode;
-  /**
-   * Whether the Omarchy theme takes over while the visitor hasn't picked
-   * one. With `false` it's only offered, and `defaultTheme` stays in use.
-   * Defaults to `true`.
-   */
-  readonly followOmarchy?: boolean;
 }
 
 /** The local storage keys a pick is kept under. */
 export const themeStorageKeys = (key: string) => ({
   mode: `${key}:mode`,
   theme: `${key}:id`,
-  dark: `${key}:id-dark`,
   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. */
@@ -142,7 +159,8 @@ export const omarchyStorageKeys = (key: string) => ({
 /**
  * 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`.
+ * 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({
@@ -150,14 +168,13 @@ export const themeBootScript = (options: ThemeBootOptions) => {
     omarchy: omarchyStorageKeys(options.key),
     theme: options.defaultTheme,
     mode: options.defaultMode ?? "auto",
-    follow: options.followOmarchy !== false,
     custom: customThemeId,
     style: customThemeStyleId,
     omarchyId: omarchyThemeId,
     omarchyStyle: omarchyThemeStyleId,
   });
 
-  // With nothing picked, a cached Omarchy theme for the scheme is the
-  // default, unless it's only offered
-  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)};const m=g(c.keys.mode)??c.mode;const d=m==="dark"||m==="darker"||(m==="auto"&&matchMedia("(prefers-color-scheme: dark)").matches);const o=g(c.omarchy.css);let t=(d?g(c.keys.dark):null)??g(c.keys.theme)??(c.follow&&o&&g(c.omarchy.mode)===(d?"dark":"light")?c.omarchyId:c.theme);if(t===c.custom){const css=g(c.keys.css);if(css)a(c.style,css);else t=c.theme}else if(t===c.omarchyId){if(o)a(c.omarchyStyle,o);else t=c.theme}r.setAttribute("data-gw-theme",t);if(m==="auto")r.removeAttribute("data-gw-mode");else r.setAttribute("data-gw-mode",m)})();`;
+  // 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}`,