@wordpress/dataviews 16.0.1 → 17.0.1-next.v.202606191442.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/README.md +2 -2
  3. package/build/components/dataform-layouts/panel/summary-button.cjs.map +2 -2
  4. package/build/components/dataform-layouts/panel/utils/get-label-content.cjs.map +2 -2
  5. package/build/components/dataviews-filters/filter.cjs.map +2 -2
  6. package/build/components/dataviews-layouts/grid/composite-grid.cjs.map +2 -2
  7. package/build/components/dataviews-layouts/list/index.cjs.map +1 -1
  8. package/build/components/dataviews-layouts/table/column-primary.cjs +2 -2
  9. package/build/components/dataviews-layouts/table/column-primary.cjs.map +2 -2
  10. package/build/components/dataviews-pagination/index.cjs.map +1 -1
  11. package/build/components/dataviews-picker-footer/index.cjs +72 -33
  12. package/build/components/dataviews-picker-footer/index.cjs.map +2 -2
  13. package/build/constants.cjs +1 -1
  14. package/build/constants.cjs.map +2 -2
  15. package/build/dataviews-picker/index.cjs +2 -1
  16. package/build/dataviews-picker/index.cjs.map +2 -2
  17. package/build/field-types/password.cjs +1 -1
  18. package/build/field-types/password.cjs.map +2 -2
  19. package/build/hooks/use-form-validity.cjs +2 -2
  20. package/build/hooks/use-form-validity.cjs.map +2 -2
  21. package/build-module/components/dataform-layouts/panel/summary-button.mjs.map +2 -2
  22. package/build-module/components/dataform-layouts/panel/utils/get-label-content.mjs.map +2 -2
  23. package/build-module/components/dataviews-filters/filter.mjs.map +2 -2
  24. package/build-module/components/dataviews-layouts/grid/composite-grid.mjs.map +2 -2
  25. package/build-module/components/dataviews-layouts/list/index.mjs.map +1 -1
  26. package/build-module/components/dataviews-layouts/table/column-primary.mjs +2 -2
  27. package/build-module/components/dataviews-layouts/table/column-primary.mjs.map +2 -2
  28. package/build-module/components/dataviews-pagination/index.mjs.map +1 -1
  29. package/build-module/components/dataviews-picker-footer/index.mjs +71 -33
  30. package/build-module/components/dataviews-picker-footer/index.mjs.map +2 -2
  31. package/build-module/constants.mjs +1 -1
  32. package/build-module/constants.mjs.map +2 -2
  33. package/build-module/dataviews-picker/index.mjs +6 -2
  34. package/build-module/dataviews-picker/index.mjs.map +2 -2
  35. package/build-module/field-types/password.mjs +1 -1
  36. package/build-module/field-types/password.mjs.map +2 -2
  37. package/build-module/hooks/use-form-validity.mjs +2 -2
  38. package/build-module/hooks/use-form-validity.mjs.map +2 -2
  39. package/build-style/style-rtl.css +164 -176
  40. package/build-style/style.css +164 -176
  41. package/build-types/components/dataform-layouts/panel/summary-button.d.ts.map +1 -1
  42. package/build-types/components/dataform-layouts/panel/utils/get-label-content.d.ts.map +1 -1
  43. package/build-types/components/dataviews-filters/filter.d.ts.map +1 -1
  44. package/build-types/components/dataviews-layouts/grid/composite-grid.d.ts.map +1 -1
  45. package/build-types/components/dataviews-picker-footer/index.d.ts +3 -2
  46. package/build-types/components/dataviews-picker-footer/index.d.ts.map +1 -1
  47. package/build-types/dataviews-picker/index.d.ts +3 -2
  48. package/build-types/dataviews-picker/index.d.ts.map +1 -1
  49. package/build-wp/index.js +324 -282
  50. package/package.json +26 -21
  51. package/src/components/dataform-controls/style.scss +1 -1
  52. package/src/components/dataform-layouts/card/style.scss +1 -1
  53. package/src/components/dataform-layouts/details/style.scss +1 -1
  54. package/src/components/dataform-layouts/panel/style.scss +18 -31
  55. package/src/components/dataform-layouts/panel/summary-button.tsx +0 -1
  56. package/src/components/dataform-layouts/panel/utils/get-label-content.tsx +0 -1
  57. package/src/components/dataform-layouts/regular/style.scss +4 -4
  58. package/src/components/dataviews-bulk-actions/style.scss +2 -2
  59. package/src/components/dataviews-filters/filter.tsx +0 -1
  60. package/src/components/dataviews-filters/style.scss +44 -45
  61. package/src/components/dataviews-layouts/activity/style.scss +11 -11
  62. package/src/components/dataviews-layouts/grid/composite-grid.tsx +0 -1
  63. package/src/components/dataviews-layouts/grid/style.scss +12 -12
  64. package/src/components/dataviews-layouts/list/style.scss +20 -21
  65. package/src/components/dataviews-layouts/picker-activity/style.scss +10 -10
  66. package/src/components/dataviews-layouts/picker-grid/style.scss +10 -10
  67. package/src/components/dataviews-layouts/picker-table/style.scss +4 -4
  68. package/src/components/dataviews-layouts/table/style.scss +17 -17
  69. package/src/components/dataviews-picker-footer/index.tsx +94 -31
  70. package/src/components/dataviews-picker-footer/style.scss +1 -1
  71. package/src/components/dataviews-view-config/style.scss +1 -1
  72. package/src/dataviews/style.scss +8 -8
  73. package/src/dataviews-picker/index.tsx +9 -3
@@ -100,7 +100,7 @@
100
100
  flex-direction: column;
101
101
  font-size: var(--wpds-typography-font-size-md, 13px);
102
102
  line-height: var(--wpds-typography-line-height-sm, 20px);
103
- background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong, #fff));
103
+ background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
104
104
  }
105
105
 
106
106
  .dataviews__view-actions,
@@ -166,7 +166,7 @@
166
166
  .dataviews-title-field {
167
167
  font-size: var(--wpds-typography-font-size-md, 13px);
168
168
  font-weight: var(--wpds-typography-font-weight-medium, 499);
169
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
169
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
170
170
  text-overflow: ellipsis;
171
171
  white-space: nowrap;
172
172
  width: 100%;
@@ -178,10 +178,10 @@
178
178
  overflow: hidden;
179
179
  display: block;
180
180
  flex-grow: 0;
181
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
181
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
182
182
  }
183
183
  .dataviews-title-field a:hover {
184
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
184
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
185
185
  }
