@ttoss/fsl-theme 1.1.11

package/dist/esm/chunk-HRNXVRS3.js

@@ -0,0 +1,54 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { withDataviz } from "./chunk-FBVUI2PK.js";
+import { createTheme, darkAlternate } from "./chunk-SE5Z52RE.js";
+import { deepMerge } from "./chunk-WVQSTQD5.js";
+
+// src/themes/bruttal.ts
+var bundle = createTheme({
+  overrides: {
+    core: {
+      colors: {
+        brand: {
+          50: "#FBF8F5",
+          100: "#F3EDE6",
+          200: "#E4D7CC",
+          300: "#CCBCAE",
+          400: "#96836F",
+          500: "#6D5D4F",
+          600: "#594A3F",
+          700: "#4E4239",
+          800: "#312921",
+          900: "#1A150E"
+        }
+      }
+    },
+    semantic: {
+      radii: {
+        control: "{core.radii.none}",
+        surface: "{core.radii.none}"
+      },
+      elevation: {
+        surface: {
+          flat: "{core.elevation.level.0}",
+          raised: "{core.elevation.level.0}",
+          overlay: "{core.elevation.level.0}",
+          blocking: "{core.elevation.level.0}"
+        }
+      }
+    }
+  },
+  alternate: deepMerge(darkAlternate, {
+    semantic: {
+      elevation: {
+        surface: {
+          flat: "{core.elevation.emphatic.0}",
+          raised: "{core.elevation.emphatic.0}",
+          overlay: "{core.elevation.emphatic.0}",
+          blocking: "{core.elevation.emphatic.0}"
+        }
+      }
+    }
+  })
+});
+var bruttal = withDataviz(bundle);
+export { bruttal };

package/dist/esm/chunk-IJGA42O6.js

