@pantoken/astro 0.1.0

package/README.md

@@ -0,0 +1,55 @@
+# @pantoken/astro
+
+Astro / Starlight integration for pantoken. `InstUI` is a Starlight plugin that injects the
+Instructure design tokens and icons as CSS into the page head. It ports the approach of
+`starlight-theme-instui` onto the shared `@pantoken/css` pipeline.
+
+## Install
+
+```sh
+npm i @pantoken/astro
+```
+
+Also available as `pantoken/astro`.
+
+## Usage
+
+```ts
+// astro.config.mjs
+import starlight from "@astrojs/starlight";
+import { InstUI } from "@pantoken/astro";
+import { transition } from "@pantoken/plugin-transition";
+
+export default defineConfig({
+  integrations: [
+    starlight({
+      title: "Docs",
+      plugins: [InstUI({ theme: "rebrand", plugins: [transition()] })],
+    }),
+  ],
+});
+```
+
+Or build the stylesheet directly:
+
+```ts
+import { pantokenCss } from "@pantoken/astro";
+
+const css = pantokenCss({ theme: "canvas" });
+```
+
+## API
+
+- **`InstUI(options?): StarlightPluginLike`** — create the Starlight plugin that injects the pantoken stylesheet into the page head. Also the default export.
+- **`pantokenCss(options?): string`** — build the pantoken stylesheet for a theme, with optional plugin CSS.
+- **`InstUIOptions`** — options interface: `theme` (default `"rebrand"`) and `plugins` (default none).
+- **`HeadEntry`, `StarlightPluginLike`** — minimal structural types that avoid a hard dependency on Starlight.
+
+## Related
+
+- Builds on `@pantoken/css` and `@pantoken/tokens` for the token-to-CSS pipeline.
+- Accepts pantoken plugins such as `@pantoken/plugin-transition`.
+
+## License
+
+MIT

package/dist/components.css

@@ -0,0 +1 @@
+.pantoken-prose{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)}.pantoken-prose h1,.pantoken-prose h2,.pantoken-prose h3,.pantoken-prose h4,.pantoken-prose h5,.pantoken-prose 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)}.pantoken-prose h1{font-size:var(--instui-component-heading-h1-font-size);font-weight:var(--instui-component-heading-h1-font-weight)}.pantoken-prose h2{font-size:var(--instui-component-heading-h2-font-size);font-weight:var(--instui-component-heading-h2-font-weight)}.pantoken-prose h3{font-size:var(--instui-component-heading-h3-font-size);font-weight:var(--instui-component-heading-h3-font-weight)}.pantoken-prose h4{font-size:var(--instui-component-heading-h4-font-size);font-weight:var(--instui-component-heading-h4-font-weight)}.pantoken-prose h5{font-size:var(--instui-component-heading-h5-font-size);font-weight:var(--instui-component-heading-h5-font-weight)}.pantoken-prose h6{font-size:var(--instui-component-heading-h6-font-size);font-weight:var(--instui-component-heading-h6-font-weight)}.pantoken-prose p{margin:var(--instui-spacing-space-md) 0}.pantoken-prose a{color:var(--instui-color-text-interactive-navigation-primary-base);text-decoration:underline}.pantoken-prose a:hover{color:var(--instui-color-text-interactive-navigation-primary-hover)}.pantoken-prose strong,.pantoken-prose b{font-weight:var(--instui-component-text-content-important-font-weight)}.pantoken-prose em,.pantoken-prose i{font-style:italic}.pantoken-prose small{font-size:var(--instui-component-text-content-small-font-size)}.pantoken-prose del,.pantoken-prose s{color:var(--instui-color-text-muted);text-decoration:line-through}.pantoken-prose ul,.pantoken-prose ol{margin:var(--instui-spacing-space-md) 0;padding-inline-start:var(--instui-spacing-space-lg)}.pantoken-prose li{margin:var(--instui-spacing-space2xs) 0}.pantoken-prose li.task-list-item{list-style:none}.pantoken-prose input[type=checkbox]{accent-color:var(--instui-color-text-interactive-navigation-primary-base);margin-inline-end:var(--instui-spacing-space-xs)}.pantoken-prose 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)}.pantoken-prose 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}.pantoken-prose 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}.pantoken-prose pre code{font-size:inherit;background:0 0;border-radius:0;padding:0}.pantoken-prose hr{border:none;border-top:var(--instui-border-width-sm) solid var(--instui-color-stroke-base);margin:var(--instui-spacing-space-lg) 0}.pantoken-prose img{border-radius:var(--instui-border-radius-md);max-width:100%}.pantoken-prose 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)}.pantoken-prose 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)}.pantoken-prose 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/index.d.mts

