@treeseed/core 0.8.7 → 0.8.9

package/dist/utils/theme.js

@@ -1,49 +1,361 @@
-const THEME_TOKEN_MAP = {
-  "surfaces.background": "--site-bg",
-  "surfaces.backgroundElevated": "--site-bg-elevated",
-  "surfaces.backgroundSoft": "--site-bg-soft",
-  "surfaces.panel": "--site-panel",
-  "surfaces.panelStrong": "--site-panel-strong",
-  "text.body": "--site-text",
-  "text.muted": "--site-text-muted",
-  "text.soft": "--site-text-soft",
-  "border.base": "--site-border",
-  "border.strong": "--site-border-strong",
-  "border.grid": "--site-grid",
-  "accent.base": "--site-accent",
-  "accent.strong": "--site-accent-strong",
-  "accent.soft": "--site-accent-soft",
-  "info.base": "--site-blue",
-  "info.strong": "--site-blue-strong",
-  "info.soft": "--site-blue-soft",
-  "warm.base": "--site-warm",
-  "warm.strong": "--site-warm-strong"
+const DEFAULT_SCHEME = "fern";
+const DEFAULT_MODE = "system";
+const THEME_MODES = /* @__PURE__ */ new Set(["light", "dark", "system"]);
+const BUILT_IN_SCHEME_SUMMARIES = [
+  {
+    id: "fern",
+    name: "Fern Canopy",
+    swatches: ["#4f7d4e", "#2f5a35", "#ffffff", "#1f2a20"],
+    modeSwatches: {
+      light: ["#4f7d4e", "#2f5a35", "#ffffff", "#1f2a20"],
+      dark: ["#8bbb75", "#b9e69e", "#172016", "#e8f0e3"]
+    }
+  },
+  {
+    id: "lichen",
+    name: "Lichen Stone",
+    swatches: ["#6f8b67", "#4e6d49", "#ffffff", "#242923"],
+    modeSwatches: {
+      light: ["#6f8b67", "#4e6d49", "#ffffff", "#242923"],
+      dark: ["#9ab48a", "#c9dbbd", "#1a201d", "#e7ece5"]
+    }
+  },
+  {
+    id: "cedar",
+    name: "Cedar Clay",
+    swatches: ["#b86b3c", "#7d4528", "#fffdf8", "#2d241c"],
+    modeSwatches: {
+      light: ["#b86b3c", "#7d4528", "#fffdf8", "#2d241c"],
+      dark: ["#d98c5f", "#ffc59c", "#241b16", "#f1e7da"]
+    }
+  },
+  {
+    id: "tidepool",
+    name: "Tidepool Dusk",
+    swatches: ["#3f8582", "#286462", "#ffffff", "#1d2928"],
+    modeSwatches: {
+      light: ["#3f8582", "#286462", "#ffffff", "#1d2928"],
+      dark: ["#73c5bd", "#b8eee8", "#162123", "#e2eeee"]
+    }
+  }
+];
+const BUILT_IN_SCHEMES = {
+  fern: {
+    light: completeTokens({
+      canvas: "#f3f7ef",
+      canvasSubtle: "#e8efe1",
+      surface: "#ffffff",
+      surfaceMuted: "#e8efe1",
+      surfaceRaised: "#fafcf7",
+      text: "#1f2a20",
+      textMuted: "#51604d",
+      border: "#cdd8c6",
+      borderStrong: "#aebca6",
+      accent: "#4f7d4e",
+      accentHover: "#3f6f3f",
+      accentStrong: "#2f5a35",
+      accentSoft: "#dcebd6",
+      info: "#3a6f75",
+      success: "#287243",
+      warning: "#8a6a1f",
+      danger: "#a23e35"
+    }, "light"),
+    dark: completeTokens({
+      canvas: "#11170f",
+      canvasSubtle: "#172016",
+      surface: "#172016",
+      surfaceMuted: "#1e2b1b",
+      surfaceRaised: "#223020",
+      text: "#e8f0e3",
+      textMuted: "#a8b6a2",
+      border: "#344431",
+      borderStrong: "#4d6048",
+      accent: "#8bbb75",
+      accentHover: "#a9d88e",
+      accentStrong: "#b9e69e",
+      accentSoft: "#20351f",
+      info: "#7db9bd",
+      success: "#81c784",
+      warning: "#d6b45e",
+      danger: "#e07a6f"
+    }, "dark")
+  },
+  lichen: {
+    light: completeTokens({
+      canvas: "#f4f5f1",
+      canvasSubtle: "#e7ebe3",
+      surface: "#ffffff",
+      surfaceMuted: "#e7ebe3",
+      surfaceRaised: "#fbfcf8",
+      text: "#242923",
+      textMuted: "#596057",
+      border: "#d2d8cf",
+      borderStrong: "#b7c0b2",
+      accent: "#6f8b67",
+      accentHover: "#5d7a56",
+      accentStrong: "#4e6d49",
+      accentSoft: "#e0eadc",
+      info: "#607d83",
+      success: "#537f54",
+      warning: "#8a7140",
+      danger: "#9d4c44"
+    }, "light"),
+    dark: completeTokens({
+      canvas: "#121614",
+      canvasSubtle: "#1a201d",
+      surface: "#1a201d",
+      surfaceMuted: "#222a25",
+      surfaceRaised: "#27302b",
+      text: "#e7ece5",
+      textMuted: "#a5aea4",
+      border: "#38423c",
+      borderStrong: "#515c55",
+      accent: "#9ab48a",
+      accentHover: "#bdd0ad",
+      accentStrong: "#c9dbbd",
+      accentSoft: "#243322",
+      info: "#8fb1b4",
+      success: "#94be8d",
+      warning: "#d0b577",
+      danger: "#db8579"
+    }, "dark")
+  },
+  cedar: {
+    light: completeTokens({
+      canvas: "#f8f2e8",
+      canvasSubtle: "#efe3d2",
+      surface: "#fffdf8",
+      surfaceMuted: "#efe3d2",
+      surfaceRaised: "#fbf7ef",
+      text: "#2d241c",
+      textMuted: "#695746",
+      border: "#dccdb8",
+      borderStrong: "#bea98f",
+      accent: "#b86b3c",
+      accentHover: "#9a5731",
+      accentStrong: "#7d4528",
+      accentSoft: "#f1d9c8",
+      info: "#557f84",
+      success: "#5f7d45",
+      warning: "#9a6a21",
+      danger: "#a74435"
+    }, "light"),
+    dark: completeTokens({
+      canvas: "#181310",
+      canvasSubtle: "#241b16",
+      surface: "#241b16",
+      surfaceMuted: "#2d2119",
+      surfaceRaised: "#33261d",
+      text: "#f1e7da",
+      textMuted: "#c0ab98",
+      border: "#49382b",
+      borderStrong: "#655040",
+      accent: "#d98c5f",
+      accentHover: "#f0b184",
+      accentStrong: "#ffc59c",
+      accentSoft: "#3a241b",
+      info: "#83b0b3",
+      success: "#a1bf78",
+      warning: "#ddb76b",
+      danger: "#e88976"
+    }, "dark")
+  },
+  tidepool: {
+    light: completeTokens({
+      canvas: "#eff7f5",
+      canvasSubtle: "#dfecea",
+      surface: "#ffffff",
+      surfaceMuted: "#dfecea",
+      surfaceRaised: "#f7fbfa",
+      text: "#1d2928",
+      textMuted: "#4f615f",
+      border: "#c9d9d7",
+      borderStrong: "#a9bfbc",
+      accent: "#3f8582",
+      accentHover: "#32726f",
+      accentStrong: "#286462",
+      accentSoft: "#d5ece9",
+      info: "#4c7899",
+      success: "#3d7b62",
+      warning: "#8b6e2f",
+      danger: "#a6453d"
+    }, "light"),
+    dark: completeTokens({
+      canvas: "#0f1718",
+      canvasSubtle: "#162123",
+      surface: "#162123",
+      surfaceMuted: "#1c2b2d",
+      surfaceRaised: "#223235",
+      text: "#e2eeee",
+      textMuted: "#9fb6b6",
+      border: "#304649",
+      borderStrong: "#496265",
+      accent: "#73c5bd",
+      accentHover: "#a2e1d9",
+      accentStrong: "#b8eee8",
+      accentSoft: "#1c3838",
+      info: "#8bbce5",
+      success: "#7cc6a1",
+      warning: "#d3b66a",
+      danger: "#e28074"
+    }, "dark")
+  }
 };
-function getThemeValue(theme, dottedPath) {
-  if (!theme) return void 0;
-  return dottedPath.split(".").reduce((value, segment) => {
-    if (!value || typeof value !== "object") {
-      return void 0;
+function completeTokens(tokens, mode) {
+  return {
+    ...tokens,
+    surfaceOverlay: mode === "dark" ? "rgba(7, 12, 8, 0.72)" : "rgba(255, 255, 255, 0.88)",
+    textSubtle: tokens.textMuted,
+    textInverse: mode === "dark" ? "#11170f" : "#ffffff",
+    link: tokens.info,
+    linkHover: tokens.accentHover,
+    borderMuted: tokens.border,
+    focus: tokens.info,
+    accentText: mode === "dark" ? "#10170f" : "#ffffff",
+    infoSoft: mode === "dark" ? colorMix(tokens.info, tokens.canvas, 22) : colorMix(tokens.info, tokens.surface, 18),
+    infoText: tokens.info,
+    infoBorder: colorMix(tokens.info, tokens.border, mode === "dark" ? 48 : 42),
+    successSoft: mode === "dark" ? colorMix(tokens.success, tokens.canvas, 24) : colorMix(tokens.success, tokens.surface, 18),
+    successText: tokens.success,
+    successBorder: colorMix(tokens.success, tokens.border, mode === "dark" ? 48 : 42),
+    warningSoft: mode === "dark" ? colorMix(tokens.warning, tokens.canvas, 24) : colorMix(tokens.warning, tokens.surface, 18),
+    warningText: tokens.warning,
+    warningBorder: colorMix(tokens.warning, tokens.border, mode === "dark" ? 48 : 42),
+    dangerSoft: mode === "dark" ? colorMix(tokens.danger, tokens.canvas, 24) : colorMix(tokens.danger, tokens.surface, 16),
+    dangerText: tokens.danger,
+    dangerBorder: colorMix(tokens.danger, tokens.border, mode === "dark" ? 48 : 42),
+    shadow: mode === "dark" ? "0 16px 36px rgba(0, 0, 0, 0.28)" : "0 1px 2px rgba(31, 35, 40, 0.08)",
+    grid: mode === "dark" ? "rgba(160, 180, 150, 0.12)" : "rgba(80, 100, 74, 0.12)"
+  };
+}
+function colorMix(first, second, firstPercent) {
+  return `color-mix(in srgb, ${first} ${firstPercent}%, ${second})`;
+}
+function mergeTokens(base, override) {
+  return {
+    ...base,
+    ...override ?? {}
+  };
+}
+function mergeScheme(base, override) {
+  return {
+    light: mergeTokens(base.light, override?.light),
+    dark: mergeTokens(base.dark, override?.dark)
+  };
+}
+function normalizeSchemeId(value, fallback) {
+  return typeof value === "string" && /^[a-z][a-z0-9-]*$/u.test(value) ? value : fallback;
+}
+function cssVariableName(tokenName) {
+  return `--ts-color-${tokenName.replace(/[A-Z]/g, (character) => `-${character.toLowerCase()}`)}`;
+}
+function buildTokenDeclarations(tokens) {
+  return Object.entries(tokens).map(([tokenName, value]) => `	${cssVariableName(tokenName)}: ${value};`).join("\n");
+}
+function schemeSelector(schemeId, mode) {
+  return `html[data-ts-scheme="${schemeId}"][data-ts-mode="${mode}"]`;
+}
+function systemSchemeSelector(schemeId) {
+  return `html[data-ts-scheme="${schemeId}"][data-ts-mode="system"]`;
+}
+function getBuiltInColorSchemes() {
+  return BUILT_IN_SCHEME_SUMMARIES.map((summary) => ({
+    ...summary,
+    swatches: [...summary.swatches],
+    modeSwatches: {
+      light: [...summary.modeSwatches.light],
+      dark: [...summary.modeSwatches.dark]
     }
-    return value[segment];
-  }, theme);
+  }));
 }
-function buildTenantThemeCss(theme) {
-  if (!theme) {
-    return "";
+function resolveTreeseedThemeConfig(input) {
+  const schemes = { ...BUILT_IN_SCHEMES };
+  for (const [schemeId, scheme] of Object.entries(input?.schemes ?? {})) {
+    const base = schemes[schemeId] ?? schemes[DEFAULT_SCHEME];
+    schemes[schemeId] = mergeScheme(base, scheme);
   }
-  const declarations = Object.entries(THEME_TOKEN_MAP).map(([themePath, cssVariable]) => {
-    const value = getThemeValue(theme, themePath);
-    return typeof value === "string" && value.trim().length > 0 ? `	${cssVariable}: ${value.trim()};` : null;
-  }).filter((entry) => Boolean(entry));
-  if (declarations.length === 0) {
-    return "";
-  }
-  return `:root {
-${declarations.join("\n")}
+  const defaultScheme = normalizeSchemeId(input?.defaultScheme, DEFAULT_SCHEME);
+  const resolvedDefaultScheme = schemes[defaultScheme] ? defaultScheme : DEFAULT_SCHEME;
+  const defaultMode = input?.defaultMode && THEME_MODES.has(input.defaultMode) ? input.defaultMode : DEFAULT_MODE;
+  const customSummaries = Object.keys(input?.schemes ?? {}).filter((schemeId) => !BUILT_IN_SCHEME_SUMMARIES.some((summary) => summary.id === schemeId)).map((schemeId) => ({
+    id: schemeId,
+    name: schemeId.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" "),
+    swatches: [
+      schemes[schemeId].light.accent,
+      schemes[schemeId].light.accentStrong,
+      schemes[schemeId].light.surface,
+      schemes[schemeId].light.text
+    ],
+    modeSwatches: {
+      light: [
+        schemes[schemeId].light.accent,
+        schemes[schemeId].light.accentStrong,
+        schemes[schemeId].light.surface,
+        schemes[schemeId].light.text
+      ],
+      dark: [
+        schemes[schemeId].dark.accent,
+        schemes[schemeId].dark.accentStrong,
+        schemes[schemeId].dark.surface,
+        schemes[schemeId].dark.text
+      ]
+    }
+  }));
+  return {
+    defaultScheme: resolvedDefaultScheme,
+    defaultMode,
+    schemes,
+    summaries: [...getBuiltInColorSchemes(), ...customSummaries]
+  };
+}
+function normalizeThemePreference(input) {
+  const record = input && typeof input === "object" ? input : {};
+  return {
+    scheme: normalizeSchemeId(record.scheme ?? record.colorScheme, DEFAULT_SCHEME),
+    mode: typeof (record.mode ?? record.themeMode) === "string" && THEME_MODES.has(record.mode ?? record.themeMode) ? record.mode ?? record.themeMode : DEFAULT_MODE
+  };
 }
+function buildTreeseedThemeCss(input) {
+  const resolved = resolveTreeseedThemeConfig(input);
+  const defaultTokens = resolved.schemes[resolved.defaultScheme][resolved.defaultMode === "dark" ? "dark" : "light"];
+  const darkDefaultTokens = resolved.schemes[resolved.defaultScheme].dark;
+  const blocks = [
+    `:root {
+${buildTokenDeclarations(defaultTokens)}
+	color-scheme: ${resolved.defaultMode === "dark" ? "dark" : "light"};
+}`
+  ];
+  if (resolved.defaultMode === "system") {
+    blocks.push(`@media (prefers-color-scheme: dark) {
+	:root {
+${buildTokenDeclarations(darkDefaultTokens).replaceAll("\n", "\n	")}
+		color-scheme: dark;
+	}
+}`);
+  }
+  for (const [schemeId, scheme] of Object.entries(resolved.schemes)) {
+    blocks.push(`${schemeSelector(schemeId, "light")},
+${systemSchemeSelector(schemeId)} {
+${buildTokenDeclarations(scheme.light)}
+	color-scheme: light;
+}`);
+    blocks.push(`${schemeSelector(schemeId, "dark")} {
+${buildTokenDeclarations(scheme.dark)}
+	color-scheme: dark;
+}`);
+    blocks.push(`@media (prefers-color-scheme: dark) {
+	${systemSchemeSelector(schemeId)} {
+${buildTokenDeclarations(scheme.dark).replaceAll("\n", "\n	")}
+		color-scheme: dark;
+	}
+}`);
+  }
+  return `${blocks.join("\n\n")}
 `;
 }
 export {
-  buildTenantThemeCss
+  buildTreeseedThemeCss,
+  getBuiltInColorSchemes,
+  normalizeThemePreference,
+  resolveTreeseedThemeConfig
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treeseed/core",
-  "version": "0.8.7",
+  "version": "0.8.9",
   "description": "Treeseed web framework package for Astro/Starlight site runtimes.",
   "license": "AGPL-3.0-only",
   "repository": {
@@ -70,7 +70,7 @@
     "@astrojs/sitemap": "3.7.0",
     "@astrojs/starlight": "0.37.6",
     "@tailwindcss/vite": "^4.1.4",
-    "@treeseed/sdk": "0.8.7",
+    "@treeseed/sdk": "0.8.9",
     "astro": "^5.6.1",
     "esbuild": "^0.28.0",
     "katex": "^0.16.22",
@@ -159,6 +159,39 @@
     "./components/site/PathCard.astro": "./dist/components/site/PathCard.astro",
     "./components/site/TrustCallout.astro": "./dist/components/site/TrustCallout.astro",
     "./components/content/ContentStatusLegend.astro": "./dist/components/content/ContentStatusLegend.astro",
+    "./components/ui/theme/ThemeScript.astro": "./dist/components/ui/theme/ThemeScript.astro",
+    "./components/ui/theme/ThemeSelector.astro": "./dist/components/ui/theme/ThemeSelector.astro",
+    "./components/ui/theme/ThemeMenu.astro": "./dist/components/ui/theme/ThemeMenu.astro",
+    "./components/ui/theme/ThemePreviewSwatch.astro": "./dist/components/ui/theme/ThemePreviewSwatch.astro",
+    "./components/ui/forms/Button.astro": "./dist/components/ui/forms/Button.astro",
+    "./components/ui/forms/Field.astro": "./dist/components/ui/forms/Field.astro",
+    "./components/ui/forms/TextInput.astro": "./dist/components/ui/forms/TextInput.astro",
+    "./components/ui/forms/Select.astro": "./dist/components/ui/forms/Select.astro",
+    "./components/ui/forms/Textarea.astro": "./dist/components/ui/forms/Textarea.astro",
+    "./components/ui/forms/RadioGroup.astro": "./dist/components/ui/forms/RadioGroup.astro",
+    "./components/ui/forms/FormActions.astro": "./dist/components/ui/forms/FormActions.astro",
+    "./components/ui/forms/PasswordMeter.astro": "./dist/components/ui/forms/PasswordMeter.astro",
+    "./components/ui/surface/Panel.astro": "./dist/components/ui/surface/Panel.astro",
+    "./components/ui/surface/Card.astro": "./dist/components/ui/surface/Card.astro",
+    "./components/ui/surface/EmptyState.astro": "./dist/components/ui/surface/EmptyState.astro",
+    "./components/ui/data/Badge.astro": "./dist/components/ui/data/Badge.astro",
+    "./components/ui/data/StatusPill.astro": "./dist/components/ui/data/StatusPill.astro",
+    "./components/ui/data/MetricCard.astro": "./dist/components/ui/data/MetricCard.astro",
+    "./components/ui/data/MetricGrid.astro": "./dist/components/ui/data/MetricGrid.astro",
+    "./components/ui/data/ActionList.astro": "./dist/components/ui/data/ActionList.astro",
+    "./components/ui/data/KeyValueList.astro": "./dist/components/ui/data/KeyValueList.astro",
+    "./components/ui/data/DataTable.astro": "./dist/components/ui/data/DataTable.astro",
+    "./components/ui/layout/PageHeader.astro": "./dist/components/ui/layout/PageHeader.astro",
+    "./components/ui/shell/AppShell.astro": "./dist/components/ui/shell/AppShell.astro",
+    "./components/ui/shell/PublicShell.astro": "./dist/components/ui/shell/PublicShell.astro",
+    "./components/ui/shell/RailNav.astro": "./dist/components/ui/shell/RailNav.astro",
+    "./components/ui/shell/BottomNav.astro": "./dist/components/ui/shell/BottomNav.astro",
+    "./components/ui/shell/TopBar.astro": "./dist/components/ui/shell/TopBar.astro",
+    "./components/ui/shell/ProjectHeader.astro": "./dist/components/ui/shell/ProjectHeader.astro",
+    "./styles/theme.css": "./dist/styles/theme.css",
+    "./styles/ui.css": "./dist/styles/ui.css",
+    "./styles/forms.css": "./dist/styles/forms.css",
+    "./styles/app-shell.css": "./dist/styles/app-shell.css",
     "./components/starlight": {
       "types": "./dist/components/starlight.d.ts",
       "default": "./dist/components/starlight.js"