Skip to content

Theme: forward ThemeProvider cornerRadius preset to :root for root providers#79153

Open
ciampo wants to merge 3 commits into
trunkfrom
add-corner-radius-root-selector
Open

Theme: forward ThemeProvider cornerRadius preset to :root for root providers#79153
ciampo wants to merge 3 commits into
trunkfrom
add-corner-radius-root-selector

Conversation

@ciampo

@ciampo ciampo commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

Follow-up to #78816 (review thread).

What

A root ThemeProvider (isRoot) now forwards its cornerRadius preset to the document element, so --wpds-border-radius-* applies to <html> — not just the provider's scoping <div>. This matches how color and cursor already behave.

Why

color/cursor from a root provider already cascade to :root; cornerRadius was the odd one out. Mixed pages (React UI + PHP-rendered admin HTML) consume the tokens outside the React root, so the radius preset should reach <html> too.

Only isRoot providers are affected — non-root nested providers still scope their preset locally.

How

Each corner-radius-* mode in terrazzo.config.ts gains a :root:has([data-wpds-root-provider="true"][data-wpds-corner-radius="…"]) selector (plus regenerated CSS + CHANGELOG).

Test plan
  • In Storybook (Design System → Theme → Theme Provider), render a root ThemeProvider and switch the preset; confirm --wpds-border-radius-* updates on :root in DevTools.
  • Confirm a non-root provider still scopes its preset locally and does not affect :root.
  • Confirm color/cursor root forwarding still works and the default (subtle) preset matches existing appearance.
Note on the generated CSS

src/prebuilt/css/design-tokens.css is regenerated by npm run build (in packages/theme); running the full build produces this exact diff with no other changes.

Use of AI

Made with Cursor.

@github-actions github-actions Bot added the [Package] Theme /packages/theme label Jun 12, 2026
@ciampo ciampo self-assigned this Jun 12, 2026
@ciampo ciampo added the [Type] Enhancement A suggestion for improvement. label Jun 12, 2026
@ciampo ciampo marked this pull request as ready for review June 12, 2026 14:17
@ciampo ciampo requested a review from a team as a code owner June 12, 2026 14:17
@github-actions

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

ciampo added 3 commits June 12, 2026 16:47
Restore the `:root:has([data-wpds-root-provider="true"][data-wpds-corner-radius="…"])`
selectors for each corner-radius preset mode in the Terrazzo config (and the
generated prebuilt CSS) so a root `ThemeProvider` applies the
`--wpds-border-radius-*` tokens to the document element, consistent with how
`color` and `cursor` tokens already behave.

Follow-up to #78816 (comment)
@ciampo ciampo force-pushed the add-corner-radius-root-selector branch from 3108de9 to 93a39d0 Compare June 12, 2026 14:48
@github-actions

Copy link
Copy Markdown

Size Change: +36 B (0%)

Total Size: 8.59 MB

📦 View Changed
Filename Size Change
build/modules/boot/index.min.js 52.8 kB +36 B (+0.07%)

compressed-size-action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Theme /packages/theme [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant