@umoa/saascfm-css 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,534 @@
+// src/index.ts
+import path from "path";
+import fs from "fs";
+
+// src/layout/css-spacing.ts
+var SPACING_RULES = {
+  // sizing
+  w: { props: ["width"] },
+  h: { props: ["height"] },
+  mw: { props: ["max-width"] },
+  mh: { props: ["max-height"] },
+  minw: { props: ["min-width"] },
+  minh: { props: ["min-height"] },
+  // margin
+  mt: { props: ["margin-top"] },
+  mr: { props: ["margin-right"] },
+  mb: { props: ["margin-bottom"] },
+  ml: { props: ["margin-left"] },
+  mtb: { props: ["margin-top", "margin-bottom"] },
+  mrl: { props: ["margin-right", "margin-left"] },
+  // padding
+  p: { props: ["padding"] },
+  pt: { props: ["padding-top"] },
+  pr: { props: ["padding-right"] },
+  pb: { props: ["padding-bottom"] },
+  pl: { props: ["padding-left"] },
+  ptb: { props: ["padding-top", "padding-bottom"] },
+  prl: { props: ["padding-right", "padding-left"] },
+  // gap
+  g: { props: ["gap"], nonNegative: true },
+  gc: { props: ["column-gap"], nonNegative: true },
+  gr: { props: ["row-gap"], nonNegative: true },
+  // misc
+  bdrd: { props: ["border-radius"] },
+  bdw: { props: ["border-width"], companion: { "border-style": "solid" } },
+  zdex: { props: ["z-index"], unitless: true }
+};
+var SPACING_PERCENT_ENABLED = /* @__PURE__ */ new Set([
+  "w",
+  "h",
+  "mw",
+  "mh",
+  "minw",
+  "minh",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "mtb",
+  "mrl",
+  "p",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "ptb",
+  "prl"
+]);
+var SPACING_VIEWPORT_ENABLED = /* @__PURE__ */ new Set(["w", "h"]);
+var SPACING_ORDER = [
+  "w",
+  "h",
+  "mw",
+  "mh",
+  "minw",
+  "minh",
+  "p",
+  "ptb",
+  "prl",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "mtb",
+  "mrl",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "g",
+  "gc",
+  "gr",
+  "bdrd",
+  "bdw",
+  "zdex"
+];
+var SPACING_ALTERNATION = Object.keys(SPACING_RULES).sort((a, b) => b.length - a.length).join("|");
+
+// src/layout/css-spacing-static.ts
+var SPACING_STATIC_RULES = {
+  bn: { border: "none" },
+  auto: { margin: "0 auto" },
+  hl: { "border-bottom": "1px solid var(--border-default, currentColor)", width: "100%" },
+  "hl-muted": { "border-bottom": "1px solid var(--border-muted, var(--border-default, currentColor))", width: "100%" },
+  vl: { "border-left": "2px solid var(--border-default, currentColor)", height: "20px" },
+  "mcon-480": { "max-width": "480px", margin: "0 auto" },
+  "mcon-640": { "max-width": "640px", margin: "0 auto" },
+  "mcon-768": { "max-width": "768px", margin: "0 auto" },
+  "mcon-1080": { "max-width": "1080px", margin: "0 auto" },
+  "mcon-1280": { "max-width": "1280px", margin: "0 auto" },
+  "mcon-1440": { "max-width": "1440px", margin: "0 auto" }
+};
+var SPACING_STATIC_ALTERNATION = Object.keys(SPACING_STATIC_RULES).sort((a, b) => b.length - a.length).join("|");
+
+// src/layout/css-layout.ts
+var LAYOUT_RULES = {
+  // flex container
+  flex: { display: "flex" },
+  "flex-fdr": { "flex-direction": "row" },
+  "flex-fdrr": { "flex-direction": "row-reverse" },
+  "flex-fdc": { "flex-direction": "column" },
+  "flex-fdcr": { "flex-direction": "column-reverse" },
+  "flex-wrap": { "flex-wrap": "wrap" },
+  "flex-nowrap": { "flex-wrap": "nowrap" },
+  // flex justify-content
+  "flex-jcfs": { "justify-content": "flex-start" },
+  "flex-jcfe": { "justify-content": "flex-end" },
+  "flex-jcc": { "justify-content": "center" },
+  "flex-jcsb": { "justify-content": "space-between" },
+  "flex-jcsa": { "justify-content": "space-around" },
+  "flex-jcse": { "justify-content": "space-evenly" },
+  // flex align-items
+  "flex-aifs": { "align-items": "flex-start" },
+  "flex-aife": { "align-items": "flex-end" },
+  "flex-aic": { "align-items": "center" },
+  "flex-aist": { "align-items": "stretch" },
+  "flex-aib": { "align-items": "baseline" },
+  // flex align-content
+  "flex-acfs": { "align-content": "flex-start" },
+  "flex-acfe": { "align-content": "flex-end" },
+  "flex-acc": { "align-content": "center" },
+  "flex-acst": { "align-content": "stretch" },
+  "flex-acsb": { "align-content": "space-between" },
+  "flex-acsa": { "align-content": "space-around" },
+  // flex align-self
+  "flex-assr": { "align-self": "stretch" },
+  "flex-asc": { "align-self": "center" },
+  "flex-ass": { "align-self": "start" },
+  "flex-ase": { "align-self": "end" },
+  // grid justify-items
+  "grid-jist": { "justify-items": "start" },
+  "grid-jie": { "justify-items": "end" },
+  "grid-jic": { "justify-items": "center" },
+  "grid-jistr": { "justify-items": "stretch" },
+  // grid align-items
+  "grid-aist": { "align-items": "start" },
+  "grid-aie": { "align-items": "end" },
+  "grid-aic": { "align-items": "center" },
+  "grid-aistr": { "align-items": "stretch" },
+  // text-align (found in the legacy file, was missing from the module)
+  "align-l": { "text-align": "left" },
+  "align-c": { "text-align": "center" },
+  "align-r": { "text-align": "right" },
+  // float
+  "float-l": { float: "left" },
+  "float-r": { float: "right" },
+  // float-c in the legacy file was actually `position: fixed; top: 50%; left: 50%`,
+  // not a real float — kept as its original (odd) behavior rather than
+  // silently "fixing" it into something it never was.
+  "float-c": { position: "fixed", top: "50%", left: "50%" }
+};
+var LAYOUT_ALTERNATION = Object.keys(LAYOUT_RULES).sort((a, b) => b.length - a.length).join("|");
+
+// src/styling/css-typography.ts
+var TYPOGRAPHY_RULES = {
+  // font-weight
+  nb: { "font-weight": "normal" },
+  b: { "font-weight": "bold" },
+  bx: { "font-weight": "bolder" },
+  "b-100": { "font-weight": "100" },
+  "b-200": { "font-weight": "200" },
+  "b-300": { "font-weight": "300" },
+  "b-400": { "font-weight": "400" },
+  "b-500": { "font-weight": "500" },
+  "b-600": { "font-weight": "600" },
+  "b-700": { "font-weight": "700" },
+  "b-800": { "font-weight": "800" },
+  "b-900": { "font-weight": "900" },
+  "b-lighter": { "font-weight": "100" },
+  "b-light": { "font-weight": "300" },
+  lighter: { "font-weight": "100" },
+  light: { "font-weight": "300" },
+  // text-transform
+  uppercase: { "text-transform": "uppercase" },
+  "to-uppercase": { "text-transform": "uppercase" },
+  lowercase: { "text-transform": "lowercase" },
+  "to-lowercase": { "text-transform": "lowercase" },
+  capitalize: { "text-transform": "capitalize" },
+  "text-none": { "text-transform": "none" },
+  // misc
+  i: { "font-style": "italic" },
+  underline: { "text-decoration": "underline" },
+  // word-wrap / hyphenation
+  ow: { "overflow-wrap": "break-word", "word-wrap": "break-word", hyphens: "auto" },
+  ww: { "overflow-wrap": "break-word", "word-wrap": "break-word", hyphens: "auto" }
+};
+var TYPOGRAPHY_ALTERNATION = Object.keys(TYPOGRAPHY_RULES).sort((a, b) => b.length - a.length).join("|");
+var FONT_SIZE_PATTERN = "(?:fs|ls)-n?(?:\\d+)?(?:[dp]\\d+)?em";
+function parseFontSize(cls) {
+  const match = cls.match(/^(fs|ls)-(n)?(\d+)?(?:[dp](\d+))?em$/);
+  if (!match) return null;
+  const [, kind, neg, intPart, decPart] = match;
+  if (!intPart && !decPart) return null;
+  if (neg && kind === "fs") return null;
+  const whole = intPart ?? "0";
+  const num = decPart ? `${whole}.${decPart}` : whole;
+  return {
+    prop: kind === "fs" ? "font-size" : "letter-spacing",
+    value: `${neg ? "-" : ""}${num}em`
+  };
+}
+
+// src/styling/css-cursor.ts
+var CURSOR_RULES = {
+  "cursor-alias": { cursor: "alias" },
+  "cursor-all-scroll": { cursor: "all-scroll" },
+  "cursor-auto": { cursor: "auto" },
+  "cursor-cell": { cursor: "cell" },
+  "cursor-context-menu": { cursor: "context-menu" },
+  "cursor-col-resize": { cursor: "col-resize" },
+  "cursor-copy": { cursor: "copy" },
+  "cursor-crosshair": { cursor: "crosshair" },
+  "cursor-default": { cursor: "default" },
+  "cursor-e-resize": { cursor: "e-resize" },
+  "cursor-ew-resize": { cursor: "ew-resize" },
+  "cursor-grab": { cursor: "grab" },
+  "cursor-grabbing": { cursor: "grabbing" },
+  "cursor-help": { cursor: "help" },
+  "cursor-move": { cursor: "move" },
+  "cursor-n-resize": { cursor: "n-resize" },
+  "cursor-ne-resize": { cursor: "ne-resize" },
+  "cursor-nesw-resize": { cursor: "nesw-resize" },
+  "cursor-ns-resize": { cursor: "ns-resize" },
+  "cursor-nw-resize": { cursor: "nw-resize" },
+  "cursor-nwse-resize": { cursor: "nwse-resize" },
+  "cursor-no-drop": { cursor: "no-drop" },
+  "cursor-none": { cursor: "none" },
+  "cursor-not-allowed": { cursor: "not-allowed" },
+  "cursor-pointer": { cursor: "pointer" },
+  "cursor-progress": { cursor: "progress" },
+  "cursor-row-resize": { cursor: "row-resize" },
+  "cursor-s-resize": { cursor: "s-resize" },
+  "cursor-se-resize": { cursor: "se-resize" },
+  "cursor-sw-resize": { cursor: "sw-resize" },
+  "cursor-text": { cursor: "text" },
+  "cursor-w-resize": { cursor: "w-resize" },
+  "cursor-wait": { cursor: "wait" },
+  "cursor-zoom-in": { cursor: "zoom-in" },
+  "cursor-zoom-out": { cursor: "zoom-out" }
+};
+var CURSOR_ALTERNATION = Object.keys(CURSOR_RULES).sort((a, b) => b.length - a.length).join("|");
+
+// src/styling/css-border.ts
+var BORDER_STYLE_RULES = {
+  "bds-solid": { "border-style": "solid" },
+  "bds-dashed": { "border-style": "dashed" },
+  "bds-dotted": { "border-style": "dotted" },
+  "bds-double": { "border-style": "double" },
+  "bds-none": { "border-style": "none" }
+};
+var BORDER_STYLE_ALTERNATION = Object.keys(BORDER_STYLE_RULES).sort((a, b) => b.length - a.length).join("|");
+
+// src/styling/css-color.ts
+var PROP_BY_PREFIX = {
+  text: "color",
+  bg: "background-color",
+  border: "border-color"
+};
+var LOOKS_LIKE_KEY = /^[a-z][a-z0-9]*(-[a-z0-9]+)+$/i;
+function resolveTokens(tokens, palette) {
+  const resolved = {};
+  for (const [name, value] of Object.entries(tokens)) {
+    if (typeof value !== "string" || !value) {
+      console.warn(`[saascfm-css] token "${name}" has no value, skipped`);
+      continue;
+    }
+    const fromPalette = palette[value];
+    if (!fromPalette && LOOKS_LIKE_KEY.test(value)) {
+      console.warn(`[saascfm-css] token "${name}" references unknown primitive "${value}", skipped`);
+      continue;
+    }
+    resolved[name] = fromPalette ?? value;
+  }
+  return resolved;
+}
+function generateRootVars(resolved) {
+  const lines = Object.entries(resolved).sort(([a], [b]) => a.localeCompare(b)).map(([name, value]) => `  --${name}: ${value};`);
+  return `:root {
+${lines.join("\n")}
+}
+`;
+}
+function buildColorUtilityRules(resolved) {
+  const rules = {};
+  for (const name of Object.keys(resolved)) {
+    const prop = PROP_BY_PREFIX[name.split("-")[0]];
+    if (!prop) continue;
+    rules[name] = { [prop]: `var(--${name})` };
+  }
+  return rules;
+}
+function buildPrimitiveRules(primitives) {
+  const rules = {};
+  for (const [name, value] of Object.entries(primitives)) {
+    rules[name] = { color: value };
+    if (/^(rgba|hsla)/i.test(value)) continue;
+    rules[`bg-${name}`] = { "background-color": value };
+    rules[`border-${name}`] = { "border-color": value };
+  }
+  return rules;
+}
+function colorAlternation(rules) {
+  return Object.keys(rules).sort((a, b) => b.length - a.length).join("|");
+}
+
+// src/index.ts
+var PKG = "saascfm-css";
+var VIRTUAL_ID = "virtual:css-module.css";
+var RESOLVED_VIRTUAL_ID = "\0" + VIRTUAL_ID;
+function cssModule(options = {}) {
+  const srcDir = options.srcDir || "src";
+  const extensions = options.extensions || [".vue", ".js", ".jsx", ".ts", ".tsx", ".html"];
+  const exclude = options.exclude || [".colors.", ".tokens.", "primitives."];
+  const useSpacing = options.spacing !== false;
+  const useLayout = options.layout !== false;
+  const useTypography = options.typography !== false;
+  const useCursor = options.cursor !== false;
+  const useBorder = options.border !== false;
+  let COLOR_ROOT_VARS = "";
+  let COLOR_RULES = {};
+  let PRIMITIVE_COLOR_RULES = {};
+  let COLOR_ALTERNATION = "";
+  const colorsModule = options.colorsModule ?? {};
+  const tokens = colorsModule["TOKENS"];
+  const primitives = colorsModule["PRIMITIVES"];
+  const useColor = !!(tokens || primitives);
+  if (useColor) {
+    if (tokens) {
+      const resolved = resolveTokens(tokens, primitives ?? {});
+      COLOR_ROOT_VARS = generateRootVars(resolved);
+      COLOR_RULES = buildColorUtilityRules(resolved);
+    }
+    if (primitives && options.primitiveClasses !== false) {
+      PRIMITIVE_COLOR_RULES = buildPrimitiveRules(primitives);
+    }
+    COLOR_ALTERNATION = colorAlternation({ ...COLOR_RULES, ...PRIMITIVE_COLOR_RULES });
+  }
+  const alternatives = [];
+  if (useSpacing) {
+    alternatives.push(`(?:${SPACING_ALTERNATION})-n?\\d+(?:d\\d+)?(?:p|vw|vh)?`);
+    alternatives.push(`(?:${SPACING_STATIC_ALTERNATION})`);
+  }
+  if (useLayout) alternatives.push(`(?:${LAYOUT_ALTERNATION})`);
+  if (useTypography) {
+    alternatives.push(`(?:${TYPOGRAPHY_ALTERNATION})`);
+    alternatives.push(FONT_SIZE_PATTERN);
+  }
+  if (useCursor) alternatives.push(`(?:${CURSOR_ALTERNATION})`);
+  if (useBorder) alternatives.push(`(?:${BORDER_STYLE_ALTERNATION})`);
+  if (useColor && COLOR_ALTERNATION) alternatives.push(`(?:${COLOR_ALTERNATION})`);
+  const CLASS_RE = new RegExp(
+    `(?:^|["'\`\\s(])(${alternatives.join("|")})(!)?(?=["'\`\\s)]|$)`,
+    "g"
+  );
+  function parseClass(cls) {
+    if (useSpacing && SPACING_STATIC_RULES[cls]) {
+      return { kind: "static", decls: SPACING_STATIC_RULES[cls] };
+    }
+    if (useLayout && LAYOUT_RULES[cls]) {
+      return { kind: "static", decls: LAYOUT_RULES[cls] };
+    }
+    if (useTypography && TYPOGRAPHY_RULES[cls]) {
+      return { kind: "static", decls: TYPOGRAPHY_RULES[cls] };
+    }
+    if (useCursor && CURSOR_RULES[cls]) {
+      return { kind: "static", decls: CURSOR_RULES[cls] };
+    }
+    if (useBorder && BORDER_STYLE_RULES[cls]) {
+      return { kind: "static", decls: BORDER_STYLE_RULES[cls] };
+    }
+    if (useColor && COLOR_RULES[cls]) {
+      return { kind: "static", decls: COLOR_RULES[cls] };
+    }
+    if (useColor && PRIMITIVE_COLOR_RULES[cls]) {
+      return { kind: "static", decls: PRIMITIVE_COLOR_RULES[cls] };
+    }
+    if (useTypography) {
+      const fontSize = parseFontSize(cls);
+      if (fontSize) return { kind: "fontsize", prop: fontSize.prop, value: fontSize.value };
+    }
+    if (useSpacing) {
+      const match = cls.match(/^([a-z]+)-(n)?(\d+(?:d\d+)?)(p|vw|vh)?$/);
+      if (match) {
+        const [, prefix, neg, num, suffix] = match;
+        const rule = SPACING_RULES[prefix];
+        if (rule) {
+          if (suffix === "p" && !SPACING_PERCENT_ENABLED.has(prefix)) return null;
+          if ((suffix === "vw" || suffix === "vh") && !SPACING_VIEWPORT_ENABLED.has(prefix)) return null;
+          if (rule.unitless && (suffix || num.includes("d"))) return null;
+          if (neg && rule.nonNegative) return null;
+          const sign = neg ? "-" : "";
+          let unit;
+          if (rule.unitless) unit = "";
+          else if (suffix === "p") unit = "%";
+          else if (suffix === "vw") unit = "vw";
+          else if (suffix === "vh") unit = "vh";
+          else unit = "px";
+          return { kind: "numeric", props: rule.props, value: `${sign}${num.replace("d", ".")}${unit}`, companion: rule.companion };
+        }
+      }
+    }
+    return null;
+  }
+  function rank(base) {
+    if (useBorder && BORDER_STYLE_RULES[base]) return 3;
+    if (useSpacing && SPACING_STATIC_RULES[base]) return 0;
+    const m = base.match(/^([a-z]+)-n?\d/);
+    if (useSpacing && m && SPACING_RULES[m[1]]) return 1;
+    return 2;
+  }
+  function generateCSS(classes) {
+    const entries = [...classes].map((key) => {
+      const bang = key.endsWith("!");
+      const base = bang ? key.slice(0, -1) : key;
+      const m = base.match(/^([a-z]+)-n?\d/);
+      const sub = rank(base) === 1 && m ? SPACING_ORDER.indexOf(m[1]) : 0;
+      return { key, base, bang, tier: rank(base), sub };
+    });
+    entries.sort(
+      (x, y) => x.tier - y.tier || x.sub - y.sub || x.base.localeCompare(y.base) || Number(x.bang) - Number(y.bang)
+    );
+    let css = `/* AUTO-GENERATED by ${PKG} \u2014 do not edit by hand. */
+`;
+    if (COLOR_ROOT_VARS) css += COLOR_ROOT_VARS;
+    for (const { base, bang } of entries) {
+      const parsed = parseClass(base);
+      if (!parsed) continue;
+      const flag = options.important || bang ? " !important" : "";
+      let decls;
+      if (parsed.kind === "numeric") {
+        const all = parsed.props.map((p) => `  ${p}: ${parsed.value}${flag};`);
+        const companion = parsed.companion ? Object.entries(parsed.companion).map(([p, v]) => `  ${p}: ${v}${flag};`) : [];
+        decls = [...all, ...companion].join("\n");
+      } else if (parsed.kind === "static") {
+        decls = Object.entries(parsed.decls).map(([prop, value]) => `  ${prop}: ${value}${flag};`).join("\n");
+      } else {
+        decls = `  ${parsed.prop}: ${parsed.value}${flag};`;
+      }
+      css += `.${base}${bang ? "\\!" : ""} {
+${decls}
+}
+`;
+    }
+    return css;
+  }
+  function walkDir(dir, exts, out = []) {
+    let entries;
+    try {
+      entries = fs.readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return out;
+    }
+    for (const entry of entries) {
+      if (entry.name === "node_modules" || entry.name.startsWith(".")) continue;
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        walkDir(full, exts, out);
+      } else if (exts.some((e) => entry.name.endsWith(e)) && !exclude.some((x) => full.includes(x))) {
+        out.push(full);
+      }
+    }
+    return out;
+  }
+  let root = process.cwd();
+  const found = /* @__PURE__ */ new Set();
+  let viteServer = null;
+  function scanFile(file) {
+    let content;
+    try {
+      content = fs.readFileSync(file, "utf-8");
+    } catch {
+      return false;
+    }
+    let changed = false;
+    let m;
+    CLASS_RE.lastIndex = 0;
+    while (m = CLASS_RE.exec(content)) {
+      const key = m[1] + (m[2] ?? "");
+      if (!found.has(key) && parseClass(m[1])) {
+        found.add(key);
+        changed = true;
+      }
+    }
+    return changed;
+  }
+  function scanAll() {
+    for (const file of walkDir(path.resolve(root, srcDir), extensions)) scanFile(file);
+    scanFile(path.resolve(root, "index.html"));
+  }
+  function handleFsEvent(file) {
+    if (!extensions.some((e) => file.endsWith(e))) return;
+    if (exclude.some((x) => file.includes(x))) return;
+    const changed = scanFile(file);
+    if (changed && viteServer) {
+      const mod = viteServer.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ID);
+      if (mod) viteServer.moduleGraph.invalidateModule(mod);
+      viteServer.ws.send({ type: "full-reload" });
+    }
+  }
+  return {
+    name: PKG,
+    configResolved(config) {
+      root = config.root;
+    },
+    buildStart() {
+      scanAll();
+    },
+    resolveId(id) {
+      if (id === VIRTUAL_ID) return RESOLVED_VIRTUAL_ID;
+    },
+    load(id) {
+      if (id === RESOLVED_VIRTUAL_ID) return generateCSS(found);
+    },
+    configureServer(server) {
+      viteServer = server;
+      server.watcher.add(path.resolve(root, srcDir));
+      server.watcher.on("change", handleFsEvent);
+      server.watcher.on("add", handleFsEvent);
+    }
+  };
+}
+export {
+  cssModule as default
+};