186
186
  .dataviews-title-field a:focus {
187
187
  color: var(--wp-admin-theme-color--rgb);
@@ -196,18 +196,18 @@
196
196
  overflow: hidden;
197
197
  display: block;
198
198
  width: 100%;
199
- color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
199
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
200
200
  }
201
201
  .dataviews-title-field button.components-button.is-link:hover {
202
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
202
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
203
203
  }
204
204
 
205
205
  .dataviews-title-field--clickable {
206
206
  cursor: var(--wpds-cursor-control, pointer);
207
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
207
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
208
208
  }
209
209
  .dataviews-title-field--clickable:hover {
210
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
210
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
211
211
  }
212
212
  .dataviews-title-field--clickable:focus {
213
213
  color: var(--wp-admin-theme-color--rgb);
@@ -232,12 +232,12 @@
232
232
  }
233
233
 
234
234
  .dataviews-bulk-actions-footer__item-count {
235
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
235
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
236
236
  }
237
237
 
238
238
  .dataviews-bulk-actions-footer__container {
239
239
  margin-right: auto;
240
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
240
+ min-height: var(--wpds-dimension-size-md, 32px);
241
241
  }
242
242
 
243
243
  .dataviews-layout__container {
@@ -288,7 +288,7 @@
288
288
  display: none;
289
289
  }
290
290
  .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name {
291
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
291
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
292
292
  white-space: nowrap;
293
293
  overflow: hidden;
294
294
  text-overflow: ellipsis;
@@ -310,8 +310,8 @@
310
310
  border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
311
311
  cursor: var(--wpds-cursor-control, pointer);
312
312
  padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
313
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
314
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
313
+ min-height: var(--wpds-dimension-size-md, 32px);
314
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
315
315
  position: relative;
316
316
  display: flex;
317
317
  align-items: center;
@@ -321,33 +321,33 @@
321
321
  cursor: default;
322
322
  }
323
323
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
324
- padding-inline-end: calc(24px + var(--wpds-dimension-padding-xs, 4px));
324
+ padding-inline-end: calc(var(--wpds-dimension-size-sm, 24px) + var(--wpds-dimension-padding-xs, 4px));
325
325
  }
326
326
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:hover:not(.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable), .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip[aria-expanded=true] {
327
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
327
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
328
328
  border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
329
- background-color: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
329
+ background-color: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
330
330
  }
331
331
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values {
332
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
333
- background: var(--wpds-color-bg-interactive-brand-weak, #0000);
332
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
333
+ background: var(--wpds-color-background-interactive-brand-weak, #0000);
334
334
  border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
335
335
  }
336
336
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values:hover:not(.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values.is-not-clickable), .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values[aria-expanded=true] {
337
- color: var(--wpds-color-fg-interactive-brand-active, var(--wp-admin-theme-color, #3858e9));
338
- background: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
337
+ color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
338
+ background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
339
339
  border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
340
340
  }
341
341
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible {
342
342
  outline: none;
343
- box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
343
+ box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
344
344
  }
345
345
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
346
346
  font-weight: var(--wpds-typography-font-weight-medium, 499);
347
347
  }
348
348
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
349
- width: 24px;
350
- height: 24px;
349
+ width: var(--wpds-dimension-size-sm, 24px);
350
+ height: var(--wpds-dimension-size-sm, 24px);
351
351
  border-radius: var(--wpds-border-radius-md, 4px);
352
352
  border: 0;
353
353
  padding: 0;
@@ -362,23 +362,23 @@
362
362
  cursor: var(--wpds-cursor-control, pointer);
363
363
  }
364
364
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
365
- fill: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
365
+ fill: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
366
366
  }
367
367
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
368
- background: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
368
+ background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
369
369
  }
370
370
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
371
- fill: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
371
+ fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
372
372
  }
373
373
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
374
- fill: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
374
+ fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
375
375
  }
376
376
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
377
- background: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
377
+ background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
378
378
  }
379
379
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus-visible {
380
380
  outline: none;
381
- box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
381
+ box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
382
382
  }
383
383
 
384
384
  .dataviews-filters__search-widget-filter-combobox-list {
@@ -404,7 +404,7 @@
404
404
  box-sizing: border-box;
405
405
  padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
406
406
  cursor: default;
407
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
407
+ min-height: var(--wpds-dimension-size-md, 32px);
408
408
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
409
409
  font-weight: 400;
410
410
  font-size: 13px;
@@ -414,23 +414,23 @@
414
414
  margin-block-end: 0;
415
415
  }
416
416
  .dataviews-filters__search-widget-listitem:hover, .dataviews-filters__search-widget-listitem[data-active-item], .dataviews-filters__search-widget-listitem:focus {
417
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
417
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
418
418
  }
