@pie-players/pie-theme 0.3.65 → 0.3.66

package/dist/daisyui-mapping.js

@@ -0,0 +1,168 @@
+/**
+ * The one table that says which DaisyUI slot each `--pie-*` token comes from,
+ * and one renderer that turns it into variables.
+ *
+ * It exists because the same 47-row table was written out four times — the
+ * provider adapter here, two mappers in `@pie-players/pie-theme-daisyui`, and
+ * that package's `bridge.css` — and copies drift. Two defects lived in the drift:
+ * `--pie-missing` was corrected to `--color-warning` in one copy while three kept
+ * it on `--color-error`, and the parity test that was supposed to catch this
+ * compared only the token names, never the slot each one derived from.
+ *
+ * CSS cannot import a table, so `bridge.css` stays hand-written and is held to
+ * this one by `tests/daisyui-mapping-parity.test.mjs` instead.
+ */
+import { LEGIBLE_NON_TEXT_MINIMUM, LEGIBLE_TEXT_MINIMUM, UNMEASURED_HUE_WEIGHT, UNMEASURED_NON_TEXT_HUE_WEIGHT, legibleColorAgainst, } from "./contrast.js";
+export const DAISY_SLOT_CSS_VARIABLES = {
+    base100: "--color-base-100",
+    base200: "--color-base-200",
+    base300: "--color-base-300",
+    baseContent: "--color-base-content",
+    primary: "--color-primary",
+    secondary: "--color-secondary",
+    accent: "--color-accent",
+    neutral: "--color-neutral",
+    neutralContent: "--color-neutral-content",
+    success: "--color-success",
+    error: "--color-error",
+    warning: "--color-warning",
+};
+const legible = (token, from) => ({
+    token,
+    kind: "legible",
+    from,
+    minimum: LEGIBLE_TEXT_MINIMUM,
+    fallbackWeight: UNMEASURED_HUE_WEIGHT,
+});
+const boundary = (token, from) => ({
+    token,
+    kind: "legible",
+    from,
+    minimum: LEGIBLE_NON_TEXT_MINIMUM,
+    fallbackWeight: UNMEASURED_NON_TEXT_HUE_WEIGHT,
+});
+const direct = (token, from) => ({
+    token,
+    kind: "direct",
+    from,
+});
+const mix = (token, from, towards, weight) => ({ token, kind: "mix", from, towards, weight });
+export const DAISYUI_PIE_TOKEN_MAP = [
+    direct("--pie-background", "base100"),
+    direct("--pie-background-dark", "base200"),
+    direct("--pie-secondary-background", "base200"),
+    direct("--pie-dropdown-background", "base300"),
+    direct("--pie-text", "baseContent"),
+    direct("--pie-primary", "primary"),
+    mix("--pie-primary-light", "primary", "base100", 60),
+    mix("--pie-primary-dark", "primary", "baseContent", 75),
+    mix("--pie-faded-primary", "primary", "base100", 20),
+    direct("--pie-secondary", "secondary"),
+    mix("--pie-secondary-light", "secondary", "base100", 60),
+    mix("--pie-secondary-dark", "secondary", "baseContent", 75),
+    direct("--pie-tertiary", "accent"),
+    mix("--pie-tertiary-light", "accent", "base100", 60),
+    // Boundaries. `--color-base-300` is a surface tint, so an outline painted with
+    // it sits at 1.09:1 to 1.53:1 across the shipped themes against the 3:1 SC
+    // 1.4.11 asks -- and since `--pie-button-bg` is `--color-base-100`, the page's
+    // own colour, that outline is the only thing separating a button from the page.
+    boundary("--pie-border", "base300"),
+    // Not corrected: the players use this one for card edges and pane dividers,
+    // which 1.4.11 exempts, and a 3:1 outline around every item card would be a
+    // visual regression rather than a fix.
+    direct("--pie-border-light", "base200"),
+    boundary("--pie-border-dark", "neutral"),
+    boundary("--pie-border-gray", "base300"),
+    // Foregrounds. DaisyUI's semantic slots are chosen to sit behind their
+    // `-content` counterparts; PIE paints these as `color:`.
+    legible("--pie-correct", "success"),
+    mix("--pie-correct-secondary", "success", "base100", 20),
+    legible("--pie-correct-tertiary", "success"),
+    legible("--pie-correct-icon", "success"),
+    // Authored red emphasis inside content. Taken from the error slot through the
+    // legible correction rather than mixed from a bare red: a red-toward-ink mix
+    // falls under 4.5:1 on seven of the 35 shipped themes (2.91:1 on `aqua`),
+    // while the corrected error family clears it on all of them.
+    legible("--pie-content-emphasis", "error"),
+    legible("--pie-incorrect", "error"),
+    mix("--pie-incorrect-secondary", "error", "base100", 20),
+    legible("--pie-incorrect-icon", "error"),
+    // Warning, not error: an unanswered question is not a wrong one, and both on
+    // `--color-error` made the two states the same colour in every theme. This is
+    // the mapping the rest of PIE declares -- pie-elements-ng keys `--pie-missing`
+    // to `warning`, and the assessment toolkit's `.pie-warning` rule paints it.
+    legible("--pie-missing", "warning"),
+    legible("--pie-missing-icon", "warning"),
+    direct("--pie-disabled", "base300"),
+    direct("--pie-disabled-secondary", "base200"),
+    mix("--pie-focus-checked", "primary", "base100", 20),
+    direct("--pie-focus-checked-border", "primary"),
+    direct("--pie-focus-unchecked", "base200"),
+    direct("--pie-focus-unchecked-border", "base300"),
+    direct("--pie-blue-grey-100", "base100"),
+    direct("--pie-blue-grey-300", "base200"),
+    direct("--pie-blue-grey-600", "base300"),
+    direct("--pie-blue-grey-900", "baseContent"),
+    direct("--pie-black", "neutralContent"),
+    direct("--pie-white", "base100"),
+    direct("--pie-button-bg", "base100"),
+    boundary("--pie-button-border", "base300"),
+    direct("--pie-button-color", "baseContent"),
+    direct("--pie-button-hover-bg", "base200"),
+    boundary("--pie-button-hover-border", "base300"),
+    direct("--pie-button-hover-color", "baseContent"),
+    // DaisyUI guarantees base-content against the page, not every deeper surface.
+    // `valentine` is 4.17:1 on base-300. A 70% share is the nearest 5% step
+    // toward base-100 that keeps the pair at 4.5:1 across all shipped themes.
+    mix("--pie-button-active-bg", "base300", "base100", 70),
+    // The keyboard focus indicator, and the one token here that is only ever an
+    // `outline` -- eight declarations across the tools, never a fill. It takes
+    // `--color-primary`, which DaisyUI pairs with `--color-primary-content` for
+    // fills rather than choosing for contrast against the page, so it inherited
+    // 1.90:1 in `business`. `--pie-primary` itself cannot be corrected the same
+    // way: PIE paints it as a foreground in some places and as a button fill in
+    // others, and a value legible against the page is the wrong one behind
+    // `--color-primary-content`.
+    boundary("--pie-button-focus-outline", "primary"),
+];
+/**
+ * @param read one DaisyUI slot's value, or `undefined` when this source has none
+ * @param measure resolves a colour so `legible` entries can be corrected against
+ *   a measured ratio. Omit it where the values are `var()` references rather than
+ *   colours: those cannot be measured, and every `legible` entry then takes its
+ *   pessimistic fixed weight instead.
+ */
+export function resolveDaisyPieVariables(args) {
+    const { read, measure } = args;
+    const resolved = {};
+    for (const entry of DAISYUI_PIE_TOKEN_MAP) {
+        const from = read(entry.from);
+        if (!from) {
+            continue;
+        }
+        let value;
+        if (entry.kind === "direct") {
+            value = from;
+        }
+        else if (entry.kind === "mix") {
+            const towards = read(entry.towards);
+            value = towards
+                ? `color-mix(in srgb, ${from} ${entry.weight}%, ${towards})`
+                : undefined;
+        }
+        else {
+            value = legibleColorAgainst({
+                hue: from,
+                text: read("baseContent"),
+                background: read("base100"),
+                measure,
+                minimum: entry.minimum,
+                unmeasuredHueWeight: entry.fallbackWeight,
+            });
+        }
+        if (value) {
+            resolved[entry.token] = value;
+        }
+    }
+    return resolved;
+}

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import { PieThemeElement, definePieTheme } from "./theme-element.js";
 export { PieThemeElement, definePieTheme };
