@wordpress/edit-site 6.45.1-next.v.202605131032.0 → 6.47.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 (59) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/build/components/add-new-template/index.cjs.map +3 -3
  3. package/build/components/add-new-template-legacy/index.cjs.map +3 -3
  4. package/build/components/editor/index.cjs +16 -5
  5. package/build/components/editor/index.cjs.map +2 -2
  6. package/build/components/editor/use-resolve-edited-entity.cjs +0 -2
  7. package/build/components/editor/use-resolve-edited-entity.cjs.map +2 -2
  8. package/build/components/layout/index.cjs +8 -4
  9. package/build/components/layout/index.cjs.map +2 -2
  10. package/build/components/page-templates/fields.cjs.map +3 -3
  11. package/build/components/resizable-frame/index.cjs +34 -25
  12. package/build/components/resizable-frame/index.cjs.map +2 -2
  13. package/build/components/site-editor-routes/index.cjs +0 -2
  14. package/build/components/site-editor-routes/index.cjs.map +2 -2
  15. package/build/components/site-hub/index.cjs +8 -1
  16. package/build/components/site-hub/index.cjs.map +2 -2
  17. package/build/components/site-icon/index.cjs.map +3 -3
  18. package/build-module/components/add-new-template/index.mjs +2 -2
  19. package/build-module/components/add-new-template/index.mjs.map +2 -2
  20. package/build-module/components/add-new-template-legacy/index.mjs +2 -2
  21. package/build-module/components/add-new-template-legacy/index.mjs.map +2 -2
  22. package/build-module/components/editor/index.mjs +18 -7
  23. package/build-module/components/editor/index.mjs.map +2 -2
  24. package/build-module/components/editor/use-resolve-edited-entity.mjs +0 -2
  25. package/build-module/components/editor/use-resolve-edited-entity.mjs.map +2 -2
  26. package/build-module/components/layout/index.mjs +8 -4
  27. package/build-module/components/layout/index.mjs.map +2 -2
  28. package/build-module/components/page-templates/fields.mjs +2 -2
  29. package/build-module/components/page-templates/fields.mjs.map +2 -2
  30. package/build-module/components/resizable-frame/index.mjs +34 -26
  31. package/build-module/components/resizable-frame/index.mjs.map +2 -2
  32. package/build-module/components/site-editor-routes/index.mjs +0 -2
  33. package/build-module/components/site-editor-routes/index.mjs.map +2 -2
  34. package/build-module/components/site-hub/index.mjs +10 -3
  35. package/build-module/components/site-hub/index.mjs.map +2 -2
  36. package/build-module/components/site-icon/index.mjs +2 -2
  37. package/build-module/components/site-icon/index.mjs.map +2 -2
  38. package/build-style/experimental-admin-bar-in-editor-rtl.css +56 -0
  39. package/build-style/experimental-admin-bar-in-editor.css +56 -0
  40. package/build-style/style-rtl.css +457 -381
  41. package/build-style/style.css +457 -381
  42. package/package.json +49 -49
  43. package/src/components/add-new-template/index.js +2 -2
  44. package/src/components/add-new-template-legacy/index.js +2 -2
  45. package/src/components/editor/index.js +45 -17
  46. package/src/components/editor/use-resolve-edited-entity.js +0 -2
  47. package/src/components/layout/index.js +26 -15
  48. package/src/components/page-templates/fields.js +2 -2
  49. package/src/components/resizable-frame/index.js +38 -28
  50. package/src/components/site-editor-routes/index.js +0 -2
  51. package/src/components/site-hub/index.js +13 -3
  52. package/src/components/site-icon/index.js +2 -2
  53. package/src/experimental-admin-bar-in-editor.scss +71 -0
  54. package/src/style.scss +2 -0
  55. package/build/components/site-editor-routes/attachment-item.cjs +0 -60
  56. package/build/components/site-editor-routes/attachment-item.cjs.map +0 -7
  57. package/build-module/components/site-editor-routes/attachment-item.mjs +0 -25
  58. package/build-module/components/site-editor-routes/attachment-item.mjs.map +0 -7
  59. package/src/components/site-editor-routes/attachment-item.js +0 -27
@@ -108,7 +108,7 @@
108
108
  }
109
109
 
110
110
  /**
111
- * Colors
111
+ * Typography
112
112
  */
113
113
  /**
114
114
  * SCSS Variables.
@@ -117,6 +117,9 @@
117
117
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
118
118
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
119
119
  */
120
+ /**
121
+ * Colors
122
+ */
120
123
  /**
121
124
  * Fonts & basic variables.
122
125
  */
@@ -152,9 +155,6 @@
152
155
  * React Native specific.
153
156
  * These variables do not appear to be used anywhere else.
154
157
  */
155
- /**
156
- * Typography
157
- */
158
158
  /**
159
159
  * Breakpoints & Media Queries
160
160
  */
@@ -199,21 +199,23 @@
199
199
  .dataviews-wrapper,
200
200
  .dataviews-picker-wrapper {
201
201
  height: 100%;
202
+ flex-grow: 1;
203
+ min-height: 0;
202
204
  box-sizing: border-box;
203
- scroll-padding-bottom: 64px;
205
+ scroll-padding-bottom: calc(var(--wpds-dimension-base, 4px) * 16);
204
206
  /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
205
207
  container: dataviews-wrapper/inline-size;
206
208
  display: flex;
207
209
  flex-direction: column;
208
- font-size: 13px;
209
- line-height: 1.4;
210
- background-color: var(--wp-dataviews-color-background, #fff);
210
+ font-size: var(--wpds-typography-font-size-md, 13px);
211
+ line-height: var(--wpds-typography-line-height-sm, 20px);
212
+ background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong, #fff));
211
213
  }
212
214
 
213
215
  .dataviews__view-actions,
214
216
  .dataviews-filters__container {
215
217
  box-sizing: border-box;
216
- padding: 16px 24px;
218
+ padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
217
219
  flex-shrink: 0;
218
220
  position: sticky;
219
221
  right: 0;
@@ -228,7 +230,7 @@
228
230
  }
229
231
  .dataviews-no-results,
230
232
  .dataviews-loading {
231
- padding: 0 24px;
233
+ padding: 0 var(--wpds-dimension-padding-2xl, 24px);
232
234
  flex-grow: 1;
233
235
  display: flex;
234
236
  align-items: center;
@@ -267,13 +269,13 @@
267
269
  @container (max-width: 430px) {
268
270
  .dataviews__view-actions,
269
271
  .dataviews-filters__container {
270
- padding: 12px 24px;
272
+ padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
271
273
  }
272
274
  }
273
275
  .dataviews-title-field {
274
- font-size: 13px;
275
- font-weight: 499;
276
- color: #2f2f2f;
276
+ font-size: var(--wpds-typography-font-size-md, 13px);
277
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
278
+ color: var(--wpds-color-fg-content-neutral, #1e1e1e);
277
279
  text-overflow: ellipsis;
278
280
  white-space: nowrap;
279
281
  width: 100%;
@@ -286,11 +288,11 @@
286
288
  overflow: hidden;
287
289
  display: block;
288
290
  flex-grow: 0;
289
- color: #2f2f2f;
291
+ color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
290
292
  }
291
293
 
292
294
  .dataviews-title-field a:hover {
293
- color: var(--wp-admin-theme-color);
295
+ color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
294
296
  }
295
297
 
296
298
  .dataviews-title-field a:focus {
@@ -307,20 +309,20 @@
307
309
  overflow: hidden;
308
310
  display: block;
309
311
  width: 100%;
310
- color: #1e1e1e;
312
+ color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
311
313
  }
312
314
 
313
315
  .dataviews-title-field button.components-button.is-link:hover {
314
- color: var(--wp-admin-theme-color);
316
+ color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
315
317
  }
316
318
 
317
319
  .dataviews-title-field--clickable {
318
320
  cursor: var(--wpds-cursor-control, pointer);
319
- color: #2f2f2f;
321
+ color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
320
322
  }
321
323
 
322
324
  .dataviews-title-field--clickable:hover {
323
- color: var(--wp-admin-theme-color);
325
+ color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
324
326
  }
325
327
 
326
328
  .dataviews-title-field--clickable:focus {
@@ -336,13 +338,22 @@
336
338
  background-color: #fff;
337
339
  }
338
340
 
341
+ /**
342
+ * When DataViews are placed within cards, apply a consistent top padding.
343
+ */
344
+ .components-card__body:has(> .dataviews-wrapper),
345
+ .components-card__body:has(> .dataviews-picker-wrapper) {
346
+ padding: var(--wpds-dimension-padding-sm, 8px) 0 0;
347
+ overflow: hidden;
348
+ }
349
+
339
350
  .dataviews-bulk-actions-footer__item-count {
340
- color: #1e1e1e;
351
+ color: var(--wpds-color-fg-content-neutral, #1e1e1e);
341
352
  }
342
353
 
343
354
  .dataviews-bulk-actions-footer__container {
344
355
  margin-left: auto;
345
- min-height: 32px;
356
+ min-height: calc(var(--wpds-dimension-base, 4px) * 8);
346
357
  }
347
358
 
348
359
  .dataviews-layout__container {
@@ -371,15 +382,15 @@
371
382
  }
372
383
 
373
384
  .dataviews-filters__summary-popover {
374
- font-size: 13px;
375
- line-height: 1.4;
385
+ font-size: var(--wpds-typography-font-size-md, 13px);
386
+ line-height: var(--wpds-typography-line-height-sm, 20px);
376
387
  }
377
388
 
378
389
  .dataviews-filters__summary-popover .components-popover__content {
379
390
  width: 100%;
380
391
  min-width: 230px;
381
392
  max-width: 250px;
382
- border-radius: 4px;
393
+ border-radius: var(--wpds-border-radius-md, 4px);
383
394
  }
384
395
 
385
396
  .dataviews-filters__summary-popover.components-dropdown__content .components-popover__content {
@@ -387,11 +398,11 @@
387
398
  }
388
399
 
389
400
  .dataviews-filters__summary-operators-container {
390
- padding: 8px 16px;
401
+ padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-lg, 16px);
391
402
  }
392
403
 
393
404
  .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-listbox), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-no-elements), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__user-input-widget) {
394
- border-bottom: 1px solid #e0e0e0;
405
+ border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
395
406
  }
396
407
 
397
408
  .dataviews-filters__summary-operators-container:empty {
@@ -399,7 +410,7 @@
399
410
  }
400
411
 
