@pantoken/storybook 0.1.0

package/README.md

@@ -0,0 +1,39 @@
+# @pantoken/storybook
+
+A Storybook theme built from Instructure tokens. It maps the token IR onto a Storybook `ThemeVars`
+object with colors resolved concretely, so your Storybook manager and preview pick up the
+Instructure look.
+
+## Install
+
+```sh
+npm i @pantoken/storybook
+```
+
+`@storybook/theming` is an optional peer — this package returns a plain object, so you don't need it
+installed to build a theme.
+
+Also available as `pantoken/storybook`.
+
+## Usage
+
+```ts
+// .storybook/manager.ts
+import { addons } from "@storybook/manager-api";
+import { pantokenStorybookTheme } from "@pantoken/storybook";
+
+addons.setConfig({ theme: pantokenStorybookTheme("light") });
+```
+
+Pass `"dark"` for the dark palette. The result is a plain `ThemeVars`-shaped object with colors
+resolved to concrete values.
+
+## API
+
+- **`pantokenStorybookTheme(mode?): StorybookTheme`** — build a Storybook theme from the Instructure
+  tokens. `mode` is `"light"` or `"dark"` (default `"light"`).
+- **`StorybookTheme`** — the returned object type (a subset of Storybook's `ThemeVars`).
+
+## License
+
+MIT

package/dist/components.css

@@ -0,0 +1 @@
+.sbdocs-content{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)}.sbdocs-content h1,.sbdocs-content h2,.sbdocs-content h3,.sbdocs-content h4,.sbdocs-content h5,.sbdocs-content 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)}.sbdocs-content h1{font-size:var(--instui-component-heading-h1-font-size);font-weight:var(--instui-component-heading-h1-font-weight)}.sbdocs-content h2{font-size:var(--instui-component-heading-h2-font-size);font-weight:var(--instui-component-heading-h2-font-weight)}.sbdocs-content h3{font-size:var(--instui-component-heading-h3-font-size);font-weight:var(--instui-component-heading-h3-font-weight)}.sbdocs-content h4{font-size:var(--instui-component-heading-h4-font-size);font-weight:var(--instui-component-heading-h4-font-weight)}.sbdocs-content h5{font-size:var(--instui-component-heading-h5-font-size);font-weight:var(--instui-component-heading-h5-font-weight)}.sbdocs-content h6{font-size:var(--instui-component-heading-h6-font-size);font-weight:var(--instui-component-heading-h6-font-weight)}.sbdocs-content p{margin:var(--instui-spacing-space-md) 0}.sbdocs-content a{color:var(--instui-color-text-interactive-navigation-primary-base);text-decoration:underline}.sbdocs-content a:hover{color:var(--instui-color-text-interactive-navigation-primary-hover)}.sbdocs-content strong,.sbdocs-content b{font-weight:var(--instui-component-text-content-important-font-weight)}.sbdocs-content em,.sbdocs-content i{font-style:italic}.sbdocs-content small{font-size:var(--instui-component-text-content-small-font-size)}.sbdocs-content del,.sbdocs-content s{color:var(--instui-color-text-muted);text-decoration:line-through}.sbdocs-content ul,.sbdocs-content ol{margin:var(--instui-spacing-space-md) 0;padding-inline-start:var(--instui-spacing-space-lg)}.sbdocs-content li{margin:var(--instui-spacing-space2xs) 0}.sbdocs-content li.task-list-item{list-style:none}.sbdocs-content input[type=checkbox]{accent-color:var(--instui-color-text-interactive-navigation-primary-base);margin-inline-end:var(--instui-spacing-space-xs)}.sbdocs-content 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)}.sbdocs-content 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}.sbdocs-content 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}.sbdocs-content pre code{font-size:inherit;background:0 0;border-radius:0;padding:0}.sbdocs-content hr{border:none;border-top:var(--instui-border-width-sm) solid var(--instui-color-stroke-base);margin:var(--instui-spacing-space-lg) 0}.sbdocs-content img{border-radius:var(--instui-border-radius-md);max-width:100%}.sbdocs-content 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)}.sbdocs-content 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)}.sbdocs-content 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,25 @@
+import { Mode } from "@pantoken/utils";
+
+//#region src/index.d.ts
+/** A Storybook theme object (a subset of `ThemeVars`). */
+type StorybookTheme = {
+  base: Mode;
+} & Record<string, string>;
+/**
+ * Build a Storybook theme from the Instructure tokens.
+ *
+ * @param mode - `"light"` or `"dark"` (default `"light"`).
+ * @returns A `ThemeVars`-shaped object.
+ *
+ * @example
+ * ```ts
+ * // .storybook/manager.ts
+ * import { addons } from "@storybook/manager-api";
+ * import { pantokenStorybookTheme } from "@pantoken/storybook";
+ *
+ * addons.setConfig({ theme: pantokenStorybookTheme("dark") });
+ * ```
+ */
+declare function pantokenStorybookTheme(mode?: Mode): StorybookTheme;
+//#endregion
+export { StorybookTheme, pantokenStorybookTheme as default, pantokenStorybookTheme };

