@symblight/md-colors 0.1.1 → 0.2.0

package/README.md

@@ -16,7 +16,8 @@ npm install @symblight/md-colors
 |---|---|---|---|
 | 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 |
+| Browser (CJS) | `dist/client.cjs` | CJS | `require("@symblight/md-colors/client")` |
+| Browser (script) | `dist/client.js` | IIFE | Plain `<script>` tag — `window.MdColors` |
 | CLI | `dist/cli.js` | ESM | Terminal usage via `md-colors` |
 
 ---
@@ -29,7 +30,11 @@ import { generateTokens, generateCSSFile } from "@symblight/md-colors";
 
 ### `generateTokens(config)`
 
-Returns a token map — use it to apply tokens however you like.
+Returns a token map — use it to apply tokens however you like. All 49 MD3
+color roles are resolved from one tonal-spot scheme (the M3 default), including
+`surface-container`, `surface-tint` and the `*-fixed` / `*-fixed-dim` /
+`on-*-fixed` / `on-*-fixed-variant` roles. Missing config fields fall back to
+their defaults; an invalid `sourceColor` or `scheme` throws a `TypeError`.
 
 ```js
 const tokens = generateTokens({ sourceColor: "#6750A4", scheme: "dark" });
@@ -43,10 +48,11 @@ const tokens = generateTokens({ sourceColor: "#6750A4", scheme: "dark" });
 
 ### `generateCSSFile(config)`
 
-Writes a `colors.css` file with `:root`-scoped tokens.
+Writes a `colors.css` file with `:root`-scoped tokens. Returns a promise that
+resolves with the absolute output path and rejects if the write fails.
 
 ```js
