@timmo001/groundwork-tokens 0.10.0 → 0.10.2

package/README.md

@@ -31,6 +31,10 @@ their own:
 import { parseTheme, runtimeTheme } from "@timmo001/groundwork-tokens/runtime";
 ```
 
+`blumeThemeCss` from the same export renders a solved theme as Blume's tokens,
+for a docs site on `@timmo001/docs-kit` whose app has its own theme. The
+[docs-kit README](https://github.com/timmo001/groundwork/tree/main/packages/docs-kit#theme) shows the site script.
+
 The `omarchy-current` export reads and watches the Omarchy theme a machine
 is using, for apps outside a browser, such as a desktop app's main process or
 a terminal UI. `pageTheme`'s `setOmarchyTheme` offers it in the view:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmo001/groundwork-tokens",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "Groundwork's design tokens: the theme schema, the OKLCH solver and every theme as CSS and JSON",
   "license": "Apache-2.0",
   "type": "module",
@@ -59,7 +59,7 @@
     "@timmo001/oxlint-rules": "0.6.4",
     "@types/bun": "1.4.4",
     "oxlint": "1.91.0",
-    "oxlint-tsgolint": "7.0.2005",
+    "oxlint-tsgolint": "7.0.2006",
     "prettier": "3.9.10",
     "typescript": "7.0.2"
   }

package/src/choices.ts

@@ -69,7 +69,8 @@ export const themeAllows = (choice: ThemeChoice, mode: ThemeMode) =>
 
 /**
  * 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,
+ * for those without one. Each carries the schemes it covers as search
+ * keywords. Order the choices as the picker should list them,
  * usually the app's own theme, then the other core themes, then the optional
  * ones.
  */
@@ -77,10 +78,12 @@ export const themeOptions = (
   choices: readonly ThemeChoice[],
   group = "Groundwork",
 ) =>
-  choices.map(({ id, name, family }) => ({
+  choices.map(({ id, name, family, mode }) => ({
     value: id,
     label: name,
     group: family ?? group,
+    // So a search for light or dark finds the themes that have it
+    keywords: mode === undefined ? ["light", "dark"] : [mode],
   }));
 
 /** The core themes by id and name, in the order the docs list them. */

package/src/generate.ts

@@ -525,14 +525,18 @@ const blumeRules = (theme: ResolvedTheme, root: string) => {
 };
 
 /**
- * One theme as Blume's tokens, for docs-kit. Fonts are stacks, so the site
- * loads the files.
+ * One theme as Blume's tokens on `:root`, in each of its modes. Fonts are
+ * stacks, so the site loads the files.
  */
+export const blumeThemeCss = (theme: ResolvedTheme) =>
+  blumeRules(theme, ":root").join("\n\n");
+
+/** One theme's docs-kit stylesheet. */
 export const blumeTheme = (theme: ResolvedTheme) =>
   [
     `/* ${header} */`,
     `/* ${theme.name}: ${theme.description} */`,
-    ...blumeRules(theme, ":root"),
+    blumeThemeCss(theme),
   ].join("\n\n") + "\n";
 
 /**

package/src/runtime.ts

@@ -14,7 +14,7 @@ import { appTonesCss, type AppTones } from "./tones.ts";
 
 export { omarchyTheme, type OmarchyCurrentTheme } from "./omarchy.ts";
 
-export { hexModes } from "./generate.ts";
+export { blumeThemeCss, hexModes } from "./generate.ts";
 
 export { appTonesCss, type AppTones } from "./tones.ts";