Two rules in packages/plate/styles/content.css (table of contents, #216) read design values directly instead of their own block tokens, so themes can't retune them the way they can the rest of the content:
| Rule |
Reads |
Used for |
.block-toc__empty |
var(--color-gray-500, oklch(55.1% 0.027 264.364)) |
The "Create a heading…" message |
.block-toc__highlight |
var(--color-quanta-sapphire, #0b78d0) at 13% |
The highlight on a heading after jumping to it |
--color-gray-500 is a Tailwind palette value, and --color-quanta-sapphire is a Quanta (CMS UI) value. Neither belongs in content styles that themes without Tailwind or Quanta must be able to set.
To do:
- Read block tokens with the current values as fallbacks, for example
var(--block-toc-empty-color, var(--muted-foreground)) and var(--block-toc-highlight-color, …).
- Pick fallbacks from
@plone/theming's tokens.
- List the new tokens in
docs/how-to-guides/style-blocks-in-a-theme.md.
Reusing a theme token as the fallback may change the color slightly, so check the visual tests.
Two rules in
packages/plate/styles/content.css(table of contents, #216) read design values directly instead of their own block tokens, so themes can't retune them the way they can the rest of the content:.block-toc__emptyvar(--color-gray-500, oklch(55.1% 0.027 264.364)).block-toc__highlightvar(--color-quanta-sapphire, #0b78d0)at 13%--color-gray-500is a Tailwind palette value, and--color-quanta-sapphireis a Quanta (CMS UI) value. Neither belongs in content styles that themes without Tailwind or Quanta must be able to set.To do:
var(--block-toc-empty-color, var(--muted-foreground))andvar(--block-toc-highlight-color, …).@plone/theming's tokens.docs/how-to-guides/style-blocks-in-a-theme.md.Reusing a theme token as the fallback may change the color slightly, so check the visual tests.