@fnix/lexxy-mathjax 0.2.0 → 0.3.0

package/README.md

@@ -79,6 +79,40 @@ This package persists raw LaTeX (`data-latex`) and re-typesets it on every load,
 - **Font-size macros changed in MathJax 4.1.2** (`\tiny`/`\Tiny` swapped, `\large`…`\Huge` shifted by one), so existing content can render at a different size. Opt out with the `fontsizev3` TeX package (`loader: { load: ["[tex]/fontsizev3"] }, tex: { packages: { "[+]": ["fontsizev3"] } }`) if you pin a floating `@4` range.
 - **Accessibility moved, but only for math MathJax typesets itself.** v4 turns assistive MathML off by default and turns the expression explorer (speech/braille) on instead. MathJax's own docs warn that math inserted via a direct conversion call — `tex2chtmlPromise`/`tex2svgPromise`, which is what this package uses, both in the editor and on display pages — "will not become part of the list of math expressions that MathJax knows about in the page", so the explorer never attaches to it. Both `createDOM` (editor) and `typesetMath` (display pages) compensate by setting `role="math"` / `aria-label="Equation: ..."` on every equation directly, rather than relying on the explorer.
 
+## Theming
+
+The equation editor dialog (`<lexxy-math-editor>`) is styled entirely through CSS custom properties. Set any of these on `:root` or on an ancestor of the dialog to restyle it — a host that sets none gets exactly the defaults below, unchanged:
+
+| Property | Default | Controls |
+| --- | --- | --- |
+| `--lexxy-math-backdrop-color` | `rgba(0, 0, 0, 0.35)` | `::backdrop` behind the modal |
+| `--lexxy-math-dialog-bg` | `Canvas` | dialog surface, button faces |
+| `--lexxy-math-dialog-border-color` | `#d4d4d8` | dialog border |
+| `--lexxy-math-dialog-radius` | `0.5rem` | dialog corner radius |
+| `--lexxy-math-dialog-shadow` | `0 10px 30px rgba(0, 0, 0, 0.15)` | dialog drop shadow |
+| `--lexxy-math-text-color` | `CanvasText` | dialog and button text |
+| `--lexxy-math-muted-color` | `#52525b` | the "LaTeX" field label |
+| `--lexxy-math-input-bg` | `Field` | textarea background |
+| `--lexxy-math-input-text-color` | `FieldText` | textarea text |
+| `--lexxy-math-input-border-color` | `#d4d4d8` | textarea, preview and button borders |
+| `--lexxy-math-input-radius` | `0.375rem` | textarea, preview and button radius |
+| `--lexxy-math-focus-color` | `#2563eb` | Save button fill, in-editor selection outline |
+| `--lexxy-math-focus-content-color` | `white` | Save button label |
+| `--lexxy-math-error-color` | `#b91c1c` | failed-equation text and dashed outline |
+
+```css
+:root {
+  --lexxy-math-dialog-bg: var(--my-app-surface);
+  --lexxy-math-dialog-border-color: var(--my-app-border);
+  --lexxy-math-dialog-radius: var(--my-app-radius-lg);
+  --lexxy-math-focus-color: var(--my-app-accent);
+}
+```
+
+`Canvas`, `CanvasText`, `Field` and `FieldText` are the browser's own [system colors](https://developer.mozilla.org/en-US/docs/Web/CSS/system-color): they track the page's light/dark scheme automatically, so the dialog follows the OS or `prefers-color-scheme` without any configuration.
+
+`--lexxy-math-backdrop-color` targets `::backdrop`, which only inherits custom properties from its originating element in newer browser engines. On older engines the backdrop falls back to today's `rgba(0, 0, 0, 0.35)` rather than breaking.
+
 ## Rails / ActionText integration
 
 **1. Allow `data-latex` through the server-side sanitizer** (ActionText strips unknown attributes when rendering):
@@ -211,3 +245,4 @@ The code follows lexxy's own conventions: plain ES modules, vanilla JS, no build
 - `src/typeset_math.js` — `typesetMath(root)`, the display-page renderer; batches conversions and refreshes MathJax's stylesheet once per call instead of once per equation
 - `src/auto_typeset.js` — `startMathjaxAutoTypeset()`, wires `typesetMath` to `DOMContentLoaded`/Turbo events
 - `src/typeset.js` — the `@fnix/lexxy-mathjax/typeset` entry point (re-exports the two above without pulling in lexxy/Lexical)
