@pantoken/mintlify 0.1.0

package/README.md

@@ -0,0 +1,38 @@
+# @pantoken/mintlify
+
+Theme a [Mintlify](https://mintlify.com) docs site with Instructure tokens. Mintlify reads concrete
+hex from its `docs.json` at build, so this renderer resolves the tokens to per-mode values (like the
+MUI renderer) rather than shipping a CSS-variable bridge.
+
+## What it maps
+
+| Mintlify `docs.json` key | Instructure token                                                   | Notes                     |
+| ------------------------ | ------------------------------------------------------------------- | ------------------------- |
+| `colors.primary`         | `--instui-color-background-brand` (light)                           | Emphasis in light mode.   |
+| `colors.light`           | `--instui-color-background-brand` (dark)                            | Emphasis in dark mode.    |
+| `colors.dark`            | `--instui-color-background-interactive-action-primary-base` (light) | Buttons and hover states. |
+| `background.color.light` | `--instui-color-background-page` (light)                            | Page surface, light mode. |
+| `background.color.dark`  | `--instui-color-background-page` (dark)                             | Page surface, dark mode.  |
+
+## Usage
+
+Import the ready-made `rebrand` fragment and merge it into your `docs.json`:
+
+```ts
+import { docsJson } from "@pantoken/mintlify";
+// { colors: { primary, light, dark }, background: { color: { light, dark } } }
+```
+
+Or grab the generated file at `@pantoken/mintlify/docs.json` and merge its keys into your own
+`docs.json`. For a different IR, call `toMintlifyConfig(tokens)`.
+
+A `docs.json` with the theming keys merged in:
+
+```json
+{
+  "name": "My docs",
+  "theme": "mint",
+  "colors": { "primary": "#1D354F", "light": "#EEF4FD", "dark": "#1D354F" },
+  "background": { "color": { "light": "#F2F4F5", "dark": "#10141A" } }
+}
+```

package/dist/index.d.mts

@@ -0,0 +1,47 @@
+import { Token } from "@pantoken/model";
+
+//#region src/to-mintlify.d.ts
+/** Mintlify `colors` (docs.json): `primary` is required; `light`/`dark` tune emphasis per mode. */
+interface MintlifyColors {
+  /** Emphasis colour in light mode. */
+  primary: string;
+  /** Emphasis colour in dark mode. */
+  light: string;
+  /** Buttons and hover states across both modes. */
+  dark: string;
+}
+/** Mintlify `background.color` (docs.json): the page surface per mode. */
+interface MintlifyBackground {
+  color: {
+    light: string;
+    dark: string;
+  };
+}
+/** The subset of a Mintlify `docs.json` this renderer emits — merge it into your own `docs.json`. */
+interface MintlifyTheme {
+  colors: MintlifyColors;
+  background: MintlifyBackground;
+}
+/**
+ * Build the Mintlify `docs.json` theming keys from a token IR.
+ *
+ * @param tokens - The IR (e.g. from `@pantoken/tokens`).
+ * @returns The `colors` + `background` keys to merge into a Mintlify `docs.json`.
+ *
+ * @example
+ * ```ts
+ * import { toMintlifyConfig } from "@pantoken/mintlify";
+ * import { tokens } from "@pantoken/tokens";
+ *
+ * const theme = toMintlifyConfig(tokens);
+ * // { colors: { primary: "#1D354F", light: "#EEF4FD", dark: "#1D354F" },
+ * //   background: { color: { light: "#F2F4F5", dark: "#10141A" } } }
+ * ```
+ */
+declare function toMintlifyConfig(tokens: readonly Token[]): MintlifyTheme;
+//#endregion
+//#region src/index.d.ts
+/** Ready-made `rebrand` Mintlify `docs.json` theming keys (colors + background). */
+declare const docsJson: MintlifyTheme;
+//#endregion
+export { type MintlifyBackground, type MintlifyColors, type MintlifyTheme, docsJson as default, docsJson, toMintlifyConfig };

package/dist/index.mjs

@@ -0,0 +1,74 @@
+import { tokens } from "@pantoken/tokens";
+import { resolveTokens } from "@pantoken/utils";
+//#region src/to-mintlify.ts
+/**
+* Map the pantoken IR onto a Mintlify `docs.json` theming fragment. Mintlify is Tailwind-based and
+* reads concrete hex from `docs.json` at build, so — unlike the var()-backed bridges — this resolves
+* tokens to concrete per-mode values (like the MUI renderer). Mintlify drives light/dark itself, so
+* `colors.primary`/`colors.light` carry the light/dark emphasis colours and `background.color` the
+* two page surfaces.
+*
+* @module
+*/
+/** The Instructure token behind each Mintlify colour slot. */
+const BRAND = "--instui-color-background-brand";
+const BUTTON = "--instui-color-background-interactive-action-primary-base";
+const PAGE = "--instui-color-background-page";
+/**
+* Build the Mintlify `docs.json` theming keys from a token IR.
+*
+* @param tokens - The IR (e.g. from `@pantoken/tokens`).
+* @returns The `colors` + `background` keys to merge into a Mintlify `docs.json`.
+*
+* @example
+* ```ts
+* import { toMintlifyConfig } from "@pantoken/mintlify";
+* import { tokens } from "@pantoken/tokens";
+*
+* const theme = toMintlifyConfig(tokens);
+* // { colors: { primary: "#1D354F", light: "#EEF4FD", dark: "#1D354F" },
+* //   background: { color: { light: "#F2F4F5", dark: "#10141A" } } }
+* ```
+*/
+function toMintlifyConfig(tokens) {
+	const light = resolveTokens(tokens, { mode: "light" });
+	const dark = resolveTokens(tokens, { mode: "dark" });
+	const get = (map, name) => map.get(name) ?? "";
+	return {
+		colors: {
+			primary: get(light, BRAND),
+			light: get(dark, BRAND),
+			dark: get(light, BUTTON)
+		},
+		background: { color: {
+			light: get(light, PAGE),
+			dark: get(dark, PAGE)
+		} }
+	};
+}
+//#endregion
+//#region src/index.ts
+/**
+* `@pantoken/mintlify` — theme a Mintlify docs site with Instructure tokens.
+*
+* {@link toMintlifyConfig} maps any IR onto the `colors` + `background` keys of a Mintlify
+* `docs.json`; {@link docsJson} is the ready-made `rebrand` fragment. Merge it into your `docs.json`.
+*
+* @example
+* ```jsonc
+* // docs.json
+* {
+*   "name": "My docs",
+*   "theme": "mint",
+*   "colors": { "primary": "#1D354F", "light": "#EEF4FD", "dark": "#1D354F" },
+*   "background": { "color": { "light": "#F2F4F5", "dark": "#10141A" } }
+* }
+* ```
+*
+* @module
+* @experimental
+*/
+/** Ready-made `rebrand` Mintlify `docs.json` theming keys (colors + background). */
+const docsJson = toMintlifyConfig(tokens);
+//#endregion
+export { docsJson as default, docsJson, toMintlifyConfig };

package/generated/docs.json

@@ -0,0 +1,13 @@
+{
+  "colors": {
+    "primary": "#1D354F",
+    "light": "#EEF4FD",
+    "dark": "#1D354F"
+  },
+  "background": {
+    "color": {
+      "light": "#F2F4F5",
+      "dark": "#10141A"
+    }
+  }
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@pantoken/mintlify",
+  "version": "0.1.0",
+  "description": "Theme a Mintlify docs site with Instructure tokens: the docs.json colors + background, resolved to concrete hex per mode.",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "generated/docs.json"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./docs.json": "./generated/docs.json",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pantoken/model": "0.1.0",
+    "@pantoken/utils": "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"
+  },
+  "pantoken": {
+    "key": "mintlify",
+    "kind": "namespace"
+  },
+  "scripts": {
+    "generate": "node scripts/generate.ts",
+    "build": "vp pack && vp run generate",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check"
+  }
+}