419
419
  .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection {
420
420
  border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
421
- background: var(--wpds-color-bg-surface-neutral-strong, #fff);
421
+ background: var(--wpds-color-background-surface-neutral-strong, #fff);
422
422
  }
423
423
  .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection.is-selected {
424
424
  border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
425
- background: var(--wpds-color-bg-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
425
+ background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
426
426
  }
427
427
  .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection {
428
428
  border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
429
- background: var(--wpds-color-bg-surface-neutral-strong, #fff);
429
+ background: var(--wpds-color-background-surface-neutral-strong, #fff);
430
430
  }
431
431
  .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
432
432
  border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
433
- background: var(--wpds-color-bg-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
433
+ background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
434
434
  }
435
435
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-value {
436
436
  overflow: hidden;
@@ -444,7 +444,7 @@
444
444
  text-overflow: ellipsis;
445
445
  font-size: var(--wpds-typography-font-size-sm, 12px);
446
446
  line-height: 16px;
447
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
447
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
448
448
  }
449
449
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
450
450
  border: 1px solid #1e1e1e;
@@ -501,7 +501,7 @@
501
501
  padding: 0;
502
502
  }
503
503
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected {
504
- background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
504
+ background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
505
505
  border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
506
506
  }
507
507
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
@@ -515,8 +515,8 @@
515
515
  left: 50%;
516
516
  transform: translate(-50%, -50%);
517
517
  margin: 0;
518
- background-color: var(--wpds-color-fg-interactive-brand-strong, #fff);
519
- border: 4px solid var(--wpds-color-fg-interactive-brand-strong, #fff);
518
+ background-color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
519
+ border: 4px solid var(--wpds-color-foreground-interactive-brand-strong, #fff);
520
520
  }
521
521
  @media (min-width: 600px) {
522
522
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
@@ -611,8 +611,8 @@
611
611
  }
612
612
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
613
613
  position: relative;
614
- background: var(--wpds-color-bg-interactive-neutral-weak, #0000);
615
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
614
+ background: var(--wpds-color-background-interactive-neutral-weak, #0000);
615
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
616
616
  margin: 0;
617
617
  padding: 0;
618
618
  width: var(--checkbox-size);
@@ -629,12 +629,12 @@
629
629
  }
630
630
  }
631
631
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
632
- background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
632
+ background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
633
633
  border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
634
634
  }
635
635
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
636
636
  --checkmark-size: var(--checkbox-size);
637
- fill: var(--wpds-color-fg-interactive-neutral-strong, #f0f0f0);
637
+ fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
638
638
  position: absolute;
639
639
  left: 50%;
640
640
  top: 50%;
@@ -688,9 +688,9 @@
688
688
  }
689
689
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
690
690
  display: block;
691
- padding: 0 var(--wpds-dimension-padding-sm, 8px) 0 calc(var(--wpds-dimension-base, 4px) * 8);
691
+ padding: 0 var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-size-md, 32px);
692
692
  width: 100%;
693
- height: calc(var(--wpds-dimension-base, 4px) * 8);
693
+ height: var(--wpds-dimension-size-md, 32px);
694
694
  margin-left: 0;
695
695
  margin-right: 0;
696
696
  /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -702,14 +702,14 @@
702
702
  }
703
703
  }
704
704
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
705
- background: var(--wpds-color-bg-surface-neutral-strong, #fff);
706
- box-shadow: inset 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
705
+ background: var(--wpds-color-background-surface-neutral-strong, #fff);
706
+ box-shadow: inset 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
707
707
  }
708
708
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
709
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
709
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
710
710
  }
711
711
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
712
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
712
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
713
713
  }
714
714
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-decoration, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-cancel-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-decoration {
715
715
  -webkit-appearance: none;
@@ -722,7 +722,7 @@
722
722
  display: flex;
723
723
  align-items: center;
724
724
  justify-content: center;
725
- width: 24px;
725
+ width: var(--wpds-dimension-size-sm, 24px);
726
726
  }
727
727
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon:dir(ltr) {
728
728
  transform: scaleX(-1);
@@ -738,16 +738,16 @@
738
738
  top: 0;
739
739
  right: 0;
740
740
  transform: translate(50%, -50%);
741
- background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
742
- height: calc(var(--wpds-dimension-base, 4px) * 4);
743
- min-width: calc(var(--wpds-dimension-base, 4px) * 4);
741
+ background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
742
+ height: var(--wpds-dimension-size-2xs, 16px);
743
+ min-width: var(--wpds-dimension-size-2xs, 16px);
744
744
  line-height: var(--wpds-typography-line-height-xs, 16px);
745
745
  padding: 0 var(--wpds-dimension-padding-xs, 4px);
746
746
  text-align: center;
747
747
  border-radius: var(--wpds-border-radius-lg, 8px);
748
748
  font-size: 11px;
749
- outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-bg-surface-neutral-strong, #fff);
750
- color: var(--wpds-color-fg-interactive-neutral-strong, #f0f0f0);
749
+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-background-surface-neutral-strong, #fff);
750
+ color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
751
751
  box-sizing: border-box;
752
752
  }
753
753
 
@@ -924,7 +924,7 @@
924
924
  right: var(--wpds-dimension-gap-xs, 4px);
925
925
  width: var(--wpds-dimension-gap-xs, 4px);
926
926
  height: var(--wpds-dimension-gap-xs, 4px);
927
- background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
927
+ background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
928
928
  border-radius: 50%;
929
929
  pointer-events: none;
930
930
  }
@@ -990,7 +990,7 @@
990
990
  left: 0;
991
991
  width: 100%;
992
992
  height: 100%;
993
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
993
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
994
994
  border-radius: var(--wpds-border-radius-md, 4px);
995
995
  pointer-events: none;
996
996
  outline: 2px solid transparent;
@@ -1009,7 +1009,7 @@
1009
1009
  }
1010
1010
  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field,
1011
1011
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field {
1012
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1012
+ min-height: var(--wpds-dimension-size-sm, 24px);
1013
1013
  overflow: hidden;
1014
1014
  align-content: center;
1015
1015
  text-align: start;
@@ -1021,21 +1021,21 @@
1021
1021
  }
1022
1022
  .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
1023
1023
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
1024
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1024
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1025
1025
  }
1026
1026
  .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
1027
1027
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
1028
- box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-bg-surface-neutral-strong, #fff);
1028
+ box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
1029
1029
  }
1030
1030
  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
1031
1031
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
1032
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1032
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1033
1033
  }
1034
1034
  .dataviews-view-grid .dataviews-view-grid__media,
1035
1035
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
1036
1036
  width: 100%;
1037
1037
  aspect-ratio: 1/1;
1038
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1038
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1039
1039
  border-radius: var(--wpds-border-radius-md, 4px);
1040
1040
  overflow: hidden;
1041
1041
  position: relative;
@@ -1070,7 +1070,7 @@
1070
1070
  display: block;
1071
1071
  border-radius: var(--wpds-border-radius-md, 4px);
1072
1072
  box-shadow: none;
1073
- background: var(--wpds-color-bg-surface-neutral, #fcfcfc);
1073
+ background: var(--wpds-color-background-surface-neutral, #fcfcfc);
1074
1074
  }
1075
1075
  .dataviews-view-grid .dataviews-view-grid__fields,
1076
1076
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
@@ -1084,19 +1084,19 @@
1084
1084
  }
1085
1085
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty),
1086
1086
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
1087
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1087
+ min-height: var(--wpds-dimension-size-sm, 24px);
1088
1088
  line-height: var(--wpds-typography-line-height-sm, 20px);
1089
1089
  padding-top: calc(var(--wpds-dimension-base, 4px) / 2);
1090
1090
  }
1091
1091
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field,
1092
1092
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field {
1093
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1093
+ min-height: var(--wpds-dimension-size-sm, 24px);
1094
1094
  align-items: center;
1095
1095
  }
1096
1096
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name,
1097
1097
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
1098
1098
  width: 35%;
1099
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
1099
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1100
1100
  overflow: hidden;
1101
1101
  text-overflow: ellipsis;
1102
1102
  white-space: nowrap;
@@ -1168,7 +1168,7 @@
1168
1168
  right: var(--wpds-dimension-padding-xs, 4px);
1169
1169
  }
1170
1170
  .dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
1171
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1171
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1172
1172
  }