401
412
  .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name {
402
- color: #757575;
413
+ color: var(--wpds-color-fg-content-neutral-weak, #707070);
403
414
  white-space: nowrap;
404
415
  overflow: hidden;
405
416
  text-overflow: ellipsis;
@@ -419,13 +430,12 @@
419
430
  }
420
431
 
421
432
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip {
422
- border-radius: 16px;
423
- border: 1px solid transparent;
433
+ border-radius: var(--wpds-border-radius-lg, 8px);
434
+ border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
424
435
  cursor: var(--wpds-cursor-control, pointer);
425
- padding: 4px 12px;
426
- min-height: 32px;
427
- background: #f0f0f0;
428
- color: #2f2f2f;
436
+ padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
437
+ min-height: calc(var(--wpds-dimension-base, 4px) * 8);
438
+ color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
429
439
  position: relative;
430
440
  display: flex;
431
441
  align-items: center;
@@ -437,40 +447,44 @@
437
447
  }
438
448
 
439
449
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
440
- padding-inline-end: 28px;
450
+ padding-inline-end: calc(24px + var(--wpds-dimension-padding-xs, 4px));
441
451
  }
442
452
 
443
453
  .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] {
444
- background: #e0e0e0;
445
- color: #1e1e1e;
454
+ color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
455
+ border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
456
+ background-color: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
446
457
  }
447
458
 
448
459
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values {
449
- color: var(--wp-admin-theme-color);
450
- background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
460
+ color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
461
+ background: var(--wpds-color-bg-interactive-brand-weak, rgba(0, 0, 0, 0));
462
+ border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
451
463
  }
452
464
 
453
- .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values[aria-expanded=true] {
454
- background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
465
+ .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] {
466
+ color: var(--wpds-color-fg-interactive-brand-active, var(--wp-admin-theme-color, #3858e9));
467
+ background: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
468
+ border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
455
469
  }
456
470
 
457
471
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible {
458
472
  outline: none;
459
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
473
+ 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));
460
474
  }
461
475
 
462
476
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
463
- font-weight: 499;
477
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
464
478
  }
465
479
 
466
480
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
467
481
  width: 24px;
468
482
  height: 24px;
469
- border-radius: 50%;
483
+ border-radius: var(--wpds-border-radius-md, 4px);
470
484
  border: 0;
471
485
  padding: 0;
472
486
  position: absolute;
473
- left: 4px;
487
+ left: var(--wpds-dimension-padding-xs, 4px);
474
488
  top: 50%;
475
489
  transform: translateY(-50%);
476
490
  display: flex;
@@ -481,35 +495,35 @@
481
495
  }
482
496
 
483
497
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
484
- fill: #757575;
498
+ fill: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
485
499
  }
486
500
 
487
501
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
488
- background: #e0e0e0;
502
+ background: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
489
503
  }
490
504
 
491
505
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
492
- fill: #1e1e1e;
506
+ fill: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
493
507
  }
494
508
 
495
509
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
496
- fill: var(--wp-admin-theme-color);
510
+ fill: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
497
511
  }
498
512
 
499
513
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
500
- background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
514
+ background: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
501
515
  }
502
516
 
503
517
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus-visible {
504
518
  outline: none;
505
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
519
+ 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));
506
520
  }
507
521
 
508
522
  .dataviews-filters__search-widget-filter-combobox-list {
509
- max-height: 184px;
510
- padding: 4px;
523
+ max-height: calc(var(--wpds-dimension-base, 4px) * 46);
524
+ padding: var(--wpds-dimension-padding-xs, 4px);
511
525
  overflow: auto;
512
- border-top: 1px solid #e0e0e0;
526
+ border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
513
527
  }
514
528
 
515
529
  .dataviews-filters__search-widget-filter-combobox-list .dataviews-filters__search-widget-filter-combobox-item-value [data-user-value] {
@@ -517,19 +531,19 @@
517
531
  }
518
532
 
519
533
  .dataviews-filters__search-widget-listbox {
520
- padding: 4px;
534
+ padding: var(--wpds-dimension-padding-xs, 4px);
521
535
  overflow: auto;
522
536
  }
523
537
 
524
538
  .dataviews-filters__search-widget-listitem {
525
539
  display: flex;
526
540
  align-items: center;
527
- gap: 8px;
528
- border-radius: 2px;
541
+ gap: var(--wpds-dimension-gap-md, 12px);
542
+ border-radius: var(--wpds-border-radius-sm, 2px);
529
543
  box-sizing: border-box;
530
- padding: 4px 12px;
544
+ padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
531
545
  cursor: default;
532
- min-height: 32px;
546
+ min-height: calc(var(--wpds-dimension-base, 4px) * 8);
533
547
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
534
548
  font-weight: 400;
535
549
  font-size: 13px;
@@ -541,31 +555,27 @@
541
555
  }
542
556
 
543
557
  .dataviews-filters__search-widget-listitem:hover, .dataviews-filters__search-widget-listitem[data-active-item], .dataviews-filters__search-widget-listitem:focus {
544
- background-color: var(--wp-admin-theme-color);
545
- color: #fff;
546
- }
547
-
548
- .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-description {
549
- color: #fff;
558
+ background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
550
559
  }
551
560
 
