@mathscan/math-exercise-engine 1.2.4 → 1.2.5

package/dist/style.css

@@ -49,8 +49,20 @@
   --exercise-border: #ddd;
   --exercise-border-focus: var(--exercise-primary);
   --exercise-highlight-color: #aef59d;
+  /* Validation state colors. Declared on this element, so an override on a
+     host *wrapper* is shadowed — use the renderer's `theme` prop (inline
+     style), or override on the root itself via the `className` prop.
+     The -bg tints derive from the base tokens so a host that only swaps
+     --exercise-incorrect (orange → red across attempts) gets matching tints.
+     The tints are computed HERE, so override the base tokens on the root
+     only — an override on a nested element leaves its tint unchanged. */
   --exercise-correct: #22c55e;
   --exercise-incorrect: #ef4444;
+  --exercise-correct-bg: color-mix(in srgb, var(--exercise-correct) 6%, var(--exercise-bg));
+  --exercise-incorrect-bg: color-mix(in srgb, var(--exercise-incorrect) 6%, var(--exercise-bg));
+  /* Authoring/engine errors — kept apart from --exercise-incorrect so they
+     don't follow the student's attempt state. */
+  --exercise-error: #ef4444;
 
   /* ========================================
      SPACING VARIABLES
@@ -490,22 +502,22 @@ mark {
 
 .inline-input.widget--correct {
   border-color: var(--exercise-correct, #22c55e);
-  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--exercise-correct, #22c55e) 15%, transparent);
 }
 
 .inline-input.widget--incorrect {
   border-color: var(--exercise-incorrect, #ef4444);
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--exercise-incorrect, #ef4444) 15%, transparent);
 }
 
 .inline-input-chip.widget--correct {
   border-color: var(--exercise-correct, #22c55e);
-  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--exercise-correct, #22c55e) 15%, transparent);
 }
 
 .inline-input-chip.widget--incorrect {
   border-color: var(--exercise-incorrect, #ef4444);
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--exercise-incorrect, #ef4444) 15%, transparent);
 }
 
 /* ========================================
@@ -666,14 +678,14 @@ button.drag-option {
   background: var(--exercise-correct, #22c55e);
   border-color: var(--exercise-correct, #22c55e);
   color: white;
-  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.25);
+  box-shadow: 0 2px 4px color-mix(in srgb, var(--exercise-correct, #22c55e) 25%, transparent);
 }
 
 .radio-option.widget--incorrect {
   background: var(--exercise-incorrect, #ef4444);
   border-color: var(--exercise-incorrect, #ef4444);
   color: white;
-  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25);
+  box-shadow: 0 2px 4px color-mix(in srgb, var(--exercise-incorrect, #ef4444) 25%, transparent);
 }
 
 /* ========================================
@@ -1105,15 +1117,15 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
 }
 
 .widget--correct .matcher-card--selected {
-  border-color: #43b925;
-  background: #f2ffee;
-  box-shadow: 0 4px 0 rgba(67, 185, 37, 0.3);
+  border-color: var(--exercise-correct, #22c55e);
+  background: var(--exercise-correct-bg, color-mix(in srgb, var(--exercise-correct, #22c55e) 6%, var(--exercise-bg, white)));
+  box-shadow: 0 4px 0 color-mix(in srgb, var(--exercise-correct, #22c55e) 30%, transparent);
 }
 
 .widget--incorrect .matcher-card--selected {
-  border-color: #d6234d;
-  background: #fff0f7;
-  box-shadow: 0 4px 0 rgba(214, 35, 77, 0.25);
+  border-color: var(--exercise-incorrect, #ef4444);
+  background: var(--exercise-incorrect-bg, color-mix(in srgb, var(--exercise-incorrect, #ef4444) 6%, var(--exercise-bg, white)));
+  box-shadow: 0 4px 0 color-mix(in srgb, var(--exercise-incorrect, #ef4444) 25%, transparent);
 }
 
 /* Intentionally dropped — kept for reference if unselected-card validation feedback is restored.
@@ -1143,8 +1155,8 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
   --pm-dot-size: 17px;
   --pm-dot-border-width: 2px;
   --pm-line-color: var(--pm-orange);
-  --pm-line-color-correct: #43b925;
-  --pm-line-color-incorrect: #d6234d;
+  --pm-line-color-correct: var(--exercise-correct, #22c55e);
+  --pm-line-color-incorrect: var(--exercise-incorrect, #ef4444);
   --pm-line-width: 4px;
   position: relative;
   display: flex;
@@ -1221,15 +1233,15 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
 }
 
 .pair-matcher-card--correct {
-  border-color: #43b925;
-  background: #f2ffee;
-  color: #43b925;
+  border-color: var(--exercise-correct, #22c55e);
+  background: var(--exercise-correct-bg, color-mix(in srgb, var(--exercise-correct, #22c55e) 6%, var(--exercise-bg, white)));
+  color: var(--exercise-correct, #22c55e);
 }
 
 .pair-matcher-card--incorrect {
-  border-color: #d6234d;
-  background: #fff0f7;
-  color: #d6234d;
+  border-color: var(--exercise-incorrect, #ef4444);
+  background: var(--exercise-incorrect-bg, color-mix(in srgb, var(--exercise-incorrect, #ef4444) 6%, var(--exercise-bg, white)));
+  color: var(--exercise-incorrect, #ef4444);
 }
 
 .pair-matcher-dot {
@@ -1261,13 +1273,13 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
 }
 
 .pair-matcher-dot--correct {
-  border-color: #43b925;
-  background: #43b925;
+  border-color: var(--exercise-correct, #22c55e);
+  background: var(--exercise-correct, #22c55e);
 }
 
 .pair-matcher-dot--incorrect {
-  border-color: #d6234d;
-  background: #d6234d;
+  border-color: var(--exercise-incorrect, #ef4444);
+  background: var(--exercise-incorrect, #ef4444);
 }
 
 .pair-matcher-lines {
@@ -1626,9 +1638,9 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
 
 /* Axis colour: overriding --nl-axis-color on root propagates to track, ticks, arrows and labels. */
 
