@odla-ai/chapter 0.18.0 → 0.19.0

package/dist/index.d.cts

@@ -56,8 +56,13 @@ type DbRules = Record<string, Rule>;
 /** Brand tokens that theme the site: palette, fonts, wordmark, nav, logos. */
 interface ChapterBrand {
     /** Palette overrides written into styles.css :root (e.g. `{ moss: "#2F3E34" }`
-     * or `--ui-*` token names). */
+     * or `--ui-*` token names). Applies in BOTH light and dark unless overridden
+     * by {@link paletteDark}. */
     palette?: Record<string, string>;
+    /** Dark-mode palette overrides. Same shape as {@link palette}; emitted under
+     *  `:root[data-theme="dark"]` and `@media (prefers-color-scheme: dark)`, so a
+     *  site brands both modes. */
+    paletteDark?: Record<string, string>;
     fonts?: {
         display?: string;
         body?: string;
@@ -1095,10 +1100,14 @@ declare function memberSession(user: SessionUser, opts: {
 }): MemberSession;
 
 /**
- * Build the `:root { … }` CSS that maps a chapter's brand onto the design tokens
- * the UI reads: each `palette` entry becomes a custom property, and `fonts`
- * (display/body/numeral) map to `--ui-font-display` / `--ui-font-sans` /
- * `--ui-font-numeral`. Returns "" when there is nothing to theme.
+ * Build the CSS that maps a chapter's brand onto the design tokens the UI reads:
+ * each `palette` entry becomes a custom property (light, and dark unless
+ * `paletteDark` overrides), and `fonts` (display/body/numeral) map to
+ * `--ui-font-display` / `--ui-font-sans` / `--ui-font-numeral`. The dark block is
+ * emitted under both `:root[data-theme="dark"]` (the odla-ui theme toggle) and
+ * `@media (prefers-color-scheme: dark)`. Returns "" when there is nothing to
+ * theme. These are brand OVERRIDES on top of a base theme — they do not replace
+ * the theme layer the components need (see {@link brandTokens} usage in the docs).
  */
 declare function brandTokens(brand: ChapterBrand | undefined): string;
 

package/dist/index.d.ts

@@ -56,8 +56,13 @@ type DbRules = Record<string, Rule>;
 /** Brand tokens that theme the site: palette, fonts, wordmark, nav, logos. */
 interface ChapterBrand {
     /** Palette overrides written into styles.css :root (e.g. `{ moss: "#2F3E34" }`
-     * or `--ui-*` token names). */
+     * or `--ui-*` token names). Applies in BOTH light and dark unless overridden
+     * by {@link paletteDark}. */
     palette?: Record<string, string>;
+    /** Dark-mode palette overrides. Same shape as {@link palette}; emitted under
+     *  `:root[data-theme="dark"]` and `@media (prefers-color-scheme: dark)`, so a
+     *  site brands both modes. */
+    paletteDark?: Record<string, string>;
     fonts?: {
         display?: string;
         body?: string;
@@ -1095,10 +1100,14 @@ declare function memberSession(user: SessionUser, opts: {
 }): MemberSession;
 
 /**
- * Build the `:root { … }` CSS that maps a chapter's brand onto the design tokens
- * the UI reads: each `palette` entry becomes a custom property, and `fonts`
- * (display/body/numeral) map to `--ui-font-display` / `--ui-font-sans` /
- * `--ui-font-numeral`. Returns "" when there is nothing to theme.
+ * Build the CSS that maps a chapter's brand onto the design tokens the UI reads:
+ * each `palette` entry becomes a custom property (light, and dark unless
+ * `paletteDark` overrides), and `fonts` (display/body/numeral) map to
+ * `--ui-font-display` / `--ui-font-sans` / `--ui-font-numeral`. The dark block is
+ * emitted under both `:root[data-theme="dark"]` (the odla-ui theme toggle) and
+ * `@media (prefers-color-scheme: dark)`. Returns "" when there is nothing to
+ * theme. These are brand OVERRIDES on top of a base theme — they do not replace
+ * the theme layer the components need (see {@link brandTokens} usage in the docs).
  */
 declare function brandTokens(brand: ChapterBrand | undefined): string;
 

package/dist/index.js

@@ -1199,20 +1199,36 @@ function paletteVar(key) {
 function cleanValue(value) {
   return value.replace(/[<>{};]/g, "").trim();
 }
-function brandTokens(brand) {
-  if (!brand) return "";
+function paletteDecls(palette) {
   const decls = [];
-  for (const [key, value] of Object.entries(brand.palette ?? {})) {
+  for (const [key, value] of Object.entries(palette ?? {})) {
     if (typeof value === "string" && value.trim()) decls.push(`${paletteVar(key)}: ${cleanValue(value)};`);
   }
+  return decls;
+}
+function brandTokens(brand) {
+  if (!brand) return "";
+  const light = paletteDecls(brand.palette);
   const fonts = brand.fonts;
-  if (fonts?.display) decls.push(`--ui-font-display: ${cleanValue(fonts.display)};`);
-  if (fonts?.body) decls.push(`--ui-font-sans: ${cleanValue(fonts.body)};`);
-  if (fonts?.numeral) decls.push(`--ui-font-numeral: ${cleanValue(fonts.numeral)};`);
-  return decls.length ? `:root {
-  ${decls.join("\n  ")}
+  if (fonts?.display) light.push(`--ui-font-display: ${cleanValue(fonts.display)};`);
+  if (fonts?.body) light.push(`--ui-font-sans: ${cleanValue(fonts.body)};`);
+  if (fonts?.numeral) light.push(`--ui-font-numeral: ${cleanValue(fonts.numeral)};`);
+  const dark = paletteDecls(brand.paletteDark);
+  let css = light.length ? `:root {
+  ${light.join("\n  ")}
 }
 ` : "";
+  if (dark.length) {
+    const block = `{
+  ${dark.join("\n  ")}
+}`;
+    css += `:root[data-theme="dark"] ${block}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) ${block}
+}
+`;
+  }
+  return css;
 }
 
 // src/reconcile.ts