@@ -0,0 +1,141 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { SAFE_ID_RE, __name } from "./chunk-WVQSTQD5.js";
+
+// src/themeBootstrap.ts
+var resolveTheme = /* @__PURE__ */__name(cfg => {
+  let stored = null;
+  try {
+    const raw = localStorage.getItem(cfg.storageKey);
+    if (raw) stored = JSON.parse(raw);
+  } catch {}
+  const mode = stored != null && stored.mode != null && cfg.validModes.indexOf(stored.mode) !== -1 ? stored.mode : cfg.defaultMode;
+  const resolvedMode = mode === "system" ? typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : mode;
+  return {
+    mode,
+    resolvedMode
+  };
+}, "resolveTheme");
+
+// src/runtime.ts
+var DATA_THEME_ATTR = "data-tt-theme";
+var DATA_MODE_ATTR = "data-tt-mode";
+var DEFAULT_STORAGE_KEY = "tt-theme";
+var VALID_MODES = ["light", "dark", "system"];
+var writeStorage = /* @__PURE__ */__name((key, data) => {
+  try {
+    localStorage.setItem(key, JSON.stringify(data));
+  } catch {}
+}, "writeStorage");
+var createThemeRuntime = /* @__PURE__ */__name((config = {}) => {
+  const {
+    defaultTheme,
+    defaultMode = "system",
+    storageKey = DEFAULT_STORAGE_KEY,
+    root = document.documentElement
+  } = config;
+  const listeners = /* @__PURE__ */new Set();
+  let destroyed = false;
+  const init = resolveTheme({
+    storageKey,
+    defaultMode,
+    validModes: VALID_MODES
+  });
+  let mode = init.mode;
+  let resolvedMode = init.resolvedMode;
+  const apply = /* @__PURE__ */__name(() => {
+    if (defaultTheme) {
+      root.setAttribute(DATA_THEME_ATTR, defaultTheme);
+    } else {
+      root.removeAttribute(DATA_THEME_ATTR);
+    }
+    root.setAttribute(DATA_MODE_ATTR, resolvedMode);
+    root.style.colorScheme = resolvedMode;
+  }, "apply");
+  const getState = /* @__PURE__ */__name(() => {
+    return {
+      mode,
+      resolvedMode
+    };
+  }, "getState");
+  apply();
+  let prevMode = mode;
+  let prevResolvedMode = resolvedMode;
+  const applyState = /* @__PURE__ */__name(({
+    persist
+  }) => {
+    if (mode === prevMode && resolvedMode === prevResolvedMode) return;
+    prevMode = mode;
+    prevResolvedMode = resolvedMode;
+    apply();
+    if (persist) writeStorage(storageKey, {
+      mode
+    });
+    const state = getState();
+    for (const listener of listeners) listener(state);
+  }, "applyState");
+  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const onSystemChange = /* @__PURE__ */__name(() => {
+    resolvedMode = mediaQuery.matches ? "dark" : "light";
+    applyState({
+      persist: false
+    });
+  }, "onSystemChange");
+  const syncMediaListener = /* @__PURE__ */__name(active => {
+    mediaQuery.removeEventListener("change", onSystemChange);
+    if (active) {
+      mediaQuery.addEventListener("change", onSystemChange);
+    }
+  }, "syncMediaListener");
+  syncMediaListener(mode === "system");
+  const setMode = /* @__PURE__ */__name(newMode => {
+    if (destroyed || !VALID_MODES.includes(newMode)) {
+      return;
+    }
+    mode = newMode;
+    resolvedMode = mode === "system" ? mediaQuery.matches ? "dark" : "light" : mode;
+    syncMediaListener(mode === "system");
+    applyState({
+      persist: true
+    });
+  }, "setMode");
+  const subscribe = /* @__PURE__ */__name(listener => {
+    if (destroyed) {
+      return () => {};
+    }
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }, "subscribe");
+  const destroy = /* @__PURE__ */__name(() => {
+    destroyed = true;
+    syncMediaListener(false);
+    listeners.clear();
+  }, "destroy");
+  return {
+    getState,
+    setMode,
+    subscribe,
+    destroy
+  };
+}, "createThemeRuntime");
+
+// src/ssrScript.ts
+var getThemeScriptContent = /* @__PURE__ */__name((config = {}) => {
+  const {
+    defaultTheme,
+    defaultMode = "system",
+    storageKey = DEFAULT_STORAGE_KEY
+  } = config;
+  if (defaultTheme !== void 0 && !SAFE_ID_RE.test(defaultTheme)) {
+    throw new Error(`Invalid defaultTheme "${defaultTheme}". Only alphanumeric characters, hyphens, and underscores are allowed.`);
+  }
+  const cfg = JSON.stringify({
+    storageKey,
+    defaultTheme,
+    defaultMode,
+    validModes: [...VALID_MODES]
+  });
+  return `(function(){var cfg=${cfg};var d=document.documentElement;var s=null;try{var r=localStorage.getItem(cfg.storageKey);if(r)s=JSON.parse(r);}catch(e){}var m=(s!=null&&s.mode!=null&&cfg.validModes.indexOf(s.mode)!==-1)?s.mode:cfg.defaultMode;var rm=m==="system"?(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"):m;if(cfg.defaultTheme){d.setAttribute("data-tt-theme",cfg.defaultTheme);}else{d.removeAttribute("data-tt-theme");}d.setAttribute("data-tt-mode",rm);d.style.colorScheme=rm;})()`;
+}, "getThemeScriptContent");
+export { DATA_THEME_ATTR, DATA_MODE_ATTR, createThemeRuntime, getThemeScriptContent };

package/dist/esm/chunk-PQPQNZ73.js

