Content CSS Phase 5: code block styles to styles/content.css

[sneridagh]

Phase 5 of #200: the code block is styled by plain CSS instead of Tailwind utilities, with zero visual change. Its syntax colors become theme tokens.

Stacked on #211 (Phase 4). The base is b4-lists. This PR's own change is only the last commit.

Changes

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

Element	Hook	Before (Tailwind)
Block	.slate-code_block	py-1
Box around the code	.block-code_block__frame (new part)	relative w-full rounded-md bg-muted/50
pre	.block-code_block__pre (new part)	overflow-x-auto p-8 pr-4 font-mono text-sm leading-[normal] [tab-size:2] print:break-inside-avoid
Syntax tokens	.slate-code_block .hljs-*	16 **:[.hljs-…]:… arbitrary variants, plus 13 dark: ones

• Theming tokens. The box background is --block-code-block-background; it falls back to 50% of --muted, as before. Each syntax color is a --code-token-* custom property that defaults to the current GitHub light color:

  • -keyword, -attribute, -string, -title, -name, -comment, -symbol, -bullet, -section;
  • -addition and -deletion, each with a -background.

  A theme can retune them, for a dark mode for instance.

• dark: variants dropped, as Remove Tailwind from block content in @plone/plate and @plone/blocks #200 planned. Nothing in Aurora sets the .dark class, so they never applied. Dark content comes from setting the tokens instead.

• Reset independence:

  • pre sets its margin and white-space explicitly: browsers give it a margin, and @plone/theming's simple reset sets white-space: pre-wrap.
  • The inner code inherits the pre's font. Without a reset, browsers give code a generic monospace font at a smaller size.

• Editor-only controls stay Tailwind: format, language picker and copy buttons.

Pre-existing selector bugs, kept for zero diff

Tailwind turns _ into a space inside arbitrary variants, so three of the original selectors never matched what they meant to:

Meant	Generated	Effect today
.hljs-built_in (orange)	.hljs-built in	Built-ins such as console get no color
.hljs-variable.language_ (red)	.hljs-variable.language	this and similar get the variable blue
.hljs-title.class_, .function_…	.hljs-title.class…	No effect: .hljs-title already matches them

To stay zero-diff, the new rules reproduce what actually rendered: no built_in and no variable.language_ rule. Restoring them is a one-line change each, with a visual change. I'd do it in a follow-up if we want GitHub's real colors.

Tests

• New: plate/acceptance/tests/code-block-content-css.test.ts. It compares the computed values of every property these rules set in the public view (block, frame, pre, code, and the keyword, title and string token colors) under three conditions:
  • Agave's preflight;
  • no reset;
  • @plone/theming's simple reset.
• Ratchet: PENDING loses the whole code_block entry.

Validation

• CI=1 pnpm visual-test --retries=0: 24/24 pixel-identical. The native-blocks screenshots include a highlighted JavaScript code block in the public view (desktop and mobile) and in the editor.
• pnpm acceptance-test: 175 passed, including the code block width tests.
• pnpm --filter @plone/plate test --run: 75 passed. check:ts, eslint and stylelint: clean.

Part of #200.