+- `styles/lexxy-mathjax.css` — presentation for equations and the editor dialog; the `--lexxy-math-*` custom properties it exposes are a public contract (see [Theming](#theming)), covered by `test/styles.test.js`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fnix/lexxy-mathjax",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "MathJax LaTeX equation extension for Lexxy, the rich text editor for Rails.",
   "type": "module",
   "main": "src/index.js",

package/styles/lexxy-mathjax.css

@@ -23,27 +23,33 @@ lexxy-editor .lexxy-math:hover {
 
 lexxy-editor .lexxy-math.selected,
 lexxy-editor [data-lexical-decorator="true"]:focus .lexxy-math {
-  outline: 2px solid var(--lexxy-focus-color, #2563eb);
+  outline: 2px solid var(--lexxy-math-focus-color, #2563eb);
 }
 
 .lexxy-math--error {
-  color: #b91c1c;
+  color: var(--lexxy-math-error-color, #b91c1c);
   font-family: monospace;
-  outline: 1px dashed #b91c1c;
+  outline: 1px dashed var(--lexxy-math-error-color, #b91c1c);
 }
 
 /* Equation editor dialog */
 
 .lexxy-math-editor::backdrop {
-  background: rgba(0, 0, 0, 0.35);
+  background: var(--lexxy-math-backdrop-color, rgba(0, 0, 0, 0.35));
 }
 
 .lexxy-math-editor {
+  /* Restores the UA's `dialog:modal { margin: auto }` centring, which any host reset
+     that zeroes margin on `*` (Tailwind preflight, normalize.css, Bootstrap reboot)
+     overrides — author origin beats UA origin regardless of cascade layers. Do not remove. */
+  margin: auto;
   min-width: min(28rem, 90vw);
-  border: 1px solid #d4d4d8;
-  border-radius: 0.5rem;
+  background: var(--lexxy-math-dialog-bg, Canvas);
+  color: var(--lexxy-math-text-color, CanvasText);
+  border: 1px solid var(--lexxy-math-dialog-border-color, #d4d4d8);
+  border-radius: var(--lexxy-math-dialog-radius, 0.5rem);
   padding: 1rem;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--lexxy-math-dialog-shadow, 0 10px 30px rgba(0, 0, 0, 0.15));
 }
 
 .lexxy-math-editor form {
@@ -57,15 +63,17 @@ lexxy-editor [data-lexical-decorator="true"]:focus .lexxy-math {
   flex-direction: column;
   gap: 0.25rem;
   font-size: 0.85rem;
-  color: #52525b;
+  color: var(--lexxy-math-muted-color, #52525b);
 }
 
 .lexxy-math-editor textarea {
   font-family: ui-monospace, monospace;
   font-size: 0.95rem;
   padding: 0.5rem;
-  border: 1px solid #d4d4d8;
-  border-radius: 0.375rem;
+  background: var(--lexxy-math-input-bg, Field);
+  color: var(--lexxy-math-input-text-color, FieldText);
+  border: 1px solid var(--lexxy-math-input-border-color, #d4d4d8);
+  border-radius: var(--lexxy-math-input-radius, 0.375rem);
   resize: vertical;
 }
 
@@ -75,8 +83,8 @@ lexxy-editor [data-lexical-decorator="true"]:focus .lexxy-math {
   align-items: center;
   justify-content: center;
   padding: 0.5rem;
-  border: 1px dashed #d4d4d8;
-  border-radius: 0.375rem;
+  border: 1px dashed var(--lexxy-math-input-border-color, #d4d4d8);
+  border-radius: var(--lexxy-math-input-radius, 0.375rem);
   overflow-x: auto;
 }
 
@@ -101,14 +109,15 @@ lexxy-editor [data-lexical-decorator="true"]:focus .lexxy-math {
 
 .lexxy-math-editor__actions button {
   padding: 0.35rem 0.9rem;
-  border-radius: 0.375rem;
-  border: 1px solid #d4d4d8;
-  background: white;
+  border-radius: var(--lexxy-math-input-radius, 0.375rem);
+  border: 1px solid var(--lexxy-math-input-border-color, #d4d4d8);
+  background: var(--lexxy-math-dialog-bg, Canvas);
+  color: var(--lexxy-math-text-color, CanvasText);
   cursor: pointer;
 }
 
 .lexxy-math-editor__actions button[data-behavior="confirm"] {
-  background: var(--lexxy-focus-color, #2563eb);
-  border-color: var(--lexxy-focus-color, #2563eb);
-  color: white;
+  background: var(--lexxy-math-focus-color, #2563eb);
+  border-color: var(--lexxy-math-focus-color, #2563eb);
+  color: var(--lexxy-math-focus-content-color, white);
 }