@pie-players/pie-theme 0.3.67 → 0.3.69

package/dist/scheme-participation.js

@@ -24,6 +24,12 @@ export const PIE_THEME_SCHEME_PARTICIPATION = {
     "--pie-button-hover-bg": "required",
     "--pie-button-hover-border": "required",
     "--pie-button-hover-color": "required",
+    "--pie-calculator-series-1": "optional",
+    "--pie-calculator-series-2": "optional",
+    "--pie-calculator-series-3": "optional",
+    "--pie-calculator-series-4": "optional",
+    "--pie-calculator-series-5": "optional",
+    "--pie-calculator-series-6": "optional",
     "--pie-content-styles": "excluded",
     "--pie-content-emphasis": "required",
     "--pie-correct": "required",
@@ -51,11 +57,15 @@ export const PIE_THEME_SCHEME_PARTICIPATION = {
     "--pie-primary": "required",
     "--pie-primary-dark": "required",
     "--pie-primary-light": "required",
+    "--pie-scrollbar-thumb": "excluded",
+    "--pie-scrollbar-thumb-hover": "excluded",
+    "--pie-scrollbar-track": "excluded",
     "--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-background-dark": "optional",
     "--pie-section-player-card-header-radius": "excluded",
     "--pie-section-player-card-radius": "excluded",
     "--pie-section-player-item-media-aspect-ratio": "excluded",
@@ -85,5 +95,10 @@ export const PIE_THEME_SCHEME_PARTICIPATION = {
     "--pie-tool-trigger-active-color": "optional",
     "--pie-toolbar-tools-row-height": "excluded",
     "--pie-tts-controls-row-height": "excluded",
+    "--pie-tts-line-highlight": "excluded",
+    "--pie-tts-sentence-highlight": "excluded",
+    "--pie-tts-word-highlight": "excluded",
+    "--pie-tts-word-shadow": "excluded",
+    "--pie-tts-word-underline": "excluded",
     "--pie-white": "required",
 };

package/dist/theme-definitions.d.ts

@@ -6,6 +6,23 @@ type BuiltInColorSchemeDefinition = Readonly<{
     description?: string;
     variables: Readonly<ThemeVariables>;
 }>;
+/**
+ * The CSS `color-scheme` keyword a palette implies, or `null` when the token
+ * values cannot decide it.
+ *
+ * A scheme replaces every colour, but nothing in CSS infers polarity from custom
+ * properties, so UA-styled controls -- `input`, `select`, scrollbars, native form
+ * widgets -- keep whatever polarity the host's theme declared. A dark
+ * accommodation on a light host therefore renders their text in the light-mode
+ * system colour: measured at roughly 1.1:1 against `yellow-on-blue`.
+ *
+ * Decided by whether black or white contrasts better against the resolved
+ * background, which is the same test that picks a legible foreground. `null` for
+ * a background `parseOpaqueColor` rejects -- a translucent value, a `var()`
+ * reference out to a host property, the transparent light base -- because
+ * polarity then depends on the host's backdrop and is the host's to declare.
+ */
+export declare function resolvePaletteColorScheme(variables: Readonly<ThemeVariables>): "light" | "dark" | null;
 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[];

package/dist/theme-definitions.js

@@ -31,7 +31,7 @@ const LIGHT_BASE_THEME = {
     "--pie-secondary-dark": "#880e4f",
     "--pie-tertiary": "#146eb3",
     "--pie-tertiary-light": "#d0e2f0",
-    "--pie-background": "rgba(255, 255, 255, 0)",
+    "--pie-background": "#ffffff",
     "--pie-background-dark": "#ecedf1",
     "--pie-secondary-background": "rgba(241, 241, 241, 1)",
     "--pie-dropdown-background": "#e0e1e6",
@@ -411,7 +411,7 @@ const BUILT_IN_COLOR_SCHEMES = deepFreeze([
             "--pie-focus-unchecked": "#ffddee",
             "--pie-focus-unchecked-border": "#000000",
             "--pie-blue-grey-100": "#ffeef5",
-            "--pie-blue-grey-300": "#ffccdd",
+            "--pie-blue-grey-300": "#ffb3cc",
             "--pie-blue-grey-600": "#cc6688",
             "--pie-blue-grey-900": "#000000",
             "--pie-tool-annotation-toolbar-border": "var(--pie-border)",
@@ -730,12 +730,7 @@ const DEFAULT_SCHEME_DESCRIPTOR = deepFreeze({
     name: "Default",
     description: "Standard PIE colors",
     kind: "default",
-    preview: createPieColorSchemePreview({
-        ...LIGHT_BASE_THEME,
-        // The live light Base Theme intentionally reveals its host surface. A
-        // catalog swatch has no such surface, so composite it on white explicitly.
-        "--pie-background": "#ffffff",
-    }),
+    preview: createPieColorSchemePreview(LIGHT_BASE_THEME),
 });
 const REQUIRED_SCHEME_TOKENS = Object.freeze(Object.entries(PIE_THEME_SCHEME_PARTICIPATION)
     .filter(([, participation]) => participation === "required")
@@ -807,6 +802,17 @@ const PIE_THEME_CONTRAST_RELATIONSHIPS = deepFreeze([
         minimum: 3,
         role: "incorrect feedback icon",
     },
+    {
+        // The error-surface pair. `--pie-incorrect-secondary` is a tint of the
+        // page, about 1.1:1 against it in most schemes, so a banner painted with
+        // it reads as a banner only by its `--pie-incorrect` edge -- and the ink
+        // on it is the page's own, not the error hue: `--pie-incorrect` against
+        // this tint falls to 4.14:1 under Black on White.
+        foreground: "--pie-text",
+        background: "--pie-incorrect-secondary",
+        minimum: 4.5,
+        role: "incorrect feedback surface text",
+    },
     {
         foreground: "--pie-missing-icon",
         background: "--pie-background",
@@ -904,12 +910,6 @@ function parseOpaqueColor(value) {
         return { r: 0, g: 0, b: 0 };
     if (normalized === "white")
         return { r: 255, g: 255, b: 255 };
-    if (normalized === "rgba(255, 255, 255, 0)") {
-        // The transparent light Base Theme is an externally observed behavior. Its
-        // effective contrast depends on the host backdrop and cannot be certified
-        // from the token value alone.
-        return null;
-    }
     const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(normalized);
     if (hex) {
         const expanded = hex[1].length === 3
@@ -958,6 +958,31 @@ function resolveColor(variables, token, seen = new Set()) {
         ? resolveColor(variables, reference[1], seen)
         : value;
 }
+/**
+ * The CSS `color-scheme` keyword a palette implies, or `null` when the token
+ * values cannot decide it.
+ *
+ * A scheme replaces every colour, but nothing in CSS infers polarity from custom
+ * properties, so UA-styled controls -- `input`, `select`, scrollbars, native form
+ * widgets -- keep whatever polarity the host's theme declared. A dark
+ * accommodation on a light host therefore renders their text in the light-mode
+ * system colour: measured at roughly 1.1:1 against `yellow-on-blue`.
+ *
+ * Decided by whether black or white contrasts better against the resolved
+ * background, which is the same test that picks a legible foreground. `null` for
+ * a background `parseOpaqueColor` rejects -- a translucent value, a `var()`
+ * reference out to a host property, the transparent light base -- because
+ * polarity then depends on the host's backdrop and is the host's to declare.
+ */
+export function resolvePaletteColorScheme(variables) {
+    const value = resolveColor(variables, "--pie-background");
+    const background = value ? parseOpaqueColor(value) : null;
+    if (!background)
+        return null;
+    const againstWhite = contrastRatio({ r: 255, g: 255, b: 255 }, background);
+    const againstBlack = contrastRatio({ r: 0, g: 0, b: 0 }, background);
+    return againstWhite > againstBlack ? "dark" : "light";
+}
 export function diagnoseThemeContrast(variables, schemeId, relevantTokens) {
     const diagnostics = [];
     for (const relationship of PIE_THEME_CONTRAST_RELATIONSHIPS) {
@@ -1063,10 +1088,7 @@ function validateBuiltInDefinitions() {
 function validateBaseThemes() {
     const failures = [];
     for (const baseTheme of ["light", "dark"]) {
-        const measurableVariables = baseTheme === "light"
-            ? { ...BASE_THEMES.light, "--pie-background": "#ffffff" }
-            : BASE_THEMES.dark;
-        for (const diagnostic of diagnoseThemeContrast(measurableVariables, `${baseTheme}-base`)) {
+        for (const diagnostic of diagnoseThemeContrast(BASE_THEMES[baseTheme], `${baseTheme}-base`)) {
             failures.push(`${baseTheme}: ${diagnostic.message}`);
         }
     }

package/dist/theme-element.d.ts

@@ -28,6 +28,22 @@ export declare class PieThemeElement extends HTMLElementBase {
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     protected getTarget(): HTMLElement;
     protected applyTheme(): void;
+    /**
+     * Provider adapters resolve by reading custom properties off the target, and
+     * those are selected by the target's own `data-theme` -- daisyUI's `--color-*`
+     * are the case that matters. So the target has to be carrying the incoming
+     * theme before the read: resolving first resolves the palette of the theme
+     * being replaced and leaves every `--pie-*` value one selection behind, with
+     * nothing to re-resolve it until some other attribute changes.
+     *
+     * The attributes are restored rather than left in place. For
+     * `scope="document"` the ownership arbitration in `applyTheme` decides whether
+     * this element may stamp them at all, and `ensureDocumentThemeBaseline` has to
+     * see the host's pre-existing value to have something to restore on
+     * disconnect. Stamp and restore happen in one synchronous pass, so the
+     * transient state is never painted.
+     */
+    private resolveProviderVariablesForState;
     private resolveThemeState;
     private clearPreviousTarget;
     private clearPreviousKeys;

package/dist/theme-element.js

@@ -48,6 +48,31 @@ function parseVariableOverrides(value) {
     }
     return output;
 }
+/**
+ * `color-scheme` decides how UA-styled controls paint -- `input` and `select`
+ * text, scrollbars, native form widgets -- and no amount of custom properties
+ * reaches them. A scheme that replaces the palette without it leaves those
+ * controls on the host theme's polarity, which under a dark accommodation on a
+ * light host means dark-on-dark.
+ *
+ * `null` restores rather than removes. Clearing a scheme has to undo this
+ * element's keyword, and the thing to return to is whatever the host declared --
+ * removing outright would take a host's own `color-scheme` away the first time a
+ * document-scoped element resolved without a scheme, which is most of the time.
+ * A self-scoped target has no host declaration to preserve, so its caller passes
+ * no baseline and `null` does remove.
+ */
+function applyColorScheme(target, colorScheme, baseline) {
+    if (colorScheme) {
+        target.style.setProperty("color-scheme", colorScheme);
+    }
+    else if (baseline) {
+        target.style.setProperty("color-scheme", baseline.value, baseline.priority);
+    }
+    else {
+        target.style.removeProperty("color-scheme");
+    }
+}
 const documentThemeOwners = new Map();
 let documentThemeBaseline = null;
 let documentThemeAppliedKeys = new Set();
@@ -55,6 +80,12 @@ function ensureDocumentThemeBaseline(target, tokens) {
     documentThemeBaseline ??= {
         dataTheme: target.getAttribute("data-theme"),
         dataColorScheme: target.getAttribute("data-color-scheme"),
+        colorScheme: target.style.getPropertyValue("color-scheme")
+            ? {
+                value: target.style.getPropertyValue("color-scheme"),
+                priority: target.style.getPropertyPriority("color-scheme"),
+            }
+            : null,
         variables: new Map(),
     };
     for (const token of tokens) {
@@ -92,6 +123,7 @@ function applyDocumentThemeState(target, state) {
     else {
         target.removeAttribute("data-color-scheme");
     }
+    applyColorScheme(target, state.colorScheme, documentThemeBaseline?.colorScheme ?? null);
     for (const [token, value] of Object.entries(state.variables)) {
         target.style.setProperty(token, value);
     }
@@ -111,6 +143,12 @@ function restoreDocumentThemeBaseline(target) {
     else {
         target.setAttribute("data-color-scheme", baseline.dataColorScheme);
     }
+    if (baseline.colorScheme) {
+        target.style.setProperty("color-scheme", baseline.colorScheme.value, baseline.colorScheme.priority);
+    }
+    else {
+        target.style.removeProperty("color-scheme");
+    }
     restoreDocumentThemeVariables(target);
     documentThemeBaseline = null;
     documentThemeAppliedKeys.clear();
@@ -209,10 +247,8 @@ export class PieThemeElement extends HTMLElementBase {
         if (this.previousTarget && this.previousTarget !== target) {
             this.clearPreviousTarget();
         }
-        const providerVariables = resolveProviderVariables({
-            target,
-            provider: this.provider,
-        });
+        const dataColorScheme = this.scheme === "default" ? null : this.scheme;
+        const providerVariables = this.resolveProviderVariablesForState(target, dataTheme, dataColorScheme);
         const resolution = resolvePieTheme({
             baseTheme: effectiveTheme,
             providerVariables,
@@ -221,7 +257,8 @@ export class PieThemeElement extends HTMLElementBase {
         });
         const state = Object.freeze({
             dataTheme,
-            dataColorScheme: this.scheme === "default" ? null : this.scheme,
+            dataColorScheme,
+            colorScheme: resolution.colorScheme,
             variables: resolution.variables,
         });
         if (this.scope === "document") {
@@ -245,6 +282,7 @@ export class PieThemeElement extends HTMLElementBase {
             else {
                 target.removeAttribute("data-color-scheme");
             }
+            applyColorScheme(target, state.colorScheme, null);
             this.clearPreviousKeys(target);
             for (const [key, value] of Object.entries(resolution.variables)) {
                 target.style.setProperty(key, value);
@@ -253,6 +291,40 @@ export class PieThemeElement extends HTMLElementBase {
         this.previousTarget = target;
         this.previousKeys = new Set(Object.keys(resolution.variables));
     }
+    /**
+     * Provider adapters resolve by reading custom properties off the target, and
+     * those are selected by the target's own `data-theme` -- daisyUI's `--color-*`
+     * are the case that matters. So the target has to be carrying the incoming
+     * theme before the read: resolving first resolves the palette of the theme
+     * being replaced and leaves every `--pie-*` value one selection behind, with
+     * nothing to re-resolve it until some other attribute changes.
+     *
+     * The attributes are restored rather than left in place. For
+     * `scope="document"` the ownership arbitration in `applyTheme` decides whether
+     * this element may stamp them at all, and `ensureDocumentThemeBaseline` has to
+     * see the host's pre-existing value to have something to restore on
+     * disconnect. Stamp and restore happen in one synchronous pass, so the
+     * transient state is never painted.
+     */
+    resolveProviderVariablesForState(target, dataTheme, dataColorScheme) {
+        const setOrRemove = (name, value) => {
+            if (value === null)
+                target.removeAttribute(name);
+            else
+                target.setAttribute(name, value);
+        };
+        const previousTheme = target.getAttribute("data-theme");
+        const previousColorScheme = target.getAttribute("data-color-scheme");
+        setOrRemove("data-theme", dataTheme);
+        setOrRemove("data-color-scheme", dataColorScheme);
+        try {
+            return resolveProviderVariables({ target, provider: this.provider });
+        }
+        finally {
+            setOrRemove("data-theme", previousTheme);
+            setOrRemove("data-color-scheme", previousColorScheme);
+        }
+    }
     resolveThemeState() {
         const rawTheme = this.getAttribute("theme")?.trim();
         if (rawTheme === "auto") {
@@ -286,6 +358,9 @@ export class PieThemeElement extends HTMLElementBase {
             this.clearPreviousKeys(target);
             target.removeAttribute("data-theme");
             target.removeAttribute("data-color-scheme");
+            // Self-scoped targets are the element itself, so anything written here
+            // was written by this element -- no host baseline to preserve.
+            target.style.removeProperty("color-scheme");
         }
         this.previousTarget = null;
         this.previousKeys.clear();

package/dist/theme-types.d.ts

@@ -41,6 +41,11 @@ export type ThemeResolution = Readonly<{
     resolvedScheme: PieColorSchemeDescriptor | null;
     status: PieThemeResolutionStatus;
     variables: Readonly<ThemeVariables>;
+    /**
+     * The CSS `color-scheme` keyword this resolution implies, or `null` when the
+     * host keeps ownership of it -- which is every resolution without a scheme.
+     */
+    colorScheme: "light" | "dark" | null;
     diagnostics: readonly PieThemeDiagnostic[];
 }>;
 export type RegisteredPieColorScheme = Readonly<{