@timmo001/groundwork-tokens 0.10.1 → 0.10.3

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.1",
+  "version": "0.10.3",
   "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/generate.ts

@@ -475,19 +475,27 @@ const blumeRoles = {
   "code-word-border": "border-info",
 };
 
-/** Blume's color tokens from a theme's roles in one mode. */
+/**
+ * Blume's color tokens from a theme's roles in one mode, plus the link color
+ * docs-kit's `theme.css` gives prose links, as Blume has no token for it.
+ */
 const blumeColors = (roles: Roles) =>
   Object.fromEntries(
-    Object.entries(blumeRoles).flatMap(([token, role]) => {
+    [
+      ...Object.entries(blumeRoles).map(
+        ([token, role]) => [`--blume-${token}`, role] as const,
+      ),
+      ["--gw-docs-link", "link"] as const,
+    ].flatMap(([property, role]) => {
       const color = roles[role];
 
-      return color === undefined ? [] : [[token, toCss(color)]];
+      return color === undefined ? [] : [[property, toCss(color)]];
     }),
   );
 
 const blumeDeclarations = (properties: Record<string, string>) =>
   Object.entries(properties)
-    .map(([name, value]) => `  --blume-${name}: ${value};`)
+    .map(([name, value]) => `  ${name}: ${value};`)
     .join("\n");
 
 /**
@@ -498,10 +506,10 @@ const blumeRules = (theme: ResolvedTheme, root: string) => {
   const { light, dark, darker } = theme.modes;
 
   const style = {
-    radius: `${theme.style.radius.panel}px`,
-    "font-body": fontStack(theme.style.font),
-    "font-display": fontStack(theme.style.font),
-    "font-mono": fontStack(theme.style.mono),
+    "--blume-radius": `${theme.style.radius.panel}px`,
+    "--blume-font-body": fontStack(theme.style.font),
+    "--blume-font-display": fontStack(theme.style.font),
+    "--blume-font-mono": fontStack(theme.style.mono),
   };
 
   const lightTokens: Record<string, string> =
@@ -525,14 +533,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";