Skip to content

Commit 1daccaf

Browse files
jameskosterciampoaduthmirka
authored
DataViews: Adopt @wordpress/theme design tokens (#75204)
* DataViews: Utilise `@wordpress/theme` tokens where possible * token adjustments * more adjustments * Changelog * Swap more base variables with DS tokens * Add TODO comments for future size token migration Made-with: Cursor * Replace remaining SCSS variables with design system tokens Made-with: Cursor * Replace direct --wp-admin-theme-color references with design system tokens Migrate direct var(--wp-admin-theme-color) and var(--wp-admin-theme-color-darker-20) usages in DataViews to semantic --wpds-color-* tokens (stroke-focus-brand, fg-interactive-brand, bg-interactive-brand-strong, stroke-interactive-brand, and their -active variants). Alpha/color-mix references using --rgb are left for a follow-up. Made-with: Cursor * Changelog Made-with: Cursor * Replace alpha/color-mix --wp-admin-theme-color references with design 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 * Update renamed typography tokens to use --wpds-typography-* prefix The @wordpress/theme package renamed font tokens from --wpds-font-* to --wpds-typography-* — update all dataviews references to match. Made-with: Cursor * Reduce action button gap in DataViews list layout Made-with: Cursor * Reduce field gap spacing in DataViews list layout Made-with: Cursor * Replace hardcoded rgba values with color-mix using design token in activity layout gradient Made-with: Cursor * DataViews: Address review findings on token migration 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 * DataViews: Re-categorise CHANGELOG for #75204 and move to Unreleased 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 * DataViews: Restore trunk dimensions on remaining drifted styles 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 * DataViews: Use brand-strong foreground token for selected radio dot 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 * DataViews: Use gap-xl token for grid gaps 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 * DataViews: Use $icon-size consistently for icon-button widths in filters 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 * DataViews: Use neutral stroke token for list focus-within border Made-with: Cursor * DataViews: Improve selected table row text contrast Use the stronger neutral foreground token so cell contents remain legible against the selected row background. Co-authored-by: Cursor <cursoragent@cursor.com> * DataViews: Keep list row border consistent on hover 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> * DataViews: Refine grid selected thumbnail outline 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> * DataViews: Keep filter checkbox fill solid on row hover 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> * DataViews: Apply brand border to filter checkbox on row hover 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> * Dataviews: remove unused Sass imports from grid layout styles 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> * Dataviews: align picker grid with grid layout; tidy SCSS imports - 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> * Dataviews: drop sass:math from filters styles 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> --------- Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: aduth <aduth@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
1 parent c1f09a1 commit 1daccaf

23 files changed

Lines changed: 431 additions & 430 deletions

File tree

‎packages/dataviews/CHANGELOG.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,24 @@
22

33
## Unreleased
44

5+
### Enhancements
6+
7+
- DataViews: Refresh filter chip styling to align with `Button`. [#75204](https://github.com/WordPress/gutenberg/pull/75204)
8+
- 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)
9+
10+
### Bug Fixes
11+
12+
- 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)
13+
- 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)
14+
- 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)
15+
- 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)
16+
- 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)
17+
- 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)
18+
19+
### Code Quality
20+
21+
- 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)
22+
523
## 14.2.0 (2026-04-29)
624

725
### Enhancements

‎packages/dataviews/src/components/dataform-controls/style.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@use "@wordpress/base-styles/colors" as *;
2-
31
.dataviews-controls__datetime {
42
border: none;
53
padding: 0;
@@ -28,9 +26,9 @@
2826
}
2927

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

3331
&:active {
34-
background-color: $black;
32+
background-color: var(--wpds-color-bg-interactive-neutral-strong-active);
3533
}
3634
}

‎packages/dataviews/src/components/dataform-layouts/card/style.scss‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
@use "@wordpress/base-styles/colors" as *;
2-
@use "@wordpress/base-styles/variables" as *;
3-
41
.dataforms-layouts-card__field {
52
width: 100%;
63
}
@@ -14,15 +11,15 @@
1411
}
1512

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

2320
.dataforms-layouts-card__field-summary {
2421
display: flex;
2522
flex-direction: row;
26-
gap: $grid-unit-20;
23+
gap: var(--wpds-dimension-gap-lg);
2724
align-items: center;
2825
}

‎packages/dataviews/src/components/dataform-layouts/details/style.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
@use "@wordpress/base-styles/variables" as *;
2-
31
.dataforms-layouts-details__summary-content {
42
display: inline-flex;
5-
min-height: $grid-unit-30;
3+
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
64
}
75

86
.dataforms-layouts-details__content {
9-
padding-top: $grid-unit-15;
7+
padding-top: var(--wpds-dimension-padding-md);
108
}

‎packages/dataviews/src/components/dataform-layouts/panel/style.scss‎

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
@use "@wordpress/base-styles/variables" as *;
2-
@use "@wordpress/base-styles/colors" as *;
1+
@use "@wordpress/base-styles/variables" as vars;
32
@use "@wordpress/base-styles/z-index" as *;
43

54
.dataforms-layouts-panel__field-trigger {
65
position: relative;
76
color: inherit;
87
display: flex;
98
width: 100%;
10-
min-height: $grid-unit-30;
9+
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
1110
cursor: var(--wpds-cursor-control);
1211
align-items: flex-start;
13-
border-radius: $radius-small;
12+
border-radius: var(--wpds-border-radius-sm);
1413
isolation: isolate;
1514

1615
&--label-side {
@@ -28,22 +27,22 @@
2827
}
2928

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

3332
.dataforms-layouts-panel__field-trigger-icon {
3433
opacity: 1;
3534
}
3635

3736
.dataforms-layouts-panel__field-label {
38-
color: var(--wp-admin-theme-color);
37+
color: var(--wpds-color-fg-interactive-brand);
3938
}
4039
}
4140

