@floegence/floe-webapp-core 0.35.16 → 0.35.17

package/dist/context/FloeConfigContext.d.ts

@@ -1,5 +1,5 @@
 import { type JSX } from 'solid-js';
-import type { FloeThemeTokenOverrides, ThemeType } from '../styles/themes';
+import type { FloeThemePreset, FloeThemeTokenOverrides, ThemeType } from '../styles/themes';
 export interface FloeStorageAdapter {
     getItem: (key: string) => string | null;
     setItem: (key: string, value: string) => void;
@@ -73,6 +73,12 @@ export interface FloeLayoutConfig {
 export interface FloeThemeConfig {
     storageKey: string;
     defaultTheme: ThemeType;
+    /** Optional storage key for the active named token preset. Defaults to `${storageKey}-preset`. */
+    presetStorageKey?: string;
+    /** Optional default named token preset. Falls back to the first preset when omitted. */
+    defaultPreset?: string;
+    /** Optional named token presets for switching visual palettes without changing light/dark mode. */
+    presets?: readonly FloeThemePreset[];
     /**
      * Optional CSS variable overrides applied at the document root.
      * `shared` applies to both themes, while `light` / `dark` only apply

package/dist/context/ThemeContext.d.ts

@@ -1,10 +1,13 @@
 import { type Accessor } from 'solid-js';
-import { type ThemeType } from '../styles/themes';
+import { type FloeThemePreset, type ThemeType } from '../styles/themes';
 export interface ThemeContextValue {
     theme: Accessor<ThemeType>;
     resolvedTheme: Accessor<'light' | 'dark'>;
     setTheme: (theme: ThemeType) => void;
     toggleTheme: () => void;
+    themePresets: Accessor<readonly FloeThemePreset[]>;
+    themePreset: Accessor<FloeThemePreset | undefined>;
+    setThemePreset: (presetName: string | undefined) => void;
 }
 export declare function createThemeService(): ThemeContextValue;
 export declare const ThemeProvider: (props: {

package/dist/context/ThemeContext.js

@@ -1,48 +1,69 @@
-import { createSignal as i, onCleanup as h, createEffect as v } from "solid-js";
-import { createSimpleContext as y } from "./createSimpleContext.js";
-import { useResolvedFloeConfig as k } from "./FloeConfigContext.js";
-import { getSystemTheme as S, applyTheme as C, syncThemeTokenOverrides as a, resolveThemeTokenOverrides as w } from "../styles/themes/index.js";
-function E() {
-  const t = k(), m = () => t.config.theme.storageKey, d = () => t.config.theme.defaultTheme, l = () => t.config.theme.tokens, T = t.persist.load(m(), d()), [r, f] = i(T), [g, u] = i(S());
-  let o = [];
-  const s = () => {
-    const e = r();
-    return e === "system" ? g() : e;
+import { createSignal as g, createMemo as E, createEffect as p, onCleanup as P } from "solid-js";
+import { createSimpleContext as N } from "./createSimpleContext.js";
+import { useResolvedFloeConfig as L } from "./FloeConfigContext.js";
+import { getSystemTheme as M, applyTheme as F, syncThemeTokenOverrides as y, resolveThemeTokens as O } from "../styles/themes/index.js";
+function i(t, n, r) {
+  if (n.length !== 0)
+    return t && n.some((m) => m.name === t) ? t : r && n.some((m) => m.name === r) ? r : n[0]?.name;
+}
+function Q() {
+  const t = L(), n = () => t.config.theme.storageKey, r = () => t.config.theme.defaultTheme, m = () => t.config.theme.tokens, s = () => t.config.theme.presets ?? [], a = () => t.config.theme.presetStorageKey ?? `${n()}-preset`, c = () => i(t.config.theme.defaultPreset, s()), S = t.persist.load(n(), r()), [d, k] = g(S), x = t.persist.load(a(), c()), [f, l] = g(i(x, s(), c())), [C, K] = g(M());
+  let h = [];
+  const T = E(() => {
+    const e = i(f(), s(), c());
+    if (e)
+      return s().find((o) => o.name === e);
+  }), u = () => {
+    const e = d();
+    return e === "system" ? C() : e;
   };
-  if (typeof window < "u") {
-    const e = window.matchMedia("(prefers-color-scheme: dark)"), n = (p) => {
-      u(p.matches ? "dark" : "light");
+  if (p(() => {
+    const e = i(f(), s(), c());
+    f() !== e && l(e);
+  }), typeof window < "u") {
+    const e = window.matchMedia("(prefers-color-scheme: dark)"), o = (w) => {
+      K(w.matches ? "dark" : "light");
     };
-    e.addEventListener("change", n), h(() => e.removeEventListener("change", n));
+    e.addEventListener("change", o), P(() => e.removeEventListener("change", o));
   }
-  v(() => {
-    const e = r(), n = s();
-    C(e), o = a(w(l(), n), o);
-  }), h(() => {
-    o = a(void 0, o);
+  p(() => {
+    const e = d(), o = u();
+    F(e), h = y(O(o, m(), T()?.tokens), h);
+  }), P(() => {
+    h = y(void 0, h);
   });
-  const c = (e) => {
-    f(e), t.persist.debouncedSave(m(), e);
+  const v = (e) => {
+    k(e), t.persist.debouncedSave(n(), e);
   };
   return {
-    theme: r,
-    resolvedTheme: s,
-    setTheme: c,
+    theme: d,
+    resolvedTheme: u,
+    setTheme: v,
     toggleTheme: () => {
-      const e = s();
-      c(e === "light" ? "dark" : "light");
+      const e = u();
+      v(e === "light" ? "dark" : "light");
+    },
+    themePresets: s,
+    themePreset: T,
+    setThemePreset: (e) => {
+      const o = i(e, s(), c());
+      if (l(o), !o) {
+        t.persist.remove(a());
+        return;
+      }
+      t.persist.debouncedSave(a(), o);
     }
   };
 }
 const {
-  Provider: b,
-  use: F
-} = y({
+  Provider: A,
+  use: B
+} = N({
   name: "Theme",
-  init: E
+  init: Q
 });
 export {
-  b as ThemeProvider,
-  E as createThemeService,
-  F as useTheme
+  A as ThemeProvider,
+  Q as createThemeService,
+  B as useTheme
 };