-.number-line--correct   { --nl-axis-color: #43B925; }
+.number-line--correct   { --nl-axis-color: var(--exercise-correct, #22c55e); }
 
-.number-line--incorrect { --nl-axis-color: #D6234D; }
+.number-line--incorrect { --nl-axis-color: var(--exercise-incorrect, #ef4444); }
 
 /* Disable track transition for instant colour on submit. */
 
@@ -2187,13 +2199,13 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
 .number-line-cursor-ball--correct,
 .number-line-cursor-fill--correct,
 .number-line-cursor-label--correct {
-  --nl-cursor-color: #43B925;
+  --nl-cursor-color: var(--exercise-correct, #22c55e);
 }
 
 .number-line-cursor-ball--incorrect,
 .number-line-cursor-fill--incorrect,
 .number-line-cursor-label--incorrect {
-  --nl-cursor-color: #D6234D;
+  --nl-cursor-color: var(--exercise-incorrect, #ef4444);
 }
 
 .number-line-cursor-ball:focus-visible {
@@ -2465,33 +2477,33 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
 }
 
 .clock-correct .clock-arrow {
-  fill: #16a34a;
-  stroke: #16a34a;
+  fill: var(--exercise-correct, #22c55e);
+  stroke: var(--exercise-correct, #22c55e);
 }
 
 .clock-correct .clock-arrow-hour {
-  fill: #f2ffee;
-  stroke: #16a34a;
+  fill: var(--exercise-correct-bg, color-mix(in srgb, var(--exercise-correct, #22c55e) 6%, var(--exercise-bg, white)));
+  stroke: var(--exercise-correct, #22c55e);
 }
 
 .clock-incorrect .clock-arrow {
-  fill: #dc2626;
-  stroke: #dc2626;
+  fill: var(--exercise-incorrect, #ef4444);
+  stroke: var(--exercise-incorrect, #ef4444);
 }
 
 .clock-incorrect .clock-arrow-hour {
-  fill: #fff0f7;
-  stroke: #dc2626;
+  fill: var(--exercise-incorrect-bg, color-mix(in srgb, var(--exercise-incorrect, #ef4444) 6%, var(--exercise-bg, white)));
+  stroke: var(--exercise-incorrect, #ef4444);
 }
 
 .clock-correct .clock-digital-display {
-  border-color: #16a34a;
-  background: #f0fdf4;
+  border-color: var(--exercise-correct, #22c55e);
+  background: var(--exercise-correct-bg, color-mix(in srgb, var(--exercise-correct, #22c55e) 6%, var(--exercise-bg, white)));
 }
 
 .clock-incorrect .clock-digital-display {
-  border-color: #dc2626;
-  background: #fef2f2;
+  border-color: var(--exercise-incorrect, #ef4444);
+  background: var(--exercise-incorrect-bg, color-mix(in srgb, var(--exercise-incorrect, #ef4444) 6%, var(--exercise-bg, white)));
 }
 
 .grid-symmetry {
@@ -2501,8 +2513,8 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
   --grid-symmetry-reference-color: #705dc0;
   --grid-symmetry-prefilled-color: #4f86d9;
   --grid-symmetry-answer-color: #291a64;
-  --grid-symmetry-correct-color: #43b925;
-  --grid-symmetry-incorrect-color: #d6234d;
+  --grid-symmetry-correct-color: var(--exercise-correct, #22c55e);
+  --grid-symmetry-incorrect-color: var(--exercise-incorrect, #ef4444);
   --grid-symmetry-line-color: #ffca76;
   --grid-symmetry-axis-color: #291a64;
   max-width: 100%;
@@ -2641,12 +2653,13 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
  *
  * All colours and sizes are driven by CSS custom properties defined inside
  * `.math-exercise-renderer` (variables.css).  Consumer apps can override any
- * of these variables on a parent selector to theme the chart without touching
- * engine code.
+ * of these variables to theme the chart without touching engine code — but on
+ * the renderer root itself (via its `className` prop), not on a parent: tokens
+ * declared on the root shadow anything inherited from a wrapper.
  *
- * Override surface example (student app):
+ * Override surface example (student app, `className="my-exercise"`):
  *
- *   .my-exercise-wrapper {
+ *   .math-exercise-renderer.my-exercise {
  *     --chart-bar-color:         #4f46e5;
  *     --chart-bar-correct-color: #22c55e;
  *     --chart-bar-wrong-color:   #ef4444;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mathscan/math-exercise-engine",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "A DSL parser and validator for math exercises - transforms text-based exercise definitions into structured AST and JSON",
   "main": "dist/index.js",
   "module": "dist/index.mjs",