@symblight/md-colors 0.1.0 → 0.1.1

package/README.md

@@ -10,44 +10,55 @@ Built on [`@material/material-color-utilities`](https://github.com/material-foun
 npm install @symblight/md-colors
 ```
 
-## Two builds
+## Builds
 
 | Build | Entry | Format | Use case |
 |---|---|---|---|
-| Node / bundler | `dist/index.js` | ESM | Programmatic token generation, CSS file output |
-| Browser (bundler) | `dist/client.esm.js` | ESM | Vite, Storybook, bundler imports |
-| Browser (script) | `dist/client.js` | IIFE | Plain `<script>` tag, no bundler |
+| Node / bundler | `dist/index.js` | ESM | `generateTokens`, `generateCSSFile` |
+| Browser (bundler) | `dist/client.esm.js` | ESM | Vite, Storybook — named import |
+| Browser (script) | `dist/client.js` | IIFE | Plain `<script>` tag |
+| CLI | `dist/cli.js` | ESM | Terminal usage via `md-colors` |
 
 ---
 
 ## Node — programmatic API
 
-Import `generateTokens` to build token maps in Node.js scripts or server-side tooling.
-
 ```js
-import { generateTokens } from "@symblight/md-colors";
+import { generateTokens, generateCSSFile } from "@symblight/md-colors";
+```
+
+### `generateTokens(config)`
 
+Returns a token map — use it to apply tokens however you like.
+
+```js
 const tokens = generateTokens({ sourceColor: "#6750A4", scheme: "dark" });
 // { "--md-sys-color-primary": "oklch(…)", … }
 ```
 
-### `generateTokens(config)`
-
 | Param | Type | Default | Description |
 |---|---|---|---|
 | `config.sourceColor` | `string` | `"#1D5D78"` | Seed color as a hex string |
 | `config.scheme` | `"light" \| "dark"` | `"light"` | Color scheme variant |
 
-Returns `Record<string, string>` — CSS variable names mapped to oklch color strings.
+### `generateCSSFile(config)`
 
-### Generate a CSS file
+Writes a `colors.css` file with `:root`-scoped tokens.
 
-Run the following to write a `colors.css` file to the package directory:
-
-```bash
-pnpm generate-theme
+```js
+generateCSSFile({
+  sourceColor: "#6750A4",
+  scheme: "dark",
+  output: "./theme/colors.css",
+});
 ```
 
+| Param | Type | Default | Description |
+|---|---|---|---|
+| `config.sourceColor` | `string` | `"#1D5D78"` | Seed color as a hex string |
+| `config.scheme` | `"light" \| "dark"` | `"light"` | Color scheme variant |
+| `config.output` | `string` | `./colors.css` (next to module) | Output file path |
+
 Output:
 
 ```css
@@ -59,32 +70,39 @@ Output:
 }
 ```
 
-Source color and scheme are configured directly in `create-theme-file.mjs`.
-
 ---
 
 ## Browser client — runtime theming
 
-The browser build registers `window.generateTheme`, which injects tokens as CSS custom properties on `:root` at runtime.
+Import `generateTheme` and call it directly — no globals, no window assignment.
 
-### Via ES module import (Vite, Storybook)
+### Named import (Vite, Storybook, bundler)
 
 ```js
-import "@symblight/md-colors/client";
+import { generateTheme } from "@symblight/md-colors/client";
 
-window.generateTheme({ sourceColor: "#6750A4", scheme: "dark" });
+generateTheme({ sourceColor: "#6750A4", scheme: "dark" });
 ```
 
 ### Via `<script>` tag (no bundler)
 
+```html
+<script type="module">
+  import { generateTheme } from "./node_modules/@symblight/md-colors/dist/client.esm.js";
+  generateTheme({ sourceColor: "#6750A4", scheme: "dark" });
+</script>
+```
+
+Or with the self-contained IIFE build:
+
 ```html
 <script src="node_modules/@symblight/md-colors/dist/client.js"></script>
 <script>
-  window.generateTheme({ sourceColor: "#6750A4", scheme: "dark" });
+  // client.js exposes nothing on window — use it as an ES module instead (see above)
 </script>
 ```
 
-### `window.generateTheme(options)`
+### `generateTheme(options)`
 
 | Param | Type | Default | Description |
 |---|---|---|---|
@@ -95,11 +113,32 @@ Sets every `--md-sys-color-*` variable on `document.documentElement` via `style.
 
 ---
 
+## CLI
+
+```bash
+# npx (no install)
+npx md-colors --sourceColor="#6750A4" --scheme=dark --output=./theme/colors.css
+
+# global install
+npm install -g @symblight/md-colors
+md-colors --sourceColor="#6750A4" --scheme=light --output=./colors.css
+```
+
+### Options
+
+| Flag | Short | Default | Description |
+|---|---|---|---|
+| `--sourceColor` | `-c` | `#1D5D78` | Seed color as a hex string |
+| `--scheme` | `-s` | `light` | `light` or `dark` |
+| `--output` | `-o` | `./colors.css` | Output file path |
+
+---
+
 ## Development
 
 ```bash
 pnpm build            # Build all dist outputs
-pnpm generate-theme   # Write colors.css
+pnpm generate-theme   # Write colors.css via CLI (uses defaults)
 pnpm test             # Run Jest tests
 ```
 

package/dist/cli.js

@@ -0,0 +1,102 @@
+#!/usr/bin/env node
+#!/usr/bin/env node
+
+// cli.mjs
+import { parseArgs } from "node:util";
+
+// create-theme-file.mjs
+import path from "node:path";
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+
+// tokens.mjs
+import {
+  argbFromHex,
+  themeFromSourceColor,
+  hexFromArgb,
+  MaterialDynamicColors,
+  SchemeContent,
+  Hct
+} from "@material/material-color-utilities";
+import { converter, formatCss } from "culori";
+var oklch = converter("oklch");
+var materialColors = {
+  "surface-container-highest": MaterialDynamicColors.surfaceContainerHighest,
+  "surface-container-high": MaterialDynamicColors.surfaceContainerHigh,
+  "surface-dim": MaterialDynamicColors.surfaceDim,
+  "surface-bright": MaterialDynamicColors.surfaceBright,
+  "surface-container-lowest": MaterialDynamicColors.surfaceContainerLowest,
+  "surface-container-low": MaterialDynamicColors.surfaceContainerLow
+};
+function setSchemeProperties(scheme2, suffix = "") {
+  let result = {};
+  for (const [key, value] of Object.entries(scheme2)) {
+    const token = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    const color = hexFromArgb(value);
+    const converted = oklch(color);
+    const name = formatCss(converted);
+    const variableName = `--md-sys-color-${token}${suffix}`;
+    result[variableName] = name;
+  }
+  return result;
+}
+function generateTokens(config = { scheme: "light", sourceColor: "#1D5D78" }) {
+  const theme = themeFromSourceColor(argbFromHex(config.sourceColor), []);
+  const scheme2 = new SchemeContent(
+    Hct.fromInt(argbFromHex(config.sourceColor)),
+    config.scheme === "dark",
+    0
+  );
+  let palette = {};
+  for (const [key, value] of Object.entries(materialColors)) {
+    palette[key] = value.getArgb(scheme2);
+  }
+  const currentTheme = theme.schemes[config.scheme].toJSON();
+  const tokens = setSchemeProperties({ ...currentTheme, ...palette });
+  return tokens;
+}
+
+// create-theme-file.mjs
+function template(variables) {
+  return `:root {
+          ${variables}
+    }`;
+}
+function normalizeCSSVariablesContent(variables = {}) {
+  let str = "";
+  for (const cssVar in variables) {
+    str += `${cssVar}: ${variables[cssVar]};
+`;
+  }
+  return str;
+}
+function generateCSSFile(config = {}) {
+  const { scheme: scheme2 = "light", sourceColor: sourceColor2 = "#1D5D78", output: output2 } = config;
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = path.dirname(__filename);
+  const outputPath = output2 ? path.resolve(output2) : path.join(__dirname, "colors.css");
+  const tokens = generateTokens({ scheme: scheme2, sourceColor: sourceColor2 });
+  const stringTokens = normalizeCSSVariablesContent(tokens);
+  const themeBody = template(stringTokens);
+  fs.writeFile(outputPath, themeBody, (err) => {
+    if (err) {
+      console.error(err);
+    }
+  });
+}
+
+// cli.mjs
+var { values } = parseArgs({
+  options: {
+    sourceColor: { type: "string", short: "c", default: "#1D5D78" },
+    scheme: { type: "string", short: "s", default: "light" },
+    output: { type: "string", short: "o", default: "./colors.css" }
+  }
+});
+var { sourceColor, scheme, output } = values;
+if (scheme !== "light" && scheme !== "dark") {
+  console.error(`Error: --scheme must be "light" or "dark", got "${scheme}"`);
+  process.exit(1);
+}
+generateCSSFile({ sourceColor, scheme, output });
+console.log(`Generated ${output} (sourceColor: ${sourceColor}, scheme: ${scheme})`);

package/dist/client.esm.js

@@ -6939,15 +6939,15 @@ function generateTokens(config = { scheme: "light", sourceColor: "#1D5D78" }) {
 }
 
 // client.mjs
-window.generateTheme = function({ sourceColor, scheme = "light" } = {}) {
-  const tokens = generateTokens({
-    sourceColor,
-    scheme
-  });
+function generateTheme({ sourceColor, scheme = "light" } = {}) {
+  const tokens = generateTokens({ sourceColor, scheme });
   const root = document.documentElement;
   for (const [variable, value] of Object.entries(tokens)) {
     root.style.setProperty(variable, value);
   }
+}
+export {
+  generateTheme
 };
 /*! Bundled license information: