DataViews: Adopt @wordpress/theme design tokens #75204
Merged
Merged
Conversation
jameskoster
requested review from
gigitux,
ntsekouras and
oandregal
as code owners
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +6.12 kB (+0.08%) Total Size: 7.95 MB 📦 View Changed
ℹ️ View Unchanged
|
Contributor
|
@jameskoster happy to schedule some time to go through the main differences and how to bridge this gap with tweaks to the DS tokens |
ciampo
force-pushed
the
update/dataviews-theme-tokens
branch
from
2bc082c to
24b6538
Compare
ciampo
force-pushed
the
update/dataviews-theme-tokens
branch
from
57a4a8d to
b737dc9
Compare
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Contributor
Author
|
I paired with @ciampo to address the stroke color tokens. The main issue outstanding now is that instances of the |
Member
|
Noting that we probably shouldn't merge this until the token loading issue is resolved. |
jameskoster
added
the
[Status] Blocked
Member
Just to clarify, are we unblocked on this now because we have the fallback mechanism added in #75589 ? |
Member
|
Yes, this is unblocked 👍 |
mirka
removed
the
[Status] Blocked
jameskoster
force-pushed
the
update/dataviews-theme-tokens
branch
from
b737dc9 to
bc8f97f
Compare
Contributor
Author
|
I didn't touch instances of |
Member
Short answer is yes, feel free to use them. They are currently supported in a basic way through the automatic fallbacks, and eventually we'll have an actual |
jameskoster
force-pushed
the
update/dataviews-theme-tokens
branch
from
88c05e7 to
a56a334
Compare
aduth
reviewed
Apr 10, 2026
jameskoster
force-pushed
the
update/dataviews-theme-tokens
branch
from
a56a334 to
e1dbdef
Compare
… tokens Migrate remaining rgba/color-mix usages of --wp-admin-theme-color--rgb to semantic --wpds-color-* tokens: interactive-brand-weak-active for selected states, interactive-brand-weak for hover, and stroke-surface-brand for row borders. Remove grid media overlay backgrounds that lack a suitable token equivalent. Made-with: Cursor
The @wordpress/theme package renamed font tokens from --wpds-font-* to --wpds-typography-* — update all dataviews references to match. Made-with: Cursor
Made-with: Cursor
Made-with: Cursor
…tivity layout gradient Made-with: Cursor
Fixes from the AI-assisted review on PR #75204: - Grid title: rename JSX className from `__title` to `__title-actions` so the existing SCSS rule in `grid/style.scss` actually matches. Aligns with picker-grid's existing convention. - Table header padding: replace `--wpds-dimension-gap-2xl` (32px) with `--wpds-dimension-padding-lg` (16px) on first/last header cells. The doubled value was a token-scale typo. - Table header button gap: replace `--wpds-dimension-gap-sm` (8px) with `--wpds-dimension-gap-xs` (4px) to preserve the original. - Grid gap: replace `calc(var(--wpds-dimension-base) * 8)` (32px) with `--wpds-dimension-padding-2xl` (24px) in `grid/style.scss` and `utils/grid-items.scss` so it matches the original `$grid-unit-30`. - Activity layout: restore trunk dimensions while keeping theme tokens. - `padding`: 0 24px (was 8px 24px). - `__group-header` margin-bottom: 8px (was 16px). - `__item-fields` gap: 12px (was 16px). - `is-compact __item-type` width: 12px (was 8px — narrower than the 11px icon). - `is-compact`/`is-balanced` `__item-content` margin: 12px (was 16px). - `is-comfortable` `__item-content` margin top: 8px (was 16px). - List default density `row-gap`: restore 4px (`gap-xs`) — was 16px (`gap-lg`). Made-with: Cursor
The token-migration entry was filed under "Code Quality" in two already-released sections. Move it to "Unreleased" and split per the review on PR #75204: - Enhancements: filter chip restyle, panel popover min-width bump. - Bug Fixes: dimension drifts that the second review pass corrected (grid title selector, table header padding, table header button gap, default-density grid gap). - Code Quality: the token migration itself. Made-with: Cursor
Sweep grid, table, activity, list, panel, and filter styles for any remaining 4-8px dimension drifts introduced by the token migration: - list: restore 8px scroll-margin, 12px field gap, 8px group-header margin-bottom (had drifted to 16px) - panel: restore 24px min-height on field trigger, label, and control (had drifted to 32px) - filters: restore 28px end-padding on resettable summary chips (had drifted to 32px) - card: drop the orphan .dataforms-layouts-card__field-header-label rule (no element uses that class) Made-with: Cursor
The inner dot of a selected radio in the filter search widget sits on top of the brand-strong background of the radio ring. Switch from --wpds-color-bg-surface-neutral-strong to --wpds-color-fg-interactive- brand-strong, the token that's purpose-built to render legibly on top of --wpds-color-bg-interactive-brand-strong across light/dark themes. Forced-colors mode behaviour is unchanged (the browser overrides the border colour with a system colour either way). Made-with: Cursor
Switch the grid layout's gap declarations from --wpds-dimension-padding-2xl to --wpds-dimension-gap-xl. Identical computed values across all density modes, just correct semantics for a grid/flex gap property. Made-with: Cursor
Three spots in dataviews-filters/style.scss represent the same "one icon-button wide" concept: - summary-chip.has-reset padding-inline-end (was a literal 24px) - summary-chip-remove width/height (already $icon-size) - search-widget icon container width (was a literal 24px, drifted from $icon-size on trunk) Use vars.$icon-size everywhere and add a TODO to migrate once a component-size DS token is available. Made-with: Cursor
Made-with: Cursor
Use the stronger neutral foreground token so cell contents remain legible against the selected row background. Co-authored-by: Cursor <cursoragent@cursor.com>
Drop the hover/focus border override so list rows retain the resting border color when hovered or focused. Co-authored-by: Cursor <cursoragent@cursor.com>
Match the media overlay radius to the thumbnail itself and add a 2px surface inset between the thumbnail and the brand selection stroke so the corners align and the stroke reads as a distinct ring. Co-authored-by: Cursor <cursoragent@cursor.com>
Override the unselected multi-selection checkbox background with a surface token in the listitem hover/focus/active state so the brand-tinted row no longer shows through the transparent resting fill. Co-authored-by: Cursor <cursoragent@cursor.com>
Mirror the single-select radio behavior so multi-select checkboxes pick up the brand stroke when their listitem is hovered, focused, or highlighted. Co-authored-by: Cursor <cursoragent@cursor.com>
Drop unused @use of sass:math and @wordpress/base-styles/variables; the grid stylesheet uses design tokens and other modules only. Co-authored-by: Cursor <cursoragent@cursor.com>
- Picker grid: match grid selected media inset ring and use md border-radius on media overlay; drop unused sass:math and variables imports. - Filters: remove unused base-styles colors import; use md border radius on summary popover content. Co-authored-by: Cursor <cursoragent@cursor.com>
jameskoster
force-pushed
the
update/dataviews-theme-tokens
branch
from
9984e5f to
6fd1bc4
Compare
Replace math.div for radio dot sizing with length * 0.5, which compiles to the same values without the sass:math import. Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
|
@jameskoster PR merged 🎉 I had tracked some obvious follow-up tasks in this comment, in case it helps you keeping track of what's next. |
This was referenced May 14, 2026
Member
|
This is really cool to see, great work y'all 👏 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Migrate DataViews package styles from
@wordpress/base-stylesSCSS variables to CSS custom properties (design tokens) from@wordpress/themewhere possible.Why
@wordpress/themeand@wordpress/uiare the natural successors in the WordPress design system. This migration moves DataViews toward the newer, token-based approach, improving:How
Color tokens
$gray-*,$white, etc.) with semantic theme tokens based on usage:--wpds-color-fg-*for foreground colors (color,fill).--wpds-color-bg-*for background colors.--wpds-color-stroke-*for borders.Dimension tokens
$grid-unit-*) with semantic theme tokens:--wpds-dimension-gap-*for flex/grid gaps.--wpds-dimension-padding-*for padding and position offsets (top,left,right,bottom).calc(var(--wpds-dimension-base) * N)as an escape hatch for exact pixel values where token coverage is lacking (e.g.width/height/min-height). These are marked with// TODO: use size token when availableso they can be swapped mechanically once a size scale is added to@wordpress/theme.Typography tokens
--wpds-typography-*tokens (-font-size-*,-font-weight-*,-line-height-*).Border tokens
$radius-*and$border-widthwith--wpds-border-radius-*and--wpds-border-width-*.Cursor
--wpds-cursor-controltoken for interactive non-link controls.Retained SCSS variables
Some variables were retained where theme equivalents don't yet exist:
$icon-size,$button-size-small,$button-size-compact.z-index()function calls.$white(for Windows High Contrast mode compatibility).vars.$admin-sidebar-width(for the panel summary button minimum width).A follow-up issue tracks migrating the remaining
$icon-size/$button-size-*references once a size scale is added to@wordpress/theme.Intentional behaviour changes
The migration is mostly a 1-for-1 token swap, but the following user-visible adjustments fall out of moving to the new scale and are intentional:
Button(border, hover, focus). Screenshots below.min-widthraised from 256px to 320px so option labels have more room before truncating.min-height(calc(var(--wpds-dimension-base) * 13)) so the title baseline stays consistent across rows when some fields are missing.padding: 8px 0 0andoverflow: hiddenso cells with white backgrounds don't overflow the card. Targets.components-card__body:has(> .dataviews-wrapper)and:has(> .dataviews-picker-wrapper).is-linkbuttons in the panel layout no longer underline.__field-controlare constrained tomax-width: 100%so they don't exceed the panel width.__summary-button:emptyusesvars.$admin-sidebar-widthas its minimum width so empty summaries still have a clickable target the size of the sidebar.$gray-300(#ddd) to--wpds-color-stroke-surface-neutral(#dbdbdb) — a small drift kept in exchange for being on a theme token.Several other small dimension drifts were caught during review and corrected back to trunk's pixel values; see the bug-fix entries in
packages/dataviews/CHANGELOG.md.Testing
Important
The most notable visual change is the filter chips. See comparison screenshots below. Since these have always existed 'outside' of the design system I've tweaked their appearance to resemble
Button. Later we should create reusable components for these and evaluate the design.Notes
stroke1in@wordpress/theme(originally bundled here) has been extracted to its own PR (Theme: Increase stroke1 contrast target to 2.9 #77599) so reviewers of@wordpress/themecan evaluate it on its own merits, since it changes the values of several--wpds-color-stroke-surface-*tokens for every consumer of the package.Potential follow-ups
dataviews-filters/style.scssalready tracks thisrgba()question — ciampo's comment--checkbox-sizeconsolidation — ciampo flagged as cleanup opportunitygaptokens — aduth's suggestion, out-of-scope enhancement