@@ -0,0 +1,262 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { CSS_PATH_PREFIXES } from "./chunk-4Q4P3JBB.js";
+import { COMPOUND_REF_RE, SAFE_ID_RE, __name, deepMerge, flattenObject, flattenTheme } from "./chunk-WVQSTQD5.js";
+
+// src/roots/toCssVars.ts
+var toCssVarName = /* @__PURE__ */__name(tokenPath => {
+  for (const [prefix, cssPrefix] of CSS_PATH_PREFIXES) {
+    if (tokenPath.startsWith(prefix)) {
+      const rest = tokenPath.slice(prefix.length).replace(/\./g, "-");
+      return `${cssPrefix}${rest}`;
+    }
+  }
+  return `--tt-${tokenPath.replace(/\./g, "-")}`;
+}, "toCssVarName");
+var inlineRefsToVars = /* @__PURE__ */__name(value => {
+  return value.replace(COMPOUND_REF_RE, (_match, path) => {
+    return `var(${toCssVarName(path)})`;
+  });
+}, "inlineRefsToVars");
+var buildCssVars = /* @__PURE__ */__name(theme => {
+  const vars = {};
+  const {
+    core: coreFlat,
+    semantic: semanticFlat
+  } = flattenTheme(theme);
+  for (const [path, value] of Object.entries(coreFlat)) {
+    vars[toCssVarName(path)] = value;
+  }
+  for (const [path, value] of Object.entries(semanticFlat)) {
+    const varName = toCssVarName(path);
+    if (typeof value === "string" && value.includes("{")) {
+      vars[varName] = inlineRefsToVars(value);
+    } else {
+      vars[varName] = value;
+    }
+  }
+  return vars;
+}, "buildCssVars");
+var sanitizeId = /* @__PURE__ */__name(value => {
+  if (!SAFE_ID_RE.test(value)) {
+    throw new Error(`Invalid themeId "${value}". Only alphanumeric characters, hyphens, and underscores are allowed.`);
+  }
+  return value;
+}, "sanitizeId");
+var buildSelector = /* @__PURE__ */__name(({
+  themeId,
+  mode,
+  selector
+}) => {
+  if (selector) {
+    return selector;
+  }
+  if (!themeId) {
+    return mode ? `:root[data-tt-mode="${mode}"]` : ":root";
+  }
+  let s = `[data-tt-theme="${sanitizeId(themeId)}"]`;
+  if (mode) {
+    s += `[data-tt-mode="${mode}"]`;
+  }
+  return s;
+}, "buildSelector");
+var CQ_UNIT_RE = /cq(?:i|b|w|h|min|max)(?![a-z])/i;
+var hasCqUnits = /* @__PURE__ */__name(value => {
+  return typeof value === "string" && CQ_UNIT_RE.test(value);
+}, "hasCqUnits");
+var toViewportFallback = /* @__PURE__ */__name(value => {
+  return value.replace(/cqmin(?![a-z])/gi, "vmin").replace(/cqmax(?![a-z])/gi, "vmax").replace(/cqi(?![a-z])/gi, "vw").replace(/cqb(?![a-z])/gi, "vh").replace(/cqw(?![a-z])/gi, "vw").replace(/cqh(?![a-z])/gi, "vh");
+}, "toViewportFallback");
+var extractContainerQueryVars = /* @__PURE__ */__name(vars => {
+  const cqVars = {};
+  for (const [name, value] of Object.entries(vars)) {
+    if (hasCqUnits(value)) {
+      cqVars[name] = value;
+    }
+  }
+  return cqVars;
+}, "extractContainerQueryVars");
+var buildReducedMotionVars = /* @__PURE__ */__name(theme => {
+  const noneVar = `var(${toCssVarName("core.motion.duration.none")})`;
+  const flat = flattenObject(theme.semantic.motion, "semantic.motion");
+  const vars = {};
+  for (const path of Object.keys(flat)) {
+    if (path.endsWith(".duration")) {
+      vars[toCssVarName(path)] = noneVar;
+    }
+  }
+  return vars;
+}, "buildReducedMotionVars");
+var buildCoarseHitVars = /* @__PURE__ */__name(theme => {
+  const vars = {};
+  for (const [key, value] of Object.entries(theme.core.sizing.hit.coarse)) {
+    if (typeof value === "string") {
+      vars[toCssVarName(`semantic.sizing.hit.${key}`)] = value;
+    }
+  }
+  return vars;
+}, "buildCoarseHitVars");
+var buildCssBlock = /* @__PURE__ */__name(({
+  selector,
+  vars,
+  containerQueryVars,
+  coarseHitVars,
+  reducedMotionVars,
+  colorScheme
+}) => {
+  const varLines = /* @__PURE__ */__name(v => {
+    return Object.entries(v).map(([name, val]) => {
+      return `    ${name}: ${val};`;
+    });
+  }, "varLines");
+  const atRuleBlock = /* @__PURE__ */__name((atRule, v) => {
+    const lines = varLines(v);
+    return lines.length > 0 ? `${atRule} {
+  ${selector} {
+${lines.join("\n")}
+  }
+}` : "";
+  }, "atRuleBlock");
+  const baseLines = [];
+  if (colorScheme) {
+    baseLines.push(`  color-scheme: ${colorScheme};`);
+  }
+  for (const [name, value] of Object.entries(vars)) {
+    if (hasCqUnits(value)) {
+      baseLines.push(`  ${name}: ${toViewportFallback(String(value))};`);
+    } else {
+      baseLines.push(`  ${name}: ${value};`);
+    }
+  }
+  const baseBlock = `${selector} {
+${baseLines.join("\n")}
+}`;
+  const cqContent = atRuleBlock("@supports (width: 1cqi)", containerQueryVars);
+  const cqBlock = cqContent ? `
+
+${cqContent}` : "";
+  const coarseBlock = atRuleBlock("@media (any-pointer: coarse)", coarseHitVars);
+  const reducedMotionBlock = atRuleBlock("@media (prefers-reduced-motion: reduce)", reducedMotionVars);
+  return [baseBlock + cqBlock, coarseBlock, reducedMotionBlock].filter(Boolean).join("\n\n");
+}, "buildCssBlock");
+var toCssVarsBase = /* @__PURE__ */__name((theme, options = {}) => {
+  const cssVars = buildCssVars(theme);
+  const coarseHitVars = buildCoarseHitVars(theme);
+  const reducedMotionVars = buildReducedMotionVars(theme);
+  const containerQueryVars = extractContainerQueryVars(cssVars);
+  const selector = buildSelector(options);
+  const {
+    colorScheme,
+    mode
+  } = options;
+  const effectiveColorScheme = colorScheme ?? mode;
+  return {
+    cssVars,
+    coarseHitVars,
+    reducedMotionVars,
+    containerQueryVars,
+    selector,
+    toCssString: /* @__PURE__ */__name(() => {
+      return buildCssBlock({
+        selector,
+        vars: cssVars,
+        containerQueryVars,
+        coarseHitVars,
+        reducedMotionVars,
+        colorScheme: effectiveColorScheme
+      });
+    }, "toCssString")
+  };
+}, "toCssVarsBase");
+var isThemeBundle = /* @__PURE__ */__name(input => {
+  return "baseMode" in input && "base" in input;
+}, "isThemeBundle");
+var diffCssVars = /* @__PURE__ */__name(({
+  base,
+  full
+}) => {
+  const diff = {};
+  for (const [key, value] of Object.entries(full)) {
+    if (base[key] !== value) {
+      diff[key] = value;
+    }
+  }
+  return diff;
+}, "diffCssVars");
+var bundleToCssVars = /* @__PURE__ */__name((bundle, options) => {
+  const {
+    themeId
+  } = options;
+  const {
+    baseMode,
+    base: baseTheme,
+    alternate
+  } = bundle;
+  const alternateMode = baseMode === "light" ? "dark" : "light";
+  const baseResult = toCssVarsBase(baseTheme, {
+    themeId,
+    colorScheme: baseMode
+  });
+  if (!alternate) {
+    return {
+      base: baseResult,
+      toCssString: /* @__PURE__ */__name(() => {
+        return baseResult.toCssString();
+      }, "toCssString")
+    };
+  }
+  const alternateTheme = {
+    core: baseTheme.core,
+    semantic: deepMerge(baseTheme.semantic, alternate.semantic)
+  };
+  const fullAlternateVars = buildCssVars(alternateTheme);
+  const diffVars = diffCssVars({
+    base: baseResult.cssVars,
+    full: fullAlternateVars
+  });
+  const alternateSelector = buildSelector({
+    themeId,
+    mode: alternateMode
+  });
+  const altCoarseHitVars = {};
+  const altReducedMotionVars = diffCssVars({
+    base: baseResult.reducedMotionVars,
+    full: buildReducedMotionVars(alternateTheme)
+  });
+  const altContainerQueryVars = extractContainerQueryVars(diffVars);
+  const alternateResult = {
+    cssVars: diffVars,
+    coarseHitVars: altCoarseHitVars,
+    reducedMotionVars: altReducedMotionVars,
+    containerQueryVars: altContainerQueryVars,
+    selector: alternateSelector,
+    toCssString: /* @__PURE__ */__name(() => {
+      return buildCssBlock({
+        selector: alternateSelector,
+        vars: diffVars,
+        containerQueryVars: altContainerQueryVars,
+        coarseHitVars: altCoarseHitVars,
+        reducedMotionVars: altReducedMotionVars,
+        colorScheme: alternateMode
+      });
+    }, "toCssString")
+  };
+  return {
+    base: baseResult,
+    alternate: alternateResult,
+    toCssString: /* @__PURE__ */__name(() => {
+      const parts = [baseResult.toCssString()];
+      if (Object.keys(diffVars).length > 0) {
+        parts.push(alternateResult.toCssString());
+      }
+      return parts.join("\n\n");
+    }, "toCssString")
+  };
+}, "bundleToCssVars");
+function toCssVars(input, options) {
+  if (isThemeBundle(input)) {
+    return bundleToCssVars(input, options ?? {});
+  }
+  return toCssVarsBase(input, options);
+}
+__name(toCssVars, "toCssVars");
+export { toCssVarName, toCssVars };