fix(cms): enable the Tailwind typography plugin so prose classes work (#1288)
tailwind.config.js had plugins: [] and @tailwindcss/typography was never
installed, so every prose / prose-neutral / dark:prose-invert class in the
app resolved to nothing. Preflight, which IS active, resets h1-h6 to
inherit size and weight and strips list-style from ul/ol — so an applied
<h2> rendered pixel-identical to the <p> it replaced.
The editor was never broken. The toolbar highlighted because
editor.isActive('heading') correctly returned true; only the CSS to show
it was missing. That also explains why pasting rendered rich text worked:
it carries inline styles.
Ten surfaces rely on these classes, including the PUBLIC CMS pages — so
impressum/datenschutz were serving unstyled headings to visitors too.
Review follow-ups: prose colours are mapped to the theme tokens wherever
.text-theme marks theme-owned text (a dark gallery preset sets
--color-text but no .dark class, so dark:prose-invert never engages and
headings would have gone near-black on dark); code blocks inherit rather
than being scaled twice; and H5/H6 get explicit rules, since the plugin
only styles h1-h4.
Closes #1288
This commit is contained in:
@@ -34,6 +34,16 @@
|
||||
*/
|
||||
.prose pre {
|
||||
background-color: var(--color-elevated, #f5f5f5);
|
||||
/*
|
||||
* The typography plugin sets an explicit `color: var(--tw-prose-pre-code)`
|
||||
* on <pre> — #e5e7eb, chosen for ITS dark default background. This rule
|
||||
* replaces that background with the light `--color-elevated`, which left
|
||||
* near-white text on a near-white block everywhere a code sample appears.
|
||||
* Inheriting instead restores the pre-plugin behaviour and stays correct in
|
||||
* every context: themed prose inherits --color-text, admin prose inherits
|
||||
* the (possibly inverted) prose body colour.
|
||||
*/
|
||||
color: inherit;
|
||||
border: 1px solid var(--color-surface-border, #e5e5e5);
|
||||
border-radius: 0.375rem;
|
||||
padding: 1rem;
|
||||
@@ -44,7 +54,14 @@
|
||||
.prose pre code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
font-size: 0.875em;
|
||||
/*
|
||||
* `inherit`, not a second 0.875em. This rule predates the typography
|
||||
* plugin, which now sizes the <pre> itself to 0.875em (0.857em under
|
||||
* prose-sm) and deliberately leaves its `pre code` at `inherit`. Keeping a
|
||||
* multiplier here scaled block code TWICE — 12.25px in base prose, 10.5px
|
||||
* in prose-sm, against 14px body.
|
||||
*/
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@@ -107,4 +124,78 @@
|
||||
.prose p:empty::before {
|
||||
content: "\200B"; /* Zero-width space */
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Theme-owned prose colours (#1288 review follow-up)
|
||||
*
|
||||
* Enabling @tailwindcss/typography gave `.prose` its own fixed palette:
|
||||
* `--tw-prose-headings` and `--tw-prose-bold` default to near-black, and the
|
||||
* generated `.prose :where(h1)…` rules set `color` on the ELEMENT, which beats
|
||||
* the container's inherited colour.
|
||||
*
|
||||
* That is wrong on every gallery surface. A dark gallery preset (darkModern
|
||||
* and friends) writes a near-white `--color-text` on :root but deliberately
|
||||
* does NOT add a `.dark` class, so `dark:prose-invert` never engages — and the
|
||||
* promo block, the info banner and public CMS pages would have rendered
|
||||
* near-black headings on a dark background. Readable before this plugin
|
||||
* existed, unreadable after: exactly the regression the plugin was meant to
|
||||
* avoid.
|
||||
*
|
||||
* Keyed on `.text-theme`, which is the app's existing marker for "the active
|
||||
* theme owns the text colour here". Admin surfaces (the CMS and email
|
||||
* editors, the update modal) do not carry it and keep the stock palette,
|
||||
* which is what they want — they sit on fixed neutral chrome and already
|
||||
* handle dark mode through the real `.dark` class.
|
||||
* ------------------------------------------------------------------------ */
|
||||
.prose.text-theme {
|
||||
--tw-prose-body: var(--color-text);
|
||||
--tw-prose-headings: var(--color-text);
|
||||
--tw-prose-lead: var(--color-text);
|
||||
--tw-prose-bold: var(--color-text);
|
||||
--tw-prose-quotes: var(--color-text);
|
||||
--tw-prose-captions: var(--color-muted-text, var(--color-text));
|
||||
--tw-prose-code: var(--color-text);
|
||||
/* Markers and rules are decoration, not text — muted so a bullet list does
|
||||
not read as heavier than the copy beside it. */
|
||||
--tw-prose-bullets: var(--color-muted-text, currentColor);
|
||||
--tw-prose-counters: var(--color-muted-text, currentColor);
|
||||
--tw-prose-hr: var(--color-surface-border, currentColor);
|
||||
--tw-prose-quote-borders: var(--color-surface-border, currentColor);
|
||||
--tw-prose-th-borders: var(--color-surface-border, currentColor);
|
||||
--tw-prose-td-borders: var(--color-surface-border, currentColor);
|
||||
/* The gallery surfaces pass `prose-a:text-accent` explicitly; this keeps a
|
||||
consumer that forgets it from falling back to Tailwind's blue. */
|
||||
--tw-prose-links: var(--color-accent, var(--color-text));
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* H5 and H6 (#1288 review round 2)
|
||||
*
|
||||
* @tailwindcss/typography defines heading typography for h1-h4 only. Preflight
|
||||
* still resets h5 and h6 to inherit size and weight, so those two toolbar
|
||||
* buttons stayed exactly as inert as the four this PR fixed — the same bug,
|
||||
* two levels down.
|
||||
*
|
||||
* Sized to continue the plugin's own scale (h4 is 1em/700) rather than
|
||||
* inventing a new one: h5 slightly under body, h6 smaller and uppercase so it
|
||||
* still reads as a heading at that size.
|
||||
* ------------------------------------------------------------------------ */
|
||||
.prose :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
margin-top: 1.6em;
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.prose :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-size: 0.85em;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
margin-top: 1.6em;
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user