552
561
  .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 {
553
- border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
554
- background: #fff;
562
+ border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
563
+ background: var(--wpds-color-bg-surface-neutral-strong, #fff);
555
564
  }
556
565
 
557
566
  .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 {
558
- border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
559
- background: var(--wp-admin-theme-color-darker-20, #183ad6);
567
+ border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
568
+ background: var(--wpds-color-bg-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
560
569
  }
561
570
 
562
571
  .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 {
563
- border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
572
+ border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
573
+ background: var(--wpds-color-bg-surface-neutral-strong, #fff);
564
574
  }
565
575
 
566
576
  .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 {
567
- border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
568
- background: var(--wp-admin-theme-color-darker-20, #183ad6);
577
+ border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
578
+ background: var(--wpds-color-bg-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
569
579
  }
570
580
 
571
581
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-value {
@@ -579,9 +589,9 @@
579
589
  display: block;
580
590
  overflow: hidden;
581
591
  text-overflow: ellipsis;
582
- font-size: 12px;
592
+ font-size: var(--wpds-typography-font-size-sm, 12px);
583
593
  line-height: 16px;
584
- color: #757575;
594
+ color: var(--wpds-color-fg-content-neutral-weak, #707070);
585
595
  }
586
596
 
587
597
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
@@ -644,8 +654,8 @@
644
654
  }
645
655
 
646
656
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected {
647
- background: var(--wp-admin-theme-color, #3858e9);
648
- border-color: var(--wp-admin-theme-color, #3858e9);
657
+ background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
658
+ border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
649
659
  }
650
660
 
651
661
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
@@ -659,8 +669,8 @@
659
669
  right: 50%;
660
670
  transform: translate(50%, -50%);
661
671
  margin: 0;
662
- background-color: #fff;
663
- border: 4px solid #fff;
672
+ background-color: var(--wpds-color-fg-interactive-brand-strong, #fff);
673
+ border: 4px solid var(--wpds-color-fg-interactive-brand-strong, #fff);
664
674
  }
665
675
 
666
676
  @media (min-width: 600px) {
@@ -762,8 +772,8 @@
762
772
 
763
773
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
764
774
  position: relative;
765
- background: #fff;
766
- color: #1e1e1e;
775
+ background: var(--wpds-color-bg-interactive-neutral-weak, rgba(0, 0, 0, 0));
776
+ color: var(--wpds-color-fg-content-neutral, #1e1e1e);
767
777
  margin: 0;
768
778
  padding: 0;
769
779
  width: var(--checkbox-size);
@@ -781,13 +791,13 @@
781
791
  }
782
792
  }
783
793
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
784
- background: var(--wp-admin-theme-color, #3858e9);
785
- border-color: var(--wp-admin-theme-color, #3858e9);
794
+ background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
795
+ border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
786
796
  }
787
797
 
788
798
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
789
799
  --checkmark-size: var(--checkbox-size);
790
- fill: #fff;
800
+ fill: var(--wpds-color-fg-interactive-neutral-strong, #f0f0f0);
791
801
  position: absolute;
792
802
  right: 50%;
793
803
  top: 50%;
@@ -803,7 +813,7 @@
803
813
  }
804
814
  .dataviews-filters__search-widget-filter-combobox__wrapper {
805
815
  position: relative;
806
- padding: 8px;
816
+ padding: var(--wpds-dimension-padding-sm, 8px);
807
817
  }
808
818
 
809
819
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
@@ -842,9 +852,9 @@
842
852
 
843
853
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
844
854
  display: block;
845
- padding: 0 32px 0 8px;
855
+ padding: 0 calc(var(--wpds-dimension-base, 4px) * 8) 0 var(--wpds-dimension-padding-sm, 8px);
846
856
  width: 100%;
847
- height: 32px;
857
+ height: calc(var(--wpds-dimension-base, 4px) * 8);
848
858
  margin-right: 0;
849
859
  margin-left: 0;
850
860
  /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -853,16 +863,16 @@
853
863
 
854
864
  @media (min-width: 600px) {
855
865
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
856
- font-size: 13px;
866
+ font-size: var(--wpds-typography-font-size-md, 13px);
857
867
  }
858
868
  }
859
869
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
860
- background: #fff;
861
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
870
+ background: var(--wpds-color-bg-surface-neutral-strong, #fff);
871
+ 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));
862
872
  }
863
873
 
864
874
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
865
- color: #757575;
875
+ color: var(--wpds-color-fg-content-neutral-weak, #707070);
866
876
  }
867
877
 
868
878
  .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 {
@@ -871,7 +881,7 @@
871
881
 
872
882
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon {
873
883
  position: absolute;
874
- inset-inline-start: 12px;
884
+ inset-inline-start: var(--wpds-dimension-gap-md, 12px);
875
885
  top: 0;
876
886
  bottom: 0;
877
887
  display: flex;
@@ -894,16 +904,16 @@
894
904
  top: 0;
895
905
  left: 0;
896
906
  transform: translate(-50%, -50%);
897
- background: var(--wp-admin-theme-color, #3858e9);
898
- height: 16px;
899
- min-width: 16px;
900
- line-height: 16px;
901
- padding: 0 4px;
907
+ background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
908
+ height: calc(var(--wpds-dimension-base, 4px) * 4);
909
+ min-width: calc(var(--wpds-dimension-base, 4px) * 4);
910
+ line-height: var(--wpds-typography-line-height-xs, 16px);
911
+ padding: 0 var(--wpds-dimension-padding-xs, 4px);
902
912
  text-align: center;
903
- border-radius: 8px;
913
+ border-radius: var(--wpds-border-radius-lg, 8px);
904
914
  font-size: 11px;
905
- outline: var(--wp-admin-border-width-focus) solid #fff;
906
- color: #fff;
915
+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-bg-surface-neutral-strong, #fff);
916
+ color: var(--wpds-color-fg-interactive-neutral-strong, #f0f0f0);
907
917
  box-sizing: border-box;
908
918
  }
909
919
 
@@ -912,18 +922,18 @@
912
922
  }
913
923
 
914
924
  .dataviews-filters__user-input-widget {
915
- padding: 16px;
925
+ padding: var(--wpds-dimension-padding-lg, 16px);
916
926
  }
917
927
 
918
928
  .dataviews-filters__user-input-widget .components-input-control__prefix {
919
- padding-right: 8px;
929
+ padding-right: var(--wpds-dimension-padding-sm, 8px);
920
930
  }
921
931
 
922
932
  .dataviews-filters__search-widget-no-elements {
923
933
  display: flex;
924
934
  align-items: center;
925
935
  justify-content: center;
926
- padding: 16px;
936
+ padding: var(--wpds-dimension-padding-lg, 16px);
927
937
  }
928
938
 
929
939
  .dataviews-footer {
@@ -931,8 +941,8 @@
931
941
  bottom: 0;
932
942
  right: 0;
933
943
  background-color: inherit;
934
- padding: 12px 24px;
935
- border-top: 1px solid #f0f0f0;
944
+ padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
945
+ border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
936
946
  flex-shrink: 0;
937
947
  }
938
948
 
@@ -942,7 +952,7 @@
942
952
  }
943
953
  }
944
954
  .dataviews-footer {
945
- z-index: 2;
955
+ z-index: 1;
946
956
  }
947
957
 
948
958
  .dataviews-footer .is-refreshing {
@@ -973,14 +983,14 @@
973
983
  }
974
984
  .dataviews-pagination__page-select {
975
985
  font-size: 11px;
976
- font-weight: 499;
986
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
977
987
  text-transform: uppercase;
978
988
  }
979
989
 
980
990
  @media (min-width: 600px) {
981
991
  .dataviews-pagination__page-select .components-select-control__input {
982
992
  font-size: 11px !important;
983
- font-weight: 499;
993
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
984
994
  }
985
995
  }
986
996
  .dataviews-action-modal {
@@ -988,7 +998,7 @@
988
998
  }
989
999
 
990
1000
  .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
991
- padding: 0 4px;
1001
+ padding: 0 var(--wpds-dimension-padding-xs, 4px);
992
1002
  }
993
1003
 
994
1004
  .dataviews-selection-checkbox {
@@ -1013,8 +1023,8 @@
1013
1023
  width: 320px;
1014
1024
  /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
1015
1025
  container-type: inline-size;
1016
- font-size: 13px;
1017
- line-height: 1.4;
1026
+ font-size: var(--wpds-typography-font-size-md, 13px);
1027
+ line-height: var(--wpds-typography-line-height-sm, 20px);
1018
1028
  }
1019
1029
 
1020
1030
  .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper {
@@ -1031,7 +1041,7 @@
1031
1041
  }
1032
1042
 
1033
1043
  .dataviews-settings-section__title.dataviews-settings-section__title {
1034
- line-height: 24px;
1044
+ line-height: var(--wpds-typography-line-height-md, 24px);
1035
1045
  font-size: 15px;
1036
1046
  }
1037
1047
 
@@ -1082,11 +1092,11 @@
1082
1092
 
1083
1093
  .dataviews-view-config__modified-indicator {
1084
1094
  position: absolute;
1085
- top: 4px;
1086
- left: 4px;
1087
- width: 4px;
1088
- height: 4px;
1089
- background: var(--wp-admin-theme-color, #3858e9);
1095
+ top: var(--wpds-dimension-gap-xs, 4px);
1096
+ left: var(--wpds-dimension-gap-xs, 4px);
1097
+ width: var(--wpds-dimension-gap-xs, 4px);
1098
+ height: var(--wpds-dimension-gap-xs, 4px);
1099
+ background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
1090
1100
  border-radius: 50%;
1091
1101
  pointer-events: none;
1092
1102
  }
@@ -1094,10 +1104,10 @@
1094
1104
  .dataviews-view-grid-items {
1095
1105
  margin-bottom: auto;
1096
1106
  display: grid;
1097
- gap: 24px;
1107
+ gap: var(--wpds-dimension-gap-xl, 24px);
1098
1108
  grid-template-rows: max-content;
1099
1109
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
1100
- padding: 0 24px 24px;
1110
+ padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
1101
1111
  container-type: inline-size;
1102
1112
  }
1103
1113
 
@@ -1107,18 +1117,18 @@
1107
1117
  }
1108
1118
  }
1109
1119
  .dataviews-view-grid-items.has-compact-density {
1110
- gap: 16px;
1120
+ gap: var(--wpds-dimension-gap-lg, 16px);
1111
1121
  }
1112
1122
 
1113
1123
  .dataviews-view-grid-items.has-comfortable-density {
1114
- gap: 32px;
1124
+ gap: var(--wpds-dimension-gap-2xl, 32px);
1115
1125
  }
1116
1126
 
1117
1127
  .dataviews-view-grid {
1118
- padding: 0 24px 24px;
1128
+ padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
1119
1129
  display: flex;
1120
1130
  flex-direction: column;
1121
- gap: 24px;
1131
+ gap: var(--wpds-dimension-gap-xl, 24px);
1122
1132
  container-type: inline-size;
1123
1133
  margin-bottom: auto;
1124
1134
  }
@@ -1129,28 +1139,28 @@
1129
1139
  }
1130
1140
  }
1131
1141
  .dataviews-view-grid.has-compact-density {
1132
- gap: 16px;
1142
+ gap: var(--wpds-dimension-gap-lg, 16px);
1133
1143
  }
1134
1144
 
1135
1145
  .dataviews-view-grid.has-compact-density .dataviews-view-grid__row {
1136
- gap: 16px;
1146
+ gap: var(--wpds-dimension-gap-lg, 16px);
1137
1147
  }
1138
1148
 
1139
1149
  .dataviews-view-grid.has-comfortable-density {
1140
- gap: 32px;
1150
+ gap: var(--wpds-dimension-gap-2xl, 32px);
1141
1151
  }
1142
1152
 
1143
1153
  .dataviews-view-grid.has-comfortable-density .dataviews-view-grid__row {
1144
- gap: 32px;
1154
+ gap: var(--wpds-dimension-gap-2xl, 32px);
1145
1155
  }
1146
1156
 
1147
1157
  .dataviews-view-grid .dataviews-view-grid__row {
1148
1158
  display: grid;
1149
- gap: 24px;
1159
+ gap: var(--wpds-dimension-gap-xl, 24px);
1150
1160
  }
1151
1161
 
1152
1162
  .dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell {
1153
- border-radius: 4px;
1163
+ border-radius: var(--wpds-border-radius-md, 4px);
1154
1164
  position: relative;
1155
1165
  }
1156
1166
 
@@ -1161,8 +1171,8 @@
1161
1171
  right: 0;
1162
1172
  width: 100%;
1163
1173
  height: 100%;
1164
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1165
- border-radius: 4px;
1174
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1175
+ border-radius: var(--wpds-border-radius-md, 4px);
1166
1176
  pointer-events: none;
1167
1177
  outline: 2px solid transparent;
1168
1178
  }
@@ -1172,16 +1182,17 @@
1172
1182
  height: 100%;
1173
1183
  justify-content: flex-start;
1174
1184
  position: relative;
1185
+ isolation: isolate;
1175
1186
  }
1176
1187
 
1177
- .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title,
1178
- .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title {
1179
- padding: 8px 0 4px;
1188
+ .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-actions,
1189
+ .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-actions {
1190
+ padding: var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-padding-xs, 4px);
1180
1191
  }
1181
1192
 
1182
1193
  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field,
1183
1194
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field {
1184
- min-height: 24px;
1195
+ min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1185
1196
  overflow: hidden;
1186
1197
  align-content: center;
1187
1198
  text-align: start;
@@ -1194,32 +1205,25 @@
1194
1205
 
1195
1206
  .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
1196
1207
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
1197
- color: #1e1e1e;
1198
- }
1199
-
1200
- .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
1201
- .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
1202
- .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
1203
- .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
1204
- background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
1208
+ color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1205
1209
  }
1206
1210
 
1207
1211
  .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
1208
1212
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
1209
- box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
1213
+ 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);
1210
1214
  }
1211
1215
 
1212
1216
  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
1213
1217
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
1214
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1218
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1215
1219
  }
1216
1220
 
1217
1221
  .dataviews-view-grid .dataviews-view-grid__media,
1218
1222
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
1219
1223
  width: 100%;
1220
1224
  aspect-ratio: 1/1;
1221
- background-color: #fff;
1222
- border-radius: 4px;
1225
+ background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1226
+ border-radius: var(--wpds-border-radius-md, 4px);
1223
1227
  overflow: hidden;
1224
1228
  position: relative;
1225
1229
  }
@@ -1244,8 +1248,8 @@
1244
1248
  right: 0;
1245
1249
  width: 100%;
1246
1250
  height: 100%;
1247
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
1248
- border-radius: 4px;
1251
+ box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
1252
+ border-radius: var(--wpds-border-radius-md, 4px);
1249
1253
  pointer-events: none;
1250
1254
  }
1251
1255
 
@@ -1254,9 +1258,9 @@
1254
1258
  width: 100%;
1255
1259
  height: 100%;
1256
1260
  display: block;
1257
- border-radius: 4px;
1261
+ border-radius: var(--wpds-border-radius-md, 4px);
1258
1262
  box-shadow: none;
1259
- background: #f0f0f0;
1263
+ background: var(--wpds-color-bg-surface-neutral, #fcfcfc);
1260
1264
  }
1261
1265
 
1262
1266
  .dataviews-view-grid .dataviews-view-grid__fields,
@@ -1268,26 +1272,26 @@
1268
1272
 
1269
1273
  .dataviews-view-grid .dataviews-view-grid__fields:not(:empty),
1270
1274
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields:not(:empty) {
1271
- padding: 0 0 12px;
1275
+ padding: 0 0 var(--wpds-dimension-padding-md, 12px);
1272
1276
  }
1273
1277
 
1274
1278
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty),
1275
1279
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
1276
- min-height: 24px;
1277
- line-height: 20px;
1278
- padding-top: 2px;
1280
+ min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1281
+ line-height: var(--wpds-typography-line-height-sm, 20px);
1282
+ padding-top: calc(var(--wpds-dimension-base, 4px) / 2);
1279
1283
  }
1280
1284
 
1281
1285
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field,
1282
1286
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field {
1283
- min-height: 24px;
1287
+ min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1284
1288
  align-items: center;
1285
1289
  }
1286
1290
 
1287
1291
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name,
1288
1292
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
1289
1293
  width: 35%;
1290
- color: #757575;
1294
+ color: var(--wpds-color-fg-content-neutral-weak, #707070);
1291
1295
  overflow: hidden;
1292
1296
  text-overflow: ellipsis;
1293
1297
  white-space: nowrap;
@@ -1308,7 +1312,7 @@
1308
1312
 
1309
1313
  .dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty),
