@timmo001/docs-kit 0.10.0 → 0.10.2

package/README.md

@@ -106,6 +106,31 @@ so load the theme's font files in `theme.css` too, for example with
 `@import "@fontsource-variable/inter";`. Use Base until the app has a theme of
 its own.
 
+An app whose own theme isn't in Groundwork's set keeps its theme document in
+the app and renders the stylesheet from a site script with `blumeThemeCss` from
+`@timmo001/groundwork-tokens/runtime`, then imports that file in place of a
+docs-kit theme. Fail the script on a missed contrast check, so a theme that
+reads badly never ships:
+
+```ts
+import {
+  blumeThemeCss,
+  parseTheme,
+  runtimeTheme,
+} from "@timmo001/groundwork-tokens/runtime";
+
+const parsed = parseTheme(await Bun.file("theme.json").text());
+
+if (parsed._tag === "Failure") throw new Error(String(parsed.failure));
+
+const { theme, checks } = runtimeTheme(parsed.success);
+const misses = checks.filter((check) => !check.passes);
+
+if (misses.length > 0) throw new Error(`Contrast misses: ${misses.length}`);
+
+await Bun.write("theme-app.css", `${blumeThemeCss(theme)}\n`);
+```
+
 `HeaderSearch` adds a mode picker next to Blume's light and dark toggle, with
 Light, Dark and Darker. To let readers pick the theme as well, import every
 theme after the site's default and pass the themes to `HeaderSearch` from a
@@ -122,7 +147,8 @@ each optional theme's `family`, which groups it in the select, and `mode` for
 one that comes in one scheme only, such as Catppuccin Latte. Picking that
 theme moves the page into its scheme, and the other modes can't be picked
 while it's in use. Themes without a family go under `group`, which defaults
-to Groundwork.
+to Groundwork. From seven themes the select has a search field, which also
+finds themes by family, or by `light` or `dark`.
 
 ```astro
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmo001/docs-kit",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "Shared branding, layout and config for timmo001 documentation sites",
   "license": "Apache-2.0",
   "type": "module",
@@ -39,8 +39,8 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
-    "@timmo001/groundwork-tokens": "0.10.0",
-    "@timmo001/groundwork-ui": "0.10.0",
+    "@timmo001/groundwork-tokens": "0.10.2",
+    "@timmo001/groundwork-ui": "0.10.2",
     "sharp": "0.35.5"
   },
   "peerDependencies": {
@@ -52,7 +52,7 @@
     "@types/bun": "1.4.4",
     "blume": "2.2.6",
     "oxlint": "1.91.0",
-    "oxlint-tsgolint": "7.0.2005",
+    "oxlint-tsgolint": "7.0.2006",
     "prettier": "3.9.10",
     "typescript": "7.0.2"
   }

package/src/blume/theme-picker.astro

@@ -118,13 +118,14 @@ const modes = [
         data-gw-theme-select
         label="Theme"
         inline-label
-        search="never"
         options={JSON.stringify(
           themes.map((theme) => ({
             value: theme.id,
             label: theme.name,
             // Headings only once there's more than one group
             group: grouped ? (theme.family ?? group) : undefined,
+            // So a search for light or dark finds the themes that have it
+            keywords: theme.mode === undefined ? ["light", "dark"] : [theme.mode],
           })),
         )}
       />