Content CSS Phase 8: structural blocks and content root to styles/content.css

[sneridagh]

Phase 8 of #200: the callout, toggle, columns, table of contents and the rendered content root are styled by plain CSS instead of Tailwind utilities, with zero visual change. With this, the public view's content has no Tailwind classes left: the contract test's PENDING list is gone.

Stacked on #215 (Phase 7). The base is b7-media. This PR's own change is only the last commit.

Changes

@plone/plate/styles/content.css now styles these nodes in both the public renderer and the editor.

Element	Hook	Before (Tailwind)
Callout box	.slate-callout > .block-inner-container	my-1 flex rounded-sm bg-muted p-4 pl-3
Callout row, icon, content	block-callout__body, __icon, __content (new parts)	flex w-full gap-2 rounded-md; size-6 text-[18px] select-none with an inline emoji font-family; w-full
Toggle box	.slate-toggle > .block-inner-container	relative pl-6
Toggle chevron (rendered content)	block-toggle__icon (new part)	absolute top-0 -left-0.5 size-6 cursor-pointer rounded-md p-px text-muted-foreground transition-colors select-none hover:bg-accent [&_svg]:size-4
Column group box	the inner container holding the row	mb-2
Column row	block-column_group__row (new part)	flex size-full rounded
Column wrapper (width)	block-column_group__column (new part)	group/column relative
Column	.slate-column, first/last via the wrapper	h-full px-2 pt-2 group-first/column:pl-0 group-last/column:pr-0
Column content	block-column__content (new part)	relative h-full border border-transparent p-1.5
TOC box	.slate-toc > .block-inner-container	mb-1 p-0
TOC entry	block-toc__item with data-depth (new)	the chrome Button (ghost) merged with a cva of ~20 utilities, pl-[26px] / pl-[50px] per depth
TOC empty message	block-toc__empty	text-sm text-gray-500
TOC jump highlight	block-toc__highlight	pointer-events-none absolute inset-0 z-1 bg-brand/[.13]
Content root	.slate-editor (Plate's own class)	relative w-full cursor-text overflow-hidden break-words whitespace-pre-wrap select-text rounded-md, [&_[data-slate-node="element"]:not(…)]:mx-auto, [&_strong]:font-bold, plus focus and placeholder utilities

• Content root: PlateRenderer now renders Plate's PlateView directly instead of EditorView, so the public root no longer gets the editor's editorVariants.
  • The root's rules come last in content.css, so they still win over the block rules, as they did as utilities. The mx-auto on element nodes overrode the title's margins, for instance.
  • The editable editor keeps editorVariants.
  • A story passed variant="none", which PlateRenderer always overrode anyway; it's removed.
• TOC entries are plain <button type="button">s in both the renderer and the editor, instead of the chrome Button. A theme's TOC rules now apply in the editor too.
  • Their rule reproduces what the merged classes rendered. That includes neutralizing the browser's button look, which Tailwind's reset did before.
  • Dropped, since they did nothing on these buttons: inline-flex/gap/centering, overridden by block; the svg and disabled/aria-invalid variants; and dark:.
  • type="button" is new: these buttons no longer submit a surrounding form.
• Callout icon font: the emoji font list moved from an inline style into the rule, as --block-callout-icon-font-family.
• Toggle chevron in the rendered content: it keeps its hover background and pointer cursor, as before, though it does nothing there. The editor's chevron is the toggle's button and stays Tailwind.
• Columns in the editor: the floating toolbar's PopoverAnchor wraps the inner container. So the column group's spacing rule matches the inner container that holds the row (:has(> .block-column_group__row)), not a direct child. The first visual run caught this as an 8px shift in the editor.
• Editor-only affordances stay Tailwind: column drag handles, drop lines, and the dashed column borders while editing.
• The block-inner-container utilities from the plan were already gone. Each node's own box rule now targets its inner container.

Tests

• New: plate/acceptance/tests/structural-content-css.test.ts compares the computed values these rules set in the public view, under Agave's preflight, with no reset, and under @plone/theming's simple reset. It covers:

  • the content root;
  • strong, and the root's inline margins on the title;
  • the callout, toggle, columns and table of contents parts.

  Sizes that follow the text aren't compared, since removing the reset also removes the theme's font.

• Ratchet finished: PENDING is removed. The contract test now expects no classes outside the contract in the public view.

• Docs: packages/plate/AGENTS.md no longer mentions the PENDING list.

Validation

• CI=1 pnpm visual-test --retries=0: 24/24 pixel-identical, including the native-blocks screenshots in the public view (desktop and mobile) and the editor.
• pnpm acceptance-test: 178 passed.
• pnpm --filter @plone/plate test --run: 75 passed. check:ts, eslint, stylelint and prettier: clean.

Part of #200.