@penpair/marwes-ui 0.0.0-stage → 0.1.2

package/dist/tokens.js

@@ -0,0 +1,183 @@
+import { createHash } from "node:crypto";
+export const coreSetName = "Marwes · Core";
+export const darkSetName = "Marwes · Dark";
+export const themeGroup = "Mode";
+const hex = (value) => Math.round(value).toString(16).padStart(2, "0").toUpperCase();
+/** Penpot colour tokens are hex; Marwes also uses rgba() and the word transparent. */
+export function toHexColor(value) {
+    if (value === "transparent")
+        return "#00000000";
+    const rgba = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/.exec(value);
+    if (rgba) {
+        const alpha = rgba[4] === undefined ? 1 : Number(rgba[4]);
+        return `#${hex(Number(rgba[1]))}${hex(Number(rgba[2]))}${hex(Number(rgba[3]))}${alpha < 1 ? hex(alpha * 255) : ""}`;
+    }
+    if (/^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(value))
+        return value.toUpperCase();
+    throw new Error(`Unsupported colour value: ${value}`);
+}
+const px = (value) => {
+    const match = /^(-?[\d.]+)px$/.exec(value);
+    if (!match)
+        throw new Error(`Expected a px value, got ${value}`);
+    return String(Number(match[1]));
+};
+const firstFamily = (stack) => stack
+    .split(",")[0]
+    .trim()
+    .replace(/^['"]|['"]$/g, "");
+const typographyKeys = {
+    "font-size": "fontSize",
+    "line-height": "lineHeight",
+    "font-weight": "fontWeight",
+    "letter-spacing": "letterSpacing",
+    transform: "textCase",
+};
+function typographyTokens(vars, fontFamily, describe) {
+    const variants = new Map();
+    for (const [variable, value] of Object.entries(vars)) {
+        const match = /^--mw-typography-(.+)-(font-size|line-height|font-weight|letter-spacing|transform)$/.exec(variable);
+        if (!match)
+            continue;
+        const entry = variants.get(match[1]) ?? { fontFamilies: fontFamily };
+        const key = typographyKeys[match[2]];
+        if (match[2] === "transform") {
+            if (value !== "none")
+                entry[key] = value;
+        }
+        else
+            entry[key] = match[2] === "line-height" || match[2] === "font-weight" ? value : px(value);
+        variants.set(match[1], entry);
+    }
+    return [...variants.entries()]
+        .sort(([left], [right]) => left.localeCompare(right))
+        .map(([variant, value]) => ({
+        name: `mw-typography-${variant}`,
+        type: "typography",
+        // The paragraph variants in Marwes define only size and line height; weight and spacing fall back to the normal values, as a browser does.
+        value: { fontWeight: "400", letterSpacing: "0", ...value },
+        description: describe(`--mw-typography-${variant}-*`),
+    }));
+}
+const byName = (left, right) => left.name.localeCompare(right.name);
+/** Every token a resolved theme provides (everything but the spacing scale, which is not part of a theme). */
+export function tokensFromVars(vars, describe) {
+    const colors = Object.entries(vars)
+        .filter(([variable]) => variable.startsWith("--mw-color-"))
+        .map(([variable, value]) => ({ name: variable.slice(2), type: "color", value: toHexColor(value), description: describe(variable) }))
+        .sort(byName);
+    const density = Object.entries(vars)
+        .filter(([variable, value]) => variable.startsWith("--mw-density-") && value.endsWith("px"))
+        .map(([variable, value]) => ({ name: variable.slice(2), type: "sizing", value: px(value), description: describe(variable) }))
+        .sort(byName);
+    const radii = ["--mw-ui-radius", "--mw-ui-radius-button"]
+        .filter((variable) => vars[variable] !== undefined)
+        .map((variable) => ({ name: variable.slice(2), type: "borderRadius", value: px(vars[variable]), description: describe(variable) }));
+    const fonts = ["--mw-font-primary", "--mw-font-secondary", "--mw-font-mono"]
+        .filter((variable) => vars[variable] !== undefined)
+        .map((variable) => ({ name: variable.slice(2), type: "fontFamilies", value: firstFamily(vars[variable]), description: describe(variable) }));
+    const primary = vars["--mw-font-primary"];
+    const typography = primary === undefined ? [] : typographyTokens(vars, firstFamily(primary), describe);
+    return [...colors, ...density, ...radii, ...fonts, ...typography];
+}
+/** The tokens of `of` that `base` does not already provide with the same value: what is left to say on top of it. */
+export function tokensAbove(base, of) {
+    const known = new Map(base.map((token) => [token.name, canonical(token.value)]));
+    return of.filter((token) => known.get(token.name) !== canonical(token.value));
+}
+/** JSON with sorted keys, so the same data always gives the same text. */
+export function canonical(value) {
+    const sort = (input) => {
+        if (Array.isArray(input))
+            return input.map(sort);
+        if (typeof input === "object" && input !== null)
+            return Object.fromEntries(Object.entries(input).sort(([a], [b]) => a.localeCompare(b)).map(([k, v]) => [k, sort(v)]));
+        return input;
+    };
+    return JSON.stringify(sort(value));
+}
+const typographyVariable = /^--mw-typography-(.+)-(font-size|line-height|font-weight|letter-spacing|transform)$/;
+/** Whether a Marwes variable becomes a token (see tokensFromVars). Everything else is reported, never silently dropped. */
+export function isMapped(variable, value) {
+    if (variable.startsWith("--mw-color-"))
+        return true;
+    if (variable.startsWith("--mw-density-"))
+        return value.endsWith("px");
+    if (variable === "--mw-ui-radius" || variable === "--mw-ui-radius-button")
+        return true;
+    if (variable === "--mw-font-primary" || variable === "--mw-font-secondary" || variable === "--mw-font-mono")
+        return true;
+    return typographyVariable.test(variable);
+}
+export function unmappedVariables(...themes) {
+    const found = new Set();
+    for (const vars of themes)
+        for (const [variable, value] of Object.entries(vars))
+            if (!isMapped(variable, value))
+                found.add(variable);
+    return [...found].sort();
+}
+const hashOf = (parts) => createHash("sha256").update(canonical(parts)).digest("hex");
+/**
+ * The Penpot token sets for Marwes and for the project, generated from the installed Marwes. Light values live in the core set,
+ * only what differs in dark goes in the dark set, and what the project's own theme changes goes in small overlay sets above them,
+ * so a Marwes update changes the Marwes sets and never silently loses the project's choices.
+ */
+export function buildSnapshot(input) {
+    const { core, version, name } = input;
+    const mode = (which, theme) => core.themeToCSSVars(core.resolveThemeInput(theme ?? { mode: which }));
+    const marwes = (variable) => `${variable} (Marwes ${version})`;
+    const marwesDark = (variable) => `${variable} in dark mode (Marwes ${version})`;
+    const overlay = (which) => (variable) => `${variable}, ${name} ${which} theme (Marwes ${version})`;
+    const lightDefaults = mode("light");
+    const darkDefaults = mode("dark");
+    const lightBase = tokensFromVars(lightDefaults, marwes);
+    const darkBase = tokensFromVars(darkDefaults, marwesDark);
+    const spacing = Object.values(core.mwThemeVars.spacing)
+        .map((reference) => /var\((--mw-spacing-sp-(\d+))\)/.exec(reference))
+        .filter((match) => match !== null)
+        .map((match) => ({ name: match[1].slice(2), type: "spacing", value: match[2], description: marwes(match[1]) }))
+        .sort((left, right) => Number(left.value) - Number(right.value));
+    const unmapped = unmappedVariables(lightDefaults, darkDefaults);
+    const sets = [
+        { name: coreSetName, tokens: [...lightBase, ...spacing] },
+        { name: darkSetName, tokens: tokensAbove(lightBase, darkBase) },
+    ];
+    const lightSets = [coreSetName];
+    const darkSets = [coreSetName, darkSetName];
+    if (input.project?.light) {
+        const tokens = tokensAbove(lightBase, tokensFromVars(mode("light", input.project.light), overlay("light")));
+        if (tokens.length > 0) {
+            sets.push({ name: `${name} · Light`, tokens });
+            lightSets.push(`${name} · Light`);
+        }
+    }
+    if (input.project?.dark) {
+        const tokens = tokensAbove(darkBase, tokensFromVars(mode("dark", input.project.dark), overlay("dark")));
+        if (tokens.length > 0) {
+            sets.push({ name: `${name} · Dark`, tokens });
+            darkSets.push(`${name} · Dark`);
+        }
+    }
+    const themes = [
+        { group: themeGroup, name: "Light", sets: lightSets },
+        { group: themeGroup, name: "Dark", sets: darkSets },
+    ];
+    return { schemaVersion: 1, marwesVersion: version, generatedBy: input.generatedBy, project: name, hash: hashOf({ marwesVersion: version, project: name, sets, themes, unmapped }), unmapped, sets, themes };
+}
+/** The value of a token as it compares in Penpot: strings are exact, typography is normalised the way Penpot stores it. */
+export function normalizeValue(type, value) {
+    if (type === "typography" && typeof value === "object" && value !== null) {
+        const entry = {};
+        for (const [key, raw] of Object.entries(value)) {
+            if (key === "fontFamilies" || key === "fontFamily")
+                entry.fontFamily = (Array.isArray(raw) ? raw : [raw]).map(String).join(",");
+            else
+                entry[key] = String(raw);
+        }
+        return canonical(entry);
+    }
+    if (type === "color" && typeof value === "string" && /^#[0-9a-f]+$/i.test(value))
+        return value.toUpperCase();
+    return typeof value === "string" ? value : canonical(value);
+}

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@penpair/marwes-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.2",
+  "description": "The Marwes UI adapter for penpair: Marwes tokens (and your own theme) in your Penpot file, with drift checks against the installed Marwes: snapshot, check, diff, push.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/niklas-westman/penpair.git",
+    "directory": "packages/marwes-ui"
+  },
+  "homepage": "https://github.com/niklas-westman/penpair#readme",
+  "bugs": {
+    "url": "https://github.com/niklas-westman/penpair/issues"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "keywords": [
+    "penpot",
+    "marwes",
+    "design-tokens",
+    "design-systems",
+    "mcp",
+    "ai-agents"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "jiti": "^2.4.2",
+    "@penpair/core": "0.1.2"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  }
 }