Skip to content

DataViews: Adopt @wordpress/theme design tokens #75204

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ciampo merged 29 commits into from
May 14, 2026
Merged

DataViews: Adopt @wordpress/theme design tokens #75204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
a7461d2
DataViews: Utilise `@wordpress/theme` tokens where possible
jameskoster Jan 30, 2026
8d81659
token adjustments
jameskoster Feb 4, 2026
b74a551
more adjustments
jameskoster Feb 4, 2026
1bcab81
Changelog
jameskoster Feb 4, 2026
c6bb024
Swap more base variables with DS tokens
ciampo Feb 9, 2026
87b4823
Add TODO comments for future size token migration
jameskoster Apr 9, 2026
57ee545
Replace remaining SCSS variables with design system tokens
jameskoster Apr 10, 2026
b252fe0
Replace direct --wp-admin-theme-color references with design system t…
jameskoster Apr 10, 2026
e5c074f
Changelog
jameskoster Apr 10, 2026
0d5db91
Replace alpha/color-mix --wp-admin-theme-color references with design…
jameskoster Apr 10, 2026
d4e1820
Update renamed typography tokens to use --wpds-typography-* prefix
jameskoster Apr 13, 2026
3c3cea9
Reduce action button gap in DataViews list layout
jameskoster Apr 15, 2026
b71a7d6
Reduce field gap spacing in DataViews list layout
jameskoster Apr 15, 2026
d3371d3
Replace hardcoded rgba values with color-mix using design token in ac…
jameskoster Apr 15, 2026
21e0b65
DataViews: Address review findings on token migration
jameskoster Apr 23, 2026
9951953
DataViews: Re-categorise CHANGELOG for #75204 and move to Unreleased
jameskoster Apr 23, 2026
16dd30c
DataViews: Restore trunk dimensions on remaining drifted styles
jameskoster Apr 23, 2026
c2e07d8
DataViews: Use brand-strong foreground token for selected radio dot
jameskoster Apr 23, 2026
8a66fca
DataViews: Use gap-xl token for grid gaps
jameskoster Apr 23, 2026
b52be50
DataViews: Use $icon-size consistently for icon-button widths in filters
jameskoster Apr 23, 2026
dd0ebd7
DataViews: Use neutral stroke token for list focus-within border
jameskoster Apr 27, 2026
5cb2371
DataViews: Improve selected table row text contrast
jameskoster May 6, 2026
3425312
DataViews: Keep list row border consistent on hover
jameskoster May 6, 2026
f02c92f
DataViews: Refine grid selected thumbnail outline
jameskoster May 6, 2026
d898fc2
DataViews: Keep filter checkbox fill solid on row hover
jameskoster May 6, 2026
7a113c7
DataViews: Apply brand border to filter checkbox on row hover
jameskoster May 6, 2026
0f5968a
Dataviews: remove unused Sass imports from grid layout styles
jameskoster May 12, 2026
6fd1bc4
Dataviews: align picker grid with grid layout; tidy SCSS imports
jameskoster May 13, 2026
6c89c05
Dataviews: drop sass:math from filters styles
jameskoster May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions packages/dataviews/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,24 @@

## Unreleased

### Enhancements