-generateCSSFile({
+await generateCSSFile({
   sourceColor: "#6750A4",
   scheme: "dark",
   output: "./theme/colors.css",
@@ -98,7 +104,7 @@ Or with the self-contained IIFE build:
 ```html
 <script src="node_modules/@symblight/md-colors/dist/client.js"></script>
 <script>
-  // client.js exposes nothing on window — use it as an ES module instead (see above)
+  MdColors.generateTheme({ sourceColor: "#6750A4", scheme: "dark" });
 </script>
 ```
 
@@ -106,7 +112,7 @@ Or with the self-contained IIFE build:
 
 | Param | Type | Default | Description |
 |---|---|---|---|
-| `options.sourceColor` | `string` | — | Seed color as a hex string |
+| `options.sourceColor` | `string` | `"#1D5D78"` | Seed color as a hex string |
 | `options.scheme` | `"light" \| "dark"` | `"light"` | Color scheme variant |
 
 Sets every `--md-sys-color-*` variable on `document.documentElement` via `style.setProperty`.
@@ -132,6 +138,8 @@ md-colors --sourceColor="#6750A4" --scheme=light --output=./colors.css
 | `--scheme` | `-s` | `light` | `light` or `dark` |
 | `--output` | `-o` | `./colors.css` | Output file path |
 
+Exits with code 1 on an invalid color, invalid scheme or failed write.
+
 ---
 
 ## Development

package/dist/cli.js

@@ -1,36 +1,94 @@
 #!/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 fs from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 
 // tokens.mjs
 import {
   argbFromHex,
-  themeFromSourceColor,
   hexFromArgb,
   MaterialDynamicColors,
-  SchemeContent,
+  SchemeTonalSpot,
   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 = "") {
+var DEFAULT_SOURCE_COLOR = "#1D5D78";
+var HEX_RE = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+var COLOR_ROLES = (
+  /** @type {const} */
+  [
+    "primary",
+    "onPrimary",
+    "primaryContainer",
+    "onPrimaryContainer",
+    "inversePrimary",
+    "primaryFixed",
+    "primaryFixedDim",
+    "onPrimaryFixed",
+    "onPrimaryFixedVariant",
+    "secondary",
+    "onSecondary",
+    "secondaryContainer",
+    "onSecondaryContainer",
+    "secondaryFixed",
+    "secondaryFixedDim",
+    "onSecondaryFixed",
+    "onSecondaryFixedVariant",
+    "tertiary",
+    "onTertiary",
+    "tertiaryContainer",
+    "onTertiaryContainer",
+    "tertiaryFixed",
+    "tertiaryFixedDim",
+    "onTertiaryFixed",
+    "onTertiaryFixedVariant",
+    "error",
+    "onError",
+    "errorContainer",
+    "onErrorContainer",
+    "surface",
+    "onSurface",
+    "surfaceVariant",
+    "onSurfaceVariant",
+    "surfaceDim",
+    "surfaceBright",
+    "surfaceContainerLowest",
+    "surfaceContainerLow",
+    "surfaceContainer",
+    "surfaceContainerHigh",
+    "surfaceContainerHighest",
+    "surfaceTint",
+    "inverseSurface",
+    "inverseOnSurface",
+    "outline",
+    "outlineVariant",
+    "shadow",
+    "scrim",
+    "background",
+    "onBackground"
+  ]
+);
+function resolveConfig({ sourceColor = DEFAULT_SOURCE_COLOR, scheme = "light" } = {}) {
+  if (typeof sourceColor !== "string" || !HEX_RE.test(sourceColor)) {
+    throw new TypeError(`sourceColor must be a hex color like "#6750A4", got ${JSON.stringify(sourceColor)}`);
+  }
+  if (scheme !== "light" && scheme !== "dark") {
+    throw new TypeError(`scheme must be "light" or "dark", got ${JSON.stringify(scheme)}`);
+  }
+  return { sourceColor, scheme: (
+    /** @type {ColorScheme} */
+    scheme
+  ) };
+}
+function setSchemeProperties(scheme, suffix = "") {
   let result = {};
-  for (const [key, value] of Object.entries(scheme2)) {
+  for (const [key, value] of Object.entries(scheme)) {
     const token = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
     const color = hexFromArgb(value);
     const converted = oklch(color);
@@ -40,20 +98,18 @@ function setSchemeProperties(scheme2, suffix = "") {
   }
   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",
+function generateTokens(config = {}) {
+  const { sourceColor, scheme } = resolveConfig(config);
+  const dynamicScheme = new SchemeTonalSpot(
+    Hct.fromInt(argbFromHex(sourceColor)),
+    scheme === "dark",
     0
   );
   let palette = {};
-  for (const [key, value] of Object.entries(materialColors)) {
-    palette[key] = value.getArgb(scheme2);
+  for (const role of COLOR_ROLES) {
+    palette[role] = MaterialDynamicColors[role].getArgb(dynamicScheme);
   }
-  const currentTheme = theme.schemes[config.scheme].toJSON();
-  const tokens = setSchemeProperties({ ...currentTheme, ...palette });
-  return tokens;
+  return setSchemeProperties(palette);
 }
 
 // create-theme-file.mjs
@@ -70,33 +126,32 @@ function normalizeCSSVariablesContent(variables = {}) {
   }
   return str;
 }
-function generateCSSFile(config = {}) {
-  const { scheme: scheme2 = "light", sourceColor: sourceColor2 = "#1D5D78", output: output2 } = config;
+async function generateCSSFile(config = {}) {
+  const { output: output2, ...tokenConfig } = 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 tokens = generateTokens(tokenConfig);
   const stringTokens = normalizeCSSVariablesContent(tokens);
   const themeBody = template(stringTokens);
-  fs.writeFile(outputPath, themeBody, (err) => {
-    if (err) {
-      console.error(err);
-    }
-  });
+  await fs.writeFile(outputPath, themeBody);
+  return outputPath;
 }
 
 // cli.mjs
 var { values } = parseArgs({
   options: {
-    sourceColor: { type: "string", short: "c", default: "#1D5D78" },
+    sourceColor: { type: "string", short: "c", default: DEFAULT_SOURCE_COLOR },
     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}"`);
+var { output } = values;
+try {
+  const { sourceColor, scheme } = resolveConfig(values);
+  const outputPath = await generateCSSFile({ sourceColor, scheme, output });
+  console.log(`Generated ${outputPath} (sourceColor: ${sourceColor}, scheme: ${scheme})`);
+} catch (err) {
+  console.error(`Error: ${err instanceof Error ? err.message : err}`);
   process.exit(1);
 }
-generateCSSFile({ sourceColor, scheme, output });
-console.log(`Generated ${output} (sourceColor: ${sourceColor}, scheme: ${scheme})`);