1173
1173
  @media not (prefers-reduced-motion) {
1174
1174
  .dataviews-view-grid__card .dataviews-view-grid__media-actions {
@@ -1195,7 +1195,7 @@
1195
1195
  .dataviews-view-grid__group-header {
1196
1196
  font-size: var(--wpds-typography-font-size-lg, 15px);
1197
1197
  font-weight: var(--wpds-typography-font-weight-medium, 499);
1198
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1198
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1199
1199
  margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1200
1200
  padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1201
1201
  container-type: inline-size;
@@ -1235,7 +1235,7 @@ div.dataviews-view-list {
1235
1235
  }
1236
1236
  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > div,
1237
1237
  .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > div {
1238
- height: 24px;
1238
+ height: var(--wpds-dimension-size-sm, 24px);
1239
1239
  }
1240
1240
  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
1241
1241
  .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
@@ -1270,8 +1270,8 @@ div.dataviews-view-list {
1270
1270
  .dataviews-view-list div[role=article]:not(.is-selected):hover,
1271
1271
  .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
1272
1272
  .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
1273
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1274
- background-color: var(--wpds-color-bg-interactive-brand-weak, #0000);
1273
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1274
+ background-color: var(--wpds-color-background-interactive-brand-weak, #0000);
1275
1275
  }
1276
1276
  .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
1277
1277
  .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-title-field,
@@ -1283,14 +1283,14 @@ div.dataviews-view-list {
1283
1283
  .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
1284
1284
  .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
1285
1285
  .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
1286
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1286
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1287
1287
  }
1288
1288
  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
1289
1289
  .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
1290
1290
  .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
1291
1291
  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
1292
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1293
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
1292
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1293
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1294
1294
  }
1295
1295
  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1296
1296
  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
@@ -1300,7 +1300,7 @@ div.dataviews-view-list {
1300
1300
  .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1301
1301
  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
1302
1302
  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
1303
- color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
1303
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1304
1304
  }
1305
1305
  .dataviews-view-list .dataviews-view-list__item {
1306
1306
  position: absolute;
@@ -1322,13 +1322,13 @@ div.dataviews-view-list {
1322
1322
  position: absolute;
1323
1323
  content: "";
1324
1324
  inset: var(--wp-admin-border-width-focus);
1325
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1325
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1326
1326
  border-radius: var(--wpds-border-radius-sm, 2px);
1327
1327
  outline: 2px solid transparent;
1328
1328
  }
1329
1329
  .dataviews-view-list .dataviews-view-list__title-field {
1330
1330
  flex: 1;
1331
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1331
+ min-height: var(--wpds-dimension-size-sm, 24px);
1332
1332
  line-height: var(--wpds-typography-line-height-md, 24px);
1333
1333
  overflow: hidden;
1334
1334
  }
@@ -1341,7 +1341,7 @@ div.dataviews-view-list {
1341
1341
  overflow: hidden;
1342
1342
  position: relative;
1343
1343
  flex-shrink: 0;
1344
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1344
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1345
1345
  border-radius: var(--wpds-border-radius-md, 4px);
1346
1346
  }
1347
1347
  .dataviews-view-list .dataviews-view-list__media-wrapper img {
@@ -1366,7 +1366,7 @@ div.dataviews-view-list {
1366
1366
  min-width: 0;
1367
1367
  }
1368
1368
  .dataviews-view-list .dataviews-view-list__field {
1369
- color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
1369
+ color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
1370
1370
  }
1371
1371
  .dataviews-view-list .dataviews-view-list__fields {
1372
1372
  display: flex;
@@ -1382,7 +1382,7 @@ div.dataviews-view-list {
1382
1382
  display: none;
1383
1383
  }
1384
1384
  .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
1385
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1385
+ min-height: var(--wpds-dimension-size-sm, 24px);
1386
1386
  line-height: var(--wpds-typography-line-height-sm, 20px);
1387
1387
  display: flex;
1388
1388
  align-items: center;
@@ -1394,29 +1394,29 @@ div.dataviews-view-list {
1394
1394
  padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-2xl, 24px);
1395
1395
  }
1396
1396
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__title-field {
1397
- min-height: calc(var(--wpds-dimension-base, 4px) * 4);
1397
+ min-height: var(--wpds-dimension-size-2xs, 16px);
1398
1398
  line-height: var(--wpds-typography-line-height-xs, 16px);
1399
1399
  }
1400
1400
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__media-wrapper {
1401
- width: calc(var(--wpds-dimension-base, 4px) * 8);
1402
- height: calc(var(--wpds-dimension-base, 4px) * 8);
1401
+ width: var(--wpds-dimension-size-md, 32px);
1402
+ height: var(--wpds-dimension-size-md, 32px);
1403
1403
  }
1404
1404
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__field-wrapper {
1405
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1405
+ min-height: var(--wpds-dimension-size-md, 32px);
1406
1406
  }
1407
1407
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields {
1408
1408
  gap: var(--wpds-dimension-gap-sm, 8px);
1409
1409
  row-gap: var(--wpds-dimension-gap-xs, 4px);
1410
1410
  }
1411
1411
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
1412
- min-height: calc(var(--wpds-dimension-base, 4px) * 4);
1412
+ min-height: var(--wpds-dimension-size-2xs, 16px);
1413
1413
  line-height: var(--wpds-typography-line-height-xs, 16px);
1414
1414
  }
1415
1415
  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__item-wrapper {
1416
1416
  padding: var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
1417
1417
  }
1418
1418
  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__title-field {
1419
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1419
+ min-height: var(--wpds-dimension-size-md, 32px);
1420
1420
  line-height: var(--wpds-typography-line-height-xl, 32px);
1421
1421
  }
1422
1422
  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__media-wrapper {
@@ -1431,7 +1431,7 @@ div.dataviews-view-list {
1431
1431
  row-gap: var(--wpds-dimension-gap-sm, 8px);
1432
1432
  }
1433
1433
  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
1434
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1434
+ min-height: var(--wpds-dimension-size-md, 32px);
1435
1435
  line-height: var(--wpds-typography-line-height-md, 24px);
1436
1436
  }
1437
1437
  .dataviews-view-list.is-refreshing {
@@ -1448,7 +1448,7 @@ div.dataviews-view-list {
1448
1448
  .dataviews-view-list__group-header {
1449
1449
  font-size: var(--wpds-typography-font-size-lg, 15px);
1450
1450
  font-weight: var(--wpds-typography-font-weight-medium, 499);
1451
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1451
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1452
1452
  margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1453
1453
  padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1454
1454
  }
@@ -1459,13 +1459,13 @@ div.dataviews-view-list {
1459
1459
  border-color: inherit;
1460
1460
  border-collapse: collapse;
1461
1461
  position: relative;
1462
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
1462
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1463
1463
  margin-bottom: auto;
1464
1464
  background-color: inherit;
1465
1465
  }
1466
1466
  .dataviews-view-table th {
1467
1467
  text-align: left;
1468
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1468
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1469
1469
  font-weight: normal;
1470
1470
  font-size: var(--wpds-typography-font-size-md, 13px);
1471
1471
  }
@@ -1481,7 +1481,7 @@ div.dataviews-view-list {
1481
1481
  .dataviews-view-table th.dataviews-view-table__actions-column--sticky {
1482
1482
  position: sticky;
1483
1483
  right: 0;
1484
- background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong, #fff));
1484
+ background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
1485
1485
  }
1486
1486
  .dataviews-view-table td.dataviews-view-table__actions-column--stuck::after,
1487
1487
  .dataviews-view-table th.dataviews-view-table__actions-column--stuck::after {
@@ -1492,7 +1492,7 @@ div.dataviews-view-list {
1492
1492
  bottom: 0;
1493
1493
  left: 0;
1494
1494
  width: 1px;
1495
- background-color: var(--wpds-color-bg-surface-neutral, #fcfcfc);
1495
+ background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
1496
1496
  }
1497
1497
  .dataviews-view-table td.dataviews-view-table__checkbox-column,
1498
1498
  .dataviews-view-table th.dataviews-view-table__checkbox-column {
@@ -1527,23 +1527,23 @@ div.dataviews-view-list {
1527
1527
  }
1528
1528
  }
1529
1529
  .dataviews-view-table tr.is-selected {
1530
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1531
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1530
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1531
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1532
1532
  }
1533
1533
  .dataviews-view-table tr.is-selected, .dataviews-view-table tr.is-selected + tr {
1534
1534
  border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
1535
1535
  }
1536
1536
  .dataviews-view-table tr.is-selected .dataviews-view-table__actions-column--sticky {
1537
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1537
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1538
1538
  }
1539
1539
  .dataviews-view-table tr:focus-within .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr.is-hovered .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
1540
1540
  opacity: 1;
1541
1541
  }
1542
1542
  .dataviews-view-table.has-bulk-actions tr:focus-within .dataviews-view-table__actions-column--sticky, .dataviews-view-table.has-bulk-actions tr:hover .dataviews-view-table__actions-column--sticky {
1543
- background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong, #fff));
1543
+ background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
1544
1544
  }
1545
1545
  .dataviews-view-table.has-bulk-actions tr.is-selected .dataviews-view-table__actions-column--sticky, .dataviews-view-table.has-bulk-actions tr.is-selected:hover .dataviews-view-table__actions-column--sticky {
1546
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1546
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1547
1547
  }
1548
1548
  .dataviews-view-table thead {
1549
1549
  position: sticky;
@@ -1589,7 +1589,7 @@ div.dataviews-view-list {
1589
1589
  vertical-align: top;
1590
1590
  }
1591
1591
  .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
1592
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1592
+ min-height: var(--wpds-dimension-size-md, 32px);
1593
1593
  display: flex;
1594
1594
  align-items: center;
1595
1595
  white-space: nowrap;
@@ -1611,7 +1611,7 @@ div.dataviews-view-list {
1611
1611
  font-weight: var(--wpds-typography-font-weight-medium, 499);
1612
1612
  }
1613
1613
  .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
1614
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
1614
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1615
1615
  }
1616
1616
  .dataviews-view-table .dataviews-view-table-header-button span {
1617
1617
  speak: none;
@@ -1657,17 +1657,17 @@ div.dataviews-view-list {
1657
1657
 
1658
1658
  .dataviews-column-primary__media {
1659
1659
  max-width: 60px;
1660
- min-width: calc(var(--wpds-dimension-base, 4px) * 8);
1661
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1660
+ min-width: var(--wpds-dimension-size-md, 32px);
1661
+ min-height: var(--wpds-dimension-size-md, 32px);
1662
1662
  overflow: hidden;
1663
1663
  position: relative;
1664
1664
  flex-shrink: 0;
1665
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1665
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1666
1666
  border-radius: var(--wpds-border-radius-md, 4px);
1667
1667
  }
1668
1668
  .dataviews-column-primary__media img {
1669
- width: calc(var(--wpds-dimension-base, 4px) * 8);
1670
- height: calc(var(--wpds-dimension-base, 4px) * 8);
1669
+ width: var(--wpds-dimension-size-md, 32px);
1670
+ height: var(--wpds-dimension-size-md, 32px);
1671
1671
  -o-object-fit: cover;
1672
1672
  object-fit: cover;
1673
1673
  }
@@ -1691,7 +1691,7 @@ div.dataviews-view-list {
1691
1691
  .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
1692
1692
  font-weight: var(--wpds-typography-font-weight-medium, 499);
1693
1693
  padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
1694
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1694
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1695
1695
  }
1696
1696
 
1697
1697
  /* Column width intents via colgroup: make non-primary columns shrink-to-fit */
@@ -1726,7 +1726,7 @@ div.dataviews-view-list {
1726
1726
  padding: var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-padding-xs, 4px);
1727
1727
  }
1728
1728
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
1729
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1729
+ min-height: var(--wpds-dimension-size-sm, 24px);
1730
1730
  overflow: hidden;
1731
1731
  align-content: center;
1732
1732
  text-align: start;
@@ -1736,19 +1736,19 @@ div.dataviews-view-list {
1736
1736
  width: fit-content;
1737
1737
  }
1738
1738
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
1739
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1739
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1740
1740
  }
1741
1741
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
1742
- box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-bg-surface-neutral-strong, #fff);
1742
+ box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
1743
1743
  }
1744
1744
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
1745
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1745
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1746
1746
  }
1747
1747
  .dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
1748
1748
  outline: none;
1749
1749
  }
1750
1750
  .dataviews-view-picker-grid:focus-visible [data-active-item=true] {
1751
- outline: 2px solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1751
+ outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1752
1752
  }
1753
1753
  .dataviews-view-picker-grid .dataviews-selection-checkbox {
1754
1754
  top: var(--wpds-dimension-padding-sm, 8px) !important;
@@ -1760,7 +1760,7 @@ div.dataviews-view-list {
1760
1760
  width: 100%;
1761
1761
  aspect-ratio: 1/1;
1762
1762
  min-height: 0;
1763
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1763
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1764
1764
  border-radius: var(--wpds-border-radius-md, 4px);
1765
1765
  position: relative;
1766
1766
  }
@@ -1790,17 +1790,17 @@ div.dataviews-view-list {
1790
1790
  padding: 0 0 var(--wpds-dimension-padding-md, 12px);
1791
1791
  }
1792
1792
  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
1793
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1793
+ min-height: var(--wpds-dimension-size-sm, 24px);
1794
1794
  line-height: var(--wpds-typography-line-height-sm, 20px);
1795
1795
  padding-top: calc(var(--wpds-dimension-base, 4px) / 2);
1796
1796
  }
1797
1797
  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
1798
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1798
+ min-height: var(--wpds-dimension-size-sm, 24px);
1799
1799
  align-items: center;
1800
1800
  }
1801
1801
  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
1802
1802
  width: 35%;
1803
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
1803
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1804
1804
  overflow: hidden;
1805
1805
  text-overflow: ellipsis;
1806
1806
  white-space: nowrap;
@@ -1848,7 +1848,7 @@ div.dataviews-view-list {
1848
1848
  .dataviews-view-picker-grid-group__header {
1849
1849
  font-size: var(--wpds-typography-font-size-lg, 15px);
1850
1850
  font-weight: var(--wpds-typography-font-weight-medium, 499);
1851
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1851
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1852
1852
  margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1853
1853
  padding: 0 calc(var(--wpds-dimension-base, 4px) * 12);
1854
1854
  }
@@ -1863,7 +1863,7 @@ div.dataviews-view-list {
1863
1863
  outline: none;
1864
1864
  }
1865
1865
  .dataviews-view-picker-table tbody:focus-visible [data-active-item=true] {
1866
- outline: 2px solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1866
+ outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1867
1867
  }
1868
1868
  .dataviews-view-picker-table .dataviews-selection-checkbox .components-checkbox-control__input.components-checkbox-control__input {
1869
1869
  pointer-events: none;
@@ -1873,13 +1873,13 @@ div.dataviews-view-list {
1873
1873
  cursor: var(--wpds-cursor-control, pointer);
1874
1874
  }
1875
1875
  .dataviews-view-picker-table .dataviews-view-table__row.is-selected {
1876
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1876
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1877
1877
  }
1878
1878
  .dataviews-view-picker-table .dataviews-view-table__row.is-hovered {
1879
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1879
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1880
1880
  }
1881
1881
  .dataviews-view-picker-table .dataviews-view-table__row.is-selected.is-hovered {
1882
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1882
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1883
1883
  }
1884
1884
 
1885
1885
  .dataviews-view-activity {
@@ -1889,12 +1889,12 @@ div.dataviews-view-list {
1889
1889
  .dataviews-view-activity .dataviews-view-activity__group-header {
1890
1890
  font-size: var(--wpds-typography-font-size-lg, 15px);
1891
1891
  font-weight: var(--wpds-typography-font-weight-medium, 499);
1892
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
1892
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1893
1893
  margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1894
1894
  padding: 0;
1895
1895
  }
1896
1896
  .dataviews-view-activity .dataviews-view-activity__item-actions {
1897
- min-width: calc(var(--wpds-dimension-base, 4px) * 6);
1897
+ min-width: var(--wpds-dimension-size-sm, 24px);
1898
1898
  }
1899
1899
  .dataviews-view-activity .dataviews-view-activity__item-content {
1900
1900
  flex-grow: 1;
@@ -1902,7 +1902,7 @@ div.dataviews-view-list {
1902
1902
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title,
1903
1903
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-description,
1904
1904
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
1905
- min-height: calc(var(--wpds-dimension-base, 4px) * 4);
1905
+ min-height: var(--wpds-dimension-size-2xs, 16px);
1906
1906
  }
1907
1907
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title {
1908
1908
  position: relative;
@@ -1915,7 +1915,7 @@ div.dataviews-view-list {
1915
1915
  cursor: var(--wpds-cursor-control, pointer);
1916
1916
  }
1917
1917
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable:focus-visible {
1918
- outline: var(--wp-admin-border-width-focus) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1918
+ outline: var(--wp-admin-border-width-focus) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1919
1919
  outline-offset: var(--wp-admin-border-width-focus);
1920
1920
  border-radius: var(--wpds-border-radius-sm, 2px);
1921
1921
  }
@@ -1930,7 +1930,7 @@ div.dataviews-view-list {
1930
1930
  z-index: 1;
1931
1931
  }
1932
1932
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
1933
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
1933
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1934
1934
  display: flex;
1935
1935
  gap: var(--wpds-dimension-gap-md, 12px);
1936
1936
  row-gap: var(--wpds-dimension-gap-xs, 4px);
@@ -1968,7 +1968,7 @@ div.dataviews-view-list {
1968
1968
  width: var(--wpds-dimension-padding-md, 12px);
1969
1969
  }
1970
1970
  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type::before {
1971
- height: calc(var(--wpds-dimension-base, 4px) * 3);
1971
+ height: var(--wpds-dimension-size-3xs, 12px);
1972
1972
  }
1973
1973
  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type-icon {
1974
1974
  width: calc(var(--wpds-dimension-base, 4px) * 3 - 1px);
@@ -1978,10 +1978,10 @@ div.dataviews-view-list {
1978
1978
  margin: var(--wpds-dimension-gap-md, 12px) 0;
1979
1979
  }
1980
1980
  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type {
1981
- width: calc(var(--wpds-dimension-base, 4px) * 6);
1981
+ width: var(--wpds-dimension-size-sm, 24px);
1982
1982
  }
1983
1983
  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type::before {
1984
- height: calc(var(--wpds-dimension-base, 4px) * 3);
1984
+ height: var(--wpds-dimension-size-3xs, 12px);
1985
1985
  }
1986
1986
  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type-icon {
1987
1987
  width: calc(var(--wpds-dimension-base, 4px) * 6 + 1px);
@@ -1992,10 +1992,10 @@ div.dataviews-view-list {
1992
1992
  padding-top: var(--wpds-dimension-padding-sm, 8px);
1993
1993
  }
1994
1994
  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type {
1995
- width: calc(var(--wpds-dimension-base, 4px) * 8);
1995
+ width: var(--wpds-dimension-size-md, 32px);
1996
1996
  }
1997
1997
  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type::before {
1998
- height: calc(var(--wpds-dimension-base, 4px) * 2);
1998
+ height: var(--wpds-dimension-size-4xs, 8px);
1999
1999
  }
2000
2000
  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type-icon {
2001
2001
  width: calc(var(--wpds-dimension-base, 4px) * 8 + 1px);
@@ -2021,7 +2021,7 @@ div.dataviews-view-list {
2021
2021
  .dataviews-view-activity .dataviews-view-activity__item-type-icon {
2022
2022
  overflow: hidden;
2023
2023
  flex-shrink: 0;
2024
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
2024
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2025
2025
  }
2026
2026
  .dataviews-view-activity .dataviews-view-activity__item-type-icon img,
2027
2027
  .dataviews-view-activity .dataviews-view-activity__item-type-icon svg,
@@ -2066,7 +2066,7 @@ div.dataviews-view-list {
2066
2066
  outline: none;
2067
2067
  }
2068
2068
  .dataviews-view-picker-activity:focus-visible .dataviews-view-picker-activity__item[data-active-item=true] {
2069
- outline: 2px solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2069
+ outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2070
2070
  outline-offset: -2px;
2071
2071
  }
2072
2072
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item {
@@ -2076,7 +2076,7 @@ div.dataviews-view-list {
2076
2076
  transition: background-color 0.1s ease;
2077
2077
  }
2078
2078
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected, .dataviews-view-picker-activity .dataviews-view-picker-activity__item:hover {
2079
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2079
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2080
2080
  }
2081
2081
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected {
2082
2082
  outline: 3px solid transparent;
@@ -2086,7 +2086,7 @@ div.dataviews-view-list {
2086
2086
  width: var(--wpds-dimension-padding-md, 12px);
2087
2087
  }
2088
2088
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type::before {
2089
- height: calc(var(--wpds-dimension-base, 4px) * 3);
2089
+ height: var(--wpds-dimension-size-3xs, 12px);
2090
2090
  }
2091
2091
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type-icon {
2092
2092
  width: calc(var(--wpds-dimension-base, 4px) * 3 - 1px);
@@ -2096,10 +2096,10 @@ div.dataviews-view-list {
2096
2096
  margin: var(--wpds-dimension-gap-md, 12px) 0;
2097
2097
  }
2098
2098
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type {
2099
- width: calc(var(--wpds-dimension-base, 4px) * 6);
2099
+ width: var(--wpds-dimension-size-sm, 24px);
2100
2100
  }
2101
2101
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type::before {
2102
- height: calc(var(--wpds-dimension-base, 4px) * 3);
2102
+ height: var(--wpds-dimension-size-3xs, 12px);
2103
2103
  }
2104
2104
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type-icon {
2105
2105
  width: calc(var(--wpds-dimension-base, 4px) * 6 + 1px);
@@ -2110,10 +2110,10 @@ div.dataviews-view-list {
2110
2110
  padding-top: var(--wpds-dimension-padding-sm, 8px);
2111
2111
  }
2112
2112
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type {
2113
- width: calc(var(--wpds-dimension-base, 4px) * 8);
2113
+ width: var(--wpds-dimension-size-md, 32px);
2114
2114
  }
2115
2115
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type::before {
2116
- height: calc(var(--wpds-dimension-base, 4px) * 2);
2116
+ height: var(--wpds-dimension-size-4xs, 8px);
2117
2117
  }
2118
2118
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type-icon {
2119
2119
  width: calc(var(--wpds-dimension-base, 4px) * 8 + 1px);
@@ -2136,7 +2136,7 @@ div.dataviews-view-list {
2136
2136
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title,
2137
2137
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-description,
2138
2138
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields {
2139
- min-height: calc(var(--wpds-dimension-base, 4px) * 4);
2139
+ min-height: var(--wpds-dimension-size-2xs, 16px);
2140
2140
  }
2141
2141
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title {
2142
2142
  position: relative;
@@ -2149,7 +2149,7 @@ div.dataviews-view-list {
2149
2149
  display: none;
2150
2150
  }
2151
2151
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields {
2152
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2152
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2153
2153
  display: flex;
2154
2154
  gap: var(--wpds-dimension-gap-md, 12px);
2155
2155
  row-gap: var(--wpds-dimension-gap-xs, 4px);
@@ -2192,7 +2192,7 @@ div.dataviews-view-list {
2192
2192
  .dataviews-view-picker-activity .dataviews-view-picker-activity-group__header {
2193
2193
  font-size: var(--wpds-typography-font-size-lg, 15px);
2194
2194
  font-weight: var(--wpds-typography-font-weight-medium, 499);
2195
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2195
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2196
2196
  margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2197
2197
  padding: 0;
2198
2198
  padding-inline-start: var(--wpds-dimension-padding-2xl, 24px);
@@ -2224,7 +2224,7 @@ div.dataviews-view-list {
2224
2224
 
2225
2225
  .dataviews-picker-footer__bulk-selection {
2226
2226
  align-self: flex-start;
2227
- height: calc(var(--wpds-dimension-base, 4px) * 8);
2227
+ height: var(--wpds-dimension-size-md, 32px);
2228
2228
  }
2229
2229
 
2230
2230
  .dataviews-picker-footer__actions {
@@ -2259,7 +2259,7 @@ div.dataviews-view-list {
2259
2259
  border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2260
2260
  }
2261
2261
  .dataviews-controls__date-preset:active {
2262
- background-color: var(--wpds-color-bg-interactive-neutral-strong-active, #1e1e1e);
2262
+ background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
2263
2263
  }
2264
2264
 
2265
2265
  .dataforms-layouts-panel__field-trigger {
@@ -2267,7 +2267,7 @@ div.dataviews-view-list {
2267
2267
  color: inherit;
2268
2268
  display: flex;
2269
2269
  width: 100%;
2270
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2270
+ min-height: var(--wpds-dimension-size-sm, 24px);
2271
2271
  cursor: var(--wpds-cursor-control, pointer);
2272
2272
  align-items: flex-start;
2273
2273
  border-radius: var(--wpds-border-radius-sm, 2px);
@@ -2275,7 +2275,7 @@ div.dataviews-view-list {
2275
2275
  }
2276
2276
  .dataforms-layouts-panel__field-trigger--label-side {
2277
2277
  flex-direction: row;
2278
- gap: var(--wpds-dimension-gap-md, 12px);
2278
+ gap: var(--wpds-dimension-gap-sm, 8px);
2279
2279
  }
2280
2280
  .dataforms-layouts-panel__field-trigger--label-top {
2281
2281
  display: grid;
@@ -2285,19 +2285,19 @@ div.dataviews-view-list {
2285
2285
  align-items: center;
2286
2286
  }
2287
2287
  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover {
2288
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2288
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2289
2289
  }
2290
2290
  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-trigger-icon {
2291
2291
  opacity: 1;
2292
2292
  }
2293
2293
  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-label {
2294
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2294
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2295
2295
  }
2296
2296
  .dataforms-layouts-panel__field-trigger.is-disabled {
2297
2297
  cursor: default;
2298
2298
  }
2299
2299
  .dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control {
2300
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2300
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2301
2301
  font-weight: var(--wpds-typography-font-weight-regular, 400);
2302
2302
  }
2303
2303
 
@@ -2306,19 +2306,19 @@ div.dataviews-view-list {
2306
2306
  fill: currentColor;
2307
2307
  }
2308
2308
  .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon:hover, .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon:focus-visible {
2309
- fill: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2309
+ fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2310
2310
  }
2311
2311
 
2312
2312
  .dataforms-layouts-panel__field-trigger-icon {
2313
2313
  padding: 0;
2314
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2314
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2315
2315
  flex: 0 0 auto;
2316
2316
  opacity: 0;
2317
2317
  border-radius: var(--wpds-border-radius-xs, 1px);
2318
2318
  }
2319
2319
  .dataforms-layouts-panel__field-trigger-icon:focus-visible {
2320
2320
  opacity: 1;
2321
- outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2321
+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2322
2322
  }
2323
2323
 
2324
2324
  .dataforms-layouts-panel__field-dropdown-anchor {
@@ -2331,12 +2331,12 @@ div.dataviews-view-list {
2331
2331
  .dataforms-layouts-panel__field-label {
2332
2332
  width: 38%;
2333
2333
  flex-shrink: 0;
2334
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2334
+ min-height: var(--wpds-dimension-size-sm, 24px);
2335
2335
  display: flex;
2336
2336
  align-items: center;
2337
2337
  line-height: var(--wpds-typography-line-height-sm, 20px);
2338
2338
  hyphens: auto;
2339
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2339
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2340
2340
  }
2341
2341
  .dataforms-layouts-panel__field-label .components-base-control__label {
2342
2342
  display: inline;
@@ -2344,14 +2344,14 @@ div.dataviews-view-list {
2344
2344
  line-height: inherit;
2345
2345
  }
2346
2346
  .dataforms-layouts-panel__field-label.has-error {
2347
- color: var(--wpds-color-fg-content-error-weak, #cc1818);
2347
+ color: var(--wpds-color-foreground-content-error-weak, #cc1818);
2348
2348
  }
2349
2349
 
2350
2350
  .dataforms-layouts-panel__field-label-error-content {
2351
2351
  position: relative;
2352
2352
  z-index: 1;
2353
2353
  cursor: help;
2354
- fill: var(--wpds-color-fg-content-error-weak, #cc1818);
2354
+ fill: var(--wpds-color-foreground-content-error-weak, #cc1818);
2355
2355
  display: inline-flex;
2356
2356
  flex-direction: row;
2357
2357
  align-items: center;
@@ -2364,31 +2364,19 @@ div.dataviews-view-list {
2364
2364
  .dataforms-layouts-panel__field-control {
2365
2365
  flex-grow: 1;
2366
2366
  min-width: 0;
2367
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2367
+ min-height: var(--wpds-dimension-size-sm, 24px);
2368
2368
  line-height: var(--wpds-typography-line-height-md, 24px);
2369
2369
  display: flex;
2370
2370
  align-items: center;
2371
- overflow: hidden;
2371
+ overflow: clip;
2372
+ padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2373
+ margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2372
2374
  word-break: break-word;
2373
2375
  font-weight: var(--wpds-typography-font-weight-medium, 499);
2374
2376
  }
2375
2377
  .dataforms-layouts-panel__field-control > * {
2376
2378
  min-width: 0;
2377
2379
  }
2378
- .dataforms-layouts-panel__field-control .components-button {
2379
- max-width: 100%;
2380
- text-align: left;
2381
- white-space: normal;
2382
- text-wrap: balance;
2383
- text-wrap: pretty;
2384
- min-height: 32px;
2385
- }
2386
- .dataforms-layouts-panel__field-control.components-button.is-link[aria-disabled=true] {
2387
- text-decoration: none;
2388
- }
2389
- .dataforms-layouts-panel__field-control .components-dropdown {
2390
- max-width: 100%;
2391
- }
2392
2380
 
2393
2381
  .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-label {
2394
2382
  width: 100%;
@@ -2426,20 +2414,20 @@ div.dataviews-view-list {
2426
2414
 
2427
2415
  .dataforms-layouts-regular__field {
2428
2416
  width: 100%;
2429
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2417
+ min-height: var(--wpds-dimension-size-md, 32px);
2430
2418
  justify-content: flex-start !important;
2431
2419
  align-items: flex-start !important;
2432
2420
  }
2433
2421
  .dataforms-layouts-regular__field .components-base-control__label,
2434
2422
  .dataforms-layouts-regular__field .components-input-control__label,
2435
2423
  .dataforms-layouts-regular__field .components-form-token-field__label {
2436
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2424
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2437
2425
  }
2438
2426
 
2439
2427
  .dataforms-layouts-regular__field-label {
2440
2428
  width: 38%;
2441
2429
  flex-shrink: 0;
2442
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2430
+ min-height: var(--wpds-dimension-size-md, 32px);
2443
2431
  display: flex;
2444
2432
  align-items: center;
2445
2433
  line-height: var(--wpds-typography-line-height-sm, 20px);
@@ -2454,7 +2442,7 @@ div.dataviews-view-list {
2454
2442
 
2455
2443
  .dataforms-layouts-regular__field-control {
2456
2444
  flex-grow: 1;
2457
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2445
+ min-height: var(--wpds-dimension-size-md, 32px);
2458
2446
  display: flex;
2459
2447
  align-items: center;
2460
2448
  }
@@ -2472,7 +2460,7 @@ div.dataviews-view-list {
2472
2460
  }
2473
2461
 
2474
2462
  .dataforms-layouts-card__field-description {
2475
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2463
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2476
2464
  display: block;
2477
2465
  font-size: var(--wpds-typography-font-size-md, 13px);
2478
2466
  margin-bottom: var(--wpds-dimension-gap-lg, 16px);
@@ -2487,7 +2475,7 @@ div.dataviews-view-list {
2487
2475
 
2488
2476
  .dataforms-layouts-details__summary-content {
2489
2477
  display: inline-flex;
2490
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2478
+ min-height: var(--wpds-dimension-size-sm, 24px);
2491
2479
  }
2492
2480
 
2493
2481
  .dataforms-layouts-details__content {