DataViews: Adopt @wordpress/theme design tokens #75174
Closed
jameskoster wants to merge 23 commits into
Closed
Conversation
jameskoster
requested review from
gigitux,
ntsekouras and
oandregal
as code owners
jameskoster
added
[Type] Enhancement
|
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. |
Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
* Consolidate dimension tokens * changelog * Update instances of old tokens * Begin scale at xs * Gap tokens * update stack instances, badge, box story * Remap gap tokens, fix Box * Introduce 32px gap * Use spaces for CHANGELOG indentation --------- Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: aduth <aduth@git.wordpress.org>
…74343) * Build: Add vendorScripts config to build packages from node_modules Adds support for building vendor packages (like React) from node_modules instead of relying on pre-built UMD bundles. This is needed for React 19+ which no longer ships UMD builds. New `vendorScripts` config in `wpPlugin`: - `name`: Package name (e.g., 'react', 'react/jsx-runtime') - `global`: Global variable name (e.g., 'React', 'ReactJSXRuntime') - `handle`: WordPress script handle (e.g., 'react', 'react-jsx-runtime') - `dependencies`: Array of dependency handles The bundleVendorScript function: - Resolves packages from node_modules using require.resolve() - Builds IIFE bundles with proper globalName - Externalizes other vendor packages to avoid duplication - Generates .asset.php files with dependencies and version hash Default vendor externals are preserved in wordpress-externals-plugin for third-party plugins that rely on WordPress core providing these scripts. * Simplify the vendor build * Move to build-vendors.mjs --------- Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
…74853) * Navigation: Consolidate SVG rendering functions to a shared helper * fix function name * Apply suggestions from code review Co-authored-by: Dave Smith <getdavemail@gmail.com> * move helpers to their own files * fix function name * fix function name --------- Co-authored-by: Dave Smith <getdavemail@gmail.com>
* RangeControl: support forced-colors mode * Use gray colors via the `theme` object * CHANGELOG
* Restrict base-ui imports outside of UI component packages * Update .eslintrc.js Co-authored-by: Andrew Duthie <1779930+aduth@users.noreply.github.com> * Update .eslintrc.js Co-authored-by: Andrew Duthie <1779930+aduth@users.noreply.github.com> * Add comments back, format --------- Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: aduth <aduth@git.wordpress.org>
Co-authored-by: johnbillion <johnbillion@git.wordpress.org> Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: aduth <aduth@git.wordpress.org>
…75191) Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
* Env: Fix `WP_ENV_MULTISITE` environment variable override not working correctly * Remove non-functional WP_ENV_MULTISITE config Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
…75169) * Cover block: Force LTR direction for the background URL input field * Simply add url attribute Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
* Tabs block: Polish * Update packages/block-library/src/tab/add-tab-toolbar-control.js Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * Remove label. * Rename to "Tab-Panel" * Remove showTooltip prop. * Rename tab-panels folder. * Rename other tab panels refs * Additional renaming --------- Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: maxschmeling <maxschmeling@git.wordpress.org> Co-authored-by: ingeniumed <ingeniumed@git.wordpress.org> Co-authored-by: chriszarate <czarate@git.wordpress.org> Co-authored-by: shekharnwagh <shekharnwagh@git.wordpress.org>
Co-authored-by: czarflix <czarflix@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: mcsf <mcsf@git.wordpress.org> Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: SirLouen <sirlouen@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
…SS (#73205) Co-authored-by: gmjuhasz <gmjuhasz@git.wordpress.org> Co-authored-by: ocean90 <ocean90@git.wordpress.org>
* Button: use dimension tokens * InputLayou: use semantic dimension tokens * Tabs: use semantic dimension tokens * CHANGELOG * Add TODOs for using dimension tokens for height/size * Prevent hardcoded value ---- Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: aduth <aduth@git.wordpress.org>
…om/WordPress/gutenberg into update/dataviews-token-consumption
jameskoster
requested review from
ObliviousHarmony,
ajitbohra,
ellatrix,
fabiankaegy,
juanmaguitar,
nerrad,
ntwb and
t-hamano
as code owners
github-actions
Bot
added
[Package] Core data
|
Size Change: +3.8 kB (+0.13%) Total Size: 2.99 MB
ℹ️ View Unchanged
|
Contributor
Author
|
Somehow I totally broke this PR so I opened a new one instead: #75204 |
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
14 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, more maintainable token-based approach, improving:How
Color tokens
$gray-*,$white, etc.) with semantic theme tokens based on usage:--wpds-color-fg-*tokens for foreground colors (color,fill)--wpds-color-bg-*tokens for background colors--wpds-color-stroke-*tokens for bordersDimension tokens
$grid-unit-*) with semantic theme tokens:--wpds-dimension-gap-*tokens for flex/grid gaps--wpds-dimension-padding-*tokens for padding and position offsets (top,left,right,bottom)calc(var(--wpds-dimension-base) * N)for exact pixel values where semantic tokens don't match (e.g., 12px)Typography tokens
--wpds-font-size-*for font sizes--wpds-font-weight-*for font weights--wpds-font-line-height-*for line heightsBorder tokens
$radius-*and$border-widthvariables with--wpds-border-radius-*and--wpds-border-width-*tokensRetained SCSS variables
Some variables were retained where theme equivalents don't exist:
$icon-size,$button-size-small,$button-size-compactz-index()function calls$white(for Windows High Contrast mode compatibility)Testing
Important
The most notable visual change here is decorative stroke colors. See comparison screenshots below. The design tokens do not currently include a stroke color as light as
$gray-200and$gray-100. This is most visible in List and Table layouts. Let's discuss whether to adjust the algorithm to better reflect what's on trunk, or some other solution.