@pantoken/vitepress 0.1.0

package/README.md

@@ -0,0 +1,56 @@
+# @pantoken/vitepress
+
+Theme a VitePress site with Instructure tokens. VitePress theming is driven by `--vp-*` CSS
+variables; this points them at `var(--instui-*)`, so the docs pick up the Instructure look and stay
+in sync with the appearance toggle.
+
+## Install
+
+```sh
+npm i @pantoken/vitepress @pantoken/css
+```
+
+Also available as `pantoken/vitepress`.
+
+## Usage
+
+Register a theme CSS file (`.vitepress/theme/custom.css`) from your theme's `index.ts`, and import
+both the token layer and the bridge:
+
+```css
+/* .vitepress/theme/custom.css */
+@import "@pantoken/css/style.css"; /* defines the --instui-* custom properties */
+@import "@pantoken/vitepress/custom.css"; /* maps VitePress --vp-* → var(--instui-*) */
+```
+
+Or generate the bridge yourself:
+
+```ts
+import { toVitePressCss } from "@pantoken/vitepress";
+
+const css = toVitePressCss();
+```
+
+Light and dark flow through the `--instui-*` tokens (which use `light-dark()`), so VitePress's
+appearance toggle stays in sync. VitePress uses `--vp-c-brand-1/2/3` for accent, hover, and solid
+states; this bridge points them all at the brand color, so override individual shades in your
+`custom.css` for distinct states. Because the values are `var(--instui-*)` references, `@pantoken/css`
+must be present to define them.
+
+## API
+
+- **`toVitePressCss(options?): string`** — emit the VitePress → Instructure bridge CSS. Pass
+  `{ selector }` to change the wrapping selector (default `":root"`).
+- **`vitePressCss: string`** — the ready-made bridge stylesheet.
+- **`VITEPRESS_TO_INSTUI`** — the frozen map of VitePress CSS variable to the Instructure token it
+  resolves to.
+- **`ToVitePressCssOptions`** — options type for `toVitePressCss`.
+- **`./custom.css`** — the generated static bridge stylesheet, for `@import` from your `custom.css`.
+
+## Related
+
+- Pairs with `@pantoken/css` for the `--instui-*` custom properties the bridge points at.
+
+## License
+
+MIT

package/dist/components.css

