@pantoken/email 0.1.0

package/README.md

@@ -0,0 +1,45 @@
+# @pantoken/email
+
+Instructure design tokens for HTML email. Email clients don't support CSS custom properties and
+often strip `<style>`, so tokens are fully resolved to concrete values for inline styling — colours
+as hex, dimensions with `px`. Icons are excluded.
+
+## Install
+
+```sh
+npm i @pantoken/email
+```
+
+Also available as `pantoken/email`.
+
+## Usage
+
+```ts
+import { emailTokens } from "@pantoken/email";
+
+const t = emailTokens("light");
+// <td style={`background:${t.colorBackgroundBrand};color:${t.colorTextOnColor}`}>
+```
+
+The maps are keyed by camelCased token name (the `--instui-` prefix dropped): `--instui-color-
+background-brand` becomes `colorBackgroundBrand`.
+
+## Output
+
+Plain `Record<string, string>` maps of concrete token values, ready to interpolate into inline
+`style` attributes. No files are written and there's no CLI target — you import the values.
+
+## API
+
+- **`emailTokens(mode?): Record<string, string>`** — the token map for a mode (`"light"` default,
+  or `"dark"`).
+- **`light`** — the concrete light-mode token map.
+- **`dark`** — the concrete dark-mode token map.
+
+## Related
+
+- Built on `@pantoken/tokens` (the vendored IR) and `@pantoken/utils` (`resolveTokens`, `camelCase`).
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,45 @@
+//#region src/index.d.ts
+type Mode = "light" | "dark";
+/**
+ * Concrete `light`-mode token values, for inline email styling.
+ *
+ * @example
+ * ```ts
+ * import { light } from "@pantoken/email";
+ *
+ * const bg = light.colorBackgroundBrand; // e.g. "#…"
+ * ```
+ */
+declare const light: Record<string, string>;
+/**
+ * Concrete `dark`-mode token values.
+ *
+ * @example
+ * ```ts
+ * import { dark } from "@pantoken/email";
+ *
+ * const bg = dark.colorBackgroundBrand;
+ * ```
+ */
+declare const dark: Record<string, string>;
+/**
+ * Select the token map for a mode (default `"light"`).
+ *
+ * @example Inline a token into an email cell (light mode)
+ * ```ts
+ * import { emailTokens } from "@pantoken/email";
+ *
+ * const t = emailTokens();
+ * const html = `<td style="background:${t.colorBackgroundBrand};color:${t.colorTextOnColor}">Hi</td>`;
+ * ```
+ *
+ * @example Dark mode
+ * ```ts
+ * import { emailTokens } from "@pantoken/email";
+ *
+ * const t = emailTokens("dark");
+ * ```
+ */
+declare function emailTokens(mode?: Mode): Record<string, string>;
+//#endregion
+export { dark, emailTokens, light };

package/dist/index.mjs

@@ -0,0 +1,67 @@
+import { tokens } from "@pantoken/tokens";
+import { camelCase, resolveTokens } from "@pantoken/utils";
+//#region src/index.ts
+/**
+* `@pantoken/email` — Instructure design tokens for HTML email.
+*
+* Email clients don't support CSS custom properties and often strip `<style>`, so tokens are fully
+* resolved to concrete values for inline styling. Colours are hex; dimensions keep their `px` units.
+* Icons are excluded. `light`/`dark` maps are keyed by camelCased token name.
+*
+* @module
+* @experimental
+*/
+function build(mode) {
+	const resolved = resolveTokens(tokens, { mode });
+	const out = {};
+	for (const token of tokens) {
+		if (token.meta?.kind === "icon") continue;
+		out[camelCase(token.name.replace(/^--instui-/, ""))] = resolved.get(token.name) ?? token.value;
+	}
+	return out;
+}
+/**
+* Concrete `light`-mode token values, for inline email styling.
+*
+* @example
+* ```ts
+* import { light } from "@pantoken/email";
+*
+* const bg = light.colorBackgroundBrand; // e.g. "#…"
+* ```
+*/
+const light = build("light");
+/**
+* Concrete `dark`-mode token values.
+*
+* @example
+* ```ts
+* import { dark } from "@pantoken/email";
+*
+* const bg = dark.colorBackgroundBrand;
+* ```
+*/
+const dark = build("dark");
+/**
+* Select the token map for a mode (default `"light"`).
+*
+* @example Inline a token into an email cell (light mode)
+* ```ts
+* import { emailTokens } from "@pantoken/email";
+*
+* const t = emailTokens();
+* const html = `<td style="background:${t.colorBackgroundBrand};color:${t.colorTextOnColor}">Hi</td>`;
+* ```
+*
+* @example Dark mode
+* ```ts
+* import { emailTokens } from "@pantoken/email";
+*
+* const t = emailTokens("dark");
+* ```
+*/
+function emailTokens(mode = "light") {
+	return mode === "dark" ? dark : light;
+}
+//#endregion
+export { dark, emailTokens, light };

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@pantoken/email",
+  "version": "0.1.0",
+  "description": "Instructure design tokens for HTML email: concrete, inline-friendly token values (no CSS vars).",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pantoken/model": "0.1.0",
+    "@pantoken/tokens": "0.1.0",
+    "@pantoken/utils": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "typescript": "^6.0.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
+    "vite-plus": "0.2.4"
+  },
+  "pantoken": {
+    "key": "email",
+    "kind": "subpath"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check"
+  }
+}