/* Lexxy paints itself from its own `--lexxy-*` palette, declared on :root by the gem's lexxy-variables.css. Left alone that palette is a fixed light theme, so the note editor would sit in a dark page as a white slab. Re-point the properties that actually paint the editor at our own tokens. Because `.dark` and `[data-theme]` both live on — which *is* :root — these `var()` references resolve against whichever theme is active, so the editor follows light/dark and any per-festival theme for free. Load order is the whole mechanism: this file is linked after lexxy.css in layouts/avr/application.html.erb. */ :root { --lexxy-color-ink: var(--color-text-primary); --lexxy-color-ink-medium: var(--color-text-secondary); --lexxy-color-ink-light: var(--color-text-muted); --lexxy-color-ink-lighter: var(--color-border-input); --lexxy-color-ink-lightest: var(--color-surface-alt); --lexxy-color-ink-inverted: var(--color-surface); --lexxy-color-accent-dark: var(--color-brand); --lexxy-color-accent-medium: var(--color-brand-400); --lexxy-color-accent-light: var(--color-brand-100); --lexxy-color-accent-lightest: var(--color-surface-raised); --lexxy-color-canvas: var(--color-surface); --lexxy-color-code-bg: var(--color-surface-alt); --lexxy-focus-ring-color: var(--color-ring); /* Named separately from the accent above, and this is the whole of NEX-1000. Lexxy defaults `--lexxy-color-link` to `--lexxy-color-accent-dark`, which the line above maps to `--color-brand` — a FILL token that deliberately does not move between light and dark, so every link Lexxy paints stayed a mid-tone on a dark card. 2.29:1 under Lavender, 3.14:1 under Classic, 2.46:1 under Aero in light mode. `--color-link` is the stop that adapts. This has to be fixed here rather than left to `prose dark:prose-invert` on the display wrappers, and it is worth knowing why the obvious reading of the cascade is wrong. `lexxy-content.css` styles `a` at specificity (0,0,1) and Tailwind's `.prose :where(a)` at (0,1,0) — higher — but the whole Tailwind build sits in `@layer utilities` and Lexxy's stylesheet is unlayered, and unlayered declarations beat layered ones no matter the specificity. So prose computes #fff for these links and has it discarded. Painting the right colour is cheaper and steadier than trying to out-rank a third-party stylesheet we don't control the layering of. */ --lexxy-color-link: var(--color-link); /* Inherit the page's type rather than re-declaring system-ui. */ --lexxy-font-base: inherit; } /* The link dialog's field, restored after `lexxy_link_fields.js` retypes it. * * Lexxy styles that field with an `input[type="url"]` selector, and everything * it gives it lives in that one block: `flex: 2` against the `flex: 1` of the * button pair beside it, plus the border, height, and type size. Retyping the * field to `text` — which the anchor fix has to do — drops the lot, so the * field collapsed to its intrinsic ~20-character width, the two buttons took * the rest of the row, and a URL any longer than that could only be read by * scrolling it (NEX-811). * * The retype isn't optional. That input sits inside the article's own form, and * a `type="url"` holding `#fringepod` makes `form.checkValidity()` false even * with `required` off — so an anchor left in the field blocks Save, silently, * on a control the browser can't even focus to complain about. * * Declared against Lexxy's own `--lexxy-*` properties rather than our tokens, * so it keeps tracking their theme (and ours, via the mapping above) instead of * drifting into a second palette. Same declarations, one selector wider. */ .lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] input[type="text"] { background-color: var(--lexxy-color-canvas); border: 1px solid var(--lexxy-color-ink-lighter); border-radius: var(--lexxy-radius); color: var(--lexxy-color-text); block-size: var(--lexxy-toolbar-button-size); box-sizing: border-box; font-size: var(--lexxy-text-small); flex: 2; inline-size: 100%; line-height: inherit; padding-block: 0; padding-inline: 1ch; } [overflowing] .lexxy-editor__toolbar-dropdown--link [data-dropdown-panel] input[type="text"] { min-inline-size: 100%; }