@pantoken/css 0.1.0 → 0.2.0

package/dist/index.d.mts

@@ -98,7 +98,7 @@ declare function buildCssFile({
 //#endregion
 //#region src/index.d.ts
 /**
- * The ready-made `rebrand` stylesheet string.
+ * The ready-made `rebrand` stylesheet string (typed: concrete tokens as `@property` registrations).
  *
  * @example
  * ```ts
@@ -108,5 +108,19 @@ declare function buildCssFile({
  * ```
  */
 declare const css: string;
+/**
+ * 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";
+ * ```
+ */
+declare const leanCss: string;
 //#endregion
-export { type CssSection, type ToCssOptions, buildCssFile, css, css as default, toCss };
+export { type CssSection, type ToCssOptions, buildCssFile, css, css as default, leanCss, toCss };

package/dist/index.mjs

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

package/dist/inject.mjs

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

package/dist/{src-DnTeei9H.mjs → src-7owOg5z_.mjs}

@@ -1,5 +1,6 @@
+import { checkPlugins, definePlugin } from "@pantoken/plugin-kit";
 import { tokens } from "@pantoken/tokens";
-import { checkPlugins } from "@pantoken/plugin-kit";
+import { elevationDeclarations, focusOutlineDeclarations } from "@pantoken/utils";
 //#region src/emit.ts
 function renderSection(scope, { layer, pairs }) {
 	const declarations = [
@@ -147,9 +148,13 @@ function toCss(tokens, options = {}) {
 }
 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 = [
-		(c.properties ?? []).map((p) => `@property ${p.name} {\n  syntax: "${p.syntax}";\n  inherits: true;\n  initial-value: ${p.value};\n}`).join("\n\n"),
-		c.declarations?.length ? `:root {\n${c.declarations.map(([n, v]) => `  ${n}: ${v};`).join("\n")}\n}` : "",
+		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));
@@ -159,15 +164,32 @@ function appendContribution(c, prepends, appends) {
 /**
 * `@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.
-* A DOM side-effect entry lives at `@pantoken/css/inject`, and a static file at
-* `@pantoken/css/style.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
 */
 /**
-* The ready-made `rebrand` stylesheet string.
+* The elevation (`--instui-elevation-*`) and focus-outline (`--instui-focus-outline-*`) composite custom
+* properties. Their pure builders live in `@pantoken/utils`, so this package (which sits below
+* `@pantoken/components`) owns the emission without an upward dependency. The values are contextual
+* (`var(...)`), so they land as `:root` declarations in both the typed and lean builds.
+*/
+const foundationPlugin = definePlugin({
+	name: "pantoken-foundation",
+	css: () => ({
+		marker: "pantoken foundation — elevation + focus-outline custom properties",
+		declarations: [...elevationDeclarations(), ...focusOutlineDeclarations()]
+	})
+});
+/**
+* The ready-made `rebrand` stylesheet string (typed: concrete tokens as `@property` registrations).
 *
 * @example
 * ```ts
@@ -176,6 +198,22 @@ function appendContribution(c, prepends, appends) {
 * document.head.insertAdjacentHTML("beforeend", `<style>${css}</style>`);
 * ```
 */
-const css = toCss(tokens);
+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-";
+/**
+* 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(tokens.filter((t) => !t.name.startsWith(ICON_TOKEN_PREFIX)), { plugins: [foundationPlugin] });
 //#endregion
-export { toCss as n, buildCssFile as r, css as t };
+export { buildCssFile as i, leanCss as n, toCss as r, css as t };