@pantoken/css 0.3.11 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoken/css",
-  "version": "0.3.11",
+  "version": "0.4.0",
   "description": "Emit Instructure design tokens as @property-typed CSS with light-dark() and icon data-URIs, from the pantoken IR.",
   "homepage": "https://pantoken.app",
   "bugs": "https://github.com/thedannywahl/pantoken/issues",
@@ -28,6 +28,11 @@
     "./style.canvas.lean.css": "./dist/style.canvas.lean.css",
     "./style.canvas-high-contrast.css": "./dist/style.canvas-high-contrast.css",
     "./style.canvas-high-contrast.lean.css": "./dist/style.canvas-high-contrast.lean.css",
+    "./properties.css": "./dist/properties.css",
+    "./properties.lean.css": "./dist/properties.lean.css",
+    "./scope.css": "./dist/scope.css",
+    "./scope.lean.css": "./dist/scope.lean.css",
+    "./schemes.css": "./dist/schemes.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -36,16 +41,16 @@
   },
   "dependencies": {
     "@pantoken/model": "0.4.0",
-    "@pantoken/plugin-kit": "0.3.1",
-    "@pantoken/tokens": "0.5.0",
-    "@pantoken/utils": "1.0.3"
+    "@pantoken/plugin-kit": "0.3.2",
+    "@pantoken/tokens": "0.6.0",
+    "@pantoken/utils": "1.1.0"
   },
   "devDependencies": {
     "@pantoken/plugin-props-minify": "0.1.4",
-    "@types/node": "^26.5.1",
+    "@types/node": "^26.6.2",
     "typescript": "^7.0.2",
-    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.2",
-    "vite-plus": "0.3.2"
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.0.0-rc.0",
+    "vite-plus": "1.0.0-rc.0"
   },
   "engines": {
     "node": ">=22.18.0"

package/dist/src-YRQrYIS8.mjs

@@ -1,257 +0,0 @@
-import { checkPlugins, definePlugin } from "@pantoken/plugin-kit";
-import { elevationDeclarations, focusOutlineDeclarations } from "@pantoken/utils";
-import { byTheme } from "@pantoken/tokens";
-//#region src/foundation.ts
-/**
-* The elevation (`--instui-elevation-*`) and focus-outline (`--instui-focus-outline-*`) composite
-* custom properties shared by the ready-made token sheets and docs-only themed token sheet.
-*/
-const foundationPlugin = definePlugin({
-	name: "pantoken-foundation",
-	css: () => ({
-		marker: "pantoken foundation — elevation + focus-outline custom properties",
-		declarations: [...elevationDeclarations(), ...focusOutlineDeclarations()]
-	})
-});
-//#endregion
-//#region src/theme-variants.ts
-const ICON_TOKEN_PREFIX = "--instui-icon-";
-function withoutIcons(tokens) {
-	return tokens.filter((t) => !t.name.startsWith(ICON_TOKEN_PREFIX));
-}
-function lightBranch(value) {
-	const trimmed = value.trim();
-	if (!trimmed.startsWith("light-dark(") || !trimmed.endsWith(")")) return null;
-	const inner = trimmed.slice(11, -1);
-	let depth = 0;
-	for (let i = 0; i < inner.length; i += 1) {
-		const char = inner[i];
-		if (char === "(") depth += 1;
-		else if (char === ")") depth = Math.max(0, depth - 1);
-		else if (char === "," && depth === 0) return inner.slice(0, i).trim();
-	}
-	return null;
-}
-function rebrandLightOnly(tokens) {
-	return tokens.map((token) => {
-		const light = lightBranch(token.value);
-		if (!light) return token;
-		return {
-			...token,
-			value: light,
-			themed: false
-		};
-	});
-}
-/** Build a theme token set with optional icon removal and rebrand light-only collapse. */
-function themedTokens(theme, options) {
-	const { includeIcons = true, lightOnly = false } = options ?? {};
-	const themeTokens = byTheme(theme);
-	const modeTokens = lightOnly ? rebrandLightOnly(themeTokens) : themeTokens;
-	return includeIcons ? modeTokens : withoutIcons(modeTokens);
-}
-//#endregion
-//#region src/emit.ts
-function renderSection(scope, { layer, pairs }) {
-	const declarations = [
-		`  ${scope} {`,
-		...pairs.map(([name, val]) => `    ${name}: ${val.trim()};`),
-		"  }"
-	];
-	return layer ? [
-		`@layer ${layer} {`,
-		...declarations,
-		"}"
-	].join("\n") : declarations.join("\n");
-}
-function renderProperty({ name, syntax, value }, inherits) {
-	return [
-		`@property ${name} {`,
-		`  syntax: "${syntax}";`,
-		`  inherits: ${inherits};`,
-		`  initial-value: ${value.trim()};`,
-		`}`
-	].join("\n");
-}
-/**
-* Build a CSS file string: typed `@property` registrations (top-level, theme-agnostic) followed by
-* one or more scoped declaration sections (whose selector the consuming build may rewrite).
-*
-* @example Register one typed property and emit a scoped declaration
-* ```ts
-* import { buildCssFile } from "@pantoken/css";
-*
-* buildCssFile({
-*   comments: ["/* my tokens *\/"],
-*   scope: ":root",
-*   properties: [{ name: "--instui-color-brand", syntax: "<color>", value: "#0374b5" }],
-*   sections: [{ pairs: [["--instui-color-text-base", "var(--instui-color-brand)"]] }],
-* });
-* ```
-*
-* @example Wrap a section in a CSS cascade layer
-* ```ts
-* import { buildCssFile } from "@pantoken/css";
-*
-* buildCssFile({
-*   comments: [],
-*   scope: ":root",
-*   sections: [{ layer: "pantoken", pairs: [["--instui-spacing-space-md", "1rem"]] }],
-* });
-* ```
-*/
-function buildCssFile({ comments, scope, properties = [], sections, inherits = true }) {
-	const blocks = [properties.map((p) => renderProperty(p, inherits)).join("\n\n"), ...sections.filter((s) => s.pairs.length > 0).map((s) => renderSection(scope, s))].filter(Boolean);
-	return [
-		`/* DO NOT EDIT — generated by @pantoken/css */`,
-		"",
-		...comments,
-		"",
-		...blocks,
-		""
-	].join("\n");
-}
-//#endregion
-//#region src/to-css.ts
-/**
-* `toCss` — turn the token IR into CSS: concrete tokens become typed `@property` registrations,
-* themed/reference tokens become scoped declarations. Plugins can contribute or post-process CSS.
-*
-* @module
-*/
-/** True when a value cannot be a typed `@property` initial-value (`var()` / `light-dark()`). */
-function isContextual(value) {
-	return /var\(|light-dark\(/.test(value);
-}
-function marked(marker, css) {
-	return marker ? `/* ${marker} */\n${css}` : css;
-}
-/**
-* Emit CSS for a token IR.
-*
-* @param tokens - The IR (e.g. from `@pantoken/tokens`).
-* @param options - {@link ToCssOptions}.
-* @returns The CSS string.
-*
-* @example Build the default stylesheet
-* ```ts
-* import { toCss } from "@pantoken/css";
-* import { tokens } from "@pantoken/tokens";
-*
-* const stylesheet = toCss(tokens); // declarations under :root
-* ```
-*
-* @example Scope declarations to a class and build another theme
-* ```ts
-* import { toCss } from "@pantoken/css";
-* import { byTheme } from "@pantoken/tokens";
-*
-* toCss(byTheme("canvas"), { scope: '[class*="instui"]' });
-* ```
-*
-* @example Post-process with a plugin css hook
-* ```ts
-* import { toCss } from "@pantoken/css";
-* import { tokens } from "@pantoken/tokens";
-*
-* toCss(tokens, {
-*   plugins: [
-*     {
-*       name: "focus",
-*       css: () => ({ append: ":focus-visible { outline: 2px solid var(--instui-focus-color); }" }),
-*     },
-*   ],
-* });
-* ```
-*/
-function toCss(tokens, options = {}) {
-	const { scope = ":root", plugins = [] } = options;
-	const properties = [];
-	const declarations = [];
-	for (const token of tokens) if (isContextual(token.value)) declarations.push([token.name, token.value]);
-	else properties.push({
-		name: token.name,
-		syntax: token.syntax,
-		value: token.value
-	});
-	let css = buildCssFile({
-		comments: ["/* Instructure design tokens + icon set (pantoken) */", "/* Concrete tokens are registered with @property; themed/reference tokens are declarations. */"],
-		scope,
-		properties,
-		sections: [{ pairs: declarations }]
-	});
-	const prepends = [];
-	const appends = [];
-	for (const plugin of checkPlugins(plugins, "css")) {
-		const c = plugin.css?.({
-			tokens,
-			css
-		});
-		if (!c) continue;
-		appendContribution(c, prepends, appends);
-	}
-	return [
-		...prepends,
-		css,
-		...appends
-	].filter(Boolean).join("\n\n");
-}
-function appendContribution(c, prepends, appends) {
-	if (c.prepend) prepends.push(marked(c.marker, c.prepend));
-	const typedProps = [];
-	const declPairs = [...c.declarations ?? []];
-	for (const p of c.properties ?? []) if (isContextual(p.value)) declPairs.push([p.name, p.value]);
-	else typedProps.push(p);
-	const block = [
-		typedProps.map((p) => `@property ${p.name} {\n  syntax: "${p.syntax}";\n  inherits: true;\n  initial-value: ${p.value};\n}`).join("\n\n"),
-		declPairs.length ? `:root {\n${declPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}\n}` : "",
-		c.append
-	].filter(Boolean).join("\n\n");
-	if (block) appends.push(marked(c.marker, block));
-}
-//#endregion
-//#region src/index.ts
-/**
-* `@pantoken/css` — emit Instructure design tokens as `@property`-typed CSS.
-*
-* {@link toCss} turns any token IR into CSS; {@link css} is the ready-made `rebrand` stylesheet and
-* {@link leanCss} is a lean variant that drops the full `--instui-icon-*` set (the ~1,777 icon data-URIs
-* that dominate the sheet) for CDN/embed delivery — ~a sixth the size over the wire. Both carry the
-* elevation + focus-outline foundation (composite custom properties whose pure builders live in
-* `@pantoken/utils`), so a component sheet resolves its shadows and focus ring against the token sheet
-* alone. A DOM side-effect entry lives at `@pantoken/css/inject`; static files at
-* `@pantoken/css/style.css` and `@pantoken/css/style.lean.css`.
-*
-* @module
-* @beta
-*/
-function themedCss(theme, options) {
-	return toCss(themedTokens(theme, options), { plugins: [foundationPlugin] });
-}
-/**
-* The ready-made `rebrand` stylesheet string (typed: concrete tokens as `@property` registrations).
-*
-* @example
-* ```ts
-* import { css } from "@pantoken/css";
-*
-* document.head.insertAdjacentHTML("beforeend", `<style>${css}</style>`);
-* ```
-*/
-const css = themedCss("rebrand");
-/**
-* The lean `rebrand` stylesheet string — the full sheet minus the `--instui-icon-*` glyph tokens (the
-* ~1,777 icon data-URIs that make up most of {@link css}). Roughly a sixth the size over the wire; the
-* recommended foundation for CDN/embed delivery. Components reference only a handful of icons, shipped
-* separately as `@pantoken/components`'s `component-icons.css`; consumers who use `var(--instui-icon-*)`
-* broadly should load the full {@link css} (or the `icons.css` glyph sheet). See
-* `@pantoken/css/style.lean.css`.
-*
-* @example
-* ```ts
-* import { leanCss } from "@pantoken/css";
-* ```
-*/
-const leanCss = toCss(themedTokens("rebrand", { includeIcons: false }), { plugins: [foundationPlugin] });
-//#endregion
-export { buildCssFile as i, leanCss as n, toCss as r, css as t };