@pantoken/css 0.3.10 → 0.4.0

package/dist/index.d.mts

@@ -1,9 +1,29 @@
-import { PantokenPlugin, PropertyRule, Token } from "@pantoken/model";
+import { BOUNDARY_ATTR, BOUNDARY_CLASS, COLOR_ATTR, SCHEME_ATTR, THEME_ATTR, colorClass, schemeClass, schemeScopeSelector, schemeScopeSelectors, themeClass, themeScopeSelector, themeScopeSelectors } from "@pantoken/utils";
+import { PantokenPlugin, PropertyRule, Theme, Token } from "@pantoken/model";
 //#region src/to-css.d.ts
+/**
+ * Which half of the sheet to emit.
+ *
+ * `@property` registrations are document-global — the last registration of a given name wins for the
+ * whole document — so two full sheets on one page fight over every concrete token. Emitting
+ * registrations once (`"properties"`) and each theme as declarations only (`"declarations"`) lets
+ * several themes coexist.
+ */
+type CssEmitTarget = "all" | "properties" | "declarations";
 /** Options for {@link toCss}. */
 interface ToCssOptions {
   /** The selector scoped declarations are emitted under (default `":root"`). */
   scope?: string;
+  /** Plain cascade layer name wrapping the declarations (no `@` prefix). Omit to skip the wrapper. */
+  layer?: string;
+  /** Which half of the sheet to emit (default `"all"`). */
+  emit?: CssEmitTarget;
+  /**
+   * Emit every token as a declaration rather than routing concrete tokens to `@property`. Required
+   * for a theme block that can nest inside another theme's subtree: an incomplete block would
+   * inherit the enclosing theme's values for the tokens it omits.
+   */
+  declareAll?: boolean;
   /** Plugins whose `css` hooks run after the base CSS is built (default: none). */
   plugins?: readonly PantokenPlugin[];
 }
@@ -89,6 +109,97 @@ export declare function buildCssFile({ comments, scope, properties, sections, in
   inherits?: boolean;
 }): string;
 //#endregion