@@ -0,0 +1 @@
+.vp-doc{color:var(--instui-component-text-base-color);font-family:var(--instui-component-text-content-font-family);font-size:var(--instui-component-text-content-font-size);font-weight:var(--instui-component-text-content-font-weight);line-height:var(--instui-component-text-content-line-height)}.vp-doc h1,.vp-doc h2,.vp-doc h3,.vp-doc h4,.vp-doc h5,.vp-doc h6{color:var(--instui-component-heading-base-color);font-family:var(--instui-component-heading-h1-font-family);line-height:var(--instui-component-heading-line-height);margin:var(--instui-spacing-space-lg) 0 var(--instui-spacing-space-sm)}.vp-doc h1{font-size:var(--instui-component-heading-h1-font-size);font-weight:var(--instui-component-heading-h1-font-weight)}.vp-doc h2{font-size:var(--instui-component-heading-h2-font-size);font-weight:var(--instui-component-heading-h2-font-weight)}.vp-doc h3{font-size:var(--instui-component-heading-h3-font-size);font-weight:var(--instui-component-heading-h3-font-weight)}.vp-doc h4{font-size:var(--instui-component-heading-h4-font-size);font-weight:var(--instui-component-heading-h4-font-weight)}.vp-doc h5{font-size:var(--instui-component-heading-h5-font-size);font-weight:var(--instui-component-heading-h5-font-weight)}.vp-doc h6{font-size:var(--instui-component-heading-h6-font-size);font-weight:var(--instui-component-heading-h6-font-weight)}.vp-doc p{margin:var(--instui-spacing-space-md) 0}.vp-doc a{color:var(--instui-color-text-interactive-navigation-primary-base);text-decoration:underline}.vp-doc a:hover{color:var(--instui-color-text-interactive-navigation-primary-hover)}.vp-doc strong,.vp-doc b{font-weight:var(--instui-component-text-content-important-font-weight)}.vp-doc em,.vp-doc i{font-style:italic}.vp-doc small{font-size:var(--instui-component-text-content-small-font-size)}.vp-doc del,.vp-doc s{color:var(--instui-color-text-muted);text-decoration:line-through}.vp-doc ul,.vp-doc ol{margin:var(--instui-spacing-space-md) 0;padding-inline-start:var(--instui-spacing-space-lg)}.vp-doc li{margin:var(--instui-spacing-space2xs) 0}.vp-doc li.task-list-item{list-style:none}.vp-doc input[type=checkbox]{accent-color:var(--instui-color-text-interactive-navigation-primary-base);margin-inline-end:var(--instui-spacing-space-xs)}.vp-doc blockquote{margin:var(--instui-spacing-space-md) 0;border-inline-start:var(--instui-border-width-lg) solid var(--instui-color-stroke-base);color:var(--instui-component-text-base-color);font-size:var(--instui-component-text-content-quote-font-size);line-height:var(--instui-component-text-content-quote-line-height);padding-inline-start:var(--instui-spacing-space-md)}.vp-doc code{font-family:var(--instui-font-family-code);background:var(--instui-color-background-muted);padding:var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);border-radius:var(--instui-border-radius-sm);font-size:.9em}.vp-doc pre{font-family:var(--instui-font-family-code);background:var(--instui-color-background-container);color:var(--instui-color-text-base);padding:var(--instui-spacing-space-md);border:var(--instui-border-width-sm) solid var(--instui-color-stroke-base);border-radius:var(--instui-border-radius-md);overflow-x:auto}.vp-doc pre code{font-size:inherit;background:0 0;border-radius:0;padding:0}.vp-doc hr{border:none;border-top:var(--instui-border-width-sm) solid var(--instui-color-stroke-base);margin:var(--instui-spacing-space-lg) 0}.vp-doc img{border-radius:var(--instui-border-radius-md);max-width:100%}.vp-doc table:not([class]){border-collapse:collapse;width:100%;margin:var(--instui-spacing-space-md) 0;background:var(--instui-component-table-background);color:var(--instui-component-table-color);font-family:var(--instui-component-table-font-family);font-size:var(--instui-component-table-font-size)}.vp-doc table:not([class]) th{text-align:start;background:var(--instui-component-table-col-header-background);color:var(--instui-component-table-col-header-color);font-weight:var(--instui-component-table-head-font-weight);padding:var(--instui-component-table-col-header-padding-vertical) var(--instui-component-table-col-header-padding-horizontal);border-bottom:var(--instui-border-width-md) solid var(--instui-component-table-row-border-color)}.vp-doc table:not([class]) td{color:var(--instui-component-table-cell-color);line-height:var(--instui-component-table-cell-line-height);padding:var(--instui-component-table-cell-padding-vertical) var(--instui-component-table-cell-padding-horizontal);border-bottom:var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color)}

package/dist/custom.css

@@ -0,0 +1 @@
+:root{--vp-c-bg:var(--instui-color-background-base);--vp-c-bg-alt:var(--instui-color-background-container);--vp-c-bg-soft:var(--instui-color-background-muted);--vp-c-text-1:var(--instui-color-text-base);--vp-c-text-2:var(--instui-color-text-muted);--vp-c-brand-1:var(--instui-color-text-interactive-navigation-primary-base);--vp-c-brand-2:var(--instui-color-text-interactive-navigation-primary-hover);--vp-c-brand-3:var(--instui-color-background-info);--vp-c-border:var(--instui-color-stroke-base);--vp-c-divider:var(--instui-color-stroke-base);--vp-c-gutter:var(--instui-color-stroke-base);--vp-c-success-1:var(--instui-color-background-success);--vp-c-warning-1:var(--instui-color-background-warning);--vp-c-danger-1:var(--instui-color-background-error)}

package/dist/index.d.mts