4241
&.is-disabled {
4342
cursor: default;
4443

4544
.dataforms-layouts-panel__field-control {
46-
color: $gray-700;
45+
color: var(--wpds-color-fg-content-neutral-weak);
4746
font-weight: var(--wpds-typography-font-weight-regular);
4847
}
4948
}
@@ -56,13 +55,13 @@
5655

5756
&:hover,
5857
&:focus-visible {
59-
fill: var(--wp-admin-theme-color);
58+
fill: var(--wpds-color-fg-interactive-brand);
6059
}
6160
}
6261

6362
.dataforms-layouts-panel__field-trigger-icon {
6463
padding: 0;
65-
color: var(--wp-admin-theme-color);
64+
color: var(--wpds-color-fg-interactive-brand);
6665
flex: 0 0 auto;
6766
opacity: 0;
6867
border-radius: var(--wpds-border-radius-xs);
@@ -71,7 +70,7 @@
7170
opacity: 1;
7271
outline:
7372
var(--wpds-border-width-focus) solid
74-
var(--wp-admin-theme-color);
73+
var(--wpds-color-stroke-focus-brand);
7574
}
7675
}
7776

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

9695
.components-base-control__label {
9796
display: inline;
@@ -100,19 +99,19 @@
10099
}
101100

102101
&.has-error {
103-
color: $alert-red;
102+
color: var(--wpds-color-fg-content-error-weak);
104103
}
105104
}
106105

107106
.dataforms-layouts-panel__field-label-error-content {
108107
position: relative;
109108
z-index: 1;
110109
cursor: help;
111-
fill: $alert-red;
110+
fill: var(--wpds-color-fg-content-error-weak);
112111
display: inline-flex;
113112
flex-direction: row;
114113
align-items: center;
115-
gap: $grid-unit-05;
114+
gap: var(--wpds-dimension-gap-xs);
116115
svg {
117116
fill: currentColor;
118117
}
@@ -121,7 +120,7 @@
121120
.dataforms-layouts-panel__field-control {
122121
flex-grow: 1;
123122
min-width: 0;
124-
min-height: $grid-unit-30;
123+
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
125124
line-height: var(--wpds-typography-line-height-md);
126125
display: flex;
127126
align-items: center;
@@ -132,6 +131,23 @@
132131
> * {
133132
min-width: 0;
134133
}
134+
135+
.components-button {
136+
max-width: 100%;
137+
text-align: left;
138+
white-space: normal;
139+
text-wrap: balance; // Fallback for Safari.
140+
text-wrap: pretty;
141+
min-height: vars.$button-size-compact;
142+
}
143+
144+
&.components-button.is-link[aria-disabled="true"] {
145+
text-decoration: none;
146+
}
147+
148+
.components-dropdown {
149+
max-width: 100%;
150+
}
135151
}
136152

137153
.dataforms-layouts-panel__field-trigger--label-top
@@ -151,18 +167,22 @@
151167
}
152168

153169
.dataforms-layouts-panel__field-dropdown .components-popover__content {
154-
min-width: 256px;
155-
padding: $grid-unit-20;
170+
min-width: 320px;
171+
padding: var(--wpds-dimension-padding-lg);
156172
}
157173

158174
.dataforms-layouts-panel__dropdown-header {
159-
margin-bottom: $grid-unit-20;
175+
margin-bottom: var(--wpds-dimension-gap-lg);
160176
}
161177

162178
.dataforms-layouts-panel__modal-footer {
163-
margin-top: $grid-unit-20;
179+
margin-top: var(--wpds-dimension-gap-lg);
164180
}
165181

166182
.components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
167183
z-index: z-index(".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown");
168184
}
185+
186+
.dataforms-layouts-panel__summary-button:empty {
187+
min-width: vars.$admin-sidebar-width;
188+
}

‎packages/dataviews/src/components/dataform-layouts/regular/style.scss‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
1-
@use "@wordpress/base-styles/colors" as *;
2-
@use "@wordpress/base-styles/variables" as *;
3-
41
.dataforms-layouts-regular__field {
52
width: 100%;
6-
min-height: $grid-unit-40;
3+
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
74
justify-content: flex-start !important;
85
align-items: flex-start !important;
96

107
.components-base-control__label,
118
.components-input-control__label,
129
.components-form-token-field__label {
13-
color: $gray-900;
10+
color: var(--wpds-color-fg-content-neutral);
1411
}
1512
}
1613

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

2623
&--label-position-side {
@@ -34,7 +31,7 @@
3431

3532
.dataforms-layouts-regular__field-control {
3633
flex-grow: 1;
37-
min-height: $grid-unit-40;
34+
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
3835
display: flex;
3936
align-items: center;
4037
}

‎packages/dataviews/src/components/dataviews-bulk-actions/style.scss‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
@use "@wordpress/base-styles/colors" as *;
2-
@use "@wordpress/base-styles/variables" as *;
3-
4-
51
.dataviews-bulk-actions-footer__item-count {
6-
color: $gray-900;
2+
color: var(--wpds-color-fg-content-neutral);
73
}
84

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

0 commit comments

Comments
 (0)