Move the text block styles to styles/content.css (#200 Phase 2)

[sneridagh]

Phase 2 of #200: the text blocks are styled by plain CSS instead of Tailwind utilities, with zero visual change.

Stacked on #208 (Phase 1b). The base is b1b-anatomy-gaps. This PR's own change is only the last commit. The stack includes main with #207.

Changes

@plone/plate/styles/content.css now styles the paragraph, title, headings, blockquote and separator, in both the public renderer and the editor:

Block	Hook	Before (Tailwind)
Paragraph	.slate-p	m-0 px-0 py-1
Title	.slate-title	mt-[1.6em] pb-1 text-4xl font-bold
Headings	.slate-h1 … .slate-h6	cva variants: relative mb-1, mt-[…], pb-*, text-*, font-*, tracking-tight
Blockquote	.slate-blockquote > .block-inner-container	my-1 border-l-2 pl-6 italic
Separator	.block-hr__spacer, .block-hr__line (new parts)	py-6; h-0.5 rounded-sm border-none bg-muted bg-clip-content

How the values stay identical

• Same theme variables: each value reads the Tailwind theme variable the utility used, with Tailwind's default as fallback, for example font-size: var(--text-4xl, 2.25rem) and calc(var(--spacing, 0.25rem) * 6).
  • With a Tailwind theme, the result is identical, theme overrides included. Agave's --text-base: 1.15rem still applies in the public view.
  • Without Tailwind, the defaults apply.
• Separator color: background-color: var(--block-separator-color, var(--muted)), the first themeable content token for text blocks.
• Dropped: font-heading generated no CSS anywhere, so it's simply removed.

Components

• Static nodes: no classes beyond the contract.
• The public title gets slate-title, the class the editor title already has. Its renderer ignores the anatomy classes Plate passes in, and I left that alone: adding block there would make content-area.css rules match it, which belongs to Phase 9.
• Editable nodes: editor affordances stay Tailwind. That's the separator's selection ring and cursor-pointer, and the title's relative, which positions the placeholder. The static separator's cursor-text is dropped; it had no visual effect in the public view.
• cva and cn are gone from the heading, paragraph and blockquote nodes.

Not relying on a reset (authoring rule 1)

• New explicit margins: two rules set values that Tailwind's reset used to provide implicitly, .slate-blockquote { margin: 0 } and the title's margin: 1.6em 0 0. Without a reset, browsers give <blockquote> 1em/40px margins and <h1> a bottom margin.

• New acceptance test: plate/acceptance/tests/text-blocks-content-css.test.ts compares the computed values of every property these rules set, in the public view, under:

  1. Agave's Tailwind preflight;
  2. no reset;
  3. @plone/theming's non-Tailwind "simple" reset, loaded into the base layer.

  All three match. A plain element confirms which reset is active in each case.

• Shared helpers: the reset helpers move to tooling/playwright/resets.ts, and the A3 image test uses them too.

Ratchet

PENDING in the class-contract test loses the title, h2, h3, h4, blockquote and hr entries, plus px-0 and py-1 from p. The rest of p belongs to the list markup (Phase 4).

Validation

• CI=1 pnpm visual-test --retries=0: 22/22 pixel-identical to the Phase 1b reference.
• pnpm acceptance-test: 171 passed, including the class-contract test and the new reset test.
• pnpm --filter @plone/plate test --run: 75 passed. check:ts, eslint and stylelint: clean.

Part of #200.