+//#region src/theme-variants.d.ts
+/** The light branch of a `light-dark()` value, or `null` when the value isn't one. */
+export declare function lightBranch(value: string): string | null;
+/** The dark branch of a `light-dark()` value, or `null` when the value isn't one. */
+export declare function darkBranch(value: string): string | null;
+/** A color scheme a scope can be pinned to. */
+type Scheme = "light" | "dark";
+/**
+ * The tokens whose value actually changes when a theme is pinned to `scheme` — i.e. the ones written
+ * with `light-dark()`. This is the minimal forcing block for `[data-pantoken-scheme]`.
+ */
+export declare function schemeOverrideTokens(theme: Theme, scheme: Scheme): Token[];
+/** Build a theme token set with optional icon removal and light/dark collapse. */
+export declare function themedTokens(theme: Theme, options?: {
+  includeIcons?: boolean;
+  lightOnly?: boolean;
+  scheme?: Scheme;
+}): Token[];
+//#endregion
+//#region src/scoped.d.ts
+/** Cascade layers this module emits into, in ascending precedence order. */
+export declare const LAYERS: readonly string[];
+/** The `@layer` statement that fixes layer precedence. Must come before any layered rule. */
+export declare const layerOrderCss: () => string;
+/** Options shared by the scoped emitters. */
+interface ScopedCssOptions {
+  /** Drop the `--instui-icon-*` glyph tokens (default `false`). */
+  includeIcons?: boolean;
+  /** Plugins whose `css` hooks run after the base CSS is built. */
+  plugins?: readonly PantokenPlugin[];
+}
+/**
+ * The document-global `@property` registrations, with no declarations. Load this once per document;
+ * every theme sheet below is declarations only, so loading a second theme cannot clobber it.
+ */
+export declare function propertiesCss(theme: Theme, options?: ScopedCssOptions): string;
+/**
+ * One theme's complete token set, scoped to any element carrying `data-pantoken-theme="<theme>"` or
+ * the equivalent `.--pantoken-theme-<theme>` class.
+ *
+ * Every token is emitted as a declaration — including the concrete ones that would normally become
+ * `@property` initial-values — because an initial-value is document-global and cannot vary per scope.
+ */
+export declare function scopedThemeCss(theme: Theme, options?: ScopedCssOptions): string;
+/**
+ * Pin a subtree's color scheme.
+ *
+ * `color-scheme` is an ordinary inherited property, so one rule keyed to the scope attribute (or its
+ * class twin) resolves every `light-dark()` token below it. No token needs flattening: this sheet is
+ * a couple of hundred bytes, not the ~87kb an explicit per-token override table would cost.
+ */
+export declare function scopedSchemeCss(scheme: Scheme): string;
+/**
+ * The light and dark scheme pins, as a standalone sheet. Theme-independent — the scheme only decides
+ * which branch of `light-dark()` wins, which the browser does for us.
+ *
+ * @example
+ * ```ts
+ * import { schemesCss } from "@pantoken/css";
+ *
+ * schemesCss();
+ * ```
+ */
+export declare function schemesCss(): string;
+/** Options for {@link multiScopeCss}. */
+interface MultiScopeCssOptions extends ScopedCssOptions {
+  /** Themes to emit scope blocks for. */
+  themes: readonly Theme[];
+  /** The theme whose concrete tokens back the one-time `@property` registrations. */
+  defaultTheme: Theme;
+  /** Include the light/dark `color-scheme` pins (default `true`; see {@link schemesCss}). */
+  schemes?: boolean;
+}
+/**
+ * The complete multi-scope sheet: layer order, one set of `@property` registrations, a shared base
+ * block, a token block per theme, and the light/dark `color-scheme` pins.
+ *
+ * Tokens are partitioned by whether their value actually varies across `themes`. Invariant tokens go
+ * in the shared base block once; varying tokens are repeated in full in *every* theme block. That
+ * second half is what makes nesting safe — a theme block that omitted a varying token would inherit
+ * the enclosing scope's value for it.
+ *
+ * @example
+ * ```ts
+ * import { multiScopeCss } from "@pantoken/css";
+ *
+ * multiScopeCss({ themes: ["rebrand", "canvas"], defaultTheme: "rebrand" });
+ * ```
+ */
+export declare function multiScopeCss(options: MultiScopeCssOptions): string;
+//#endregion
 //#region src/index.d.ts
 /**
  * The ready-made `rebrand` stylesheet string (typed: concrete tokens as `@property` registrations).
@@ -116,4 +227,4 @@ export declare const css: string;
  */
 export declare const leanCss: string;
 //#endregion
-export { type CssSection, type ToCssOptions, css as default };
+export { BOUNDARY_ATTR, BOUNDARY_CLASS, COLOR_ATTR, type CssEmitTarget, type CssSection, type MultiScopeCssOptions, SCHEME_ATTR, type Scheme, type ScopedCssOptions, THEME_ATTR, type ToCssOptions, colorClass, css as default, schemeClass, schemeScopeSelector, schemeScopeSelectors, themeClass, themeScopeSelector, themeScopeSelectors };

package/dist/index.mjs

@@ -1,2 +1,2 @@
-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 };
+import { C as buildCssFile, D as themedTokens, E as schemeOverrideTokens, S as toCss, T as lightBranch, _ as scopedSchemeCss, a as COLOR_ATTR, b as themeScopeSelector, c as THEME_ATTR, d as multiScopeCss, f as propertiesCss, g as schemesCss, h as schemeScopeSelectors, i as BOUNDARY_CLASS, l as colorClass, m as schemeScopeSelector, n as leanCss, o as LAYERS, p as schemeClass, r as BOUNDARY_ATTR, s as SCHEME_ATTR, t as css, u as layerOrderCss, v as scopedThemeCss, w as darkBranch, x as themeScopeSelectors, y as themeClass } from "./src-h17qjVzD.mjs";
+export { BOUNDARY_ATTR, BOUNDARY_CLASS, COLOR_ATTR, LAYERS, SCHEME_ATTR, THEME_ATTR, buildCssFile, colorClass, css, css as default, darkBranch, layerOrderCss, leanCss, lightBranch, multiScopeCss, propertiesCss, schemeClass, schemeOverrideTokens, schemeScopeSelector, schemeScopeSelectors, schemesCss, scopedSchemeCss, scopedThemeCss, themeClass, themeScopeSelector, themeScopeSelectors, themedTokens, toCss };

package/dist/inject.mjs

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