@pantoken/vitepress 0.1.1 → 0.2.0

package/dist/custom.css

@@ -1 +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)}
+:root{--vp-font-family-base:var(--instui-font-family-base);--vp-c-text-1:var(--instui-color-text-base);--vp-c-text-2:var(--instui-color-text-muted);--vp-c-text-3:var(--instui-color-text-interactive-input-placeholder);--vp-c-bg:var(--instui-color-background-page);--vp-c-bg-alt:var(--instui-color-background-container);--vp-c-bg-elv:var(--instui-color-background-container);--vp-c-bg-soft:var(--instui-color-background-container);--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-default-1:var(--instui-color-text-base);--vp-c-default-2:var(--instui-color-text-muted);--vp-c-default-3:var(--instui-color-stroke-base);--vp-c-default-soft:var(--instui-color-background-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-brand-soft:var(--instui-color-background-info);--vp-c-tip-1:var(--instui-color-text-info);--vp-c-tip-2:var(--instui-color-text-info);--vp-c-tip-3:var(--instui-color-background-info);--vp-c-tip-soft:var(--instui-color-background-info);--vp-c-note-1:var(--instui-color-text-info);--vp-c-note-2:var(--instui-color-text-info);--vp-c-note-3:var(--instui-color-background-info);--vp-c-note-soft:var(--instui-color-background-info);--vp-c-success-1:var(--instui-color-text-success);--vp-c-success-2:var(--instui-color-text-success);--vp-c-success-3:var(--instui-color-background-success);--vp-c-success-soft:var(--instui-color-background-success);--vp-c-important-1:var(--instui-color-text-accent-violet);--vp-c-important-2:var(--instui-color-text-accent-violet);--vp-c-important-3:var(--instui-color-background-accent-violet);--vp-c-important-soft:var(--instui-color-background-accent-violet);--vp-c-warning-1:var(--instui-color-text-warning);--vp-c-warning-2:var(--instui-color-text-warning);--vp-c-warning-3:var(--instui-color-background-warning);--vp-c-warning-soft:var(--instui-color-background-warning);--vp-c-danger-1:var(--instui-color-text-error);--vp-c-danger-2:var(--instui-color-text-error);--vp-c-danger-3:var(--instui-color-background-error);--vp-c-danger-soft:var(--instui-color-background-error);--vp-c-caution-1:var(--instui-color-text-error);--vp-c-caution-2:var(--instui-color-text-error);--vp-c-caution-3:var(--instui-color-background-error);--vp-c-caution-soft:var(--instui-color-background-error);--vp-button-brand-border:transparent;--vp-button-brand-text:var(--instui-color-text-on-color);--vp-button-brand-bg:var(--instui-color-background-info);--vp-button-brand-hover-border:transparent;--vp-button-brand-hover-text:var(--instui-color-text-on-color);--vp-button-brand-hover-bg:var(--instui-color-background-info);--vp-button-brand-active-border:transparent;--vp-button-brand-active-text:var(--instui-color-text-on-color);--vp-button-brand-active-bg:var(--instui-color-background-info);--vp-button-alt-border:transparent;--vp-button-alt-text:var(--instui-color-text-base);--vp-button-alt-bg:var(--instui-color-background-muted);--vp-button-alt-hover-border:transparent;--vp-button-alt-hover-text:var(--instui-color-text-base);--vp-button-alt-hover-bg:var(--instui-color-background-muted);--vp-button-alt-active-border:transparent;--vp-button-alt-active-text:var(--instui-color-text-base);--vp-button-alt-active-bg:var(--instui-color-stroke-base);--vp-custom-block-info-text:var(--instui-color-text-base);--vp-custom-block-info-bg:var(--instui-color-background-muted);--vp-custom-block-info-code-bg:var(--instui-color-background-muted);--vp-custom-block-note-text:var(--instui-color-text-base);--vp-custom-block-note-bg:var(--instui-color-background-muted);--vp-custom-block-note-code-bg:var(--instui-color-background-muted);--vp-custom-block-tip-text:var(--instui-color-text-base);--vp-custom-block-tip-bg:var(--instui-color-background-info);--vp-custom-block-tip-code-bg:var(--instui-color-background-info);--vp-custom-block-important-text:var(--instui-color-text-base);--vp-custom-block-important-bg:var(--instui-color-background-accent-violet);--vp-custom-block-important-code-bg:var(--instui-color-background-accent-violet);--vp-custom-block-warning-text:var(--instui-color-text-base);--vp-custom-block-warning-bg:var(--instui-color-background-warning);--vp-custom-block-warning-code-bg:var(--instui-color-background-warning);--vp-custom-block-danger-text:var(--instui-color-text-base);--vp-custom-block-danger-bg:var(--instui-color-background-error);--vp-custom-block-danger-code-bg:var(--instui-color-background-error);--vp-custom-block-caution-text:var(--instui-color-text-base);--vp-custom-block-caution-bg:var(--instui-color-background-error);--vp-custom-block-caution-code-bg:var(--instui-color-background-error);--vp-custom-block-details-text:var(--instui-color-text-base);--vp-custom-block-details-bg:var(--instui-color-background-muted);--vp-custom-block-details-code-bg:var(--instui-color-background-muted);--vp-input-border-color:var(--instui-color-stroke-base);--vp-input-bg-color:var(--instui-color-background-container);--vp-input-switch-bg-color:var(--instui-color-background-muted);--vp-nav-bg-color:var(--instui-color-background-base);--vp-nav-screen-bg-color:var(--instui-color-background-page);--vp-local-nav-bg-color:var(--instui-color-background-page);--vp-sidebar-bg-color:var(--instui-component-view-background-primary);--vp-badge-info-text:var(--instui-color-text-muted);--vp-badge-info-bg:var(--instui-color-background-muted);--vp-badge-tip-text:var(--instui-color-text-info);--vp-badge-tip-bg:var(--instui-color-background-info);--vp-badge-warning-text:var(--instui-color-text-warning);--vp-badge-warning-bg:var(--instui-color-background-warning);--vp-badge-danger-text:var(--instui-color-text-error);--vp-badge-danger-bg:var(--instui-color-background-error);--vp-carbon-ads-text-color:var(--instui-color-text-base);--vp-carbon-ads-poweredby-color:var(--instui-color-text-muted);--vp-carbon-ads-bg-color:var(--instui-color-background-muted);--vp-carbon-ads-hover-text-color:var(--instui-color-text-interactive-navigation-primary-base);--vp-carbon-ads-hover-poweredby-color:var(--instui-color-text-base);--vp-local-search-bg:var(--instui-color-background-page);--vp-local-search-result-bg:var(--instui-color-background-page);--vp-local-search-result-border:var(--instui-color-stroke-base);--vp-local-search-result-selected-bg:var(--instui-color-background-page);--vp-local-search-result-selected-border:var(--instui-color-text-interactive-navigation-primary-base);--vp-local-search-highlight-bg:var(--instui-color-text-interactive-navigation-primary-base);--vp-local-search-highlight-text:var(--instui-color-text-on-color)}

package/dist/index.d.mts

@@ -1,3 +1,7 @@
+//#region src/vitepress-vars.d.ts
+/** VitePress CSS variable → the Instructure token it resolves to. */
+declare const VITEPRESS_TO_INSTUI: Readonly<Record<string, string>>;
+//#endregion
 //#region src/index.d.ts
 /**
  * `@pantoken/vitepress` — theme a VitePress site with Instructure tokens.
@@ -10,9 +14,7 @@
  * @module
  * @beta
  */
-/** VitePress CSS variable → the Instructure token it resolves to. */
-declare const VITEPRESS_TO_INSTUI: Readonly<Record<string, string>>;
-/** Options for {@link toVitePressCss}. */
+/** Options for `toVitePressCss`. */
 interface ToVitePressCssOptions {
   /** The selector the variables are emitted under (default `":root"`). */
   selector?: string;
@@ -20,20 +22,12 @@ interface ToVitePressCssOptions {
 /**
  * Emit the VitePress → Instructure CSS-variable bridge.
  *
- * @param options - {@link ToVitePressCssOptions}.
- * @returns The bridging CSS string.
- *
- * @example
- * ```ts
- * import { toVitePressCss } from "@pantoken/vitepress";
+ * Wraps the variable mappings in the specified selector (default `:root`).
  *
- * const css = toVitePressCss();
- * // ":root { --vp-c-bg: var(--instui-color-background-base); … }"
- * // Write it into .vitepress/theme/custom.css alongside @pantoken/css.
- * ```
+ * @internal
+ * @param options - {@link ToVitePressCssOptions}.
+ * @returns The bridging CSS string wrapped in the selector.
  */
 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 };
+export { ToVitePressCssOptions, VITEPRESS_TO_INSTUI, toVitePressCss as default, toVitePressCss };

package/dist/index.mjs

@@ -1,3 +1,22 @@
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+/** Raw VitePress CSS variables and documentation. */
+const VITEPRESS_VARS_CSS = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "vitepress-vars.css"), "utf-8");
+/**
+* Parse the VitePress variables CSS and extract the mappings into a Record.
+*
+* @internal
+* @returns A mapping of `--vp-*` to `--instui-*` tokens.
+*/
+function parseCssToMapping() {
+	const mappings = {};
+	for (const match of VITEPRESS_VARS_CSS.matchAll(/--vp-([a-z0-9-]+):\s*var\((--instui-[a-z0-9-]+)\)/g)) mappings[`--vp-${match[1]}`] = match[2];
+	return Object.freeze(mappings);
+}
+/** VitePress CSS variable → the Instructure token it resolves to. */
+const VITEPRESS_TO_INSTUI = parseCssToMapping();
+//#endregion
 //#region src/index.ts
 /**
 * `@pantoken/vitepress` — theme a VitePress site with Instructure tokens.
@@ -10,42 +29,22 @@
 * @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.
+* Wraps the variable mappings in the specified selector (default `:root`).
 *
-* @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.
-* ```
+* @internal
+* @param options - {@link ToVitePressCssOptions}.
+* @returns The bridging CSS string wrapped in the selector.
 */
 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`;
+	const selector = options.selector ?? ":root";
+	if (selector === ":root") return VITEPRESS_VARS_CSS;
+	return `${selector} {\n  ${VITEPRESS_VARS_CSS.split("\n").filter((line) => {
+		const trimmed = line.trim();
+		return trimmed.startsWith("--vp-") && trimmed.includes(":");
+	}).map((line) => line.trim()).join("\n  ")}\n}\n`;
 }
-/** The ready-made bridge stylesheet. */
-const vitePressCss = toVitePressCss();
 //#endregion
-export { VITEPRESS_TO_INSTUI, vitePressCss as default, vitePressCss, toVitePressCss };
+export { VITEPRESS_TO_INSTUI, toVitePressCss as default, toVitePressCss };

package/dist/vitepress-vars.css

@@ -0,0 +1 @@
+:root{--vp-font-family-base:var(--instui-font-family-base);--vp-c-text-1:var(--instui-color-text-base);--vp-c-text-2:var(--instui-color-text-muted);--vp-c-text-3:var(--instui-color-text-interactive-input-placeholder);--vp-c-bg:var(--instui-color-background-page);--vp-c-bg-alt:var(--instui-color-background-container);--vp-c-bg-elv:var(--instui-color-background-container);--vp-c-bg-soft:var(--instui-color-background-container);--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-default-1:var(--instui-color-text-base);--vp-c-default-2:var(--instui-color-text-muted);--vp-c-default-3:var(--instui-color-stroke-base);--vp-c-default-soft:var(--instui-color-background-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-brand-soft:var(--instui-color-background-info);--vp-c-tip-1:var(--instui-color-text-info);--vp-c-tip-2:var(--instui-color-text-info);--vp-c-tip-3:var(--instui-color-background-info);--vp-c-tip-soft:var(--instui-color-background-info);--vp-c-note-1:var(--instui-color-text-info);--vp-c-note-2:var(--instui-color-text-info);--vp-c-note-3:var(--instui-color-background-info);--vp-c-note-soft:var(--instui-color-background-info);--vp-c-success-1:var(--instui-color-text-success);--vp-c-success-2:var(--instui-color-text-success);--vp-c-success-3:var(--instui-color-background-success);--vp-c-success-soft:var(--instui-color-background-success);--vp-c-important-1:var(--instui-color-text-accent-violet);--vp-c-important-2:var(--instui-color-text-accent-violet);--vp-c-important-3:var(--instui-color-background-accent-violet);--vp-c-important-soft:var(--instui-color-background-accent-violet);--vp-c-warning-1:var(--instui-color-text-warning);--vp-c-warning-2:var(--instui-color-text-warning);--vp-c-warning-3:var(--instui-color-background-warning);--vp-c-warning-soft:var(--instui-color-background-warning);--vp-c-danger-1:var(--instui-color-text-error);--vp-c-danger-2:var(--instui-color-text-error);--vp-c-danger-3:var(--instui-color-background-error);--vp-c-danger-soft:var(--instui-color-background-error);--vp-c-caution-1:var(--instui-color-text-error);--vp-c-caution-2:var(--instui-color-text-error);--vp-c-caution-3:var(--instui-color-background-error);--vp-c-caution-soft:var(--instui-color-background-error);--vp-button-brand-border:transparent;--vp-button-brand-text:var(--instui-color-text-on-color);--vp-button-brand-bg:var(--instui-color-background-info);--vp-button-brand-hover-border:transparent;--vp-button-brand-hover-text:var(--instui-color-text-on-color);--vp-button-brand-hover-bg:var(--instui-color-background-info);--vp-button-brand-active-border:transparent;--vp-button-brand-active-text:var(--instui-color-text-on-color);--vp-button-brand-active-bg:var(--instui-color-background-info);--vp-button-alt-border:transparent;--vp-button-alt-text:var(--instui-color-text-base);--vp-button-alt-bg:var(--instui-color-background-muted);--vp-button-alt-hover-border:transparent;--vp-button-alt-hover-text:var(--instui-color-text-base);--vp-button-alt-hover-bg:var(--instui-color-background-muted);--vp-button-alt-active-border:transparent;--vp-button-alt-active-text:var(--instui-color-text-base);--vp-button-alt-active-bg:var(--instui-color-stroke-base);--vp-custom-block-info-text:var(--instui-color-text-base);--vp-custom-block-info-bg:var(--instui-color-background-muted);--vp-custom-block-info-code-bg:var(--instui-color-background-muted);--vp-custom-block-note-text:var(--instui-color-text-base);--vp-custom-block-note-bg:var(--instui-color-background-muted);--vp-custom-block-note-code-bg:var(--instui-color-background-muted);--vp-custom-block-tip-text:var(--instui-color-text-base);--vp-custom-block-tip-bg:var(--instui-color-background-info);--vp-custom-block-tip-code-bg:var(--instui-color-background-info);--vp-custom-block-important-text:var(--instui-color-text-base);--vp-custom-block-important-bg:var(--instui-color-background-accent-violet);--vp-custom-block-important-code-bg:var(--instui-color-background-accent-violet);--vp-custom-block-warning-text:var(--instui-color-text-base);--vp-custom-block-warning-bg:var(--instui-color-background-warning);--vp-custom-block-warning-code-bg:var(--instui-color-background-warning);--vp-custom-block-danger-text:var(--instui-color-text-base);--vp-custom-block-danger-bg:var(--instui-color-background-error);--vp-custom-block-danger-code-bg:var(--instui-color-background-error);--vp-custom-block-caution-text:var(--instui-color-text-base);--vp-custom-block-caution-bg:var(--instui-color-background-error);--vp-custom-block-caution-code-bg:var(--instui-color-background-error);--vp-custom-block-details-text:var(--instui-color-text-base);--vp-custom-block-details-bg:var(--instui-color-background-muted);--vp-custom-block-details-code-bg:var(--instui-color-background-muted);--vp-input-border-color:var(--instui-color-stroke-base);--vp-input-bg-color:var(--instui-color-background-container);--vp-input-switch-bg-color:var(--instui-color-background-muted);--vp-nav-bg-color:var(--instui-color-background-base);--vp-nav-screen-bg-color:var(--instui-color-background-page);--vp-local-nav-bg-color:var(--instui-color-background-page);--vp-sidebar-bg-color:var(--instui-component-view-background-primary);--vp-badge-info-text:var(--instui-color-text-muted);--vp-badge-info-bg:var(--instui-color-background-muted);--vp-badge-tip-text:var(--instui-color-text-info);--vp-badge-tip-bg:var(--instui-color-background-info);--vp-badge-warning-text:var(--instui-color-text-warning);--vp-badge-warning-bg:var(--instui-color-background-warning);--vp-badge-danger-text:var(--instui-color-text-error);--vp-badge-danger-bg:var(--instui-color-background-error);--vp-carbon-ads-text-color:var(--instui-color-text-base);--vp-carbon-ads-poweredby-color:var(--instui-color-text-muted);--vp-carbon-ads-bg-color:var(--instui-color-background-muted);--vp-carbon-ads-hover-text-color:var(--instui-color-text-interactive-navigation-primary-base);--vp-carbon-ads-hover-poweredby-color:var(--instui-color-text-base);--vp-local-search-bg:var(--instui-color-background-page);--vp-local-search-result-bg:var(--instui-color-background-page);--vp-local-search-result-border:var(--instui-color-stroke-base);--vp-local-search-result-selected-bg:var(--instui-color-background-page);--vp-local-search-result-selected-border:var(--instui-color-text-interactive-navigation-primary-base);--vp-local-search-highlight-bg:var(--instui-color-text-interactive-navigation-primary-base);--vp-local-search-highlight-text:var(--instui-color-text-on-color)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoken/vitepress",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Theme a VitePress site with Instructure tokens: maps VitePress --vp-* CSS variables to var(--instui-*).",
   "homepage": "https://pantoken.iywahl.com",
   "bugs": "https://github.com/thedannywahl/pantoken/issues",