1310
1314
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__badge-fields:not(:empty) {
1311
- padding-bottom: 12px;
1315
+ padding-bottom: var(--wpds-dimension-padding-md, 12px);
1312
1316
  }
1313
1317
 
1314
1318
  .dataviews-view-grid.is-refreshing,
@@ -1332,7 +1336,7 @@
1332
1336
  .dataviews-view-grid__card .dataviews-selection-checkbox {
1333
1337
  position: absolute;
1334
1338
  top: -9999em;
1335
- right: 8px;
1339
+ right: var(--wpds-dimension-padding-sm, 8px);
1336
1340
  z-index: 1;
1337
1341
  opacity: 0;
1338
1342
  }
@@ -1345,26 +1349,26 @@
1345
1349
  @media (hover: none) {
1346
1350
  .dataviews-view-grid__card .dataviews-selection-checkbox {
1347
1351
  opacity: 1;
1348
- top: 8px;
1352
+ top: var(--wpds-dimension-padding-sm, 8px);
1349
1353
  }
1350
1354
  }
1351
1355
  .dataviews-view-grid__card:hover .dataviews-selection-checkbox,
1352
1356
  .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
1353
1357
  .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
1354
1358
  opacity: 1;
1355
- top: 8px;
1359
+ top: var(--wpds-dimension-padding-sm, 8px);
1356
1360
  }
1357
1361
 
1358
1362
  .dataviews-view-grid__card .dataviews-view-grid__media-actions {
1359
1363
  position: absolute;
1360
1364
  z-index: 1;
1361
- top: 4px;
1365
+ top: var(--wpds-dimension-padding-xs, 4px);
1362
1366
  opacity: 0;
1363
- left: 4px;
1367
+ left: var(--wpds-dimension-padding-xs, 4px);
1364
1368
  }
1365
1369
 
1366
1370
  .dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
1367
- background-color: #fff;
1371
+ background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1368
1372
  }
1369
1373
 
1370
1374
  @media not (prefers-reduced-motion) {
@@ -1375,7 +1379,7 @@
1375
1379
  @media (hover: none) {
1376
1380
  .dataviews-view-grid__card .dataviews-view-grid__media-actions {
1377
1381
  opacity: 1;
1378
- top: 4px;
1382
+ top: var(--wpds-dimension-padding-xs, 4px);
1379
1383
  }
1380
1384
  }
1381
1385
  .dataviews-view-grid__card:hover .dataviews-view-grid__media-actions,
@@ -1389,11 +1393,11 @@
1389
1393
  }
1390
1394
 
1391
1395
  .dataviews-view-grid__group-header {
1392
- font-size: 15px;
1393
- font-weight: 499;
1394
- color: #1e1e1e;
1395
- margin: 0 0 8px 0;
1396
- padding: 0 24px;
1396
+ font-size: var(--wpds-typography-font-size-lg, 15px);
1397
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
1398
+ color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1399
+ margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1400
+ padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1397
1401
  container-type: inline-size;
1398
1402
  }
1399
1403
 
@@ -1408,13 +1412,13 @@ div.dataviews-view-list {
1408
1412
  .dataviews-view-list div[role=row],
1409
1413
  .dataviews-view-list div[role=article] {
1410
1414
  margin: 0;
1411
- border-top: 1px solid #f0f0f0;
1415
+ border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
1412
1416
  }
1413
1417
 
1414
1418
  .dataviews-view-list div[role=row] .dataviews-view-list__item-wrapper,
1415
1419
  .dataviews-view-list div[role=article] .dataviews-view-list__item-wrapper {
1416
1420
  position: relative;
1417
- padding: 16px 24px;
1421
+ padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
1418
1422
  box-sizing: border-box;
1419
1423
  }
1420
1424
 
@@ -1423,7 +1427,7 @@ div.dataviews-view-list {
1423
1427
  display: flex;
1424
1428
  width: max-content;
1425
1429
  flex: 0 0 auto;
1426
- gap: 4px;
1430
+ gap: var(--wpds-dimension-gap-xs, 4px);
1427
1431
  white-space: nowrap;
1428
1432
  }
1429
1433
 
@@ -1462,32 +1466,21 @@ div.dataviews-view-list {
1462
1466
  }
1463
1467
  .dataviews-view-list div[role=row].is-selected.is-selected,
1464
1468
  .dataviews-view-list div[role=article].is-selected.is-selected {
1465
- border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1469
+ border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white));
1466
1470
  }
1467
1471
 
1468
1472
  .dataviews-view-list div[role=row].is-selected.is-selected + div[role=row], .dataviews-view-list div[role=row].is-selected.is-selected + div[role=article],
1469
1473
  .dataviews-view-list div[role=article].is-selected.is-selected + div[role=row],
1470
1474
  .dataviews-view-list div[role=article].is-selected.is-selected + div[role=article] {
1471
- border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1475
+ border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white));
1472
1476
  }
1473
1477
 
1474
1478
  .dataviews-view-list div[role=row]:not(.is-selected):hover, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered, .dataviews-view-list div[role=row]:not(.is-selected):focus-within,
1475
1479
  .dataviews-view-list div[role=article]:not(.is-selected):hover,
1476
1480
  .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
1477
1481
  .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
1478
- color: var(--wp-admin-theme-color);
1479
- background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
1480
- border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1481
- }
1482
-
1483
- .dataviews-view-list div[role=row]:not(.is-selected):hover + div[role=row], .dataviews-view-list div[role=row]:not(.is-selected):hover + div[role=article], .dataviews-view-list div[role=row]:not(.is-selected).is-hovered + div[role=row], .dataviews-view-list div[role=row]:not(.is-selected).is-hovered + div[role=article], .dataviews-view-list div[role=row]:not(.is-selected):focus-within + div[role=row], .dataviews-view-list div[role=row]:not(.is-selected):focus-within + div[role=article],
1484
- .dataviews-view-list div[role=article]:not(.is-selected):hover + div[role=row],
1485
- .dataviews-view-list div[role=article]:not(.is-selected):hover + div[role=article],
1486
- .dataviews-view-list div[role=article]:not(.is-selected).is-hovered + div[role=row],
1487
- .dataviews-view-list div[role=article]:not(.is-selected).is-hovered + div[role=article],
1488
- .dataviews-view-list div[role=article]:not(.is-selected):focus-within + div[role=row],
1489
- .dataviews-view-list div[role=article]:not(.is-selected):focus-within + div[role=article] {
1490
- border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1482
+ color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1483
+ background-color: var(--wpds-color-bg-interactive-brand-weak, rgba(0, 0, 0, 0));
1491
1484
  }
1492
1485
 
1493
1486
  .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
@@ -1500,15 +1493,15 @@ div.dataviews-view-list {
1500
1493
  .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
1501
1494
  .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
1502
1495
  .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
1503
- color: var(--wp-admin-theme-color);
1496
+ color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1504
1497
  }
1505
1498
 
1506
1499
  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
1507
1500
  .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
1508
1501
  .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
1509
1502
  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
1510
- background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
1511
- color: #1e1e1e;
1503
+ background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1504
+ color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
1512
1505
  }
1513
1506
 
1514
1507
  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
@@ -1519,14 +1512,14 @@ div.dataviews-view-list {
1519
1512
  .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1520
1513
  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
1521
1514
  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
1522
- color: #1e1e1e;
1515
+ color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
1523
1516
  }
1524
1517
 
1525
1518
  .dataviews-view-list .dataviews-view-list__item {
1526
1519
  position: absolute;
1527
1520
  z-index: 1;
1528
1521
  inset: 0;
1529
- scroll-margin: 8px 0;
1522
+ scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
1530
1523
  appearance: none;
1531
1524
  border: none;
1532
1525
  background: none;
@@ -1542,15 +1535,15 @@ div.dataviews-view-list {
1542
1535
  position: absolute;
1543
1536
  content: "";
1544
1537
  inset: var(--wp-admin-border-width-focus);
1545
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1546
- border-radius: 2px;
1538
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1539
+ border-radius: var(--wpds-border-radius-sm, 2px);
1547
1540
  outline: 2px solid transparent;
1548
1541
  }
1549
1542
 
1550
1543
  .dataviews-view-list .dataviews-view-list__title-field {
1551
1544
  flex: 1;
1552
- min-height: 24px;
1553
- line-height: 24px;
1545
+ min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1546
+ line-height: var(--wpds-typography-line-height-md, 24px);
1554
1547
  overflow: hidden;
1555
1548
  }
1556
1549
 
@@ -1559,13 +1552,13 @@ div.dataviews-view-list {
1559
1552
  }
1560
1553
 
1561
1554
  .dataviews-view-list .dataviews-view-list__media-wrapper {
1562
- width: 52px;
1563
- height: 52px;
1555
+ width: calc(var(--wpds-dimension-base, 4px) * 13);
1556
+ height: calc(var(--wpds-dimension-base, 4px) * 13);
1564
1557
  overflow: hidden;
1565
1558
  position: relative;
1566
1559
  flex-shrink: 0;
1567
- background-color: #fff;
1568
- border-radius: 4px;
1560
+ background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1561
+ border-radius: var(--wpds-border-radius-md, 4px);
1569
1562
  }
1570
1563
 
1571
1564
  .dataviews-view-list .dataviews-view-list__media-wrapper img {
@@ -1581,23 +1574,24 @@ div.dataviews-view-list {
1581
1574
  right: 0;
1582
1575
  width: 100%;
1583
1576
  height: 100%;
1584
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
1585
- border-radius: 4px;
1577
+ box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
1578
+ border-radius: var(--wpds-border-radius-md, 4px);
1586
1579
  }
1587
1580
 
1588
1581
  .dataviews-view-list .dataviews-view-list__field-wrapper {
1582
+ min-height: calc(var(--wpds-dimension-base, 4px) * 13);
1589
1583
  flex-grow: 1;
1590
1584
  min-width: 0;
1591
1585
  }
1592
1586
 
1593
1587
  .dataviews-view-list .dataviews-view-list__field {
1594
- color: #757575;
1588
+ color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
1595
1589
  }
1596
1590
 
1597
1591
  .dataviews-view-list .dataviews-view-list__fields {
1598
1592
  display: flex;
1599
- gap: 12px;
1600
- row-gap: 4px;
1593
+ gap: var(--wpds-dimension-gap-md, 12px);
1594
+ row-gap: var(--wpds-dimension-gap-xs, 4px);
1601
1595
  flex-wrap: wrap;
1602
1596
  font-size: 12px;
1603
1597
  }
@@ -1611,8 +1605,8 @@ div.dataviews-view-list {
1611
1605
  }
1612
1606
 
1613
1607
  .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
1614
- min-height: 24px;
1615
- line-height: 20px;
1608
+ min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1609
+ line-height: var(--wpds-typography-line-height-sm, 20px);
1616
1610
  display: flex;
1617
1611
  align-items: center;
1618
1612
  }
@@ -1622,51 +1616,59 @@ div.dataviews-view-list {
1622
1616
  }
1623
1617
 
1624
1618
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__item-wrapper {
1625
- padding: 8px 24px;
1619
+ padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-2xl, 24px);
1626
1620
  }
