@symblight/md-colors 0.1.0

package/dist/index.js

@@ -0,0 +1,51 @@
+// 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(scheme, suffix = "") {
+  let result = {};
+  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);
+    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 scheme = 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(scheme);
+  }
+  const currentTheme = theme.schemes[config.scheme].toJSON();
+  const tokens = setSchemeProperties({ ...currentTheme, ...palette });
+  return tokens;
+}
+export {
+  generateTokens,
+  setSchemeProperties
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../tokens.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"],
+  "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;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@symblight/md-colors",
+  "version": "0.1.0",
+  "description": "Material Design 3 color token generator — CSS custom property output in oklch format",
+  "type": "module",
+  "private": false,
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    },
+    "./client": {
+      "import": "./dist/client.esm.js",
+      "default": "./dist/client.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node build.mjs",
+    "generate-theme": "node create-theme-file.mjs",
+    "prepublishOnly": "npm run build",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
+  },
+  "jest": {
+    "testEnvironment": "node",
+    "transform": {}
+  },
+  "keywords": [
+    "material-design",
+    "material-design-3",
+    "md3",
+    "color-tokens",
+    "css-variables",
+    "oklch",
+    "design-system"
+  ],
+  "author": "Aleksei Tkachenko <leshtkachenko@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@material/material-color-utilities": "^0.3.0",
+    "culori": "^4.0.2"
+  },
+  "devDependencies": {
+    "esbuild": "^0.27.4",
+    "jest": "^30.3.0"
+  }
+}