package/dist/index.mjs

@@ -0,0 +1,57 @@
+import { resolveTokens } from "@pantoken/utils";
+import { tokens } from "@pantoken/tokens";
+//#region src/index.ts
+/**
+* `@pantoken/storybook` — a Storybook theme built from Instructure tokens.
+*
+* {@link pantokenStorybookTheme} returns a plain `ThemeVars`-shaped object (so `@storybook/theming`
+* stays an optional peer) with colours resolved concretely from the IR. Pass it to Storybook's
+* `manager`/`preview` theme.
+*
+* @module
+* @experimental
+*/
+/** Storybook ThemeVars key → the Instructure token it draws from. */
+const THEME_MAP = {
+	colorPrimary: "--instui-color-background-brand",
+	colorSecondary: "--instui-color-background-info",
+	appBg: "--instui-color-background-base",
+	appContentBg: "--instui-color-background-container",
+	appBorderColor: "--instui-color-stroke-base",
+	textColor: "--instui-color-text-base",
+	textInverseColor: "--instui-color-text-inverse",
+	barBg: "--instui-color-background-brand",
+	barTextColor: "--instui-color-text-on-color",
+	inputBg: "--instui-color-background-base",
+	inputBorder: "--instui-color-stroke-base",
+	inputTextColor: "--instui-color-text-base"
+};
+/**
+* Build a Storybook theme from the Instructure tokens.
+*
+* @param mode - `"light"` or `"dark"` (default `"light"`).
+* @returns A `ThemeVars`-shaped object.
+*
+* @example
+* ```ts
+* // .storybook/manager.ts
+* import { addons } from "@storybook/manager-api";
+* import { pantokenStorybookTheme } from "@pantoken/storybook";
+*
+* addons.setConfig({ theme: pantokenStorybookTheme("dark") });
+* ```
+*/
+function pantokenStorybookTheme(mode = "light") {
+	const resolved = resolveTokens(tokens, { mode });
+	const theme = {
+		base: mode,
+		brandTitle: "Instructure"
+	};
+	for (const [key, instui] of Object.entries(THEME_MAP)) {
+		const value = resolved.get(instui);
+		if (value) theme[key] = value;
+	}
+	return theme;
+}
+//#endregion
+export { pantokenStorybookTheme as default, pantokenStorybookTheme };

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@pantoken/storybook",
+  "version": "0.1.0",
+  "description": "A Storybook theme built from Instructure tokens (maps to Storybook ThemeVars).",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./components.css": "./dist/components.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pantoken/tokens": "0.1.0",
+    "@pantoken/utils": "0.1.0",
+    "@pantoken/model": "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"
+  },
+  "peerDependencies": {
+    "@storybook/theming": ">=7"
+  },
+  "peerDependenciesMeta": {
+    "@storybook/theming": {
+      "optional": true
+    }
+  },
+  "pantoken": {
+    "key": "storybook",
+    "kind": "subpath"
+  },
+  "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"
+  }
+}