@@ -0,0 +1,39 @@
+//#region src/index.d.ts
+/**
+ * `@pantoken/vitepress` — theme a VitePress site with Instructure tokens.
+ *
+ * VitePress theming is driven by `--vp-*` CSS variables. This points them at `var(--instui-*)`, so
+ * dropping the output into `.vitepress/theme/custom.css` (alongside `@pantoken/css`, which defines
+ * the custom properties) re-skins the docs with the Instructure look while light/dark keeps flowing
+ * through the same tokens.
+ *
+ * @module
+ * @beta
+ */
+/** VitePress CSS variable → the Instructure token it resolves to. */
+declare const VITEPRESS_TO_INSTUI: Readonly<Record<string, string>>;
+/** Options for {@link toVitePressCss}. */
+interface ToVitePressCssOptions {
+  /** The selector the variables are emitted under (default `":root"`). */
+  selector?: string;
+}
+/**
+ * Emit the VitePress → Instructure CSS-variable bridge.
+ *
+ * @param options - {@link ToVitePressCssOptions}.
+ * @returns The bridging CSS string.
+ *
+ * @example
+ * ```ts
+ * import { toVitePressCss } from "@pantoken/vitepress";
+ *
+ * const css = toVitePressCss();
+ * // ":root { --vp-c-bg: var(--instui-color-background-base); … }"
+ * // Write it into .vitepress/theme/custom.css alongside @pantoken/css.
+ * ```
+ */
+declare function toVitePressCss(options?: ToVitePressCssOptions): string;
+/** The ready-made bridge stylesheet. */
+declare const vitePressCss: string;
+//#endregion
+export { ToVitePressCssOptions, VITEPRESS_TO_INSTUI, vitePressCss as default, vitePressCss, toVitePressCss };

package/dist/index.mjs

@@ -0,0 +1,51 @@
+//#region src/index.ts
+/**
+* `@pantoken/vitepress` — theme a VitePress site with Instructure tokens.
+*
+* VitePress theming is driven by `--vp-*` CSS variables. This points them at `var(--instui-*)`, so
+* dropping the output into `.vitepress/theme/custom.css` (alongside `@pantoken/css`, which defines
+* the custom properties) re-skins the docs with the Instructure look while light/dark keeps flowing
+* through the same tokens.
+*
+* @module
+* @beta
+*/
+/** VitePress CSS variable → the Instructure token it resolves to. */
+const VITEPRESS_TO_INSTUI = Object.freeze({
+	"--vp-c-bg": "--instui-color-background-base",
+	"--vp-c-bg-alt": "--instui-color-background-container",
+	"--vp-c-bg-soft": "--instui-color-background-muted",
+	"--vp-c-text-1": "--instui-color-text-base",
+	"--vp-c-text-2": "--instui-color-text-muted",
+	"--vp-c-brand-1": "--instui-color-text-interactive-navigation-primary-base",
+	"--vp-c-brand-2": "--instui-color-text-interactive-navigation-primary-hover",
+	"--vp-c-brand-3": "--instui-color-background-info",
+	"--vp-c-border": "--instui-color-stroke-base",
+	"--vp-c-divider": "--instui-color-stroke-base",
+	"--vp-c-gutter": "--instui-color-stroke-base",
+	"--vp-c-success-1": "--instui-color-background-success",
+	"--vp-c-warning-1": "--instui-color-background-warning",
+	"--vp-c-danger-1": "--instui-color-background-error"
+});
+/**
+* Emit the VitePress → Instructure CSS-variable bridge.
+*
+* @param options - {@link ToVitePressCssOptions}.
+* @returns The bridging CSS string.
+*
+* @example
+* ```ts
+* import { toVitePressCss } from "@pantoken/vitepress";
+*
+* const css = toVitePressCss();
+* // ":root { --vp-c-bg: var(--instui-color-background-base); … }"
+* // Write it into .vitepress/theme/custom.css alongside @pantoken/css.
+* ```
+*/
+function toVitePressCss(options = {}) {
+	return `/* VitePress themed with Instructure tokens (pantoken) */\n${options.selector ?? ":root"} {\n${Object.entries(VITEPRESS_TO_INSTUI).map(([vp, instui]) => `  ${vp}: var(${instui});`).join("\n")}\n}\n`;
+}
+/** The ready-made bridge stylesheet. */
+const vitePressCss = toVitePressCss();
+//#endregion
+export { VITEPRESS_TO_INSTUI, vitePressCss as default, vitePressCss, toVitePressCss };

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@pantoken/vitepress",
+  "version": "0.1.0",
+  "description": "Theme a VitePress site with Instructure tokens: maps VitePress --vp-* CSS variables to var(--instui-*).",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./custom.css": "./dist/custom.css",
+    "./components.css": "./dist/components.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "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/components": "0.1.0",
+    "@pantoken/tokens": "0.1.0",
+    "@pantoken/utils": "0.1.0"
+  },
+  "pantoken": {
+    "key": "vitepress",
+    "kind": "namespace"
+  },
+  "scripts": {
+    "generate": "node scripts/generate.ts",
+    "build": "vp run generate && vp pack",
+    "dev": "vp run generate && vp pack --watch",
+    "test": "vp test",
+    "check": "vp check"
+  }
+}