@pie-players/pie-theme 0.3.64 → 0.3.66

package/dist/components.css

@@ -1,8 +1,27 @@
+/* Content classes for authored assessment content, installed as a
+   document-level stylesheet by every player (see players-shared
+   ui/content-styles.ts).
+
+   Colour values resolve through the canonical --pie-* tokens with the original
+   literal kept as the no-theme last resort. The literals came from content
+   authored against a white page: `black` borders, `lightgray` table headers and
+   a white loading scrim are invisible or illegible the moment the surface is
+   not white, and a host that only swaps the theme cannot reach them. Ink takes
+   --pie-text (DaisyUI base-content, the one family guaranteed against the
+   surface), page-coloured fills take --pie-white, and one-step-off-the-page
+   fills take --pie-background-dark. */
 .pie-loading {
+	/* The Figma indigo is --pie-primary at 90%, so the ring follows the theme's
+	   primary instead of pinning MD indigo on every page. */
+	--pie-loading-accent: color-mix(
+		in srgb,
+		var(--pie-primary, #3f51b5) 90%,
+		transparent
+	);
 	position: absolute;
 	height: 100%;
 	width: 100%;
-	background-color: #fff;
+	background-color: var(--pie-white, #fff);
 	bottom: 0;
 	left: 0;
 	right: 0;
@@ -18,12 +37,12 @@
 .pie-loading:before {
 	content: "";
 	background-color: rgba(0, 0, 0, 0);
-	border: 5px solid rgba(63, 81, 181, 0.9);
+	border: 5px solid var(--pie-loading-accent, rgba(63, 81, 181, 0.9));
 	opacity: 0.9;
 	border-right: 5px solid rgba(0, 0, 0, 0);
 	border-left: 5px solid rgba(0, 0, 0, 0);
 	border-radius: 50px;
-	box-shadow: 0 0 35px rgba(63, 81, 181, 0.9);
+	box-shadow: 0 0 35px var(--pie-loading-accent, rgba(63, 81, 181, 0.9));
 	width: 50px;
 	height: 50px;
 	-moz-animation: spinPulse 1s infinite ease-in-out;
@@ -37,12 +56,12 @@
 .pie-loading:after {
 	content: "";
 	background-color: rgba(0, 0, 0, 0);
-	border: 5px solid rgba(63, 81, 181, 0.9);
+	border: 5px solid var(--pie-loading-accent, rgba(63, 81, 181, 0.9));
 	opacity: 0.9;
 	border-left: 5px solid rgba(0, 0, 0, 0);
 	border-right: 5px solid rgba(0, 0, 0, 0);
 	border-radius: 50px;
-	box-shadow: 0 0 15px rgba(63, 81, 181, 0.9);
+	box-shadow: 0 0 15px var(--pie-loading-accent, rgba(63, 81, 181, 0.9));
 	width: 30px;
 	height: 30px;
 	-moz-animation: spinoffPulse 1s infinite linear;
@@ -57,7 +76,7 @@
 	0% {
 		transform: rotate(160deg);
 		opacity: 0;
-		box-shadow: 0 0 1px rgba(63, 81, 181, 0.9);
+		box-shadow: 0 0 1px var(--pie-loading-accent, rgba(63, 81, 181, 0.9));
 	}
 	50% {
 		transform: rotate(145deg);
@@ -159,7 +178,7 @@
 	margin-top: 5px;
 	margin-bottom: 5px;
 	width: 60%;
-	border: 1px solid black;
+	border: 1px solid var(--pie-text, black);
 	padding: 2px;
 	display: block;
 }
@@ -171,7 +190,7 @@
 	margin-top: 5px;
 	margin-bottom: 5px;
 	width: 60%;
-	border: 1px solid black;
+	border: 1px solid var(--pie-text, black);
 	padding: 2px;
 	display: block;
 }
@@ -196,9 +215,13 @@ span.short-quote:after {
 	text-transform: uppercase;
 }
 
+/* Authored red emphasis. --pie-content-emphasis is mapped from the DaisyUI error
+   slot through the legible correction, so it clears 4.5:1 against the page on
+   every shipped theme; the `red` literal it replaces measures 4:1 on white and
+   fails SC 1.4.3 before any theme is involved. */
 .content-emphasis {
 	font-weight: bold;
-	color: red;
+	color: var(--pie-content-emphasis, #b00000);
 }
 
 span.passage-title:before {
@@ -232,6 +255,21 @@ span.passage-title:after {
 	font-style: italic;
 }
 
+/*
+ * The 20% gutters above are a wide-viewport look. Held at a 320px-equivalent
+ * width they leave a ~190px column of very short lines, so they collapse there
+ * instead — SC 1.4.10 Reflow.
+ */
+@media (max-width: 30rem) {
+	.block-quote,
+	.text-block,
+	.equation-block {
+		margin-left: 0;
+		margin-right: 0;
+		width: auto;
+	}
+}
+
 /*
  * Presence sentinel. Players install this stylesheet themselves and read this
  * property to detect whether a host that opted out of installation shipped a
@@ -276,23 +314,23 @@ div.passage-author {
 }
 
 .kds-absolute {
-	border-left: 1px solid black;
-	border-right: 1px solid black;
+	border-left: 1px solid var(--pie-text, black);
+	border-right: 1px solid var(--pie-text, black);
 	padding: 0px 0.3em 0px 0.3em;
 }
 
 .abs {
-	border-left: #000000 1px solid;
-	border-right: #000000 1px solid;
+	border-left: var(--pie-text, #000000) 1px solid;
+	border-right: var(--pie-text, #000000) 1px solid;
 	padding: 0px 0.3em 0px 0.3em;
 }
 
 .kds-border-1 {
-	border: 1px solid black;
+	border: 1px solid var(--pie-text, black);
 }
 
 .kds-border-2 {
-	border: 2px solid black;
+	border: 2px solid var(--pie-text, black);
 }
 
 .kds-center {
@@ -320,7 +358,7 @@ sup.frac {
 }
 
 .kds-fillin {
-	border: 1px solid black;
+	border: 1px solid var(--pie-text, black);
 	display: inline-block;
 	margin: 0em 0.2em;
 	padding-left: 1em;
@@ -329,7 +367,7 @@ sup.frac {
 .fillin {
 	margin: 0em 0.2em;
 	padding-left: 1em;
-	border: #000000 1px solid;
+	border: var(--pie-text, #000000) 1px solid;
 	display: inline-block;
 }
 
@@ -351,7 +389,7 @@ table.kds-fraction {
 }
 
 table.kds-fraction > tbody > tr > td.kds-numerator {
-	border-bottom: 1px solid black;
+	border-bottom: 1px solid var(--pie-text, black);
 	border-left: 0px;
 	border-right: 0px;
 	border-top: 0px;
@@ -376,7 +414,7 @@ table.frac {
 	border-left: 0px;
 	border-top: 0px;
 	border-right: 0px;
-	border-bottom: #000000 1px solid;
+	border-bottom: var(--pie-text, #000000) 1px solid;
 	text-align: center;
 }
 
@@ -457,7 +495,7 @@ b.frac {
 }
 
 .newradical td.vinculum {
-	border-top: 1px solid black;
+	border-top: 1px solid var(--pie-text, black);
 	padding: 0px;
 	vertical-align: top;
 }
@@ -478,7 +516,7 @@ b.frac {
 }
 
 .kds-verdana2t {
-	border: 1px solid white;
+	border: 1px solid var(--pie-white, white);
 	text-align: left;
 	text-decoration: none;
 	vertical-align: top;
@@ -488,7 +526,7 @@ b.frac {
 	vertical-align: top;
 	text-align: left;
 	text-decoration: none;
-	border: 1px solid white;
+	border: 1px solid var(--pie-white, white);
 }
 
 .kds-whole-number {
@@ -504,58 +542,65 @@ b.frac {
 }
 
 table.KdsTable01 {
-	border: 1px solid black;
+	border: 1px solid var(--pie-text, black);
 	border-collapse: collapse;
 	border-spacing: 0px;
 }
 
 table.KdsTable01 > tbody > tr > th {
-	background-color: #d3d3d3;
-	border: 1px solid black;
+	background-color: var(--pie-background-dark, #d3d3d3);
+	border: 1px solid var(--pie-text, black);
 	font-weight: normal;
 	padding: 2px;
 	text-align: center;
 }
 
 table.KdsTable01 > tbody > tr > th.bold {
-	background-color: #d3d3d3;
-	border: 1px solid black;
+	background-color: var(--pie-background-dark, #d3d3d3);
+	border: 1px solid var(--pie-text, black);
 	font-weight: bold;
 	padding: 2px;
 	text-align: center;
 }
 
 table.KdsTable01 > tbody > tr > td {
-	border: 1px solid black;
+	border: 1px solid var(--pie-text, black);
 	padding: 2px;
 	text-align: center;
 }
 
 table.KdsTable01 > tbody > tr > td.bold {
-	border: 1px solid black;
+	border: 1px solid var(--pie-text, black);
 	font-weight: bold;
 	padding: 2px;
 	text-align: center;
 }
 
 table.KdsTable02 {
-	border: 1px solid black;
+	border: 1px solid var(--pie-text, black);
 	border-collapse: collapse;
 	border-spacing: 0px;
 }
 
 table.KdsTable02 > tbody > tr > th {
-	background-color: #d3d3d3;
-	border: 1px solid black;
+	background-color: var(--pie-background-dark, #d3d3d3);
+	border: 1px solid var(--pie-text, black);
 	font-weight: normal;
 	padding: 2px;
 }
 
 table.KdsTable02 > tbody > tr > td {
-	border: 1px solid black;
+	border: 1px solid var(--pie-text, black);
 	padding: 2px;
 }
 
+/* The grid rules below are mixed from the ink instead of taken from
+   --pie-border-light, which the DaisyUI mapping fills from base-200 — a surface,
+   so a border set from it disappears into the page. The 15% mix keeps the
+   near-invisible weight #dee2e6 had on white and inverts to a faint light rule
+   on a dark surface. Mixed inline, not hoisted to a custom property: a custom
+   property substitutes var(--pie-text) where it is declared, so a scoped
+   <pie-theme scope="self"> below :root would not reach it. */
 .table {
 	width: 100%;
 	margin-bottom: 1em;
@@ -567,16 +612,19 @@ table.KdsTable02 > tbody > tr > td {
 .table td {
 	padding: 0.75em;
 	vertical-align: top;
-	border-top: 1px solid #dee2e6;
+	border-top: 1px solid
+		color-mix(in srgb, var(--pie-text, #000) 15%, transparent);
 }
 
 .table tbody + tbody {
-	border-top: 2px solid #dee2e6;
+	border-top: 2px solid
+		color-mix(in srgb, var(--pie-text, #000) 15%, transparent);
 }
 
 .table thead th {
 	vertical-align: bottom;
-	border-bottom: 2px solid #dee2e6;
+	border-bottom: 2px solid
+		color-mix(in srgb, var(--pie-text, #000) 15%, transparent);
 }
 
 th {
@@ -586,7 +634,7 @@ th {
 .table-bordered,
 .table-bordered th,
 .table-bordered td {
-	border: 1px solid #dee2e6;
+	border: 1px solid color-mix(in srgb, var(--pie-text, #000) 15%, transparent);
 }
 
 .table-bordered thead td,
@@ -595,7 +643,7 @@ th {
 }
 
 .table-striped tbody tr:nth-of-type(odd) {
-	background-color: rgba(0, 0, 0, 0.05);
+	background-color: color-mix(in srgb, var(--pie-text, #000) 5%, transparent);
 }
 
 .text-center {
@@ -616,6 +664,9 @@ h6 {
 	margin-top: 0;
 }
 
+/* Spacing and inheritance only: `font-weight: 500` used to sit here and flatten
+   every authored heading to lighter-than-bold, weakening the visual hierarchy
+   a screen-reader user gets from the heading level. */
 .h1,
 .h2,
 .h3,
@@ -630,31 +681,19 @@ h5,
 h6 {
 	margin-bottom: 0.5em;
 	font-family: inherit;
-	font-weight: 500;
 	line-height: 1.2;
 	color: inherit;
 }
 
-/* LEARNOSITY OVERRIDES */
-.lrn_feature h3 {
-	margin-top: 0 !important;
-}
-
-/* PIE OVERRIDES */
-
-#stimulus {
-	width: 50%;
-	float: left;
-}
-
-#item {
-	width: 50%;
-	float: left;
-}
-
-.lrn_width_auto.table {
-	width: auto;
-}
+/*
+ * Removed: a `#stimulus` / `#item` pair of 50% left floats, a `.lrn_feature h3`
+ * margin override and `.lrn_width_auto.table`. The float pair hard-coded a
+ * two-column layout keyed to two global ids — it cannot reflow at 400% zoom
+ * (SC 1.4.10), and it applied to any element in the host document carrying
+ * those ids. The other two styled a third-party product's markup that PIE does
+ * not render. None of the three could be made correct here, so they are gone
+ * rather than patched.
+ */
 
 .TEX-S3 {
 	font-family: MJXZERO, MJXTEX-S3 !important;
@@ -688,25 +727,33 @@ table {
 .evaluate-bottom-border > :first-child::after {
 	content: "";
 	display: block;
-	border-bottom: 1px solid #d3d3d3;
+	border-bottom: 1px solid
+		color-mix(in srgb, var(--pie-text, #000) 15%, transparent);
 }
 
 /* ANSWER ELIMINATOR */
 
 .pie-answer-eliminator-toggle {
-	width: 28px;
-	height: 28px;
+	/* em, not px: PNP font scaling raises the surrounding text size without
+	   touching px boxes, which left a fixed 28px control under grown text. At the
+	   default 16px base these are the 28px/18px the control used to pin, and the
+	   box stays past SC 2.5.8's 24px minimum for any base at or above 14px. */
+	width: 1.75em;
+	height: 1.75em;
 	padding: 0;
 	border: 1px solid var(--pie-border, #ccc);
 	border-radius: 4px;
 	background: var(--pie-white, #fff);
 	cursor: pointer;
-	font-size: 18px;
+	font-size: 1.125em;
 	line-height: 1;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--pie-answer-eliminator-toggle-color, #8c8c8c);
+	color: var(
+		--pie-answer-eliminator-toggle-color,
+		var(--pie-button-color, #8c8c8c)
+	);
 	transition: all 0.2s ease;
 	z-index: 10;
 }
@@ -727,8 +774,111 @@ table {
 .pie-answer-eliminator-eliminated-fallback {
 	text-decoration: line-through;
 	text-decoration-thickness: 2px;
-	text-decoration-color: var(--pie-incorrect, #ff9800);
-	opacity: 0.6;
+	text-decoration-color: var(
+		--pie-answer-eliminator-strike-color,
+		var(--pie-incorrect, #ff9800)
+	);
+}
+
+.pie-answer-eliminator-image-strike {
+	position: relative;
+	display: inline-block;
+	max-width: 100%;
+	/*
+	 * Collapse the line-box strut so the wrapper hugs the image exactly (no
+	 * baseline descender gap under it) and the X cannot overhang the artwork.
+	 * It also keeps the image bottom on the text baseline, as an unwrapped
+	 * baseline-aligned image sits.
+	 */
+	line-height: 0;
+}
+
+.pie-answer-eliminator-image-strike-overlay {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+}
+
+.pie-answer-eliminator-image-strike-line {
+	stroke: var(
+		--pie-answer-eliminator-strike-color,
+		var(--pie-incorrect, #ff9800)
+	);
+	stroke-width: 3;
+	stroke-linecap: square;
+}
+
+/* Wider light line under each diagonal so the X stays legible on dark imagery. */
+.pie-answer-eliminator-image-strike-casing {
+	stroke: var(
+		--pie-answer-eliminator-image-strike-casing-color,
+		rgba(255, 255, 255, 0.85)
+	);
+	stroke-width: 6;
+	stroke-linecap: square;
+}
+
+/*
+ * Eliminated math: MathJax's rendered glyphs are generated content, so neither
+ * `::highlight()` nor `text-decoration` reaches them. The eliminator marks the
+ * rendered math box instead and the paint happens here, in the same colour and
+ * weight as the text line-through so a choice mixing prose and math reads as one
+ * strike. Which mark it gets depends on the shape of the expression — the tool
+ * measures the box and picks `--line` or `--cross`.
+ */
+.pie-answer-eliminator-math-strike {
+	position: relative;
+	/*
+	 * Internal: the resolved strike paint, so the rules below need not repeat the
+	 * fallback chain. Not a themeable knob — set --pie-answer-eliminator-strike-color.
+	 */
+	--pie-answer-eliminator-strike-paint: var(
+		--pie-answer-eliminator-strike-color,
+		var(--pie-incorrect, #ff9800)
+	);
+}
+
+/* A single row of symbols takes the same line-through as the surrounding prose. */
+.pie-answer-eliminator-math-strike--line::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 50%;
+	border-top: 2px solid var(--pie-answer-eliminator-strike-paint);
+	pointer-events: none;
+}
+
+/*
+ * A stacked 2D layout (fraction, radical, matrix) takes the diagonals instead.
+ * A centred line would land on the math axis — precisely where the fraction bar
+ * already is — and read as a recoloured bar rather than an elimination, so the
+ * expression is crossed out the way an eliminated image is. Corner keywords make
+ * each gradient's transition run exactly corner to corner at any aspect ratio,
+ * with a 1px feather either side of the 1px core for a smooth 2px line.
+ */
+.pie-answer-eliminator-math-strike--cross::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	background-image:
+		linear-gradient(
+			to bottom right,
+			transparent calc(50% - 1.5px),
+			var(--pie-answer-eliminator-strike-paint) calc(50% - 0.5px),
+			var(--pie-answer-eliminator-strike-paint) calc(50% + 0.5px),
+			transparent calc(50% + 1.5px)
+		),
+		linear-gradient(
+			to bottom left,
+			transparent calc(50% - 1.5px),
+			var(--pie-answer-eliminator-strike-paint) calc(50% - 0.5px),
+			var(--pie-answer-eliminator-strike-paint) calc(50% + 0.5px),
+			transparent calc(50% + 1.5px)
+		);
 }
 
 .pie-answer-masked-fallback {

package/dist/contrast.d.ts

@@ -0,0 +1,67 @@
+/**
+ * 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.
+ */
+export interface Srgb {
+    r: number;
+    g: number;
+    b: number;
+    /** 0..1 */
+    a: number;
+}
+/** Resolves any CSS colour syntax to 8-bit sRGB, or `null` if not a colour. */
+export type ColorMeasure = (value: string) => Srgb | null;
+/** WCAG 2.2 1.4.3 for text. */
+export declare const LEGIBLE_TEXT_MINIMUM = 4.5;
+/** WCAG 2.2 1.4.11 for component boundaries, states and graphical objects. */
+export declare 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 declare 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 declare const UNMEASURED_NON_TEXT_HUE_WEIGHT = 35;
+/** WCAG relative luminance. Alpha is ignored; composite before calling. */
+export declare function relativeLuminance(color: Srgb): number;
+export declare function contrastRatio(foreground: Srgb, background: Srgb): number;
+export declare function mixTowards(hue: string, target: string, hueWeight: number): string;
+/**
+ * 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 declare function createCanvasColorMeasure(): ColorMeasure | 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 declare function legibleColorAgainst(args: {
+    hue?: string;
+    text?: string;
+    background?: string;
+    measure?: ColorMeasure | null;
+    minimum?: number;
+    unmeasuredHueWeight?: number;
+}): string | undefined;