Content CSS Phase 6: table styles to styles/content.css

[sneridagh]

Phase 6 of #200: tables are styled by plain CSS instead of Tailwind utilities, with zero visual change.

Stacked on #213 (Phase 5). The base is b5-code-block. This PR's own change is only the last commit.

Changes

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

Element	Hook	Before (Tailwind)
Block	.slate-table	py-5
Scroll container	.block-table__scroll (new part)	overflow-x-auto overflow-y-hidden
Wrapper	.block-table__wrapper (new part)	group/table relative w-fit
table	.block-table__table (new part)	mr-0 ml-px table h-px table-fixed border-collapse
tbody	.block-table__table tbody	min-w-full
Row	.slate-tr	h-full
Cell	.slate-td, .slate-th	h-full overflow-visible border-none p-0, bg-(--cellBackground); for headers text-left font-normal *:m-0
Cell borders	::before of the cell, plus data-border-top/right/bottom/left (new attributes)	before:absolute before:box-border before:size-full before:content-[''] before:select-none, and per side before:border-{t,r,b,l} before:border-{t,r,b,l}-border
Cell content	.block-table__cell-content (new part)	relative z-20 box-border h-full px-4 py-2

• Borders as data attributes. Plate computes which sides of a cell have a border. The cell now sets a data-border-<side> attribute for each, in both renderers, through a shared cellBorderAttributes() helper. The border color reads --block-table-border-color, which falls back to --border.
• Cell background: a cell with its own background color sets it inline as --cellBackground, as before.
• Dropped classes with no visual effect:
  • bg-background generates no CSS: the theme has no background color for Tailwind. Cells have always been transparent.
  • group/table is used by nothing.
• Reset independence: cells set their padding, border style, box sizing, and for headers the weight and alignment. Without a reset, browsers give cells padding, and header cells bold, centered text.
• Editor-only differences stay Tailwind:
  • the narrower px-3 cell padding;
  • the row drag handles, selection tint, resize handles and toolbar.

Kept for zero diff: header cells are bold in the editor only

The rendered content has always set header cells to font-normal, but the editor never did, so the browser's bold applied there. With the rule now shared, the editor's header cells would have become normal weight. To keep this PR zero-diff, the editor adds font-bold to header cells, with a comment. If we want the editor to match the rendered page, it's a one-line removal with a visual change in the editor screenshot. I'd do that in a follow-up.

Tests

• New: plate/acceptance/tests/table-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:

  • block, scroll container, wrapper, table, tbody, row, header and data cells, cell content;
  • each cell's ::before border: sides, style, color, and that it fills its cell.

  Widths aren't compared directly: they follow the text, and removing the reset also removes the theme's font.

• Ratchet: PENDING loses the table, tr, th and td entries.

Validation

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

Part of #200.