1627
1621
 
1628
1622
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__title-field {
1629
- min-height: 16px;
1630
- line-height: 16px;
1623
+ min-height: calc(var(--wpds-dimension-base, 4px) * 4);
1624
+ line-height: var(--wpds-typography-line-height-xs, 16px);
1631
1625
  }
1632
1626
 
1633
1627
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__media-wrapper {
1634
- width: 32px;
1635
- height: 32px;
1628
+ width: calc(var(--wpds-dimension-base, 4px) * 8);
1629
+ height: calc(var(--wpds-dimension-base, 4px) * 8);
1630
+ }
1631
+
1632
+ .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__field-wrapper {
1633
+ min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1636
1634
  }
1637
1635
 
1638
1636
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields {
1639
- gap: 8px;
1640
- row-gap: 4px;
1637
+ gap: var(--wpds-dimension-gap-sm, 8px);
1638
+ row-gap: var(--wpds-dimension-gap-xs, 4px);
1641
1639
  }
1642
1640
 
1643
1641
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
1644
- min-height: 16px;
1645
- line-height: 16px;
1642
+ min-height: calc(var(--wpds-dimension-base, 4px) * 4);
1643
+ line-height: var(--wpds-typography-line-height-xs, 16px);
1646
1644
  }
1647
1645
 
1648
1646
  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__item-wrapper {
1649
- padding: 24px 24px;
1647
+ padding: var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
1650
1648
  }
1651
1649
 
1652
1650
  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__title-field {
1653
- min-height: 32px;
1654
- line-height: 32px;
1651
+ min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1652
+ line-height: var(--wpds-typography-line-height-xl, 32px);
1655
1653
  }
1656
1654
 
1657
1655
  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__media-wrapper {
1658
- width: 64px;
1659
- height: 64px;
1656
+ width: calc(var(--wpds-dimension-base, 4px) * 16);
1657
+ height: calc(var(--wpds-dimension-base, 4px) * 16);
1658
+ }
1659
+
1660
+ .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__field-wrapper {
1661
+ min-height: calc(var(--wpds-dimension-base, 4px) * 16);
1660
1662
  }
1661
1663
 
1662
1664
  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields {
1663
- gap: 16px;
1664
- row-gap: 8px;
1665
+ gap: var(--wpds-dimension-gap-lg, 16px);
1666
+ row-gap: var(--wpds-dimension-gap-sm, 8px);
1665
1667
  }
1666
1668
 
1667
1669
  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
1668
- min-height: 32px;
1669
- line-height: 24px;
1670
+ min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1671
+ line-height: var(--wpds-typography-line-height-md, 24px);
1670
1672
  }
1671
1673
 
1672
1674
  .dataviews-view-list.is-refreshing {
@@ -1681,11 +1683,11 @@ div.dataviews-view-list {
1681
1683
  }
1682
1684
  }
1683
1685
  .dataviews-view-list__group-header {
1684
- font-size: 15px;
1685
- font-weight: 499;
1686
- color: #1e1e1e;
1687
- margin: 0 0 8px 0;
1688
- padding: 0 24px;
1686
+ font-size: var(--wpds-typography-font-size-lg, 15px);
1687
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
1688
+ color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1689
+ margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1690
+ padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1689
1691
  }
1690
1692
 
1691
1693
  .dataviews-view-table {
@@ -1694,21 +1696,21 @@ div.dataviews-view-list {
1694
1696
  border-color: inherit;
1695
1697
  border-collapse: collapse;
1696
1698
  position: relative;
1697
- color: #757575;
1699
+ color: var(--wpds-color-fg-content-neutral-weak, #707070);
1698
1700
  margin-bottom: auto;
1699
1701
  background-color: inherit;
1700
1702
  }
1701
1703
 
1702
1704
  .dataviews-view-table th {
1703
1705
  text-align: right;
1704
- color: #1e1e1e;
1706
+ color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1705
1707
  font-weight: normal;
1706
- font-size: 13px;
1708
+ font-size: var(--wpds-typography-font-size-md, 13px);
1707
1709
  }
1708
1710
 
1709
1711
  .dataviews-view-table td,
1710
1712
  .dataviews-view-table th {
1711
- padding: 12px;
1713
+ padding: var(--wpds-dimension-padding-md, 12px);
1712
1714
  }
1713
1715
 
1714
1716
  .dataviews-view-table td.dataviews-view-table__actions-column,
@@ -1720,7 +1722,7 @@ div.dataviews-view-list {
1720
1722
  .dataviews-view-table th.dataviews-view-table__actions-column--sticky {
1721
1723
  position: sticky;
1722
1724
  left: 0;
1723
- background-color: var(--wp-dataviews-color-background, #fff);
1725
+ background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong, #fff));
1724
1726
  }
1725
1727
 
1726
1728
  .dataviews-view-table td.dataviews-view-table__actions-column--stuck::after,
@@ -1732,7 +1734,7 @@ div.dataviews-view-list {
1732
1734
  bottom: 0;
1733
1735
  right: 0;
1734
1736
  width: 1px;
1735
- background-color: #f0f0f0;
1737
+ background-color: var(--wpds-color-bg-surface-neutral, #fcfcfc);
1736
1738
  }
1737
1739
 
1738
1740
  .dataviews-view-table td.dataviews-view-table__checkbox-column,
@@ -1747,18 +1749,18 @@ div.dataviews-view-list {
1747
1749
  }
1748
1750
 
1749
1751
  .dataviews-view-table tr {
1750
- border-top: 1px solid #f0f0f0;
1752
+ border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
1751
1753
  background-color: inherit;
1752
1754
  }
1753
1755
 
1754
1756
  .dataviews-view-table tr td:first-child,
1755
1757
  .dataviews-view-table tr th:first-child {
1756
- padding-right: 24px;
1758
+ padding-right: var(--wpds-dimension-padding-2xl, 24px);
1757
1759
  }
1758
1760
 
1759
1761
  .dataviews-view-table tr td:last-child,
1760
1762
  .dataviews-view-table tr th:last-child {
1761
- padding-left: 24px;
1763
+ padding-left: var(--wpds-dimension-padding-2xl, 24px);
1762
1764
  }
1763
1765
 
1764
1766
  .dataviews-view-table tr:last-child {
@@ -1775,16 +1777,16 @@ div.dataviews-view-list {
1775
1777
  }
1776
1778
  }
1777
1779
  .dataviews-view-table tr.is-selected {
1778
- background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
1779
- color: #757575;
1780
+ background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1781
+ color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1780
1782
  }
1781
1783
 
1782
1784
  .dataviews-view-table tr.is-selected, .dataviews-view-table tr.is-selected + tr {
1783
- border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1785
+ border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white));
1784
1786
  }
1785
1787
 
1786
1788
  .dataviews-view-table tr.is-selected .dataviews-view-table__actions-column--sticky {
1787
- background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
1789
+ background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1788
1790
  }
1789
1791
 
1790
1792
  .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) {
@@ -1792,11 +1794,11 @@ div.dataviews-view-list {
1792
1794
  }
1793
1795
 
1794
1796
  .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 {
1795
- background-color: var(--wp-dataviews-color-background, #fff);
1797
+ background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong, #fff));
1796
1798
  }
1797
1799
 
1798
1800
  .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 {
1799
- background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
1801
+ background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1800
1802
  }
1801
1803
 
1802
1804
  .dataviews-view-table thead {
@@ -1814,7 +1816,7 @@ div.dataviews-view-list {
1814
1816
  right: 0;
1815
1817
  left: 0;
1816
1818
  height: 1px;
1817
- background-color: #f0f0f0;
1819
+ background-color: var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
1818
1820
  }
1819
1821
 
1820
1822
  .dataviews-view-table thead tr {
@@ -1823,28 +1825,28 @@ div.dataviews-view-list {
1823
1825
 
1824
1826
  .dataviews-view-table thead th {
1825
1827
  background-color: inherit;
1826
- padding-top: 8px;
1827
- padding-bottom: 8px;
1828
+ padding-top: var(--wpds-dimension-padding-sm, 8px);
1829
+ padding-bottom: var(--wpds-dimension-padding-sm, 8px);
1828
1830
  font-size: 11px;
1829
1831
  text-transform: uppercase;
1830
- font-weight: 499;
1832
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
1831
1833
  }
1832
1834
 
1833
1835
  .dataviews-view-table thead th:has(.dataviews-view-table-header-button) {
1834
- padding-right: 4px;
1835
- padding-left: 4px;
1836
+ padding-right: var(--wpds-dimension-padding-xs, 4px);
1837
+ padding-left: var(--wpds-dimension-padding-xs, 4px);
1836
1838
  }
1837
1839
 
1838
1840
  .dataviews-view-table thead th:has(.dataviews-view-table-header-button) .dataviews-view-table-header-button {
1839
- gap: 4px;
1841
+ gap: var(--wpds-dimension-gap-xs, 4px);
1840
1842
  }
1841
1843
 
1842
1844
  .dataviews-view-table thead th:has(.dataviews-view-table-header-button):first-child {
1843
- padding-right: 16px;
1845
+ padding-right: var(--wpds-dimension-padding-lg, 16px);
1844
1846
  }
1845
1847
 
1846
1848
  .dataviews-view-table thead th:has(.dataviews-view-table-header-button):last-child {
1847
- padding-left: 16px;
1849
+ padding-left: var(--wpds-dimension-padding-lg, 16px);
1848
1850
  }
1849
1851
 
1850
1852
  .dataviews-view-table tbody td {
@@ -1852,7 +1854,7 @@ div.dataviews-view-list {
1852
1854
  }
1853
1855
 
1854
1856
  .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
1855
- min-height: 32px;
1857
+ min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1856
1858
  display: flex;
1857
1859
  align-items: center;
1858
1860
  white-space: nowrap;
@@ -1872,14 +1874,14 @@ div.dataviews-view-list {
1872
1874
  }
1873
1875
 
1874
1876
  .dataviews-view-table .dataviews-view-table-header-button {
1875
- padding: 4px 8px;
1877
+ padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
1876
1878
  font-size: 11px;
1877
1879
  text-transform: uppercase;
1878
- font-weight: 499;
1880
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
1879
1881
  }
1880
1882
 
1881
1883
  .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
1882
- color: #1e1e1e;
1884
+ color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
1883
1885
  }
1884
1886
 
1885
1887
  .dataviews-view-table .dataviews-view-table-header-button span {
@@ -1891,7 +1893,7 @@ div.dataviews-view-list {
1891
1893
  }
1892
1894
 
1893
1895
  .dataviews-view-table .dataviews-view-table-header {
1894
- padding-right: 4px;
1896
+ padding-right: var(--wpds-dimension-padding-xs, 4px);
1895
1897
  }
1896
1898
 
1897
1899
  .dataviews-view-table .dataviews-view-table__actions-column {
@@ -1909,12 +1911,12 @@ div.dataviews-view-list {
1909
1911
 
1910
1912
  .dataviews-view-table.has-compact-density td,
1911
1913
  .dataviews-view-table.has-compact-density th {
1912
- padding: 4px 8px;
1914
+ padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
1913
1915
  }
1914
1916
 
1915
1917
  .dataviews-view-table.has-comfortable-density td,
1916
1918
  .dataviews-view-table.has-comfortable-density th {
1917
- padding: 16px 12px;
1919
+ padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-md, 12px);
1918
1920
  }
1919
1921
 
1920
1922
  .dataviews-view-table.has-compact-density td.dataviews-view-table__checkbox-column,
@@ -1934,18 +1936,18 @@ div.dataviews-view-list {
1934
1936
  }
1935
1937
  .dataviews-column-primary__media {
1936
1938
  max-width: 60px;
1937
- min-width: 32px;
1938
- min-height: 32px;
1939
+ min-width: calc(var(--wpds-dimension-base, 4px) * 8);
1940
+ min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1939
1941
  overflow: hidden;
1940
1942
  position: relative;
1941
1943
  flex-shrink: 0;
1942
- background-color: #fff;
1943
- border-radius: 4px;
1944
+ background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1945
+ border-radius: var(--wpds-border-radius-md, 4px);
1944
1946
  }
1945
1947
 
1946
1948
  .dataviews-column-primary__media img {
1947
- width: 32px;
1948
- height: 32px;
1949
+ width: calc(var(--wpds-dimension-base, 4px) * 8);
1950
+ height: calc(var(--wpds-dimension-base, 4px) * 8);
1949
1951
  object-fit: cover;
1950
1952
  }
1951
1953
 
@@ -1956,8 +1958,8 @@ div.dataviews-view-list {
1956
1958
  right: 0;
1957
1959
  width: 100%;
1958
1960
  height: 100%;
1959
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
1960
- border-radius: 4px;
1961
+ box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
1962
+ border-radius: var(--wpds-border-radius-md, 4px);
1961
1963
  }
1962
1964
 
1963
1965
  .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media),
@@ -1967,9 +1969,9 @@ div.dataviews-view-list {
1967
1969
  }
1968
1970
 
1969
1971
  .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
1970
- font-weight: 499;
1971
- padding: 12px 24px;
1972
- color: #1e1e1e;
1972
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
1973
+ padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
1974
+ color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1973
1975
  }
1974
1976
 
1975
1977
  /* Column width intents via colgroup: make non-primary columns shrink-to-fit */
@@ -1989,25 +1991,26 @@ div.dataviews-view-list {
1989
1991
  }
1990
1992
  }
1991
1993
  .dataviews-view-picker-grid.has-compact-density .dataviews-view-grid-items {
1992
- gap: 16px;
1994
+ gap: var(--wpds-dimension-gap-lg, 16px);
1993
1995
  }
1994
1996
 
1995
1997
  .dataviews-view-picker-grid.has-comfortable-density .dataviews-view-grid-items {
1996
- gap: 32px;
1998
+ gap: var(--wpds-dimension-gap-2xl, 32px);
1997
1999
  }
1998
2000
 
1999
2001
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card {
2000
2002
  height: 100%;
2001
2003
  justify-content: flex-start;
2002
2004
  position: relative;
2005
+ isolation: isolate;
2003
2006
  }
2004
2007
 
2005
2008
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions {
2006
- padding: 8px 0 4px;
2009
+ padding: var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-padding-xs, 4px);
2007
2010
  }
2008
2011
 
2009
2012
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
2010
- min-height: 24px;
2013
+ min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2011
2014
  overflow: hidden;
2012
2015
  align-content: center;
2013
2016
  text-align: start;
@@ -2018,20 +2021,15 @@ div.dataviews-view-list {
2018
2021
  }
2019
2022
 
2020
2023
  .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 {
2021
- color: #1e1e1e;
2022
- }
2023
-
2024
- .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after,
2025
- .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
2026
- background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
2024
+ color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2027
2025
  }
2028
2026
 
2029
2027
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
2030
- box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
2028
+ 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);
2031
2029
  }
2032
2030
 
2033
2031
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
2034
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2032
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2035
2033
  }
2036
2034
 
2037
2035
  .dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
@@ -2039,11 +2037,11 @@ div.dataviews-view-list {
2039
2037
  }
2040
2038
 
2041
2039
  .dataviews-view-picker-grid:focus-visible [data-active-item=true] {
2042
- outline: 2px solid var(--wp-admin-theme-color);
2040
+ outline: 2px solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2043
2041
  }
2044
2042
 
2045
2043
  .dataviews-view-picker-grid .dataviews-selection-checkbox {
2046
- top: 8px !important;
2044
+ top: var(--wpds-dimension-padding-sm, 8px) !important;
2047
2045
  }
2048
2046
 
2049
2047
  .dataviews-view-picker-grid .dataviews-selection-checkbox input {
@@ -2054,8 +2052,8 @@ div.dataviews-view-list {
2054
2052
  width: 100%;
2055
2053
  aspect-ratio: 1/1;
2056
2054
  min-height: 0;
2057
- background-color: #fff;
2058
- border-radius: 4px;
2055
+ background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
2056
+ border-radius: var(--wpds-border-radius-md, 4px);
2059
2057
  position: relative;
2060
2058
  }
2061
2059
 
@@ -2072,8 +2070,8 @@ div.dataviews-view-list {
2072
2070
  right: 0;
2073
2071
  width: 100%;
2074
2072
  height: 100%;
2075
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
2076
- border-radius: 4px;
2073
+ box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
2074
+ border-radius: var(--wpds-border-radius-md, 4px);
2077
2075
  pointer-events: none;
2078
2076
  }
2079
2077
 
@@ -2084,23 +2082,23 @@ div.dataviews-view-list {
2084
2082
  }
2085
2083
 
2086
2084
  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) {
2087
- padding: 0 0 12px;
2085
+ padding: 0 0 var(--wpds-dimension-padding-md, 12px);
2088
2086
  }
2089
2087
 
2090
2088
  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
2091
- min-height: 24px;
2092
- line-height: 20px;
2093
- padding-top: 2px;
2089
+ min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2090
+ line-height: var(--wpds-typography-line-height-sm, 20px);
2091
+ padding-top: calc(var(--wpds-dimension-base, 4px) / 2);
2094
2092
  }
