@pantoken/tailwind 0.1.0

package/README.md

@@ -0,0 +1,52 @@
+# @pantoken/tailwind
+
+A Tailwind CSS preset that maps Instructure design tokens into the theme. Every token is exposed as a
+`var(--instui-*)` reference — not a concrete value — so Tailwind utilities theme through the same CSS
+custom properties `@pantoken/css` emits, and light, dark, and high-contrast all keep working.
+
+## Install
+
+```sh
+npm i -D @pantoken/tailwind
+```
+
+Also available as `pantoken/tailwind`.
+
+## Usage
+
+```ts
+// tailwind.config.ts
+import { pantokenPreset } from "@pantoken/tailwind";
+
+export default {
+  presets: [pantokenPreset()],
+  content: ["./src/**/*.{ts,tsx}"],
+};
+```
+
+Then use utilities backed by the tokens:
+
+```html
+<div class="bg-color-background-base p-space-md font-lato">…</div>
+```
+
+Pair it with `@pantoken/css` (or `@pantoken/vite`) so the `--instui-*` custom properties are actually
+defined. Pass `pantokenPreset({ includePrimitives: true })` to also expose the raw palette under a
+`primitive-` prefix. `tailwindcss` is an optional peer dependency.
+
+## API
+
+- **`pantokenPreset(options?): TailwindPreset`** — builds the preset, contributing `colors`,
+  `spacing`, and `fontFamily` under `theme.extend`. `options.includePrimitives` adds the primitive
+  palette. Also the default export.
+- **`PantokenPresetOptions`** — options type.
+- **`TailwindPreset`** — the shape of the config slice this preset contributes.
+
+## Related
+
+- Pairs with `@pantoken/css` or `@pantoken/vite`, which define the `--instui-*` custom properties the
+  utilities reference.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,45 @@
+//#region src/index.d.ts
+/** A minimal shape for the slice of Tailwind config this preset contributes. */
+interface TailwindPreset {
+  theme: {
+    extend: {
+      colors: Record<string, string>;
+      spacing: Record<string, string>;
+      fontFamily: Record<string, string>;
+    };
+  };
+}
+/** Options for {@link pantokenPreset}. */
+interface PantokenPresetOptions {
+  /** Also expose the primitive colour palette under a `primitive-` prefix (default: false). */
+  includePrimitives?: boolean;
+}
+/**
+ * Build the pantoken Tailwind preset.
+ *
+ * @param options - {@link PantokenPresetOptions}.
+ * @returns A Tailwind preset contributing `colors`, `spacing`, and `fontFamily`.
+ *
+ * @example Register the preset in tailwind.config.ts
+ * ```ts
+ * import { pantokenPreset } from "@pantoken/tailwind";
+ *
+ * export default {
+ *   presets: [pantokenPreset()],
+ *   content: ["./src/**\/*.{ts,tsx}"],
+ * };
+ * // then use utilities like `bg-color-background-base p-space-md`
+ * ```
+ *
+ * @example Also expose the primitive palette under a primitive- prefix
+ * ```ts
+ * import { pantokenPreset } from "@pantoken/tailwind";
+ *
+ * export default {
+ *   presets: [pantokenPreset({ includePrimitives: true })],
+ * };
+ * ```
+ */
+declare function pantokenPreset(options?: PantokenPresetOptions): TailwindPreset;
+//#endregion
+export { PantokenPresetOptions, TailwindPreset, pantokenPreset as default, pantokenPreset };

package/dist/index.mjs

@@ -0,0 +1,69 @@
+import { tokens } from "@pantoken/tokens";
+//#region src/index.ts
+/**
+* `@pantoken/tailwind` — a Tailwind CSS preset that maps Instructure design tokens into the theme.
+*
+* Every token is exposed as a `var(--instui-*)` reference (not a concrete value), so Tailwind
+* utilities like `bg-color-background-base` theme through the same CSS custom properties that
+* `@pantoken/css` emits — light/dark and high-contrast all keep working.
+*
+* @module
+* @experimental
+*/
+function ref(name) {
+	return `var(${name})`;
+}
+function collect(source, prefix, keyFrom) {
+	const out = {};
+	for (const token of source) {
+		if (token.meta?.kind === "icon") continue;
+		if (!token.name.startsWith(prefix)) continue;
+		out[keyFrom(token.name)] = ref(token.name);
+	}
+	return out;
+}
+/**
+* Build the pantoken Tailwind preset.
+*
+* @param options - {@link PantokenPresetOptions}.
+* @returns A Tailwind preset contributing `colors`, `spacing`, and `fontFamily`.
+*
+* @example Register the preset in tailwind.config.ts
+* ```ts
+* import { pantokenPreset } from "@pantoken/tailwind";
+*
+* export default {
+*   presets: [pantokenPreset()],
+*   content: ["./src/**\/*.{ts,tsx}"],
+* };
+* // then use utilities like `bg-color-background-base p-space-md`
+* ```
+*
+* @example Also expose the primitive palette under a primitive- prefix
+* ```ts
+* import { pantokenPreset } from "@pantoken/tailwind";
+*
+* export default {
+*   presets: [pantokenPreset({ includePrimitives: true })],
+* };
+* ```
+*/
+function pantokenPreset(options = {}) {
+	const colors = collect(tokens, "--instui-color-", (n) => n.slice(15));
+	if (options.includePrimitives) {
+		for (const token of tokens) if (token.name.startsWith("--instui-primitive-color-")) colors[`primitive-${token.name.slice(25)}`] = ref(token.name);
+	}
+	const spacing = collect(tokens, "--instui-spacing-", (n) => n.slice(17));
+	const fontFamily = {};
+	for (const token of tokens) {
+		const idx = token.name.indexOf("font-family-");
+		if (idx !== -1) fontFamily[token.name.slice(idx + 12)] = ref(token.name);
+	}
+	return { theme: { extend: {
+		colors,
+		spacing,
+		fontFamily
+	} } };
+}
+//#endregion
+export { pantokenPreset as default, pantokenPreset };

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@pantoken/tailwind",
+  "version": "0.1.0",
+  "description": "Tailwind CSS preset that maps Instructure design tokens into the theme as var(--instui-*) references.",
+  "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"
+  },
+  "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"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "pantoken": {
+    "key": "tailwind",
+    "kind": "subpath"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check"
+  }
+}