@symblight/md-colors 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,22 +1,81 @@
 // 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
-};
+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(scheme)) {
@@ -29,25 +88,23 @@ function setSchemeProperties(scheme, suffix = "") {
   }
   return result;
 }
-function generateTokens(config = { scheme: "light", sourceColor: "#1D5D78" }) {
-  const theme = themeFromSourceColor(argbFromHex(config.sourceColor), []);
-  const scheme = 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(scheme);
+  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
 import path from "node:path";
-import fs from "node:fs";
+import fs from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 function template(variables) {
   return `:root {
@@ -62,21 +119,19 @@ function normalizeCSSVariablesContent(variables = {}) {
   }
   return str;
 }
-function generateCSSFile(config = {}) {
-  const { scheme = "light", sourceColor = "#1D5D78", output } = config;
+async function generateCSSFile(config = {}) {
+  const { output, ...tokenConfig } = config;
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
   const outputPath = output ? path.resolve(output) : path.join(__dirname, "colors.css");
-  const tokens = generateTokens({ scheme, sourceColor });
+  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;
 }
 export {
+  DEFAULT_SOURCE_COLOR,
   generateCSSFile,
   generateTokens,
   setSchemeProperties

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../tokens.mjs", "../create-theme-file.mjs"],
-  "sourcesContent": ["import {\n  argbFromHex,\n  themeFromSourceColor,\n  hexFromArgb,\n  MaterialDynamicColors,\n  SchemeContent,\n  Hct,\n} from \"@material/material-color-utilities\";\nimport { converter, formatCss } from \"culori\";\n\nlet oklch = converter(\"oklch\");\n\nconst materialColors = {\n  \"surface-container-highest\": MaterialDynamicColors.surfaceContainerHighest,\n  \"surface-container-high\": MaterialDynamicColors.surfaceContainerHigh,\n  \"surface-dim\": MaterialDynamicColors.surfaceDim,\n  \"surface-bright\": MaterialDynamicColors.surfaceBright,\n  \"surface-container-lowest\": MaterialDynamicColors.surfaceContainerLowest,\n  \"surface-container-low\": MaterialDynamicColors.surfaceContainerLow,\n};\n\n/**\n * Converts a Material color scheme object into a map of CSS custom property\n * names to oklch color values.\n *\n * Each camelCase key is converted to kebab-case and prefixed with\n * `--md-sys-color-`. An optional suffix can be appended to the variable name.\n *\n * @param {Record<string, number>} scheme - Map of token names to ARGB integers.\n * @param {string} [suffix=\"\"] - Optional suffix appended to every variable name.\n * @returns {Record<string, string>} Map of CSS variable names to oklch strings.\n *\n * @example\n * const vars = setSchemeProperties({ primary: 0xff1d5d78 });\n * // { \"--md-sys-color-primary\": \"oklch(\u2026)\" }\n */\nexport function setSchemeProperties(scheme, suffix = \"\") {\n  let result = {};\n  for (const [key, value] of Object.entries(scheme)) {\n    const token = key.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n    const color = hexFromArgb(value);\n    const converted = oklch(color);\n    const name = formatCss(converted);\n    const variableName = `--md-sys-color-${token}${suffix}`;\n    result[variableName] = name;\n  }\n\n  return result;\n}\n\n/**\n * Generates a full set of Material Design 3 color tokens for a given source\n * color and color scheme.\n *\n * Tokens cover the standard MD3 scheme palette plus additional surface\n * container roles provided by {@link MaterialDynamicColors}. All color values\n * are expressed as oklch CSS strings so they can be used directly in\n * `var(--md-sys-color-*)` declarations.\n *\n * @param {{ scheme?: \"light\" | \"dark\", sourceColor?: string }} [config]\n * @param {string} [config.sourceColor=\"#1D5D78\"] - Seed color as a hex string (e.g. `\"#6750A4\"`).\n * @param {\"light\" | \"dark\"} [config.scheme=\"light\"] - Color scheme variant.\n * @returns {Record<string, string>} Map of CSS variable names to oklch color strings.\n *\n * @example\n * const tokens = generateTokens({ sourceColor: \"#6750A4\", scheme: \"dark\" });\n * // { \"--md-sys-color-primary\": \"oklch(\u2026)\", \u2026 }\n */\nexport function generateTokens(config = { scheme: \"light\", sourceColor: \"#1D5D78\" }) {\n  const theme = themeFromSourceColor(argbFromHex(config.sourceColor), []);\n\n  const scheme = new SchemeContent(\n    Hct.fromInt(argbFromHex(config.sourceColor)),\n    config.scheme === \"dark\",\n    0\n  );\n  let palette = {};\n  for (const [key, value] of Object.entries(materialColors)) {\n    palette[key] = value.getArgb(scheme);\n  }\n  const currentTheme = theme.schemes[config.scheme].toJSON();\n  const tokens = setSchemeProperties({ ...currentTheme, ...palette });\n\n  return tokens;\n}\n", "import path from \"node:path\";\nimport fs from \"node:fs\";\nimport { fileURLToPath } from \"node:url\";\n\nimport * as tokensUtils from \"./tokens.mjs\";\n\n/**\n * @param {Record<string, string>} variables\n * @returns {string}\n */\nfunction template(variables) {\n  return `:root {\n          ${variables}\n    }`;\n}\n\n/**\n * @param {Record<string, string>} variables\n * @returns {string}\n */\nfunction normalizeCSSVariablesContent(variables = {}) {\n  let str = \"\";\n  for (const cssVar in variables) {\n    str += `${cssVar}: ${variables[cssVar]};\\n`;\n  }\n  return str;\n}\n\n/**\n * Generates a `colors.css` file containing `:root`-scoped MD3 color tokens\n * derived from the given source color and scheme.\n *\n * @param {{ scheme?: \"light\" | \"dark\", sourceColor?: string, output?: string }} [config]\n * @param {string} [config.sourceColor=\"#1D5D78\"] - Seed color as a hex string.\n * @param {\"light\" | \"dark\"} [config.scheme=\"light\"] - Color scheme variant.\n * @param {string} [config.output] - Absolute or relative output path for the CSS file.\n *   Defaults to `colors.css` next to this module.\n * @returns {void}\n *\n * @example\n * import { generateCSSFile } from \"@symblight/md-colors\";\n * generateCSSFile({ sourceColor: \"#6750A4\", scheme: \"dark\", output: \"./theme/colors.css\" });\n */\nexport function generateCSSFile(config = {}) {\n  const { scheme = \"light\", sourceColor = \"#1D5D78\", output } = config;\n\n  const __filename = fileURLToPath(import.meta.url);\n  const __dirname = path.dirname(__filename);\n  const outputPath = output\n    ? path.resolve(output)\n    : path.join(__dirname, \"colors.css\");\n\n  const tokens = tokensUtils.generateTokens({ scheme, sourceColor });\n  const stringTokens = normalizeCSSVariablesContent(tokens);\n  const themeBody = template(stringTokens);\n\n  fs.writeFile(outputPath, themeBody, (err) => {\n    if (err) {\n      console.error(err);\n    }\n  });\n}\n"],
-  "mappings": ";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,iBAAiB;AAErC,IAAI,QAAQ,UAAU,OAAO;AAE7B,IAAM,iBAAiB;AAAA,EACrB,6BAA6B,sBAAsB;AAAA,EACnD,0BAA0B,sBAAsB;AAAA,EAChD,eAAe,sBAAsB;AAAA,EACrC,kBAAkB,sBAAsB;AAAA,EACxC,4BAA4B,sBAAsB;AAAA,EAClD,yBAAyB,sBAAsB;AACjD;AAiBO,SAAS,oBAAoB,QAAQ,SAAS,IAAI;AACvD,MAAI,SAAS,CAAC;AACd,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,GAAG;AACjD,UAAM,QAAQ,IAAI,QAAQ,mBAAmB,OAAO,EAAE,YAAY;AAClE,UAAM,QAAQ,YAAY,KAAK;AAC/B,UAAM,YAAY,MAAM,KAAK;AAC7B,UAAM,OAAO,UAAU,SAAS;AAChC,UAAM,eAAe,kBAAkB,KAAK,GAAG,MAAM;AACrD,WAAO,YAAY,IAAI;AAAA,EACzB;AAEA,SAAO;AACT;AAoBO,SAAS,eAAe,SAAS,EAAE,QAAQ,SAAS,aAAa,UAAU,GAAG;AACnF,QAAM,QAAQ,qBAAqB,YAAY,OAAO,WAAW,GAAG,CAAC,CAAC;AAEtE,QAAM,SAAS,IAAI;AAAA,IACjB,IAAI,QAAQ,YAAY,OAAO,WAAW,CAAC;AAAA,IAC3C,OAAO,WAAW;AAAA,IAClB;AAAA,EACF;AACA,MAAI,UAAU,CAAC;AACf,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,cAAc,GAAG;AACzD,YAAQ,GAAG,IAAI,MAAM,QAAQ,MAAM;AAAA,EACrC;AACA,QAAM,eAAe,MAAM,QAAQ,OAAO,MAAM,EAAE,OAAO;AACzD,QAAM,SAAS,oBAAoB,EAAE,GAAG,cAAc,GAAG,QAAQ,CAAC;AAElE,SAAO;AACT;;;ACpFA,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,SAAS,qBAAqB;AAQ9B,SAAS,SAAS,WAAW;AAC3B,SAAO;AAAA,YACG,SAAS;AAAA;AAErB;AAMA,SAAS,6BAA6B,YAAY,CAAC,GAAG;AACpD,MAAI,MAAM;AACV,aAAW,UAAU,WAAW;AAC9B,WAAO,GAAG,MAAM,KAAK,UAAU,MAAM,CAAC;AAAA;AAAA,EACxC;AACA,SAAO;AACT;AAiBO,SAAS,gBAAgB,SAAS,CAAC,GAAG;AAC3C,QAAM,EAAE,SAAS,SAAS,cAAc,WAAW,OAAO,IAAI;AAE9D,QAAM,aAAa,cAAc,YAAY,GAAG;AAChD,QAAM,YAAY,KAAK,QAAQ,UAAU;AACzC,QAAM,aAAa,SACf,KAAK,QAAQ,MAAM,IACnB,KAAK,KAAK,WAAW,YAAY;AAErC,QAAM,SAAqB,eAAe,EAAE,QAAQ,YAAY,CAAC;AACjE,QAAM,eAAe,6BAA6B,MAAM;AACxD,QAAM,YAAY,SAAS,YAAY;AAEvC,KAAG,UAAU,YAAY,WAAW,CAAC,QAAQ;AAC3C,QAAI,KAAK;AACP,cAAQ,MAAM,GAAG;AAAA,IACnB;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import {\n  argbFromHex,\n  hexFromArgb,\n  MaterialDynamicColors,\n  SchemeTonalSpot,\n  Hct,\n} from \"@material/material-color-utilities\";\nimport { converter, formatCss } from \"culori\";\n\n/**\n * Color scheme variant.\n * @typedef {\"light\" | \"dark\"} ColorScheme\n */\n\n/**\n * Options for {@link generateTokens}.\n * @typedef {object} TokenConfig\n * @property {string} sourceColor - Seed color as a hex string (e.g. `\"#6750A4\"`).\n * @property {ColorScheme} scheme - Color scheme variant.\n */\n\n/**\n * Map of `--md-sys-color-*` CSS custom property names to oklch color strings.\n * @typedef {Record<string, string>} ColorTokens\n */\n\n/**\n * Converts an sRGB hex string to a culori oklch color object.\n * @type {(color: string) => { mode: \"oklch\", l: number, c: number, h?: number, alpha?: number } | undefined}\n */\nlet oklch = converter(\"oklch\");\n\n/** Seed color used when none is given. */\nexport const DEFAULT_SOURCE_COLOR = \"#1D5D78\";\n\n/** Matches `#rgb` and `#rrggbb` hex colors. */\nconst HEX_RE = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;\n\n/**\n * MD3 color roles emitted as tokens, in output order. Names match the static\n * members of {@link MaterialDynamicColors} and are kebab-cased into\n * `--md-sys-color-*` names. `background`, `onBackground` and `surfaceVariant`\n * are deprecated in M3 but kept for compatibility.\n *\n * @see https://m3.material.io/styles/color/roles\n */\nconst COLOR_ROLES = /** @type {const} */ ([\n  \"primary\",\n  \"onPrimary\",\n  \"primaryContainer\",\n  \"onPrimaryContainer\",\n  \"inversePrimary\",\n  \"primaryFixed\",\n  \"primaryFixedDim\",\n  \"onPrimaryFixed\",\n  \"onPrimaryFixedVariant\",\n  \"secondary\",\n  \"onSecondary\",\n  \"secondaryContainer\",\n  \"onSecondaryContainer\",\n  \"secondaryFixed\",\n  \"secondaryFixedDim\",\n  \"onSecondaryFixed\",\n  \"onSecondaryFixedVariant\",\n  \"tertiary\",\n  \"onTertiary\",\n  \"tertiaryContainer\",\n  \"onTertiaryContainer\",\n  \"tertiaryFixed\",\n  \"tertiaryFixedDim\",\n  \"onTertiaryFixed\",\n  \"onTertiaryFixedVariant\",\n  \"error\",\n  \"onError\",\n  \"errorContainer\",\n  \"onErrorContainer\",\n  \"surface\",\n  \"onSurface\",\n  \"surfaceVariant\",\n  \"onSurfaceVariant\",\n  \"surfaceDim\",\n  \"surfaceBright\",\n  \"surfaceContainerLowest\",\n  \"surfaceContainerLow\",\n  \"surfaceContainer\",\n  \"surfaceContainerHigh\",\n  \"surfaceContainerHighest\",\n  \"surfaceTint\",\n  \"inverseSurface\",\n  \"inverseOnSurface\",\n  \"outline\",\n  \"outlineVariant\",\n  \"shadow\",\n  \"scrim\",\n  \"background\",\n  \"onBackground\",\n]);\n\n/**\n * Validates and normalizes a partial token config, filling in defaults per\n * field. Accepts unchecked strings (e.g. CLI input).\n *\n * @param {{ sourceColor?: string, scheme?: string }} [config]\n * @returns {TokenConfig}\n * @throws {TypeError} If `sourceColor` is not a hex color or `scheme` is not `\"light\"` / `\"dark\"`.\n */\nexport function resolveConfig({ sourceColor = DEFAULT_SOURCE_COLOR, scheme = \"light\" } = {}) {\n  if (typeof sourceColor !== \"string\" || !HEX_RE.test(sourceColor)) {\n    throw new TypeError(`sourceColor must be a hex color like \"#6750A4\", got ${JSON.stringify(sourceColor)}`);\n  }\n  if (scheme !== \"light\" && scheme !== \"dark\") {\n    throw new TypeError(`scheme must be \"light\" or \"dark\", got ${JSON.stringify(scheme)}`);\n  }\n  return { sourceColor, scheme: /** @type {ColorScheme} */ (scheme) };\n}\n\n/**\n * Converts a Material color scheme object into a map of CSS custom property\n * names to oklch color values.\n *\n * Each camelCase key is converted to kebab-case and prefixed with\n * `--md-sys-color-`. An optional suffix can be appended to the variable name.\n *\n * @param {Record<string, number>} scheme - Map of token names to ARGB integers.\n * @param {string} [suffix=\"\"] - Optional suffix appended to every variable name.\n * @returns {ColorTokens} Map of CSS variable names to oklch strings.\n *\n * @example\n * const vars = setSchemeProperties({ primary: 0xff1d5d78 });\n * // { \"--md-sys-color-primary\": \"oklch(\u2026)\" }\n */\nexport function setSchemeProperties(scheme, suffix = \"\") {\n  /** @type {ColorTokens} */\n  let result = {};\n  for (const [key, value] of Object.entries(scheme)) {\n    const token = key.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n    const color = hexFromArgb(value);\n    const converted = oklch(color);\n    const name = formatCss(converted);\n    const variableName = `--md-sys-color-${token}${suffix}`;\n    result[variableName] = name;\n  }\n\n  return result;\n}\n\n/**\n * Generates the full set of Material Design 3 color tokens for a given source\n * color and color scheme.\n *\n * Every role is resolved from a single tonal-spot {@link SchemeTonalSpot}\n * (the M3 default variant), so surface tones keep their spec ordering. All\n * color values are expressed as oklch CSS strings so they can be used directly\n * in `var(--md-sys-color-*)` declarations.\n *\n * @param {Partial<TokenConfig>} [config] - Missing fields default to\n *   `sourceColor: \"#1D5D78\"` and `scheme: \"light\"`.\n * @returns {ColorTokens} Map of CSS variable names to oklch color strings.\n * @throws {TypeError} If `sourceColor` is not a hex color or `scheme` is not `\"light\"` / `\"dark\"`.\n *\n * @example\n * const tokens = generateTokens({ sourceColor: \"#6750A4\", scheme: \"dark\" });\n * // { \"--md-sys-color-primary\": \"oklch(\u2026)\", \u2026 }\n */\nexport function generateTokens(config = {}) {\n  const { sourceColor, scheme } = resolveConfig(config);\n  const dynamicScheme = new SchemeTonalSpot(\n    Hct.fromInt(argbFromHex(sourceColor)),\n    scheme === \"dark\",\n    0\n  );\n\n  /** @type {Record<string, number>} */\n  let palette = {};\n  for (const role of COLOR_ROLES) {\n    palette[role] = MaterialDynamicColors[role].getArgb(dynamicScheme);\n  }\n\n  return setSchemeProperties(palette);\n}\n", "import path from \"node:path\";\nimport fs from \"node:fs/promises\";\nimport { fileURLToPath } from \"node:url\";\n\nimport * as tokensUtils from \"./tokens.mjs\";\n\n/** @typedef {import(\"./tokens.mjs\").ColorScheme} ColorScheme */\n/** @typedef {import(\"./tokens.mjs\").ColorTokens} ColorTokens */\n\n/**\n * Options for {@link generateCSSFile}.\n * @typedef {object} CSSFileConfig\n * @property {string} [sourceColor=\"#1D5D78\"] - Seed color as a hex string.\n * @property {ColorScheme} [scheme=\"light\"] - Color scheme variant.\n * @property {string} [output] - Absolute or relative output path for the CSS file.\n *   Relative paths resolve against `process.cwd()`. Defaults to `colors.css`\n *   next to this module.\n */\n\n/**\n * Wraps serialized declarations in a `:root` rule.\n *\n * @param {string} variables - Declarations produced by {@link normalizeCSSVariablesContent}.\n * @returns {string} A complete `:root { \u2026 }` rule.\n */\nfunction template(variables) {\n  return `:root {\n          ${variables}\n    }`;\n}\n\n/**\n * Serializes a token map into newline-separated CSS declarations.\n *\n * @param {ColorTokens} [variables={}] - Map of CSS variable names to values.\n * @returns {string} One `name: value;` declaration per line.\n *\n * @example\n * normalizeCSSVariablesContent({ \"--md-sys-color-primary\": \"oklch(\u2026)\" });\n * // \"--md-sys-color-primary: oklch(\u2026);\\n\"\n */\nfunction normalizeCSSVariablesContent(variables = {}) {\n  let str = \"\";\n  for (const cssVar in variables) {\n    str += `${cssVar}: ${variables[cssVar]};\\n`;\n  }\n  return str;\n}\n\n/**\n * Generates a `colors.css` file containing `:root`-scoped MD3 color tokens\n * derived from the given source color and scheme.\n *\n * @param {CSSFileConfig} [config]\n * @returns {Promise<string>} Resolves with the absolute path of the written file.\n * @throws {TypeError} If `sourceColor` is not a hex color or `scheme` is not `\"light\"` / `\"dark\"`.\n *   Rejects if the file cannot be written.\n *\n * @example\n * import { generateCSSFile } from \"@symblight/md-colors\";\n * await generateCSSFile({ sourceColor: \"#6750A4\", scheme: \"dark\", output: \"./theme/colors.css\" });\n */\nexport async function generateCSSFile(config = {}) {\n  const { output, ...tokenConfig } = config;\n\n  const __filename = fileURLToPath(import.meta.url);\n  const __dirname = path.dirname(__filename);\n  const outputPath = output\n    ? path.resolve(output)\n    : path.join(__dirname, \"colors.css\");\n\n  const tokens = tokensUtils.generateTokens(tokenConfig);\n  const stringTokens = normalizeCSSVariablesContent(tokens);\n  const themeBody = template(stringTokens);\n\n  await fs.writeFile(outputPath, themeBody);\n  return outputPath;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@symblight/md-colors",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Material Design 3 color token generator — CSS custom property output in oklch format",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",
+  "unpkg": "./dist/client.js",
   "bin": {
     "md-colors": "./dist/cli.js"
   },
@@ -14,8 +15,9 @@
     },
     "./client": {
       "import": "./dist/client.esm.js",
-      "default": "./dist/client.js"
-    }
+      "require": "./dist/client.cjs"
+    },
+    "./client.iife": "./dist/client.js"
   },
   "files": [
     "dist",