-export { DAISYUI_THEME_PROVIDER_ADAPTER, getPieThemeProvider, listPieThemeProviders, registerPieThemeProvider, resolveProviderVariables, unregisterPieThemeProvider, type ThemeProviderAdapter, } from "./providers.js";
-export { isThemeMode, isThemeScope, normalizePieThemeVariables, type ThemeMode, type ThemeScope, type ThemeVariables, } from "./theme-types.js";
-export { DARK_THEME_VARS, LIGHT_THEME_VARS } from "./theme-defaults.js";
-export { BUILTIN_PIE_COLOR_SCHEMES, getPieColorScheme, listPieColorSchemes, registerPieColorSchemes, resolvePieColorSchemeVariables, unregisterPieColorScheme, type PieColorSchemeDefinition, type PieColorSchemePreview, } from "./color-schemes.js";
+export { DAISYUI_THEME_PROVIDER_ADAPTER, getPieThemeProvider, PIE_THEME_PROVIDER_NONE, listPieThemeProviders, registerPieThemeProvider, resolveProviderVariables, unregisterPieThemeProvider, type ThemeProviderAdapter, } from "./providers.js";
+export { DAISY_SLOT_CSS_VARIABLES, DAISYUI_PIE_TOKEN_MAP, resolveDaisyPieVariables, type DaisyMappingEntry, type DaisySlot, } from "./daisyui-mapping.js";
+export { createCanvasColorMeasure, type ColorMeasure, } from "./contrast.js";
+export { isThemeMode, isThemeScope, normalizePieThemeVariables, type ColorSchemeSnapshot, type PieColorSchemeDescriptor, type PieColorSchemePreview, type PieThemeDiagnostic, type PieThemeDiagnosticCode, type PieThemeObserver, type PieThemeResolutionStatus, type RegisteredPieColorScheme, type RegistrationReceipt, type ResolvePieThemeInput, type ThemeResolution, type ThemeMode, type ThemeScope, type ThemeTokenName, type ThemeVariables, type Unsubscribe, } from "./theme-types.js";
+export type { PieThemeSchemeParticipation, PieThemeTokenRegistry, PieThemeTokenRegistryEntry, PieThemeTokenScope, PieThemeTokenStatus, } from "./token-registry-types.js";
+export { listPieColorSchemes, observePieColorSchemes, registerPieColorSchemes, resolvePieTheme, } from "./color-schemes.js";