2095
2093
 
2096
2094
  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
2097
- min-height: 24px;
2095
+ min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2098
2096
  align-items: center;
2099
2097
  }
2100
2098
 
2101
2099
  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
2102
2100
  width: 35%;
2103
- color: #757575;
2101
+ color: var(--wpds-color-fg-content-neutral-weak, #707070);
2104
2102
  overflow: hidden;
2105
2103
  text-overflow: ellipsis;
2106
2104
  white-space: nowrap;
@@ -2118,7 +2116,7 @@ div.dataviews-view-list {
2118
2116
  }
2119
2117
 
2120
2118
  .dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) {
2121
- padding-bottom: 12px;
2119
+ padding-bottom: var(--wpds-dimension-padding-md, 12px);
2122
2120
  }
2123
2121
 
2124
2122
  .dataviews-view-picker-grid__field-value:empty,
@@ -2129,19 +2127,19 @@ div.dataviews-view-list {
2129
2127
  .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
2130
2128
  position: absolute;
2131
2129
  top: -9999em;
2132
- right: 8px;
2130
+ right: var(--wpds-dimension-padding-sm, 8px);
2133
2131
  z-index: 1;
2134
2132
  }
2135
2133
 
2136
2134
  @media (hover: none) {
2137
2135
  .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
2138
- top: 8px;
2136
+ top: var(--wpds-dimension-padding-sm, 8px);
2139
2137
  }
2140
2138
  }
2141
2139
  .dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
2142
2140
  .dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
2143
2141
  .dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
2144
- top: 8px;
2142
+ top: var(--wpds-dimension-padding-sm, 8px);
2145
2143
  }
2146
2144
 