@@ -0,0 +1,72 @@
+import { PantokenPlugin, Theme } from "@pantoken/model";
+
+//#region src/index.d.ts
+/** A minimal structural type for a Starlight head entry (avoids a hard dependency on Starlight). */
+interface HeadEntry {
+  tag: "style";
+  attrs: Record<string, string>;
+  content: string;
+}
+/** A minimal structural type for a Starlight plugin. */
+interface StarlightPluginLike {
+  name: string;
+  hooks: {
+    "config:setup"(context: {
+      config: {
+        head?: HeadEntry[];
+      };
+      updateConfig(patch: {
+        head: HeadEntry[];
+      }): void;
+      logger?: {
+        info(msg: string): void;
+      };
+    }): void;
+  };
+}
+/** Options for {@link InstUI}. */
+interface InstUIOptions {
+  /** The theme to emit (default: `"rebrand"`). */
+  theme?: Theme;
+  /** Plugins whose `css` hooks contribute to the injected stylesheet (default: none). */
+  plugins?: readonly PantokenPlugin[];
+}
+/**
+ * Build the pantoken stylesheet for a theme (with optional plugin CSS). Exposed for direct use.
+ *
+ * @param options - {@link InstUIOptions}.
+ * @returns The CSS string.
+ *
+ * @example
+ * ```ts
+ * import { pantokenCss } from "@pantoken/astro";
+ *
+ * const css = pantokenCss({ theme: "canvas" });
+ * ```
+ */
+declare function pantokenCss(options?: InstUIOptions): string;
+/**
+ * Create the pantoken Starlight plugin.
+ *
+ * @param options - {@link InstUIOptions}.
+ * @returns A Starlight plugin that injects the pantoken stylesheet into the page head.
+ *
+ * @example astro.config.mjs
+ * ```ts
+ * import starlight from "@astrojs/starlight";
+ * import { InstUI } from "@pantoken/astro";
+ * import { transition } from "@pantoken/plugin-transition";
+ *
+ * export default defineConfig({
+ *   integrations: [
+ *     starlight({
+ *       title: "Docs",
+ *       plugins: [InstUI({ theme: "rebrand", plugins: [transition()] })],
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+declare function InstUI(options?: InstUIOptions): StarlightPluginLike;
+//#endregion
+export { HeadEntry, InstUI, InstUI as default, InstUIOptions, StarlightPluginLike, pantokenCss };

package/dist/index.mjs

@@ -0,0 +1,68 @@
+import { toCss } from "@pantoken/css";
+import { byTheme } from "@pantoken/tokens";
+//#region src/index.ts
+/**
+* `@pantoken/astro` — Astro / Starlight integration for pantoken.
+*
+* {@link InstUI} is a Starlight plugin that injects the pantoken stylesheet (and any plugin CSS,
+* e.g. a focus ring) into the page head. It ports the approach of `starlight-theme-instui` onto the
+* shared `@pantoken/css` pipeline, so it no longer carries its own token resolver.
+*
+* @module
+* @alpha
+*/
+/**
+* Build the pantoken stylesheet for a theme (with optional plugin CSS). Exposed for direct use.
+*
+* @param options - {@link InstUIOptions}.
+* @returns The CSS string.
+*
+* @example
+* ```ts
+* import { pantokenCss } from "@pantoken/astro";
+*
+* const css = pantokenCss({ theme: "canvas" });
+* ```
+*/
+function pantokenCss(options = {}) {
+	const { theme = "rebrand", plugins = [] } = options;
+	return toCss(byTheme(theme), { plugins });
+}
+/**
+* Create the pantoken Starlight plugin.
+*
+* @param options - {@link InstUIOptions}.
+* @returns A Starlight plugin that injects the pantoken stylesheet into the page head.
+*
+* @example astro.config.mjs
+* ```ts
+* import starlight from "@astrojs/starlight";
+* import { InstUI } from "@pantoken/astro";
+* import { transition } from "@pantoken/plugin-transition";
+*
+* export default defineConfig({
+*   integrations: [
+*     starlight({
+*       title: "Docs",
+*       plugins: [InstUI({ theme: "rebrand", plugins: [transition()] })],
+*     }),
+*   ],
+* });
+* ```
+*/
+function InstUI(options = {}) {
+	const css = pantokenCss(options);
+	return {
+		name: "@pantoken/astro",
+		hooks: { "config:setup": (context) => {
+			context.updateConfig({ head: [...context.config.head ?? [], {
+				tag: "style",
+				attrs: { "data-pantoken": "base" },
+				content: css
+			}] });
+			context.logger?.info(`pantoken: injected ${options.theme ?? "rebrand"} tokens (${css.length} bytes)`);
+		} }
+	};
+}
+//#endregion
+export { InstUI, InstUI as default, pantokenCss };

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@pantoken/astro",
+  "version": "0.1.0",
+  "description": "Astro / Starlight integration for pantoken: inject Instructure design tokens and icons as CSS.",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./components.css": "./dist/components.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pantoken/css": "0.1.0",
+    "@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",
+    "@pantoken/components": "0.1.0",
+    "@pantoken/plugin-transition": "0.1.0"
+  },
+  "pantoken": {
+    "key": "astro",
+    "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"
+  }
+}