package/package.json

@@ -1,6 +1,60 @@
 {
   "name": "@umoa/saascfm-css",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "SaaSCFM scan-and-generate utility CSS for Vite: w-54, mt-12, g-8, text-primary.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./client": {
+      "types": "./client.d.ts"
+    },
+    "./templates/*": "./templates/*"
+  },
+  "files": [
+    "dist",
+    "client.d.ts",
+    "templates",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "css",
+    "utility-css",
+    "design-tokens"
+  ],
+  "license": "UNLICENSED",
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "vite": ">=5"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.4.0",
+    "@types/node": "^20.0.0"
+  },
+  "module": "./dist/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "UMOA"
 }

package/templates/js/minimal/app.colors.js

@@ -0,0 +1,25 @@
+export const PRIMITIVES = {
+  'brand-500':   '#3B6FF0',
+  'neutral-50':  '#FAFAF9',
+  'neutral-200': '#E8E8E5',
+  'neutral-600': '#5C5C57',
+  'neutral-900': '#181816',
+  'white':       '#FFFFFF',
+  'red-500':     '#D64545',
+  'green-500':   '#2F7A4C',
+}
+
+export const TOKENS = {
+  'text-primary':        'neutral-900',
+  'text-secondary':      'neutral-600',
+  'text-inverse':        'white',
+  'text-brand':          'brand-500',
+  'bg-page':             'neutral-50',
+  'bg-surface':          'white',
+  'bg-brand':            'brand-500',
+  'border-default':      'neutral-200',
+  'text-status-error':   'red-500',
+  'bg-status-error':     'red-500',
+  'text-status-success': 'green-500',
+  'bg-status-success':   'green-500',
+}

package/templates/js/sectioned/app.colors.js

@@ -0,0 +1,14 @@
+import { PRIMITIVES } from './primitives.colors'
+import { SURFACE_TOKENS } from './surface.colors'
+import { BORDER_TOKENS } from './border.colors'
+import { STATUS_TOKENS } from './status.colors'
+import { NAVIGATION_TOKENS } from './navigation.colors'
+
+export { PRIMITIVES }
+
+export const TOKENS = {
+  ...SURFACE_TOKENS,
+  ...BORDER_TOKENS,
+  ...STATUS_TOKENS,
+  ...NAVIGATION_TOKENS,
+}

package/templates/js/sectioned/border.colors.js

@@ -0,0 +1,7 @@
+export const BORDER_TOKENS = {
+  'border-default': 'neutral-200',
+  'border-muted':   'neutral-100',
+  'border-strong':  'neutral-300',
+  'border-brand':   'brand-500',
+  'border-focus':   'brand-400',
+}

package/templates/js/sectioned/navigation.colors.js

@@ -0,0 +1,9 @@
+export const NAVIGATION_TOKENS = {
+  'nav-bg':                     'neutral-50',
+  'nav-item-text':              'neutral-600',
+  'nav-item-active-bg':         'brand-50',
+  'nav-item-active-text':       'brand-600',
+  'nav-group-label':            'neutral-500',
+  'nav-children-border':        'neutral-200',
+  'nav-children-active-border': 'brand-500',
+}