package/dist/index.js

@@ -1,7 +1,8 @@
 import { PieThemeElement, definePieTheme } from "./theme-element.js";
 export { PieThemeElement, definePieTheme };
-export { DAISYUI_THEME_PROVIDER_ADAPTER, getPieThemeProvider, listPieThemeProviders, registerPieThemeProvider, resolveProviderVariables, unregisterPieThemeProvider, } from "./providers.js";
+export { DAISYUI_THEME_PROVIDER_ADAPTER, getPieThemeProvider, PIE_THEME_PROVIDER_NONE, listPieThemeProviders, registerPieThemeProvider, resolveProviderVariables, unregisterPieThemeProvider, } from "./providers.js";
+export { DAISY_SLOT_CSS_VARIABLES, DAISYUI_PIE_TOKEN_MAP, resolveDaisyPieVariables, } from "./daisyui-mapping.js";
+export { createCanvasColorMeasure, } from "./contrast.js";
 export { isThemeMode, isThemeScope, normalizePieThemeVariables, } from "./theme-types.js";
-export { DARK_THEME_VARS, LIGHT_THEME_VARS } from "./theme-defaults.js";
-export { BUILTIN_PIE_COLOR_SCHEMES, getPieColorScheme, listPieColorSchemes, registerPieColorSchemes, resolvePieColorSchemeVariables, unregisterPieColorScheme, } from "./color-schemes.js";
+export { listPieColorSchemes, observePieColorSchemes, registerPieColorSchemes, resolvePieTheme, } from "./color-schemes.js";
 definePieTheme();

package/dist/providers.d.ts

@@ -4,9 +4,25 @@ export interface ThemeProviderAdapter {
     canRead(target: HTMLElement): boolean;
     read(target: HTMLElement): ThemeVariables;
 }
+/**
+ * Provider mode that resolves nothing, leaving this package's shipped defaults
+ * in place.
+ *
+ * `"auto"` lets any registered adapter that can read the target win, which on a
+ * DaisyUI page means PIE tokens follow `--color-*`. This is how a host asks for
+ * the palette it would have had before adopting a provider — the first question
+ * to answer when colours differ between two environments.
+ *
+ * Distinct from naming an unregistered provider, which lands in the same place
+ * by accident. `unregisterPieThemeProvider` cannot remove this one because it is
+ * not in the registry at all, so the mode cannot be taken away from a host.
+ */
+export declare const PIE_THEME_PROVIDER_NONE = "none";
 export declare const DAISYUI_THEME_PROVIDER_ADAPTER: ThemeProviderAdapter;
 export declare function registerPieThemeProvider(adapter: ThemeProviderAdapter): void;
 export declare function unregisterPieThemeProvider(providerId: string): void;