2147
2145
  .dataviews-view-picker-grid__media--clickable {
@@ -2149,11 +2147,11 @@ div.dataviews-view-list {
2149
2147
  }
2150
2148
 
2151
2149
  .dataviews-view-picker-grid-group__header {
2152
- font-size: 15px;
2153
- font-weight: 499;
2154
- color: #1e1e1e;
2155
- margin: 0 0 8px 0;
2156
- padding: 0 48px;
2150
+ font-size: var(--wpds-typography-font-size-lg, 15px);
2151
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
2152
+ color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2153
+ margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2154
+ padding: 0 calc(var(--wpds-dimension-base, 4px) * 12);
2157
2155
  }
2158
2156
 
2159
2157
  .dataviews-view-picker-table {
@@ -2161,7 +2159,7 @@ div.dataviews-view-list {
2161
2159
  }
2162
2160
 
2163
2161
  .dataviews-view-picker-table .dataviews-view-table__checkbox-column {
2164
- width: 48px;
2162
+ width: calc(var(--wpds-dimension-base, 4px) * 12);
2165
2163
  }
2166
2164
 
2167
2165
  .dataviews-view-picker-table tbody:focus-visible[aria-activedescendant] {
@@ -2169,7 +2167,7 @@ div.dataviews-view-list {
2169
2167
  }
2170
2168
 
2171
2169
  .dataviews-view-picker-table tbody:focus-visible [data-active-item=true] {
2172
- outline: 2px solid var(--wp-admin-theme-color);
2170
+ outline: 2px solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2173
2171
  }
2174
2172
 
2175
2173
  .dataviews-view-picker-table .dataviews-selection-checkbox .components-checkbox-control__input.components-checkbox-control__input {
@@ -2182,32 +2180,32 @@ div.dataviews-view-list {
2182
2180
  }
2183
2181
 
2184
2182
  .dataviews-view-picker-table .dataviews-view-table__row.is-selected {
2185
- background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
2183
+ background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2186
2184
  }
2187
2185
 
2188
2186
  .dataviews-view-picker-table .dataviews-view-table__row.is-hovered {
2189
- background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
2187
+ background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2190
2188
  }
2191
2189
 
2192
2190
  .dataviews-view-picker-table .dataviews-view-table__row.is-selected.is-hovered {
2193
- background-color: rgba(var(--wp-admin-theme-color--rgb), 0.12);
2191
+ background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2194
2192
  }
2195
2193
 
2196
2194
  .dataviews-view-activity {
2197
2195
  margin: 0 0 auto;
2198
- padding: 0 24px;
2196
+ padding: 0 var(--wpds-dimension-padding-2xl, 24px);
2199
2197
  }
2200
2198
 
2201
2199
  .dataviews-view-activity .dataviews-view-activity__group-header {
2202
- font-size: 15px;
2203
- font-weight: 499;
2204
- color: #949494;
2205
- margin: 0 0 8px 0;
2200
+ font-size: var(--wpds-typography-font-size-lg, 15px);
2201
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
2202
+ color: var(--wpds-color-fg-content-neutral-weak, #707070);
2203
+ margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2206
2204
  padding: 0;
2207
2205
  }
2208
2206
 
2209
2207
  .dataviews-view-activity .dataviews-view-activity__item-actions {
2210
- min-width: 24px;
2208
+ min-width: calc(var(--wpds-dimension-base, 4px) * 6);
2211
2209
  }
2212
2210
 
2213
2211
  .dataviews-view-activity .dataviews-view-activity__item-content {
@@ -2217,7 +2215,7 @@ div.dataviews-view-list {
2217
2215
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title,
2218
2216
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-description,
2219
2217
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
2220
- min-height: 16px;
2218
+ min-height: calc(var(--wpds-dimension-base, 4px) * 4);
2221
2219
  }
2222
2220
 
2223
2221
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title {
@@ -2233,9 +2231,9 @@ div.dataviews-view-list {
2233
2231
  }
2234
2232
 
2235
2233
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable:focus-visible {
2236
- outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
2234
+ outline: var(--wp-admin-border-width-focus) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2237
2235
  outline-offset: var(--wp-admin-border-width-focus);
2238
- border-radius: 2px;
2236
+ border-radius: var(--wpds-border-radius-sm, 2px);
2239
2237
  }
2240
2238
 
2241
2239
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
@@ -2250,10 +2248,10 @@ div.dataviews-view-list {
2250
2248
  }
2251
2249
 
2252
2250
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
2253
- color: #757575;
2251
+ color: var(--wpds-color-fg-content-neutral-weak, #707070);
2254
2252
  display: flex;
2255
- gap: 12px;
2256
- row-gap: 4px;
2253
+ gap: var(--wpds-dimension-gap-md, 12px);
2254
+ row-gap: var(--wpds-dimension-gap-xs, 4px);
2257
2255
  flex-wrap: wrap;
2258
2256
  }
2259
2257
 
@@ -2280,7 +2278,7 @@ div.dataviews-view-list {
2280
2278
  flex: 1 1 auto;
2281
2279
  width: 1px;
2282
2280
  margin: 0 auto;
2283
- background-color: #ddd;
2281
+ background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2284
2282
  }
2285
2283
 
2286
2284
  .dataviews-view-activity .dataviews-view-activity__item-type::before {
@@ -2288,65 +2286,65 @@ div.dataviews-view-list {
2288
2286
  flex: 0 0 auto;
2289
2287
  width: 1px;
2290
2288
  margin: 0 auto;
2291
- background-color: #ddd;
2289
+ background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2292
2290
  }
2293
2291
 
2294
2292
  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type {
2295
- width: 12px;
2293
+ width: var(--wpds-dimension-padding-md, 12px);
2296
2294
  }
2297
2295
 
2298
2296
  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type::before {
2299
- height: 12px;
2297
+ height: calc(var(--wpds-dimension-base, 4px) * 3);
2300
2298
  }
2301
2299
 
2302
2300
  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type-icon {
2303
- width: 11px;
2304
- height: 11px;
2301
+ width: calc(var(--wpds-dimension-base, 4px) * 3 - 1px);
2302
+ height: calc(var(--wpds-dimension-base, 4px) * 3 - 1px);
2305
2303
  }
2306
2304
 
2307
2305
  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-content {
2308
- margin: 12px 0;
2306
+ margin: var(--wpds-dimension-gap-md, 12px) 0;
2309
2307
  }
2310
2308
 
2311
2309
  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type {
2312
- width: 24px;
2310
+ width: calc(var(--wpds-dimension-base, 4px) * 6);
2313
2311
  }
2314
2312
 
2315
2313
  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type::before {
2316
- height: 12px;
2314
+ height: calc(var(--wpds-dimension-base, 4px) * 3);
2317
2315
  }
2318
2316
 
2319
2317
  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type-icon {
2320
- width: 25px;
2321
- height: 25px;
2318
+ width: calc(var(--wpds-dimension-base, 4px) * 6 + 1px);
2319
+ height: calc(var(--wpds-dimension-base, 4px) * 6 + 1px);
2322
2320
  }
2323
2321
 
2324
2322
  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-content {
2325
- margin: 12px 0;
2326
- padding-top: 8px;
2323
+ margin: var(--wpds-dimension-gap-md, 12px) 0;
2324
+ padding-top: var(--wpds-dimension-padding-sm, 8px);
2327
2325
  }
2328
2326
 
2329
2327
  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type {
2330
- width: 32px;
2328
+ width: calc(var(--wpds-dimension-base, 4px) * 8);
2331
2329
  }
2332
2330
 
2333
2331
  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type::before {
2334
- height: 8px;
2332
+ height: calc(var(--wpds-dimension-base, 4px) * 2);
2335
2333
  }
2336
2334
 
2337
2335
  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type-icon {
2338
- width: 33px;
2339
- height: 33px;
2336
+ width: calc(var(--wpds-dimension-base, 4px) * 8 + 1px);
2337
+ height: calc(var(--wpds-dimension-base, 4px) * 8 + 1px);
2340
2338
  }
2341
2339
 
2342
2340
  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-content {
2343
- margin: 8px 0 16px;
2344
- padding-top: 12px;
2341
+ margin: var(--wpds-dimension-gap-sm, 8px) 0 var(--wpds-dimension-gap-lg, 16px);
2342
+ padding-top: var(--wpds-dimension-padding-md, 12px);
2345
2343
  }
2346
2344
 
2347
2345
  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-bullet, .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-bullet {
2348
- width: 9px;
2349
- height: 9px;
2346
+ width: calc(var(--wpds-dimension-base, 4px) * 2 + 1px);
2347
+ height: calc(var(--wpds-dimension-base, 4px) * 2 + 1px);
2350
2348
  position: relative;
2351
2349
  top: 50%;
2352
2350
  transform: translateY(-50%);
@@ -2357,13 +2355,13 @@ div.dataviews-view-list {
2357
2355
  }
2358
2356
 
2359
2357
  .dataviews-view-activity .dataviews-view-activity__group:last-of-type > .dataviews-view-activity__item:last-of-type .dataviews-view-activity__item-type::after, .dataviews-view-activity > .dataviews-view-activity__item:last-child .dataviews-view-activity__item-type::after {
2360
- background: linear-gradient(to bottom, #ddd 0%, rgba(221, 221, 221, 0.2) 60%, rgba(221, 221, 221, 0) 100%);
2358
+ background: linear-gradient(to bottom, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 0%, color-mix(in srgb, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 20%, transparent) 60%, transparent 100%);
2361
2359
  }
2362
2360
 
2363
2361
  .dataviews-view-activity .dataviews-view-activity__item-type-icon {
2364
2362
  overflow: hidden;
2365
2363
  flex-shrink: 0;
2366
- background-color: #fff;
2364
+ background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
2367
2365
  }
2368
2366
 
2369
2367
  .dataviews-view-activity .dataviews-view-activity__item-type-icon img,
@@ -2376,16 +2374,16 @@ div.dataviews-view-list {
2376
2374
  object-fit: cover;
2377
2375
  border-radius: 50%;
2378
2376
  box-sizing: border-box;
2379
- box-shadow: inset 0 0 0 1px #ddd;
2377
+ box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2380
2378
  }
2381
2379
 
2382
2380
  .dataviews-view-activity .dataviews-view-activity__item-type-icon svg {
2383
- padding: 4px;
2381
+ padding: var(--wpds-dimension-padding-xs, 4px);
2384
2382
  }
2385
2383
 
2386
2384
  .dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet {
2387
2385
  content: "";
2388
- background-color: #ddd;
2386
+ background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2389
2387
  }
2390
2388
 
2391
2389
  .dataviews-view-activity.is-refreshing {
@@ -2405,7 +2403,7 @@ div.dataviews-view-list {
2405
2403
 
2406
2404
  .dataviews-picker-footer__bulk-selection {
2407
2405
  align-self: flex-start;
2408
- height: 32px;
2406
+ height: calc(var(--wpds-dimension-base, 4px) * 8);
2409
2407
  }
2410
2408
 
2411
2409
  .dataviews-picker-footer__actions {
@@ -2437,11 +2435,11 @@ div.dataviews-view-list {
2437
2435
  }
2438
2436
 
2439
2437
  .dataviews-controls__date-preset {
2440
- border: 1px solid #ddd;
2438
+ border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2441
2439
  }
2442
2440
 
2443
2441
  .dataviews-controls__date-preset:active {
2444
- background-color: #000;
2442
+ background-color: var(--wpds-color-bg-interactive-neutral-strong-active, #1e1e1e);
2445
2443
  }
2446
2444
 
2447
2445
  .dataforms-layouts-panel__field-trigger {
@@ -2449,10 +2447,10 @@ div.dataviews-view-list {
2449
2447
  color: inherit;
2450
2448
  display: flex;
2451
2449
  width: 100%;
2452
- min-height: 24px;
2450
+ min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2453
2451
  cursor: var(--wpds-cursor-control, pointer);
2454
2452
  align-items: flex-start;
2455
- border-radius: 2px;
2453
+ border-radius: var(--wpds-border-radius-sm, 2px);
2456
2454
  isolation: isolate;
2457
2455
  }
2458
2456
 
@@ -2471,7 +2469,7 @@ div.dataviews-view-list {
2471
2469
  }
2472
2470
 
2473
2471
  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover {
2474
- color: var(--wp-admin-theme-color);
2472
+ color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2475
2473
  }
2476
2474
 
2477
2475
  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-trigger-icon {
@@ -2479,7 +2477,7 @@ div.dataviews-view-list {
2479
2477
  }
2480
2478
 
2481
2479
  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-label {
2482
- color: var(--wp-admin-theme-color);
2480
+ color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2483
2481
  }
2484
2482
 
2485
2483
  .dataforms-layouts-panel__field-trigger.is-disabled {
@@ -2487,7 +2485,7 @@ div.dataviews-view-list {
2487
2485
  }
2488
2486
 
2489
2487
  .dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control {
2490
- color: #757575;
2488
+ color: var(--wpds-color-fg-content-neutral-weak, #707070);
2491
2489
  font-weight: var(--wpds-typography-font-weight-regular, 400);
2492
2490
  }
2493
2491
 
@@ -2497,12 +2495,12 @@ div.dataviews-view-list {
2497
2495
  }
2498
2496
 
2499
2497
  .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 {
2500
- fill: var(--wp-admin-theme-color);
2498
+ fill: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2501
2499
  }
2502
2500
 
2503
2501
  .dataforms-layouts-panel__field-trigger-icon {
2504
2502
  padding: 0;
2505
- color: var(--wp-admin-theme-color);
2503
+ color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2506
2504
  flex: 0 0 auto;
2507
2505
  opacity: 0;
2508
2506
  border-radius: var(--wpds-border-radius-xs, 1px);
@@ -2510,7 +2508,7 @@ div.dataviews-view-list {
2510
2508
 
2511
2509
  .dataforms-layouts-panel__field-trigger-icon:focus-visible {
2512
2510
  opacity: 1;
2513
- outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wp-admin-theme-color);
2511
+ 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));
2514
2512
  }
2515
2513
 
2516
2514
  .dataforms-layouts-panel__field-dropdown-anchor {
@@ -2524,12 +2522,12 @@ div.dataviews-view-list {
2524
2522
  .dataforms-layouts-panel__field-label {
2525
2523
  width: 38%;
2526
2524
  flex-shrink: 0;
2527
- min-height: 24px;
2525
+ min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2528
2526
  display: flex;
2529
2527
  align-items: center;
2530
- line-height: 20px;
2528
+ line-height: var(--wpds-typography-line-height-sm, 20px);
2531
2529
  hyphens: auto;
2532
- color: #757575;
2530
+ color: var(--wpds-color-fg-content-neutral-weak, #707070);
2533
2531
  }
2534
2532
 
2535
2533
  .dataforms-layouts-panel__field-label .components-base-control__label {
@@ -2539,18 +2537,18 @@ div.dataviews-view-list {
2539
2537
  }
2540
2538
 
2541
2539
  .dataforms-layouts-panel__field-label.has-error {
2542
- color: #cc1818;
2540
+ color: var(--wpds-color-fg-content-error-weak, #cc1818);
2543
2541
  }
2544
2542
 
2545
2543
  .dataforms-layouts-panel__field-label-error-content {
2546
2544
  position: relative;
2547
2545
  z-index: 1;
2548
2546
  cursor: help;
2549
- fill: #cc1818;
2547
+ fill: var(--wpds-color-fg-content-error-weak, #cc1818);
2550
2548
  display: inline-flex;
2551
2549
  flex-direction: row;
2552
2550
  align-items: center;
2553
- gap: 4px;
2551
+ gap: var(--wpds-dimension-gap-xs, 4px);
2554
2552
  }
2555
2553
 
2556
2554
  .dataforms-layouts-panel__field-label-error-content svg {
@@ -2560,7 +2558,7 @@ div.dataviews-view-list {
2560
2558
  .dataforms-layouts-panel__field-control {
2561
2559
  flex-grow: 1;
2562
2560
  min-width: 0;
2563
- min-height: 24px;
2561
+ min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2564
2562
  line-height: var(--wpds-typography-line-height-md, 24px);
2565
2563
  display: flex;
2566
2564
  align-items: center;
@@ -2573,6 +2571,23 @@ div.dataviews-view-list {
2573
2571
  min-width: 0;
2574
2572
  }
2575
2573
 
2574
+ .dataforms-layouts-panel__field-control .components-button {
2575
+ max-width: 100%;
2576
+ text-align: right;
2577
+ white-space: normal;
2578
+ text-wrap: balance;
2579
+ text-wrap: pretty;
2580
+ min-height: 32px;
2581
+ }
2582
+
2583
+ .dataforms-layouts-panel__field-control.components-button.is-link[aria-disabled=true] {
2584
+ text-decoration: none;
2585
+ }
2586
+
2587
+ .dataforms-layouts-panel__field-control .components-dropdown {
2588
+ max-width: 100%;
2589
+ }
2590
+
2576
2591
  .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-label {
2577
2592
  width: 100%;
2578
2593
  }
@@ -2587,25 +2602,29 @@ div.dataviews-view-list {
2587
2602
  }
2588
2603
 
2589
2604
  .dataforms-layouts-panel__field-dropdown .components-popover__content {
2590
- min-width: 256px;
2591
- padding: 16px;
2605
+ min-width: 320px;
2606
+ padding: var(--wpds-dimension-padding-lg, 16px);
2592
2607
  }
2593
2608
 
2594
2609
  .dataforms-layouts-panel__dropdown-header {
2595
- margin-bottom: 16px;
2610
+ margin-bottom: var(--wpds-dimension-gap-lg, 16px);
2596
2611
  }
2597
2612
 
2598
2613
  .dataforms-layouts-panel__modal-footer {
2599
- margin-top: 16px;
2614
+ margin-top: var(--wpds-dimension-gap-lg, 16px);
2600
2615
  }
2601
2616
 
2602
2617
  .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
2603
2618
  z-index: 159990;
2604
2619
  }
2605
2620
 
2621
+ .dataforms-layouts-panel__summary-button:empty {
2622
+ min-width: 160px;
2623
+ }
2624
+
2606
2625
  .dataforms-layouts-regular__field {
2607
2626
  width: 100%;
2608
- min-height: 32px;
2627
+ min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2609
2628
  justify-content: flex-start !important;
2610
2629
  align-items: flex-start !important;
2611
2630
  }
@@ -2613,16 +2632,16 @@ div.dataviews-view-list {
2613
2632
  .dataforms-layouts-regular__field .components-base-control__label,
2614
2633
  .dataforms-layouts-regular__field .components-input-control__label,
2615
2634
  .dataforms-layouts-regular__field .components-form-token-field__label {
2616
- color: #1e1e1e;
2635
+ color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2617
2636
  }
2618
2637
 
2619
2638
  .dataforms-layouts-regular__field-label {
2620
2639
  width: 38%;
2621
2640
  flex-shrink: 0;
2622
- min-height: 32px;
2641
+ min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2623
2642
  display: flex;
2624
2643
  align-items: center;
2625
- line-height: 20px;
2644
+ line-height: var(--wpds-typography-line-height-sm, 20px);
2626
2645
  hyphens: auto;
2627
2646
  }
2628
2647
 
@@ -2636,7 +2655,7 @@ div.dataviews-view-list {
2636
2655
 
2637
2656
  .dataforms-layouts-regular__field-control {
2638
2657
  flex-grow: 1;
2639
- min-height: 32px;
2658
+ min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2640
2659
  display: flex;
2641
2660
  align-items: center;
2642
2661
  }
@@ -2654,26 +2673,26 @@ div.dataviews-view-list {
2654
2673
  }
2655
2674
 
2656
2675
  .dataforms-layouts-card__field-description {
2657
- color: #757575;
2676
+ color: var(--wpds-color-fg-content-neutral-weak, #707070);
2658
2677
  display: block;
2659
- font-size: 13px;
2660
- margin-bottom: 16px;
2678
+ font-size: var(--wpds-typography-font-size-md, 13px);
2679
+ margin-bottom: var(--wpds-dimension-gap-lg, 16px);
2661
2680
  }
2662
2681
 
2663
2682
  .dataforms-layouts-card__field-summary {
2664
2683
  display: flex;
2665
2684
  flex-direction: row;
2666
- gap: 16px;
2685
+ gap: var(--wpds-dimension-gap-lg, 16px);
2667
2686
  align-items: center;
2668
2687
  }
2669
2688
 
2670
2689
  .dataforms-layouts-details__summary-content {
2671
2690
  display: inline-flex;
2672
- min-height: 24px;
2691
+ min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2673
2692
  }
2674
2693
 
2675
2694
  .dataforms-layouts-details__content {
2676
- padding-top: 12px;
2695
+ padding-top: var(--wpds-dimension-padding-md, 12px);
2677
2696
  }
2678
2697
 
2679
2698
  .dataforms-layouts-row__field-control {
@@ -5399,6 +5418,63 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
5399
5418
  font-size: var(--wpds-typography-font-size-sm, 12px);
5400
5419
  }
5401
5420
 
5421
+ body.has-admin-bar-in-editor {
5422
+ margin-top: 0;
5423
+ height: 100%;
5424
+ }
5425
+ body.has-admin-bar-in-editor:has(.editor-editor-interface.is-distraction-free) {
5426
+ --wp-admin--admin-bar--height: 0;
5427
+ }
5428
+ body.has-admin-bar-in-editor .edit-site-site-hub__title,
5429
+ body.has-admin-bar-in-editor .edit-site-site-hub__actions {
5430
+ display: none;
5431
+ }
5432
+ body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle .edit-site-editor__back-icon {
5433
+ background: transparent;
5434
+ }
5435
+ body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle:hover .edit-site-editor__back-icon {
5436
+ color: var(--wp-admin-theme-color);
5437
+ }
5438
+ body.has-admin-bar-in-editor .edit-site-sidebar-navigation-screen__title-icon {
5439
+ padding-top: 16px;
5440
+ }
5441
+ body.has-admin-bar-in-editor .edit-site-layout__content,
5442
+ body.has-admin-bar-in-editor .edit-site-layout__sidebar {
5443
+ min-height: 0;
5444
+ }
5445
+ body.has-admin-bar-in-editor .edit-site-sidebar__content {
5446
+ flex-basis: 0;
5447
+ min-height: 0;
5448
+ }
5449
+ body.has-admin-bar-in-editor .edit-site {
5450
+ box-sizing: border-box;
5451
+ padding-top: var(--wp-admin--admin-bar--height, 0);
5452
+ height: 100vh;
5453
+ min-height: 100vh;
5454
+ }
5455
+ @media (min-width: 600px) {
5456
+ body.has-admin-bar-in-editor .edit-site {
5457
+ padding-top: 0;
5458
+ top: var(--wp-admin--admin-bar--height, 0);
5459
+ height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5460
+ min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5461
+ }
5462
+ }
5463
+ body.has-admin-bar-in-editor .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
5464
+ top: var(--wp-admin--admin-bar--height, 0);
5465
+ height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5466
+ }
5467
+ body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus,
5468
+ body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
5469
+ top: var(--wp-admin--admin-bar--height, 0);
5470
+ }
5471
+ body.has-admin-bar-in-editor.is-fullscreen-mode #wpadminbar {
5472
+ display: block;
5473
+ }
5474
+ body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
5475
+ display: none;
5476
+ }
5477
+
5402
5478
  /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
5403
5479
  ::view-transition-image-pair(root) {
5404
5480
  isolation: auto;