- DataViews: Refresh filter chip styling to align with `Button`. [#75204](https://github.com/WordPress/gutenberg/pull/75204)
- DataForms: Increase the minimum width of the panel layout popover from 256px to 320px so option labels have more room. [#75204](https://github.com/WordPress/gutenberg/pull/75204)

### Bug Fixes

- DataViews: Restore the `padding` rule on grid item titles that was lost when the wrapping element's class was renamed. [#75204](https://github.com/WordPress/gutenberg/pull/75204)
- DataViews: Restore the original 16px padding on the first/last table header cells (had drifted to 32px during the token migration). [#75204](https://github.com/WordPress/gutenberg/pull/75204)
- DataViews: Restore the original 4px gap inside table header buttons (had drifted to 8px during the token migration). [#75204](https://github.com/WordPress/gutenberg/pull/75204)
- DataViews: Restore the original 24px gap on the default-density grid (had drifted to 32px during the token migration). [#75204](https://github.com/WordPress/gutenberg/pull/75204)
- DataForms: Restore the original 24px minimum height on panel-layout fields (trigger, label, control) (had drifted to 32px during the token migration). [#75204](https://github.com/WordPress/gutenberg/pull/75204)
- DataViews: Restore the original 28px end-padding on resettable filter chips (had drifted to 32px during the token migration). [#75204](https://github.com/WordPress/gutenberg/pull/75204)

### Code Quality

- DataViews: Migrate styles from `@wordpress/base-styles` SCSS variables to `@wordpress/theme` CSS custom properties (design tokens) where possible. [#75204](https://github.com/WordPress/gutenberg/pull/75204)

## 14.2.0 (2026-04-29)

### Enhancements
Expand Down
6 changes: 2 additions & 4 deletions packages/dataviews/src/components/dataform-controls/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@use "@wordpress/base-styles/colors" as *;

.dataviews-controls__datetime {
border: none;
padding: 0;
Expand Down Expand Up @@ -28,9 +26,9 @@
}

.dataviews-controls__date-preset {
border: 1px solid #ddd;
border: 1px solid var(--wpds-color-stroke-surface-neutral);

&:active {
background-color: $black;
background-color: var(--wpds-color-bg-interactive-neutral-strong-active);
}
}
11 changes: 4 additions & 7 deletions packages/dataviews/src/components/dataform-layouts/card/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;

.dataforms-layouts-card__field {
width: 100%;
}
Expand All @@ -14,15 +11,15 @@
}

.dataforms-layouts-card__field-description {
color: $gray-700;
color: var(--wpds-color-fg-content-neutral-weak);
display: block;
font-size: $font-size-medium;
margin-bottom: $grid-unit-20;
font-size: var(--wpds-typography-font-size-md);
margin-bottom: var(--wpds-dimension-gap-lg);
}

.dataforms-layouts-card__field-summary {
display: flex;
flex-direction: row;
gap: $grid-unit-20;
gap: var(--wpds-dimension-gap-lg);
align-items: center;
}
6 changes: 2 additions & 4 deletions packages/dataviews/src/components/dataform-layouts/details/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
@use "@wordpress/base-styles/variables" as *;

.dataforms-layouts-details__summary-content {
display: inline-flex;
min-height: $grid-unit-30;
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
}

.dataforms-layouts-details__content {
padding-top: $grid-unit-15;
padding-top: var(--wpds-dimension-padding-md);
}
62 changes: 41 additions & 21 deletions packages/dataviews/src/components/dataform-layouts/panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
@use "@wordpress/base-styles/variables" as *;
@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as vars;
@use "@wordpress/base-styles/z-index" as *;

.dataforms-layouts-panel__field-trigger {
position: relative;
color: inherit;
display: flex;
width: 100%;
min-height: $grid-unit-30;
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
cursor: var(--wpds-cursor-control);
align-items: flex-start;
border-radius: $radius-small;
border-radius: var(--wpds-border-radius-sm);
isolation: isolate;

&--label-side {
Expand All @@ -28,22 +27,22 @@
}

&:not(.is-disabled):hover {
color: var(--wp-admin-theme-color);
color: var(--wpds-color-fg-interactive-brand);

.dataforms-layouts-panel__field-trigger-icon {
opacity: 1;
}

.dataforms-layouts-panel__field-label {
color: var(--wp-admin-theme-color);
color: var(--wpds-color-fg-interactive-brand);
}
}

&.is-disabled {
cursor: default;

.dataforms-layouts-panel__field-control {
color: $gray-700;
color: var(--wpds-color-fg-content-neutral-weak);
font-weight: var(--wpds-typography-font-weight-regular);
}
}
Expand All @@ -56,13 +55,13 @@

&:hover,
&:focus-visible {
fill: var(--wp-admin-theme-color);
fill: var(--wpds-color-fg-interactive-brand);
}
}

.dataforms-layouts-panel__field-trigger-icon {
padding: 0;
color: var(--wp-admin-theme-color);
color: var(--wpds-color-fg-interactive-brand);
flex: 0 0 auto;
opacity: 0;
border-radius: var(--wpds-border-radius-xs);
Expand All @@ -71,7 +70,7 @@
opacity: 1;
outline:
var(--wpds-border-width-focus) solid
var(--wp-admin-theme-color);
var(--wpds-color-stroke-focus-brand);
}
}

Expand All @@ -86,12 +85,12 @@
.dataforms-layouts-panel__field-label {
width: 38%;
flex-shrink: 0;
min-height: $grid-unit-30;
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
display: flex;
align-items: center;
line-height: $grid-unit-05 * 5;
line-height: var(--wpds-typography-line-height-sm);
hyphens: auto;
color: $gray-700;
color: var(--wpds-color-fg-content-neutral-weak);

.components-base-control__label {
display: inline;
Expand All @@ -100,19 +99,19 @@
}

&.has-error {
color: $alert-red;
color: var(--wpds-color-fg-content-error-weak);
}
}

.dataforms-layouts-panel__field-label-error-content {
position: relative;
z-index: 1;
cursor: help;
fill: $alert-red;
fill: var(--wpds-color-fg-content-error-weak);
display: inline-flex;
flex-direction: row;
align-items: center;
gap: $grid-unit-05;
gap: var(--wpds-dimension-gap-xs);
svg {
fill: currentColor;
}
Expand All @@ -121,7 +120,7 @@
.dataforms-layouts-panel__field-control {
flex-grow: 1;
min-width: 0;
min-height: $grid-unit-30;
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
line-height: var(--wpds-typography-line-height-md);
display: flex;
align-items: center;
Expand All @@ -132,6 +131,23 @@
> * {
min-width: 0;
}

.components-button {
max-width: 100%;
text-align: left;
white-space: normal;
text-wrap: balance; // Fallback for Safari.
text-wrap: pretty;
min-height: vars.$button-size-compact;
}

&.components-button.is-link[aria-disabled="true"] {
text-decoration: none;
}

.components-dropdown {
max-width: 100%;
}
}

.dataforms-layouts-panel__field-trigger--label-top
Expand All @@ -151,18 +167,22 @@
}

.dataforms-layouts-panel__field-dropdown .components-popover__content {
min-width: 256px;
padding: $grid-unit-20;
min-width: 320px;
padding: var(--wpds-dimension-padding-lg);
}

.dataforms-layouts-panel__dropdown-header {
margin-bottom: $grid-unit-20;
margin-bottom: var(--wpds-dimension-gap-lg);
}

.dataforms-layouts-panel__modal-footer {
margin-top: $grid-unit-20;
margin-top: var(--wpds-dimension-gap-lg);
}

.components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
z-index: z-index(".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown");
}

.dataforms-layouts-panel__summary-button:empty {
min-width: vars.$admin-sidebar-width;
}
13 changes: 5 additions & 8 deletions packages/dataviews/src/components/dataform-layouts/regular/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,23 @@
@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;

.dataforms-layouts-regular__field {
width: 100%;
min-height: $grid-unit-40;
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
justify-content: flex-start !important;
align-items: flex-start !important;

.components-base-control__label,
.components-input-control__label,
.components-form-token-field__label {
color: $gray-900;
color: var(--wpds-color-fg-content-neutral);
}
}

.dataforms-layouts-regular__field-label {
width: 38%;
flex-shrink: 0;
min-height: $grid-unit-40;
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
display: flex;
align-items: center;
line-height: $grid-unit-05 * 5;
line-height: var(--wpds-typography-line-height-sm);
hyphens: auto;

&--label-position-side {
Expand All @@ -34,7 +31,7 @@

.dataforms-layouts-regular__field-control {
flex-grow: 1;
min-height: $grid-unit-40;
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
display: flex;
align-items: center;
}
8 changes: 2 additions & 6 deletions packages/dataviews/src/components/dataviews-bulk-actions/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;


.dataviews-bulk-actions-footer__item-count {
color: $gray-900;
color: var(--wpds-color-fg-content-neutral);
}

.dataviews-bulk-actions-footer__container {
margin-right: auto;
min-height: $grid-unit-40;
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
}
Loading
Loading