@pantoken/angular 0.1.0

package/README.md

@@ -0,0 +1,41 @@
+# @pantoken/angular
+
+Angular helpers over `@pantoken/web-components`: register the Instructure custom elements once at
+bootstrap, and read resolved `--instui-*` token values at runtime.
+
+## Install
+
+```sh
+npm i @pantoken/angular
+```
+
+Also available as `pantoken/angular`.
+
+## Usage
+
+```ts
+import { registerPantokenElements, readToken } from "@pantoken/angular";
+import "@pantoken/css";
+
+registerPantokenElements(); // during app bootstrap
+
+const brand = readToken("--instui-color-background-brand", "#0374B5");
+```
+
+Add `CUSTOM_ELEMENTS_SCHEMA` to any component or module that uses `<instui-icon>` so Angular's
+template compiler accepts the tag.
+
+## API
+
+- **`registerPantokenElements(): void`** — register the pantoken custom elements. Call once at bootstrap.
+- **`readToken(name, fallback?): string`** — read a resolved `--instui-*` value. Returns `fallback` on the server.
+- **`register`** — re-exported from `@pantoken/web-components` for direct control over registration timing.
+
+## Related
+
+- Pairs with `@pantoken/css` for the base stylesheet that defines the `--instui-*` properties.
+- Wraps `@pantoken/web-components`, which supplies the custom elements.
+
+## 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,29 @@
+import { register } from "@pantoken/web-components";
+
+//#region src/index.d.ts
+/**
+ * Register the pantoken custom elements (call once during app bootstrap).
+ *
+ * @example
+ * ```ts
+ * import { registerPantokenElements } from "@pantoken/angular";
+ * import "@pantoken/css";
+ *
+ * registerPantokenElements(); // during app bootstrap
+ * // Add CUSTOM_ELEMENTS_SCHEMA to the component/module that uses <instui-icon>.
+ * ```
+ */
+declare function registerPantokenElements(): void;
+/**
+ * Read a resolved token value. Returns `fallback` on the server.
+ *
+ * @example
+ * ```ts
+ * import { readToken } from "@pantoken/angular";
+ *
+ * const brand = readToken("--instui-color-background-brand", "#0374B5");
+ * ```
+ */
+declare function readToken(name: string, fallback?: string): string;
+//#endregion
+export { readToken, register, registerPantokenElements };

package/dist/index.mjs

@@ -0,0 +1,42 @@
+import { register, register as register$1 } from "@pantoken/web-components";
+//#region src/index.ts
+/**
+* `@pantoken/angular` — Angular helpers over `@pantoken/web-components`.
+*
+* Call {@link registerPantokenElements} during bootstrap, and add `CUSTOM_ELEMENTS_SCHEMA` to the
+* component/module that uses `<instui-icon>`. {@link readToken} reads a resolved `--instui-*` value.
+*
+* @module
+* @experimental
+*/
+/**
+* Register the pantoken custom elements (call once during app bootstrap).
+*
+* @example
+* ```ts
+* import { registerPantokenElements } from "@pantoken/angular";
+* import "@pantoken/css";
+*
+* registerPantokenElements(); // during app bootstrap
+* // Add CUSTOM_ELEMENTS_SCHEMA to the component/module that uses <instui-icon>.
+* ```
+*/
+function registerPantokenElements() {
+	register$1();
+}
+/**
+* Read a resolved token value. Returns `fallback` on the server.
+*
+* @example
+* ```ts
+* import { readToken } from "@pantoken/angular";
+*
+* const brand = readToken("--instui-color-background-brand", "#0374B5");
+* ```
+*/
+function readToken(name, fallback = "") {
+	if (typeof document === "undefined") return fallback;
+	return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+//#endregion
+export { readToken, register, registerPantokenElements };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@pantoken/angular",
+  "version": "0.1.0",
+  "description": "Angular helpers for pantoken: register the web components and read tokens.",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./components.css": "./dist/components.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pantoken/web-components": "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": {
+    "@angular/core": ">=16"
+  },
+  "peerDependenciesMeta": {
+    "@angular/core": {
+      "optional": true
+    }
+  },
+  "pantoken": {
+    "key": "angular",
+    "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"
+  }
+}