+/** Package-internal invalidation used by connected pie-theme elements. */
+export declare function observePieThemeProviders(listener: () => void): () => void;
 export declare function listPieThemeProviders(): ThemeProviderAdapter[];
 export declare function getPieThemeProvider(providerId: string): ThemeProviderAdapter | undefined;
 export declare function resolveProviderVariables(args: {

package/dist/providers.js

@@ -1,102 +1,52 @@
+import { createCanvasColorMeasure } from "./contrast.js";
+import { DAISY_SLOT_CSS_VARIABLES, resolveDaisyPieVariables, } from "./daisyui-mapping.js";
 import { normalizePieThemeVariables, } from "./theme-types.js";
 const themeProviderRegistry = new Map();
+const themeProviderObservers = new Set();
+function notifyThemeProviderObservers() {
+    for (const listener of [...themeProviderObservers]) {
+        try {
+            listener();
+        }
+        catch {
+            console.warn("[pie-theme] A theme-provider observer threw while receiving an update.");
+        }
+    }
+}
+/**
+ * Provider mode that resolves nothing, leaving this package's shipped defaults
+ * in place.
+ *
+ * `"auto"` lets any registered adapter that can read the target win, which on a
+ * DaisyUI page means PIE tokens follow `--color-*`. This is how a host asks for
+ * the palette it would have had before adopting a provider — the first question
+ * to answer when colours differ between two environments.
+ *
+ * Distinct from naming an unregistered provider, which lands in the same place
+ * by accident. `unregisterPieThemeProvider` cannot remove this one because it is
+ * not in the registry at all, so the mode cannot be taken away from a host.
+ */
+export const PIE_THEME_PROVIDER_NONE = "none";
 function trimCssVar(value) {
     const trimmed = value.trim();
     return trimmed ? trimmed : undefined;
 }
-function mixResolvedColors(args) {
-    if (!args.left || !args.right) {
-        return undefined;
+let cachedColorMeasure;
+/**
+ * One measurer for the lifetime of the page. Parsing a colour does not depend on
+ * which document asked, and a resolution pass touches every corrected slot.
+ */
+function colorMeasure() {
+    if (cachedColorMeasure === undefined) {
+        cachedColorMeasure = createCanvasColorMeasure();
     }
-    return `color-mix(in srgb, ${args.left} ${args.leftWeight}, ${args.right})`;
+    return cachedColorMeasure;
 }
 function mapComputedDaisyVars(computed) {
-    const value = (key) => trimCssVar(computed.getPropertyValue(key));
-    return normalizePieThemeVariables({
-        "--pie-background": value("--color-base-100"),
-        "--pie-background-dark": value("--color-base-200"),
-        "--pie-secondary-background": value("--color-base-200"),
-        "--pie-dropdown-background": value("--color-base-300"),
-        "--pie-text": value("--color-base-content"),
-        "--pie-primary": value("--color-primary"),
-        "--pie-primary-light": mixResolvedColors({
-            left: value("--color-primary"),
-            right: value("--color-base-100"),
-            leftWeight: "60%",
-        }),
-        "--pie-primary-dark": mixResolvedColors({
-            left: value("--color-primary"),
-            right: value("--color-base-content"),
-            leftWeight: "75%",
-        }),
-        "--pie-faded-primary": mixResolvedColors({
-            left: value("--color-primary"),
-            right: value("--color-base-100"),
-            leftWeight: "20%",
-        }),
-        "--pie-secondary": value("--color-secondary"),
-        "--pie-secondary-light": mixResolvedColors({
-            left: value("--color-secondary"),
-            right: value("--color-base-100"),
-            leftWeight: "60%",
-        }),
-        "--pie-secondary-dark": mixResolvedColors({
-            left: value("--color-secondary"),
-            right: value("--color-base-content"),
-            leftWeight: "75%",
-        }),
-        "--pie-tertiary": value("--color-accent"),
-        "--pie-tertiary-light": mixResolvedColors({
-            left: value("--color-accent"),
-            right: value("--color-base-100"),
-            leftWeight: "60%",
-        }),
-        "--pie-border": value("--color-base-300"),
-        "--pie-border-light": value("--color-base-200"),
-        "--pie-border-dark": value("--color-neutral"),
-        "--pie-border-gray": value("--color-base-300"),
-        "--pie-correct": value("--color-success"),
-        "--pie-correct-secondary": mixResolvedColors({
-            left: value("--color-success"),
-            right: value("--color-base-100"),
-            leftWeight: "20%",
-        }),
-        "--pie-correct-tertiary": value("--color-success"),
-        "--pie-correct-icon": value("--color-success"),
-        "--pie-incorrect": value("--color-error"),
-        "--pie-incorrect-secondary": mixResolvedColors({
-            left: value("--color-error"),
-            right: value("--color-base-100"),
-            leftWeight: "20%",
-        }),
-        "--pie-incorrect-icon": value("--color-error"),
-        "--pie-missing": value("--color-error"),
-        "--pie-missing-icon": value("--color-error"),
-        "--pie-disabled": value("--color-base-300"),
-        "--pie-disabled-secondary": value("--color-base-200"),
-        "--pie-focus-checked": mixResolvedColors({
-            left: value("--color-primary"),
-            right: value("--color-base-100"),
-            leftWeight: "20%",
-        }),
-        "--pie-focus-checked-border": value("--color-primary"),
-        "--pie-focus-unchecked": value("--color-base-200"),
-        "--pie-focus-unchecked-border": value("--color-base-300"),
-        "--pie-blue-grey-100": value("--color-base-100"),
-        "--pie-blue-grey-300": value("--color-base-200"),
-        "--pie-blue-grey-600": value("--color-base-300"),
-        "--pie-blue-grey-900": value("--color-base-content"),
-        "--pie-black": value("--color-neutral-content"),
-        "--pie-white": value("--color-base-100"),
-        "--pie-button-bg": value("--color-base-100"),
-        "--pie-button-border": value("--color-base-300"),
-        "--pie-button-color": value("--color-base-content"),
-        "--pie-button-hover-bg": value("--color-base-200"),
-        "--pie-button-hover-border": value("--color-base-300"),
-        "--pie-button-hover-color": value("--color-base-content"),
-        "--pie-button-active-bg": value("--color-base-300"),
-        "--pie-button-focus-outline": value("--color-primary"),
-    });
+    return normalizePieThemeVariables(resolveDaisyPieVariables({
+        read: (slot) => trimCssVar(computed.getPropertyValue(DAISY_SLOT_CSS_VARIABLES[slot])),
+        measure: colorMeasure(),
+    }));
 }
 export const DAISYUI_THEME_PROVIDER_ADAPTER = {
     id: "daisyui",
@@ -115,7 +65,15 @@ export function registerPieThemeProvider(adapter) {
     if (!adapter?.id) {
         return;
     }
+    if (adapter.id === PIE_THEME_PROVIDER_NONE) {
+        console.warn(`[pie-theme] Theme-provider id "${PIE_THEME_PROVIDER_NONE}" is reserved.`);
+        return;
+    }
+    if (themeProviderRegistry.get(adapter.id) === adapter) {
+        return;
+    }
     themeProviderRegistry.set(adapter.id, adapter);
+    notifyThemeProviderObservers();
 }
 export function unregisterPieThemeProvider(providerId) {
     if (!providerId) {
@@ -124,7 +82,20 @@ export function unregisterPieThemeProvider(providerId) {
     if (providerId === DAISYUI_THEME_PROVIDER_ADAPTER.id) {
         return;
     }
-    themeProviderRegistry.delete(providerId);
+    if (themeProviderRegistry.delete(providerId)) {
+        notifyThemeProviderObservers();
+    }
+}
+/** Package-internal invalidation used by connected pie-theme elements. */
+export function observePieThemeProviders(listener) {
+    themeProviderObservers.add(listener);
+    let active = true;
+    return () => {
+        if (!active)
+            return;
+        active = false;
+        themeProviderObservers.delete(listener);
+    };
 }
 export function listPieThemeProviders() {
     return [...themeProviderRegistry.values()];
@@ -134,6 +105,12 @@ export function getPieThemeProvider(providerId) {
 }
 export function resolveProviderVariables(args) {
     const providerMode = args.provider?.trim() || "auto";
+    // Before the registry lookup and before the documentElement retry below: the
+    // point of this mode is that nothing resolves, and a retry against a themed
+    // <html> would put the provider's values back.
+    if (providerMode === PIE_THEME_PROVIDER_NONE) {
+        return {};
+    }
     const resolveFromTarget = (target) => {
         if (providerMode && providerMode !== "auto") {
             const provider = themeProviderRegistry.get(providerMode);

package/dist/scheme-participation.d.ts

@@ -0,0 +1,88 @@
+export declare const PIE_THEME_SCHEME_PARTICIPATION: {
+    readonly "--pie-answer-eliminator-strike-color": "optional";
+    readonly "--pie-background": "required";
+    readonly "--pie-background-dark": "required";
+    readonly "--pie-background-light": "excluded";
+    readonly "--pie-black": "required";
+    readonly "--pie-blue-grey-100": "required";
+    readonly "--pie-blue-grey-300": "required";
+    readonly "--pie-blue-grey-600": "required";
+    readonly "--pie-blue-grey-900": "required";
+    readonly "--pie-border": "required";
+    readonly "--pie-border-dark": "required";
+    readonly "--pie-border-gray": "required";
+    readonly "--pie-border-light": "required";
+    readonly "--pie-button-active-bg": "required";
+    readonly "--pie-button-background-color": "excluded";
+    readonly "--pie-button-bg": "required";
+    readonly "--pie-button-border": "required";
+    readonly "--pie-button-border-color": "excluded";
+    readonly "--pie-button-color": "required";
+    readonly "--pie-button-focus-outline": "required";
+    readonly "--pie-button-hover-background-color": "excluded";
+    readonly "--pie-button-hover-bg": "required";
+    readonly "--pie-button-hover-border": "required";
+    readonly "--pie-button-hover-color": "required";
+    readonly "--pie-content-styles": "excluded";
+    readonly "--pie-content-emphasis": "required";
+    readonly "--pie-correct": "required";
+    readonly "--pie-correct-icon": "required";
+    readonly "--pie-correct-secondary": "required";
+    readonly "--pie-correct-tertiary": "required";
+    readonly "--pie-disabled": "required";
+    readonly "--pie-disabled-secondary": "required";
+    readonly "--pie-dropdown-background": "required";
+    readonly "--pie-faded-primary": "required";
+    readonly "--pie-fixed-hue-collapse": "required";
+    readonly "--pie-focus-checked": "required";
+    readonly "--pie-focus-checked-border": "required";
+    readonly "--pie-focus-outline": "excluded";
+    readonly "--pie-focus-ring-color": "excluded";
+    readonly "--pie-focus-unchecked": "required";
+    readonly "--pie-focus-unchecked-border": "required";
+    readonly "--pie-font-scale": "excluded";
+    readonly "--pie-incorrect": "required";
+    readonly "--pie-incorrect-icon": "required";
+    readonly "--pie-incorrect-secondary": "required";
+    readonly "--pie-missing": "required";
+    readonly "--pie-missing-icon": "required";
+    readonly "--pie-passage-header-background": "optional";
+    readonly "--pie-primary": "required";
+    readonly "--pie-primary-dark": "required";
+    readonly "--pie-primary-light": "required";
+    readonly "--pie-secondary": "required";
+    readonly "--pie-secondary-background": "required";
+    readonly "--pie-secondary-dark": "required";
+    readonly "--pie-secondary-light": "required";
+    readonly "--pie-section-player-card-header-background": "optional";
+    readonly "--pie-section-player-card-header-radius": "excluded";
+    readonly "--pie-section-player-card-radius": "excluded";
+    readonly "--pie-section-player-item-media-aspect-ratio": "excluded";
+    readonly "--pie-section-player-item-media-min-height": "excluded";
+    readonly "--pie-section-player-item-media-max-height": "excluded";
+    readonly "--pie-section-player-layout-max-width": "excluded";
+    readonly "--pie-section-player-tab-active-background": "optional";
+    readonly "--pie-section-player-tab-active-color": "optional";
+    readonly "--pie-section-player-tab-background": "optional";
+    readonly "--pie-section-player-tab-color": "optional";
+    readonly "--pie-section-player-tab-gap": "excluded";
+    readonly "--pie-section-player-tab-padding-block": "excluded";
+    readonly "--pie-section-player-tab-track-padding": "excluded";
+    readonly "--pie-section-player-tab-track-radius": "excluded";
+    readonly "--pie-section-player-tab-zoom-comp": "excluded";
+    readonly "--pie-tertiary": "required";
+    readonly "--pie-tertiary-light": "required";
+    readonly "--pie-text": "required";
+    readonly "--pie-annotation-underline": "required";
+    readonly "--pie-annotation-underline-dark": "required";
+    readonly "--pie-tool-annotation-toolbar-border": "required";
+    readonly "--pie-tool-line-reader-control-color": "excluded";
+    readonly "--pie-tool-line-reader-frame-color": "excluded";
+    readonly "--pie-tool-line-reader-frame-opacity": "excluded";
+    readonly "--pie-tool-trigger-active-background": "optional";
+    readonly "--pie-tool-trigger-active-border-color": "optional";
+    readonly "--pie-tool-trigger-active-color": "optional";
+    readonly "--pie-toolbar-tools-row-height": "excluded";
+    readonly "--pie-tts-controls-row-height": "excluded";
+    readonly "--pie-white": "required";
+};

package/dist/scheme-participation.js

@@ -0,0 +1,89 @@
+/* Generated from token-registry.json by scripts/generate-theme-css.ts. */
+export const PIE_THEME_SCHEME_PARTICIPATION = {
+    "--pie-answer-eliminator-strike-color": "optional",
+    "--pie-background": "required",
+    "--pie-background-dark": "required",
+    "--pie-background-light": "excluded",
+    "--pie-black": "required",
+    "--pie-blue-grey-100": "required",
+    "--pie-blue-grey-300": "required",
+    "--pie-blue-grey-600": "required",
+    "--pie-blue-grey-900": "required",
+    "--pie-border": "required",
+    "--pie-border-dark": "required",
+    "--pie-border-gray": "required",
+    "--pie-border-light": "required",
+    "--pie-button-active-bg": "required",
+    "--pie-button-background-color": "excluded",
+    "--pie-button-bg": "required",
+    "--pie-button-border": "required",
+    "--pie-button-border-color": "excluded",
+    "--pie-button-color": "required",
+    "--pie-button-focus-outline": "required",
+    "--pie-button-hover-background-color": "excluded",
+    "--pie-button-hover-bg": "required",
+    "--pie-button-hover-border": "required",
+    "--pie-button-hover-color": "required",
+    "--pie-content-styles": "excluded",
+    "--pie-content-emphasis": "required",
+    "--pie-correct": "required",
+    "--pie-correct-icon": "required",
+    "--pie-correct-secondary": "required",
+    "--pie-correct-tertiary": "required",
+    "--pie-disabled": "required",
+    "--pie-disabled-secondary": "required",
+    "--pie-dropdown-background": "required",
+    "--pie-faded-primary": "required",
+    "--pie-fixed-hue-collapse": "required",
+    "--pie-focus-checked": "required",
+    "--pie-focus-checked-border": "required",
+    "--pie-focus-outline": "excluded",
+    "--pie-focus-ring-color": "excluded",
+    "--pie-focus-unchecked": "required",
+    "--pie-focus-unchecked-border": "required",
+    "--pie-font-scale": "excluded",
+    "--pie-incorrect": "required",
+    "--pie-incorrect-icon": "required",
+    "--pie-incorrect-secondary": "required",
+    "--pie-missing": "required",
+    "--pie-missing-icon": "required",
+    "--pie-passage-header-background": "optional",
+    "--pie-primary": "required",
+    "--pie-primary-dark": "required",
+    "--pie-primary-light": "required",
+    "--pie-secondary": "required",
+    "--pie-secondary-background": "required",
+    "--pie-secondary-dark": "required",
+    "--pie-secondary-light": "required",
+    "--pie-section-player-card-header-background": "optional",
+    "--pie-section-player-card-header-radius": "excluded",
+    "--pie-section-player-card-radius": "excluded",
+    "--pie-section-player-item-media-aspect-ratio": "excluded",
+    "--pie-section-player-item-media-min-height": "excluded",
+    "--pie-section-player-item-media-max-height": "excluded",
+    "--pie-section-player-layout-max-width": "excluded",
+    "--pie-section-player-tab-active-background": "optional",
+    "--pie-section-player-tab-active-color": "optional",
+    "--pie-section-player-tab-background": "optional",
+    "--pie-section-player-tab-color": "optional",
+    "--pie-section-player-tab-gap": "excluded",
+    "--pie-section-player-tab-padding-block": "excluded",
+    "--pie-section-player-tab-track-padding": "excluded",
+    "--pie-section-player-tab-track-radius": "excluded",
+    "--pie-section-player-tab-zoom-comp": "excluded",
+    "--pie-tertiary": "required",
+    "--pie-tertiary-light": "required",
+    "--pie-text": "required",
+    "--pie-annotation-underline": "required",
+    "--pie-annotation-underline-dark": "required",
+    "--pie-tool-annotation-toolbar-border": "required",
+    "--pie-tool-line-reader-control-color": "excluded",
+    "--pie-tool-line-reader-frame-color": "excluded",
+    "--pie-tool-line-reader-frame-opacity": "excluded",
+    "--pie-tool-trigger-active-background": "optional",
+    "--pie-tool-trigger-active-border-color": "optional",
+    "--pie-tool-trigger-active-color": "optional",
+    "--pie-toolbar-tools-row-height": "excluded",
+    "--pie-tts-controls-row-height": "excluded",
+    "--pie-white": "required",
+};

package/dist/theme-css.d.ts

@@ -0,0 +1,5 @@
+/** Package-internal pure renderer for the two checked-in CSS adapters. */
+export declare function renderPieThemeCss(): Readonly<{
+    tokensCss: string;
+    colorSchemesCss: string;
+}>;

package/dist/theme-css.js

@@ -0,0 +1,26 @@
+import { assertCanonicalThemeDefinitions, getBaseThemeVariables, listBuiltInColorSchemeDefinitions, } from "./theme-definitions.js";
+const GENERATED_HEADER = "/* Generated by @pie-players/pie-theme. Run `bun run generate:css`; do not edit. */";
+function renderDeclarations(variables) {
+    return Object.entries(variables)
+        .sort(([left], [right]) => (left < right ? -1 : left > right ? 1 : 0))
+        .map(([token, value]) => `\t${token}: ${value};`)
+        .join("\n");
+}
+function renderRule(selectors, variables) {
+    return `${selectors.join(",\n")} {\n${renderDeclarations(variables)}\n}`;
+}
+function renderTokensCss() {
+    return `${GENERATED_HEADER}\n\n${renderRule([":root", '[data-theme="light"]', ':where(pie-theme[theme="light"])'], getBaseThemeVariables("light"))}\n\n${renderRule(['[data-theme="dark"]', ':where(pie-theme[theme="dark"])'], getBaseThemeVariables("dark"))}\n`;
+}
+function renderColorSchemesCss() {
+    const rules = listBuiltInColorSchemeDefinitions().map((scheme) => renderRule([`[data-color-scheme="${scheme.id}"]`], scheme.variables));
+    return `${GENERATED_HEADER}\n\n${rules.join("\n\n")}\n`;
+}
+/** Package-internal pure renderer for the two checked-in CSS adapters. */
+export function renderPieThemeCss() {
+    assertCanonicalThemeDefinitions();
+    return Object.freeze({
+        tokensCss: renderTokensCss(),
+        colorSchemesCss: renderColorSchemesCss(),
+    });
+}

package/dist/theme-definitions.d.ts

@@ -0,0 +1,21 @@
+import type { PieThemeSchemeParticipation } from "./token-registry-types.js";
+import type { PieColorSchemeDescriptor, PieColorSchemePreview, PieThemeDiagnostic, ThemeTokenName, ThemeVariables } from "./theme-types.js";
+type BuiltInColorSchemeDefinition = Readonly<{
+    id: string;
+    name: string;
+    description?: string;
+    variables: Readonly<ThemeVariables>;
+}>;
+export declare function diagnoseThemeContrast(variables: Readonly<ThemeVariables>, schemeId?: string, relevantTokens?: ReadonlySet<string>): readonly PieThemeDiagnostic[];
+export declare function getBaseThemeVariables(baseTheme: "light" | "dark"): Readonly<ThemeVariables>;
+export declare function listBuiltInColorSchemeDefinitions(): readonly BuiltInColorSchemeDefinition[];
+export declare function getBuiltInColorSchemeDefinition(id: string): BuiltInColorSchemeDefinition | undefined;
+export declare function getDefaultColorSchemeDescriptor(): PieColorSchemeDescriptor;
+export declare function createPieColorSchemePreview(variables: Readonly<ThemeVariables>): PieColorSchemePreview;
+export declare function getSchemeParticipation(token: string): PieThemeSchemeParticipation | undefined;
+export declare function getRequiredSchemeTokens(): readonly ThemeTokenName[];
+export declare function getOptionalSchemeTokens(): readonly ThemeTokenName[];
+export declare function createBuiltInColorSchemeDescriptor(definition: BuiltInColorSchemeDefinition): PieColorSchemeDescriptor;
+/** Build-time invariant check; browser entries only read the frozen definitions. */
+export declare function assertCanonicalThemeDefinitions(): void;
+export {};