@pantoken/css 0.2.8 → 0.3.0

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import { i as buildCssFile, n as leanCss, r as toCss, t as css } from "./src-DGq2ZbhV.mjs";
+import { i as buildCssFile, n as leanCss, r as toCss, t as css } from "./src-YRQrYIS8.mjs";
 export { buildCssFile, css, css as default, leanCss, toCss };

package/dist/inject.mjs

@@ -1,4 +1,4 @@
-import { t as css } from "./src-DGq2ZbhV.mjs";
+import { t as css } from "./src-YRQrYIS8.mjs";
 //#region src/inject.ts
 /**
 * `@pantoken/css/inject` — a DOM side-effect entry. Importing it injects the pantoken stylesheet

package/dist/{src-DGq2ZbhV.mjs → src-YRQrYIS8.mjs}

@@ -1,6 +1,6 @@
-import { tokens } from "@pantoken/tokens";
 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
@@ -14,6 +14,43 @@ const foundationPlugin = definePlugin({
 	})
 });
 //#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 = [
@@ -188,6 +225,9 @@ function appendContribution(c, prepends, appends) {
 * @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).
 *
@@ -198,9 +238,7 @@ function appendContribution(c, prepends, appends) {
 * document.head.insertAdjacentHTML("beforeend", `<style>${css}</style>`);
 * ```
 */
-const css = toCss(tokens, { plugins: [foundationPlugin] });
-/** The `--instui-icon-*` glyph tokens — the full icon set as data-URIs, ~86% of the sheet's bytes. */
-const ICON_TOKEN_PREFIX = "--instui-icon-";
+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
@@ -214,6 +252,6 @@ const ICON_TOKEN_PREFIX = "--instui-icon-";
 * import { leanCss } from "@pantoken/css";
 * ```
 */
-const leanCss = toCss(tokens.filter((t) => !t.name.startsWith(ICON_TOKEN_PREFIX)), { plugins: [foundationPlugin] });
+const leanCss = toCss(themedTokens("rebrand", { includeIcons: false }), { plugins: [foundationPlugin] });
 //#endregion
 export { buildCssFile as i, leanCss as n, toCss as r, css as t };