@pie-players/pie-theme 0.3.64 → 0.3.66

package/dist/contrast.js

@@ -0,0 +1,151 @@
+/**
+ * Enough colour maths to keep a resolved token legible: WCAG relative luminance,
+ * a contrast ratio, and the largest share of a hue that still clears a threshold
+ * against the surface it is painted on.
+ *
+ * Colour parsing is injected rather than implemented here. Provider slots resolve
+ * to `oklch()` under DaisyUI 5, so an oklch-to-sRGB implementation in this file
+ * would be a second opinion about colours the browser has already decided;
+ * `createCanvasColorMeasure` asks the browser instead.
+ */
+/** WCAG 2.2 1.4.3 for text. */
+export const LEGIBLE_TEXT_MINIMUM = 4.5;
+/** WCAG 2.2 1.4.11 for component boundaries, states and graphical objects. */
+export const LEGIBLE_NON_TEXT_MINIMUM = 3;
+/**
+ * The hue share used when contrast cannot be measured. 30% is the largest 5%
+ * step that clears 4.5:1 for every success, error and warning slot across
+ * DaisyUI's 28 shipped themes — measured across all 84 combinations rather than
+ * picked. It is deliberately pessimistic: a theme whose slot needed no
+ * correction at all still gets pulled most of the way to the text colour.
+ */
+export const UNMEASURED_HUE_WEIGHT = 30;
+/**
+ * The same pessimistic fallback for a 3:1 target: 35% is the largest 5% step
+ * that clears 3:1 for `--color-base-300` and `--color-neutral` in all 28 themes.
+ */
+export const UNMEASURED_NON_TEXT_HUE_WEIGHT = 35;
+const HUE_WEIGHT_STEP = 5;
+function channelLuminance(channel) {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+/** WCAG relative luminance. Alpha is ignored; composite before calling. */
+export function relativeLuminance(color) {
+    return (0.2126 * channelLuminance(color.r) +
+        0.7152 * channelLuminance(color.g) +
+        0.0722 * channelLuminance(color.b));
+}
+export function contrastRatio(foreground, background) {
+    const a = relativeLuminance(foreground);
+    const b = relativeLuminance(background);
+    return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+}
+export function mixTowards(hue, target, hueWeight) {
+    return `color-mix(in srgb, ${hue} ${hueWeight}%, ${target})`;
+}
+/**
+ * Resolves any CSS colour the browser understands to 8-bit sRGB by painting one
+ * pixel and reading it back, so `oklch()` and `color-mix()` need no parser here.
+ *
+ * Returns `null` where there is no canvas to paint on — a server render, or a
+ * DOM shim in tests — which callers treat as "contrast is unmeasurable" rather
+ * than as an error.
+ */
+export function createCanvasColorMeasure() {
+    if (typeof document === "undefined") {
+        return null;
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    const context = canvas.getContext?.("2d", { willReadFrequently: true });
+    if (!context) {
+        return null;
+    }
+    /**
+     * `fillStyle` silently ignores a value it cannot parse, leaving the previous
+     * one in place. Assigning over two different sentinels separates the cases
+     * exactly: a parsed colour serializes the same both times, an ignored one
+     * keeps whichever sentinel it started from.
+     */
+    return (value) => {
+        const trimmed = value.trim();
+        if (!trimmed) {
+            return null;
+        }
+        try {
+            context.fillStyle = "#000000";
+            context.fillStyle = trimmed;
+            const fromBlack = context.fillStyle;
+            context.fillStyle = "#ffffff";
+            context.fillStyle = trimmed;
+            if (context.fillStyle !== fromBlack) {
+                return null;
+            }
+            context.clearRect(0, 0, 1, 1);
+            context.fillRect(0, 0, 1, 1);
+            const data = context.getImageData(0, 0, 1, 1).data;
+            return {
+                r: data[0],
+                g: data[1],
+                b: data[2],
+                a: data[3] / 255,
+            };
+        }
+        catch {
+            return null;
+        }
+    };
+}
+/**
+ * The given hue if it already clears `minimum` against `background`, otherwise
+ * the largest share of it that does, mixed toward `text`.
+ *
+ * Mixing toward the theme's own text colour rather than toward black or white
+ * uses the theme's own guarantee: `text` is what that theme chose to be readable
+ * on that surface, in a light theme and a dark one alike. Stepping down from the
+ * top keeps as much hue as the threshold allows, so a slot that was already fine
+ * comes back untouched and a slot that was invisible loses only what it must.
+ */
+export function legibleColorAgainst(args) {
+    const { hue, text, background, measure } = args;
+    if (!hue) {
+        return undefined;
+    }
+    if (!text) {
+        return hue;
+    }
+    const minimum = args.minimum ?? LEGIBLE_TEXT_MINIMUM;
+    const fallbackWeight = args.unmeasuredHueWeight ?? UNMEASURED_HUE_WEIGHT;
+    const unmeasured = () => mixTowards(hue, text, fallbackWeight);
+    if (!measure || !background) {
+        return unmeasured();
+    }
+    const surface = measure(background);
+    const raw = measure(hue);
+    // Compositing a translucent value needs the surface behind the surface, which
+    // a provider adapter reading one element does not have. Correcting against a
+    // guess is worse than taking the pessimistic weight.
+    if (!surface || !raw || surface.a < 1 || raw.a < 1) {
+        return unmeasured();
+    }
+    if (contrastRatio(raw, surface) >= minimum) {
+        return hue;
+    }
+    for (let weight = 100 - HUE_WEIGHT_STEP; weight >= HUE_WEIGHT_STEP; weight -= HUE_WEIGHT_STEP) {
+        const candidate = mixTowards(hue, text, weight);
+        const resolved = measure(candidate);
+        // The measurer cannot resolve `color-mix`, so every further step is
+        // unmeasurable too. Stop rather than walking down to the text colour.
+        if (!resolved) {
+            return unmeasured();
+        }
+        if (contrastRatio(resolved, surface) >= minimum) {
+            return candidate;
+        }
+    }
+    // Nothing with any hue left in it passes, so fall back to the one colour the
+    // theme guarantees against this surface.
+    return text;
+}

package/dist/daisyui-mapping.d.ts

@@ -0,0 +1,58 @@
+/**
+ * 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 { type ColorMeasure } from "./contrast.js";
+/** The DaisyUI slots this mapping reads. Not all of DaisyUI's palette. */
+export type DaisySlot = "base100" | "base200" | "base300" | "baseContent" | "primary" | "secondary" | "accent" | "neutral" | "neutralContent" | "success" | "error" | "warning";
+export declare const DAISY_SLOT_CSS_VARIABLES: Record<DaisySlot, string>;
+export type DaisyMappingEntry = 
+/** The slot, verbatim. */
+{
+    token: string;
+    kind: "direct";
+    from: DaisySlot;
+}
+/** A fixed blend, for tints and shades that are not contrast-critical. */
+ | {
+    token: string;
+    kind: "mix";
+    from: DaisySlot;
+    towards: DaisySlot;
+    weight: number;
+}
+/**
+ * The slot if it already clears `minimum` against the page, otherwise the
+ * largest share of it that does. For the tokens PIE paints as a foreground or
+ * as the boundary of a control, where a DaisyUI surface slot taken verbatim is
+ * unreadable.
+ */
+ | {
+    token: string;
+    kind: "legible";
+    from: DaisySlot;
+    minimum: number;
+    fallbackWeight: number;
+};
+export declare const DAISYUI_PIE_TOKEN_MAP: readonly DaisyMappingEntry[];
+/**
+ * @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 declare function resolveDaisyPieVariables(args: {
+    read: (slot: DaisySlot) => string | undefined;
+    measure?: ColorMeasure | null;
+}): Record<string, string>;

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);