@echothink-ui/style 0.2.0

package/README.md

@@ -0,0 +1,5 @@
+# @echothink-ui/style
+
+Curated visual style presets for EchoThink UI.
+
+Use `StyleScope` or the exported preset class helpers to apply one complete style preset to a subtree. Components consume the resulting CSS variables and do not need to know which preset produced them.

package/dist/index.cjs

@@ -0,0 +1,216 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  StyleScope: () => StyleScope,
+  composeEthStylePresetClassName: () => composeEthStylePresetClassName,
+  defaultPalette: () => defaultPalette,
+  defaultStylePreset: () => defaultStylePreset,
+  ethDensityModes: () => ethDensityModes,
+  ethPalettes: () => ethPalettes,
+  ethStylePresetCarbonThemes: () => ethStylePresetCarbonThemes,
+  ethStylePresetDescriptions: () => ethStylePresetDescriptions,
+  ethStylePresetLabels: () => ethStylePresetLabels,
+  ethStylePresetModes: () => ethStylePresetModes,
+  ethStylePresets: () => ethStylePresets,
+  ethTypeScales: () => ethTypeScales,
+  getEthPaletteClassName: () => getEthPaletteClassName,
+  getEthStyleCarbonTheme: () => getEthStyleCarbonTheme,
+  getEthStyleMode: () => getEthStyleMode,
+  getEthStylePresetClassName: () => getEthStylePresetClassName,
+  getEthStylePresetDataAttribute: () => getEthStylePresetDataAttribute,
+  isEthPalette: () => isEthPalette,
+  isEthStylePreset: () => isEthStylePreset
+});
+module.exports = __toCommonJS(index_exports);
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var ethStylePresets = [
+  "carbon-like",
+  "soft-card",
+  "glass",
+  "bright",
+  "studio-dark"
+];
+var defaultStylePreset = "carbon-like";
+var ethStylePresetLabels = {
+  "carbon-like": "Carbon-like",
+  "soft-card": "Soft card",
+  glass: "Liquid glass",
+  bright: "Bright",
+  "studio-dark": "Studio dark"
+};
+var ethStylePresetDescriptions = {
+  "carbon-like": "Square, flat Carbon-inspired surfaces.",
+  "soft-card": "Soft radius with quiet card elevation.",
+  glass: "Layered translucent surfaces with strong blur, highlights, and depth.",
+  bright: "High-key SaaS surfaces with crisp contrast.",
+  "studio-dark": "Dark workbench surfaces for dense tools."
+};
+var ethStylePresetModes = {
+  "carbon-like": "light",
+  "soft-card": "light",
+  glass: "light",
+  bright: "light",
+  "studio-dark": "dark"
+};
+var ethStylePresetCarbonThemes = {
+  "carbon-like": "white",
+  "soft-card": "white",
+  glass: "white",
+  bright: "white",
+  "studio-dark": "g100"
+};
+var ethPalettes = ["default"];
+var defaultPalette = "default";
+var presetSet = new Set(ethStylePresets);
+var paletteSet = new Set(ethPalettes);
+function joinClassNames(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function isEthStylePreset(value) {
+  return presetSet.has(value);
+}
+function isEthPalette(value) {
+  return paletteSet.has(value);
+}
+function getEthStylePresetClassName(preset = defaultStylePreset) {
+  return `eth-style-${preset}`;
+}
+function getEthPaletteClassName(palette = defaultPalette) {
+  return `eth-palette-${palette}`;
+}
+function getEthStylePresetDataAttribute(preset = defaultStylePreset) {
+  return preset;
+}
+function getEthStyleMode(preset = defaultStylePreset) {
+  return ethStylePresetModes[preset];
+}
+function getEthStyleCarbonTheme(preset = defaultStylePreset) {
+  return ethStylePresetCarbonThemes[preset];
+}
+function composeEthStylePresetClassName(preset = defaultStylePreset, className) {
+  return joinClassNames(getEthStylePresetClassName(preset), className);
+}
+var ethDensityModes = ["compact", "standard", "comfortable"];
+var ethTypeScales = ["compact", "standard", "large"];
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function applyGlobalTheme(preset, palette, density, typeScale) {
+  if (typeof document === "undefined") return void 0;
+  const root = document.documentElement;
+  const presetClass = getEthStylePresetClassName(preset);
+  const paletteClass = getEthPaletteClassName(palette);
+  const desiredAttrs = {
+    "data-eth-palette": palette,
+    "data-eth-style-preset": getEthStylePresetDataAttribute(preset),
+    "data-eth-mode": getEthStyleMode(preset),
+    "data-carbon-theme": getEthStyleCarbonTheme(preset),
+    "data-eth-density": density === "standard" ? null : density,
+    "data-eth-type": typeScale === "standard" ? null : typeScale
+  };
+  const removedClasses = Array.from(root.classList).filter(
+    (c) => c.startsWith("eth-style-") || c.startsWith("eth-palette-")
+  );
+  const prevAttrs = {};
+  Object.keys(desiredAttrs).forEach((key) => {
+    prevAttrs[key] = root.getAttribute(key);
+  });
+  removedClasses.forEach((c) => root.classList.remove(c));
+  root.classList.add(paletteClass, presetClass);
+  Object.entries(desiredAttrs).forEach(([key, value]) => {
+    if (value === null) root.removeAttribute(key);
+    else root.setAttribute(key, value);
+  });
+  return () => {
+    root.classList.remove(paletteClass, presetClass);
+    removedClasses.forEach((c) => root.classList.add(c));
+    Object.entries(prevAttrs).forEach(([key, value]) => {
+      if (value === null) root.removeAttribute(key);
+      else root.setAttribute(key, value);
+    });
+  };
+}
+function StyleScope({
+  preset = defaultStylePreset,
+  palette = defaultPalette,
+  density = "standard",
+  typeScale = "standard",
+  global = true,
+  className,
+  children,
+  ...props
+}) {
+  useIsomorphicLayoutEffect(() => {
+    if (!global) return void 0;
+    return applyGlobalTheme(preset, palette, density, typeScale);
+  }, [global, preset, palette, density, typeScale]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...props,
+      className: joinClassNames(
+        getEthPaletteClassName(palette),
+        getEthStylePresetClassName(preset),
+        className
+      ),
+      "data-eth-palette": palette,
+      "data-eth-style-preset": getEthStylePresetDataAttribute(preset),
+      "data-eth-mode": getEthStyleMode(preset),
+      "data-carbon-theme": getEthStyleCarbonTheme(preset),
+      "data-eth-density": density === "standard" ? void 0 : density,
+      "data-eth-type": typeScale === "standard" ? void 0 : typeScale,
+      children
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StyleScope,
+  composeEthStylePresetClassName,
+  defaultPalette,
+  defaultStylePreset,
+  ethDensityModes,
+  ethPalettes,
+  ethStylePresetCarbonThemes,
+  ethStylePresetDescriptions,
+  ethStylePresetLabels,
+  ethStylePresetModes,
+  ethStylePresets,
+  ethTypeScales,
+  getEthPaletteClassName,
+  getEthStyleCarbonTheme,
+  getEthStyleMode,
+  getEthStylePresetClassName,
+  getEthStylePresetDataAttribute,
+  isEthPalette,
+  isEthStylePreset
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport \"./styles.css\";\n\nexport const ethStylePresets = [\n  \"carbon-like\",\n  \"soft-card\",\n  \"glass\",\n  \"bright\",\n  \"studio-dark\"\n] as const;\n\nexport type EthStylePreset = (typeof ethStylePresets)[number];\n\nexport const defaultStylePreset: EthStylePreset = \"carbon-like\";\n\nexport const ethStylePresetLabels: Record<EthStylePreset, string> = {\n  \"carbon-like\": \"Carbon-like\",\n  \"soft-card\": \"Soft card\",\n  glass: \"Liquid glass\",\n  bright: \"Bright\",\n  \"studio-dark\": \"Studio dark\"\n};\n\nexport const ethStylePresetDescriptions: Record<EthStylePreset, string> = {\n  \"carbon-like\": \"Square, flat Carbon-inspired surfaces.\",\n  \"soft-card\": \"Soft radius with quiet card elevation.\",\n  glass: \"Layered translucent surfaces with strong blur, highlights, and depth.\",\n  bright: \"High-key SaaS surfaces with crisp contrast.\",\n  \"studio-dark\": \"Dark workbench surfaces for dense tools.\"\n};\n\n/** Light/dark mode per preset. Drives the Carbon theme bundle + data-eth-mode. */\nexport const ethStylePresetModes: Record<EthStylePreset, \"light\" | \"dark\"> = {\n  \"carbon-like\": \"light\",\n  \"soft-card\": \"light\",\n  glass: \"light\",\n  bright: \"light\",\n  \"studio-dark\": \"dark\"\n};\n\n/**\n * Carbon theme bundle per preset (Part A \"theme-bundle base\"). Light presets\n * base on the white bundle; studio-dark bases on g100 so every Carbon token\n * the bridge does not re-point still resolves to a correct dark value.\n */\nexport const ethStylePresetCarbonThemes: Record<EthStylePreset, string> = {\n  \"carbon-like\": \"white\",\n  \"soft-card\": \"white\",\n  glass: \"white\",\n  bright: \"white\",\n  \"studio-dark\": \"g100\"\n};\n\nexport const ethPalettes = [\"default\"] as const;\nexport type EthPalette = (typeof ethPalettes)[number];\nexport const defaultPalette: EthPalette = \"default\";\n\nconst presetSet = new Set<string>(ethStylePresets);\nconst paletteSet = new Set<string>(ethPalettes);\n\nfunction joinClassNames(...values: Array<string | undefined | false>) {\n  return values.filter(Boolean).join(\" \");\n}\n\nexport function isEthStylePreset(value: string): value is EthStylePreset {\n  return presetSet.has(value);\n}\n\nexport function isEthPalette(value: string): value is EthPalette {\n  return paletteSet.has(value);\n}\n\nexport function getEthStylePresetClassName(preset: EthStylePreset = defaultStylePreset) {\n  return `eth-style-${preset}`;\n}\n\nexport function getEthPaletteClassName(palette: EthPalette = defaultPalette) {\n  return `eth-palette-${palette}`;\n}\n\nexport function getEthStylePresetDataAttribute(preset: EthStylePreset = defaultStylePreset) {\n  return preset;\n}\n\nexport function getEthStyleMode(preset: EthStylePreset = defaultStylePreset) {\n  return ethStylePresetModes[preset];\n}\n\nexport function getEthStyleCarbonTheme(preset: EthStylePreset = defaultStylePreset) {\n  return ethStylePresetCarbonThemes[preset];\n}\n\nexport function composeEthStylePresetClassName(\n  preset: EthStylePreset = defaultStylePreset,\n  className?: string\n) {\n  return joinClassNames(getEthStylePresetClassName(preset), className);\n}\n\nexport const ethDensityModes = [\"compact\", \"standard\", \"comfortable\"] as const;\nexport type EthDensityMode = (typeof ethDensityModes)[number];\n\nexport const ethTypeScales = [\"compact\", \"standard\", \"large\"] as const;\nexport type EthTypeScale = (typeof ethTypeScales)[number];\n\nexport interface StyleScopeProps extends React.HTMLAttributes<HTMLDivElement> {\n  preset?: EthStylePreset;\n  /** Palette of raw color assets the preset maps from. */\n  palette?: EthPalette;\n  /** Orthogonal spacing axis. \"standard\" emits no attribute (token defaults). */\n  density?: EthDensityMode;\n  /** Orthogonal typography scale axis. \"standard\" emits no attribute. */\n  typeScale?: EthTypeScale;\n  /**\n   * Also mirror the preset/palette/Carbon-theme onto the document root so\n   * PORTALED Carbon content (modals, dropdown menus, tooltips, toasts mounted\n   * at document.body, outside this wrapper) inherits the theme instead of\n   * falling back to default Carbon. Defaults to true.\n   */\n  global?: boolean;\n}\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" ? React.useLayoutEffect : React.useEffect;\n\nfunction applyGlobalTheme(\n  preset: EthStylePreset,\n  palette: EthPalette,\n  density: EthDensityMode,\n  typeScale: EthTypeScale\n) {\n  if (typeof document === \"undefined\") return undefined;\n  const root = document.documentElement;\n\n  const presetClass = getEthStylePresetClassName(preset);\n  const paletteClass = getEthPaletteClassName(palette);\n\n  // Desired attributes; a null value means \"remove the attribute\".\n  const desiredAttrs: Record<string, string | null> = {\n    \"data-eth-palette\": palette,\n    \"data-eth-style-preset\": getEthStylePresetDataAttribute(preset),\n    \"data-eth-mode\": getEthStyleMode(preset),\n    \"data-carbon-theme\": getEthStyleCarbonTheme(preset),\n    \"data-eth-density\": density === \"standard\" ? null : density,\n    \"data-eth-type\": typeScale === \"standard\" ? null : typeScale\n  };\n\n  // Snapshot prior preset/palette classes and the attributes we touch.\n  const removedClasses = Array.from(root.classList).filter(\n    (c) => c.startsWith(\"eth-style-\") || c.startsWith(\"eth-palette-\")\n  );\n  const prevAttrs: Record<string, string | null> = {};\n  Object.keys(desiredAttrs).forEach((key) => {\n    prevAttrs[key] = root.getAttribute(key);\n  });\n\n  removedClasses.forEach((c) => root.classList.remove(c));\n  root.classList.add(paletteClass, presetClass);\n  Object.entries(desiredAttrs).forEach(([key, value]) => {\n    if (value === null) root.removeAttribute(key);\n    else root.setAttribute(key, value);\n  });\n\n  return () => {\n    root.classList.remove(paletteClass, presetClass);\n    removedClasses.forEach((c) => root.classList.add(c));\n    Object.entries(prevAttrs).forEach(([key, value]) => {\n      if (value === null) root.removeAttribute(key);\n      else root.setAttribute(key, value);\n    });\n  };\n}\n\nexport function StyleScope({\n  preset = defaultStylePreset,\n  palette = defaultPalette,\n  density = \"standard\",\n  typeScale = \"standard\",\n  global = true,\n  className,\n  children,\n  ...props\n}: StyleScopeProps) {\n  useIsomorphicLayoutEffect(() => {\n    if (!global) return undefined;\n    return applyGlobalTheme(preset, palette, density, typeScale);\n  }, [global, preset, palette, density, typeScale]);\n\n  return (\n    <div\n      {...props}\n      className={joinClassNames(\n        getEthPaletteClassName(palette),\n        getEthStylePresetClassName(preset),\n        className\n      )}\n      data-eth-palette={palette}\n      data-eth-style-preset={getEthStylePresetDataAttribute(preset)}\n      data-eth-mode={getEthStyleMode(preset)}\n      data-carbon-theme={getEthStyleCarbonTheme(preset)}\n      data-eth-density={density === \"standard\" ? undefined : density}\n      data-eth-type={typeScale === \"standard\" ? undefined : typeScale}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}