@wordpress/edit-site 6.48.1 → 6.48.2-next.v.202606191442.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/build/components/editor/use-editor-title.cjs +1 -1
  2. package/build/components/editor/use-editor-title.cjs.map +2 -2
  3. package/build/components/layout/index.cjs +25 -5
  4. package/build/components/layout/index.cjs.map +2 -2
  5. package/build/components/page-templates/index-legacy.cjs +12 -8
  6. package/build/components/page-templates/index-legacy.cjs.map +2 -2
  7. package/build/components/resizable-frame/index.cjs.map +2 -2
  8. package/build/components/routes/use-title.cjs +1 -1
  9. package/build/components/routes/use-title.cjs.map +2 -2
  10. package/build/components/save-button/index.cjs +2 -2
  11. package/build/components/save-button/index.cjs.map +1 -1
  12. package/build/components/save-hub/index.cjs +3 -3
  13. package/build/components/save-hub/index.cjs.map +3 -3
  14. package/build/components/sidebar-navigation-item/index.cjs +8 -3
  15. package/build/components/sidebar-navigation-item/index.cjs.map +3 -3
  16. package/build/components/sidebar-navigation-screen-global-styles/index.cjs +2 -18
  17. package/build/components/sidebar-navigation-screen-global-styles/index.cjs.map +3 -3
  18. package/build/components/sidebar-navigation-screen-identity/index.cjs +0 -19
  19. package/build/components/sidebar-navigation-screen-identity/index.cjs.map +3 -3
  20. package/build/components/sidebar-navigation-screen-main/index.cjs +25 -25
  21. package/build/components/sidebar-navigation-screen-main/index.cjs.map +2 -2
  22. package/build/components/sidebar-navigation-screen-patterns/index.cjs +1 -1
  23. package/build/components/sidebar-navigation-screen-patterns/index.cjs.map +2 -2
  24. package/build/components/welcome-guide/editor.cjs +1 -1
  25. package/build/components/welcome-guide/editor.cjs.map +1 -1
  26. package/build/components/welcome-guide/page.cjs +1 -1
  27. package/build/components/welcome-guide/page.cjs.map +1 -1
  28. package/build/components/welcome-guide/template.cjs +1 -1
  29. package/build/components/welcome-guide/template.cjs.map +1 -1
  30. package/build-module/components/editor/use-editor-title.mjs +1 -1
  31. package/build-module/components/editor/use-editor-title.mjs.map +2 -2
  32. package/build-module/components/layout/index.mjs +25 -5
  33. package/build-module/components/layout/index.mjs.map +2 -2
  34. package/build-module/components/page-templates/index-legacy.mjs +13 -9
  35. package/build-module/components/page-templates/index-legacy.mjs.map +2 -2
  36. package/build-module/components/resizable-frame/index.mjs.map +2 -2
  37. package/build-module/components/routes/use-title.mjs +1 -1
  38. package/build-module/components/routes/use-title.mjs.map +2 -2
  39. package/build-module/components/save-button/index.mjs +2 -2
  40. package/build-module/components/save-button/index.mjs.map +1 -1
  41. package/build-module/components/save-hub/index.mjs +3 -3
  42. package/build-module/components/save-hub/index.mjs.map +2 -2
  43. package/build-module/components/sidebar-navigation-item/index.mjs +9 -8
  44. package/build-module/components/sidebar-navigation-item/index.mjs.map +2 -2
  45. package/build-module/components/sidebar-navigation-screen-global-styles/index.mjs +2 -14
  46. package/build-module/components/sidebar-navigation-screen-global-styles/index.mjs.map +2 -2
  47. package/build-module/components/sidebar-navigation-screen-identity/index.mjs +0 -15
  48. package/build-module/components/sidebar-navigation-screen-identity/index.mjs.map +2 -2
  49. package/build-module/components/sidebar-navigation-screen-main/index.mjs +25 -25
  50. package/build-module/components/sidebar-navigation-screen-main/index.mjs.map +2 -2
  51. package/build-module/components/sidebar-navigation-screen-patterns/index.mjs +1 -1
  52. package/build-module/components/sidebar-navigation-screen-patterns/index.mjs.map +2 -2
  53. package/build-module/components/welcome-guide/editor.mjs +1 -1
  54. package/build-module/components/welcome-guide/editor.mjs.map +1 -1
  55. package/build-module/components/welcome-guide/page.mjs +1 -1
  56. package/build-module/components/welcome-guide/page.mjs.map +1 -1
  57. package/build-module/components/welcome-guide/template.mjs +1 -1
  58. package/build-module/components/welcome-guide/template.mjs.map +1 -1
  59. package/build-style/{experimental-admin-bar-in-editor-rtl.css → experimental-omnibar-rtl.css} +46 -1
  60. package/build-style/{experimental-admin-bar-in-editor.css → experimental-omnibar.css} +46 -1
  61. package/build-style/style-rtl.css +222 -241
  62. package/build-style/style.css +222 -241
  63. package/package.json +48 -48
  64. package/src/components/layout/index.js +20 -9
  65. package/src/components/layout/style.scss +19 -12
  66. package/src/components/page-patterns/style.scss +1 -1
  67. package/src/components/page-templates/index-legacy.js +17 -9
  68. package/src/components/page-templates/style.scss +0 -5
  69. package/src/components/resizable-frame/index.js +0 -1
  70. package/src/components/save-hub/index.js +4 -4
  71. package/src/components/save-hub/style.scss +3 -3
  72. package/src/components/sidebar-button/style.scss +2 -2
  73. package/src/components/sidebar-global-styles/style.scss +1 -1
  74. package/src/components/sidebar-navigation-item/index.js +11 -9
  75. package/src/components/sidebar-navigation-item/style.scss +6 -6
  76. package/src/components/sidebar-navigation-screen/style.scss +8 -8
  77. package/src/components/sidebar-navigation-screen-global-styles/index.js +2 -15
  78. package/src/components/sidebar-navigation-screen-identity/index.js +0 -15
  79. package/src/components/sidebar-navigation-screen-main/index.js +24 -22
  80. package/src/components/sidebar-navigation-screen-navigation-menu/style.scss +2 -2
  81. package/src/components/sidebar-navigation-screen-navigation-menus/style.scss +8 -8
  82. package/src/components/sidebar-navigation-screen-patterns/style.scss +1 -1
  83. package/src/components/site-hub/style.scss +5 -5
  84. package/src/components/welcome-guide/page.js +1 -1
  85. package/src/{experimental-admin-bar-in-editor.scss → experimental-omnibar.scss} +3 -1
  86. package/src/style.scss +2 -2
@@ -209,7 +209,7 @@
209
209
  flex-direction: column;
210
210
  font-size: var(--wpds-typography-font-size-md, 13px);
211
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));
212
+ background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
213
213
  }
214
214
 
215
215
  .dataviews__view-actions,
@@ -275,7 +275,7 @@
275
275
  .dataviews-title-field {
276
276
  font-size: var(--wpds-typography-font-size-md, 13px);
277
277
  font-weight: var(--wpds-typography-font-weight-medium, 499);
278
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
278
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
279
279
  text-overflow: ellipsis;
280
280
  white-space: nowrap;
281
281
  width: 100%;
@@ -288,11 +288,11 @@
288
288
  overflow: hidden;
289
289
  display: block;
290
290
  flex-grow: 0;
291
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
291
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
292
292
  }
293
293
 
294
294
  .dataviews-title-field a:hover {
295
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
295
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
296
296
  }
297
297
 
298
298
  .dataviews-title-field a:focus {
@@ -309,20 +309,20 @@
309
309
  overflow: hidden;
310
310
  display: block;
311
311
  width: 100%;
312
- color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
312
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
313
313
  }
314
314
 
315
315
  .dataviews-title-field button.components-button.is-link:hover {
316
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
316
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
317
317
  }
318
318
 
319
319
  .dataviews-title-field--clickable {
320
320
  cursor: var(--wpds-cursor-control, pointer);
321
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
321
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
322
322
  }
323
323
 
324
324
  .dataviews-title-field--clickable:hover {
325
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
325
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
326
326
  }
327
327
 
328
328
  .dataviews-title-field--clickable:focus {
@@ -348,12 +348,12 @@
348
348
  }
349
349
 
350
350
  .dataviews-bulk-actions-footer__item-count {
351
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
351
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
352
352
  }
353
353
 
354
354
  .dataviews-bulk-actions-footer__container {
355
355
  margin-right: auto;
356
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
356
+ min-height: var(--wpds-dimension-size-md, 32px);
357
357
  }
358
358
 
359
359
  .dataviews-layout__container {
@@ -410,7 +410,7 @@
410
410
  }
411
411
 
412
412
  .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name {
413
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
413
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
414
414
  white-space: nowrap;
415
415
  overflow: hidden;
416
416
  text-overflow: ellipsis;
@@ -434,8 +434,8 @@
434
434
  border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
435
435
  cursor: var(--wpds-cursor-control, pointer);
436
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);
437
+ min-height: var(--wpds-dimension-size-md, 32px);
438
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
439
439
  position: relative;
440
440
  display: flex;
441
441
  align-items: center;
@@ -447,30 +447,30 @@
447
447
  }
448
448
 
449
449
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
450
- padding-inline-end: calc(24px + var(--wpds-dimension-padding-xs, 4px));
450
+ padding-inline-end: calc(var(--wpds-dimension-size-sm, 24px) + var(--wpds-dimension-padding-xs, 4px));
451
451
  }
452
452
 
453
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] {
454
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
454
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
455
455
  border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
456
- background-color: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
456
+ background-color: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
457
457
  }
458
458
 
459
459
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values {
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));
460
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
461
+ background: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0));
462
462
  border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
463
463
  }
464
464
 
465
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));
466
+ color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
467
+ background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
468
468
  border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
469
469
  }
470
470
 
471
471
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible {
472
472
  outline: none;
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));
473
+ box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
474
474
  }
475
475
 
476
476
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
@@ -478,8 +478,8 @@
478
478
  }
479
479
 
480
480
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
481
- width: 24px;
482
- height: 24px;
481
+ width: var(--wpds-dimension-size-sm, 24px);
482
+ height: var(--wpds-dimension-size-sm, 24px);
483
483
  border-radius: var(--wpds-border-radius-md, 4px);
484
484
  border: 0;
485
485
  padding: 0;
@@ -495,28 +495,28 @@
495
495
  }
496
496
 
497
497
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
498
- fill: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
498
+ fill: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
499
499
  }
500
500
 
501
501
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
502
- background: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
502
+ background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
503
503
  }
504
504
 
505
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 {
506
- fill: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
506
+ fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
507
507
  }
508
508
 
509
509
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
510
- fill: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
510
+ fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
511
511
  }
512
512
 
513
513
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
514
- background: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
514
+ background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
515
515
  }
516
516
 
517
517
  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus-visible {
518
518
  outline: none;
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));
519
+ box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
520
520
  }
521
521
 
522
522
  .dataviews-filters__search-widget-filter-combobox-list {
@@ -543,7 +543,7 @@
543
543
  box-sizing: border-box;
544
544
  padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
545
545
  cursor: default;
546
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
546
+ min-height: var(--wpds-dimension-size-md, 32px);
547
547
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
548
548
  font-weight: 400;
549
549
  font-size: 13px;
@@ -555,27 +555,27 @@
555
555
  }
556
556
 
557
557
  .dataviews-filters__search-widget-listitem:hover, .dataviews-filters__search-widget-listitem[data-active-item], .dataviews-filters__search-widget-listitem:focus {
558
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
558
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
559
559
  }
560
560
 
561
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 {
562
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);
563
+ background: var(--wpds-color-background-surface-neutral-strong, #fff);
564
564
  }
565
565
 
566
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 {
567
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));
568
+ background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
569
569
  }
570
570
 
571
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 {
572
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);
573
+ background: var(--wpds-color-background-surface-neutral-strong, #fff);
574
574
  }
575
575
 
576
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 {
577
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));
578
+ background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
579
579
  }
580
580
 
581
581
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-value {
@@ -591,7 +591,7 @@
591
591
  text-overflow: ellipsis;
592
592
  font-size: var(--wpds-typography-font-size-sm, 12px);
593
593
  line-height: 16px;
594
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
594
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
595
595
  }
596
596
 
597
597
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
@@ -654,7 +654,7 @@
654
654
  }
655
655
 
656
656
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected {
657
- background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
657
+ background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
658
658
  border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
659
659
  }
660
660
 
@@ -669,8 +669,8 @@
669
669
  left: 50%;
670
670
  transform: translate(-50%, -50%);
671
671
  margin: 0;
672
- background-color: var(--wpds-color-fg-interactive-brand-strong, #fff);
673
- border: 4px solid var(--wpds-color-fg-interactive-brand-strong, #fff);
672
+ background-color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
673
+ border: 4px solid var(--wpds-color-foreground-interactive-brand-strong, #fff);
674
674
  }
675
675
 
676
676
  @media (min-width: 600px) {
@@ -776,8 +776,8 @@
776
776
 
777
777
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
778
778
  position: relative;
779
- background: var(--wpds-color-bg-interactive-neutral-weak, rgba(0, 0, 0, 0));
780
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
779
+ background: var(--wpds-color-background-interactive-neutral-weak, rgba(0, 0, 0, 0));
780
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
781
781
  margin: 0;
782
782
  padding: 0;
783
783
  width: var(--checkbox-size);
@@ -795,13 +795,13 @@
795
795
  }
796
796
  }
797
797
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
798
- background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
798
+ background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
799
799
  border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
800
800
  }
801
801
 
802
802
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
803
803
  --checkmark-size: var(--checkbox-size);
804
- fill: var(--wpds-color-fg-interactive-neutral-strong, #f0f0f0);
804
+ fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
805
805
  position: absolute;
806
806
  left: 50%;
807
807
  top: 50%;
@@ -860,9 +860,9 @@
860
860
 
861
861
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
862
862
  display: block;
863
- padding: 0 var(--wpds-dimension-padding-sm, 8px) 0 calc(var(--wpds-dimension-base, 4px) * 8);
863
+ padding: 0 var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-size-md, 32px);
864
864
  width: 100%;
865
- height: calc(var(--wpds-dimension-base, 4px) * 8);
865
+ height: var(--wpds-dimension-size-md, 32px);
866
866
  margin-left: 0;
867
867
  margin-right: 0;
868
868
  /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -875,16 +875,16 @@
875
875
  }
876
876
  }
877
877
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
878
- background: var(--wpds-color-bg-surface-neutral-strong, #fff);
879
- 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));
878
+ background: var(--wpds-color-background-surface-neutral-strong, #fff);
879
+ box-shadow: inset 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
880
880
  }
881
881
 
882
882
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
883
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
883
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
884
884
  }
885
885
 
886
886
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
887
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
887
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
888
888
  }
889
889
 
890
890
  .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 {
@@ -899,7 +899,7 @@
899
899
  display: flex;
900
900
  align-items: center;
901
901
  justify-content: center;
902
- width: 24px;
902
+ width: var(--wpds-dimension-size-sm, 24px);
903
903
  }
904
904
 
905
905
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon:dir(ltr) {
@@ -916,16 +916,16 @@
916
916
  top: 0;
917
917
  right: 0;
918
918
  transform: translate(50%, -50%);
919
- background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
920
- height: calc(var(--wpds-dimension-base, 4px) * 4);
921
- min-width: calc(var(--wpds-dimension-base, 4px) * 4);
919
+ background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
920
+ height: var(--wpds-dimension-size-2xs, 16px);
921
+ min-width: var(--wpds-dimension-size-2xs, 16px);
922
922
  line-height: var(--wpds-typography-line-height-xs, 16px);
923
923
  padding: 0 var(--wpds-dimension-padding-xs, 4px);
924
924
  text-align: center;
925
925
  border-radius: var(--wpds-border-radius-lg, 8px);
926
926
  font-size: 11px;
927
- outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-bg-surface-neutral-strong, #fff);
928
- color: var(--wpds-color-fg-interactive-neutral-strong, #f0f0f0);
927
+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-background-surface-neutral-strong, #fff);
928
+ color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
929
929
  box-sizing: border-box;
930
930
  }
931
931
 
@@ -1109,7 +1109,7 @@
1109
1109
  right: var(--wpds-dimension-gap-xs, 4px);
1110
1110
  width: var(--wpds-dimension-gap-xs, 4px);
1111
1111
  height: var(--wpds-dimension-gap-xs, 4px);
1112
- background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
1112
+ background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
1113
1113
  border-radius: 50%;
1114
1114
  pointer-events: none;
1115
1115
  }
@@ -1184,7 +1184,7 @@
1184
1184
  left: 0;
1185
1185
  width: 100%;
1186
1186
  height: 100%;
1187
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1187
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1188
1188
  border-radius: var(--wpds-border-radius-md, 4px);
1189
1189
  pointer-events: none;
1190
1190
  outline: 2px solid transparent;
@@ -1205,7 +1205,7 @@
1205
1205
 
1206
1206
  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field,
1207
1207
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field {
1208
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1208
+ min-height: var(--wpds-dimension-size-sm, 24px);
1209
1209
  overflow: hidden;
1210
1210
  align-content: center;
1211
1211
  text-align: start;
@@ -1219,24 +1219,24 @@
1219
1219
 
1220
1220
  .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
1221
1221
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
1222
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1222
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1223
1223
  }
1224
1224
 
1225
1225
  .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
1226
1226
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
1227
- 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);
1227
+ box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
1228
1228
  }
1229
1229
 
1230
1230
  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
1231
1231
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
1232
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1232
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1233
1233
  }
1234
1234
 
1235
1235
  .dataviews-view-grid .dataviews-view-grid__media,
1236
1236
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
1237
1237
  width: 100%;
1238
1238
  aspect-ratio: 1/1;
1239
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1239
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1240
1240
  border-radius: var(--wpds-border-radius-md, 4px);
1241
1241
  overflow: hidden;
1242
1242
  position: relative;
@@ -1275,7 +1275,7 @@
1275
1275
  display: block;
1276
1276
  border-radius: var(--wpds-border-radius-md, 4px);
1277
1277
  box-shadow: none;
1278
- background: var(--wpds-color-bg-surface-neutral, #fcfcfc);
1278
+ background: var(--wpds-color-background-surface-neutral, #fcfcfc);
1279
1279
  }
1280
1280
 
1281
1281
  .dataviews-view-grid .dataviews-view-grid__fields,
@@ -1292,21 +1292,21 @@
1292
1292
 
1293
1293
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty),
1294
1294
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
1295
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1295
+ min-height: var(--wpds-dimension-size-sm, 24px);
1296
1296
  line-height: var(--wpds-typography-line-height-sm, 20px);
1297
1297
  padding-top: calc(var(--wpds-dimension-base, 4px) / 2);
1298
1298
  }
1299
1299
 
1300
1300
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field,
1301
1301
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field {
1302
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1302
+ min-height: var(--wpds-dimension-size-sm, 24px);
1303
1303
  align-items: center;
1304
1304
  }
1305
1305
 
1306
1306
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name,
1307
1307
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
1308
1308
  width: 35%;
1309
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
1309
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1310
1310
  overflow: hidden;
1311
1311
  text-overflow: ellipsis;
1312
1312
  white-space: nowrap;
@@ -1383,7 +1383,7 @@
1383
1383
  }
1384
1384
 
1385
1385
  .dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
1386
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1386
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1387
1387
  }
1388
1388
 
1389
1389
  @media not (prefers-reduced-motion) {
@@ -1410,7 +1410,7 @@
1410
1410
  .dataviews-view-grid__group-header {
1411
1411
  font-size: var(--wpds-typography-font-size-lg, 15px);
1412
1412
  font-weight: var(--wpds-typography-font-weight-medium, 499);
1413
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1413
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1414
1414
  margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1415
1415
  padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1416
1416
  container-type: inline-size;
@@ -1455,7 +1455,7 @@ div.dataviews-view-list {
1455
1455
 
1456
1456
  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > div,
1457
1457
  .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > div {
1458
- height: 24px;
1458
+ height: var(--wpds-dimension-size-sm, 24px);
1459
1459
  }
1460
1460
 
1461
1461
  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
@@ -1495,8 +1495,8 @@ div.dataviews-view-list {
1495
1495
  .dataviews-view-list div[role=article]:not(.is-selected):hover,
1496
1496
  .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
1497
1497
  .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
1498
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1499
- background-color: var(--wpds-color-bg-interactive-brand-weak, rgba(0, 0, 0, 0));
1498
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1499
+ background-color: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0));
1500
1500
  }
1501
1501
 
1502
1502
  .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
@@ -1509,15 +1509,15 @@ div.dataviews-view-list {
1509
1509
  .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
1510
1510
  .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
1511
1511
  .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
1512
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1512
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1513
1513
  }
1514
1514
 
1515
1515
  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
1516
1516
  .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
1517
1517
  .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
1518
1518
  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
1519
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1520
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
1519
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1520
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1521
1521
  }
1522
1522
 
1523
1523
  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
@@ -1528,7 +1528,7 @@ div.dataviews-view-list {
1528
1528
  .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1529
1529
  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
1530
1530
  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
1531
- color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
1531
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1532
1532
  }
1533
1533
 
1534
1534
  .dataviews-view-list .dataviews-view-list__item {
@@ -1553,14 +1553,14 @@ div.dataviews-view-list {
1553
1553
  position: absolute;
1554
1554
  content: "";
1555
1555
  inset: var(--wp-admin-border-width-focus);
1556
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1556
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1557
1557
  border-radius: var(--wpds-border-radius-sm, 2px);
1558
1558
  outline: 2px solid transparent;
1559
1559
  }
1560
1560
 
1561
1561
  .dataviews-view-list .dataviews-view-list__title-field {
1562
1562
  flex: 1;
1563
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1563
+ min-height: var(--wpds-dimension-size-sm, 24px);
1564
1564
  line-height: var(--wpds-typography-line-height-md, 24px);
1565
1565
  overflow: hidden;
1566
1566
  }
@@ -1575,7 +1575,7 @@ div.dataviews-view-list {
1575
1575
  overflow: hidden;
1576
1576
  position: relative;
1577
1577
  flex-shrink: 0;
1578
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1578
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1579
1579
  border-radius: var(--wpds-border-radius-md, 4px);
1580
1580
  }
1581
1581
 
@@ -1604,7 +1604,7 @@ div.dataviews-view-list {
1604
1604
  }
1605
1605
 
1606
1606
  .dataviews-view-list .dataviews-view-list__field {
1607
- color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
1607
+ color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
1608
1608
  }
1609
1609
 
1610
1610
  .dataviews-view-list .dataviews-view-list__fields {
@@ -1624,7 +1624,7 @@ div.dataviews-view-list {
1624
1624
  }
1625
1625
 
1626
1626
  .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
1627
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1627
+ min-height: var(--wpds-dimension-size-sm, 24px);
1628
1628
  line-height: var(--wpds-typography-line-height-sm, 20px);
1629
1629
  display: flex;
1630
1630
  align-items: center;
@@ -1639,17 +1639,17 @@ div.dataviews-view-list {
1639
1639
  }
1640
1640
 
1641
1641
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__title-field {
1642
- min-height: calc(var(--wpds-dimension-base, 4px) * 4);
1642
+ min-height: var(--wpds-dimension-size-2xs, 16px);
1643
1643
  line-height: var(--wpds-typography-line-height-xs, 16px);
1644
1644
  }
1645
1645
 
1646
1646
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__media-wrapper {
1647
- width: calc(var(--wpds-dimension-base, 4px) * 8);
1648
- height: calc(var(--wpds-dimension-base, 4px) * 8);
1647
+ width: var(--wpds-dimension-size-md, 32px);
1648
+ height: var(--wpds-dimension-size-md, 32px);
1649
1649
  }
1650
1650
 
1651
1651
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__field-wrapper {
1652
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1652
+ min-height: var(--wpds-dimension-size-md, 32px);
1653
1653
  }
1654
1654
 
1655
1655
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields {
@@ -1658,7 +1658,7 @@ div.dataviews-view-list {
1658
1658
  }
1659
1659
 
1660
1660
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
1661
- min-height: calc(var(--wpds-dimension-base, 4px) * 4);
1661
+ min-height: var(--wpds-dimension-size-2xs, 16px);
1662
1662
  line-height: var(--wpds-typography-line-height-xs, 16px);
1663
1663
  }
1664
1664
 
@@ -1667,7 +1667,7 @@ div.dataviews-view-list {
1667
1667
  }
1668
1668
 
1669
1669
  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__title-field {
1670
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1670
+ min-height: var(--wpds-dimension-size-md, 32px);
1671
1671
  line-height: var(--wpds-typography-line-height-xl, 32px);
1672
1672
  }
1673
1673
 
@@ -1686,7 +1686,7 @@ div.dataviews-view-list {
1686
1686
  }
1687
1687
 
1688
1688
  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
1689
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1689
+ min-height: var(--wpds-dimension-size-md, 32px);
1690
1690
  line-height: var(--wpds-typography-line-height-md, 24px);
1691
1691
  }
1692
1692
 
@@ -1704,7 +1704,7 @@ div.dataviews-view-list {
1704
1704
  .dataviews-view-list__group-header {
1705
1705
  font-size: var(--wpds-typography-font-size-lg, 15px);
1706
1706
  font-weight: var(--wpds-typography-font-weight-medium, 499);
1707
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1707
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1708
1708
  margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1709
1709
  padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1710
1710
  }
@@ -1715,14 +1715,14 @@ div.dataviews-view-list {
1715
1715
  border-color: inherit;
1716
1716
  border-collapse: collapse;
1717
1717
  position: relative;
1718
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
1718
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1719
1719
  margin-bottom: auto;
1720
1720
  background-color: inherit;
1721
1721
  }
1722
1722
 
1723
1723
  .dataviews-view-table th {
1724
1724
  text-align: left;
1725
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1725
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1726
1726
  font-weight: normal;
1727
1727
  font-size: var(--wpds-typography-font-size-md, 13px);
1728
1728
  }
@@ -1741,7 +1741,7 @@ div.dataviews-view-list {
1741
1741
  .dataviews-view-table th.dataviews-view-table__actions-column--sticky {
1742
1742
  position: sticky;
1743
1743
  right: 0;
1744
- background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong, #fff));
1744
+ background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
1745
1745
  }
1746
1746
 
1747
1747
  .dataviews-view-table td.dataviews-view-table__actions-column--stuck::after,
@@ -1753,7 +1753,7 @@ div.dataviews-view-list {
1753
1753
  bottom: 0;
1754
1754
  left: 0;
1755
1755
  width: 1px;
1756
- background-color: var(--wpds-color-bg-surface-neutral, #fcfcfc);
1756
+ background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
1757
1757
  }
1758
1758
 
1759
1759
  .dataviews-view-table td.dataviews-view-table__checkbox-column,
@@ -1796,8 +1796,8 @@ div.dataviews-view-list {
1796
1796
  }
1797
1797
  }
1798
1798
  .dataviews-view-table tr.is-selected {
1799
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1800
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1799
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1800
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1801
1801
  }
1802
1802
 
1803
1803
  .dataviews-view-table tr.is-selected, .dataviews-view-table tr.is-selected + tr {
@@ -1805,7 +1805,7 @@ div.dataviews-view-list {
1805
1805
  }
1806
1806
 
1807
1807
  .dataviews-view-table tr.is-selected .dataviews-view-table__actions-column--sticky {
1808
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1808
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1809
1809
  }
1810
1810
 
1811
1811
  .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) {
@@ -1813,11 +1813,11 @@ div.dataviews-view-list {
1813
1813
  }
1814
1814
 
1815
1815
  .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 {
1816
- background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong, #fff));
1816
+ background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
1817
1817
  }
1818
1818
 
1819
1819
  .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 {
1820
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1820
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1821
1821
  }
1822
1822
 
1823
1823
  .dataviews-view-table thead {
@@ -1873,7 +1873,7 @@ div.dataviews-view-list {
1873
1873
  }
1874
1874
 
1875
1875
  .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
1876
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1876
+ min-height: var(--wpds-dimension-size-md, 32px);
1877
1877
  display: flex;
1878
1878
  align-items: center;
1879
1879
  white-space: nowrap;
@@ -1900,7 +1900,7 @@ div.dataviews-view-list {
1900
1900
  }
1901
1901
 
1902
1902
  .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
1903
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
1903
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1904
1904
  }
1905
1905
 
1906
1906
  .dataviews-view-table .dataviews-view-table-header-button span {
@@ -1955,18 +1955,18 @@ div.dataviews-view-list {
1955
1955
  }
1956
1956
  .dataviews-column-primary__media {
1957
1957
  max-width: 60px;
1958
- min-width: calc(var(--wpds-dimension-base, 4px) * 8);
1959
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1958
+ min-width: var(--wpds-dimension-size-md, 32px);
1959
+ min-height: var(--wpds-dimension-size-md, 32px);
1960
1960
  overflow: hidden;
1961
1961
  position: relative;
1962
1962
  flex-shrink: 0;
1963
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1963
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1964
1964
  border-radius: var(--wpds-border-radius-md, 4px);
1965
1965
  }
1966
1966
 
1967
1967
  .dataviews-column-primary__media img {
1968
- width: calc(var(--wpds-dimension-base, 4px) * 8);
1969
- height: calc(var(--wpds-dimension-base, 4px) * 8);
1968
+ width: var(--wpds-dimension-size-md, 32px);
1969
+ height: var(--wpds-dimension-size-md, 32px);
1970
1970
  -o-object-fit: cover;
1971
1971
  object-fit: cover;
1972
1972
  }
@@ -1991,7 +1991,7 @@ div.dataviews-view-list {
1991
1991
  .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
1992
1992
  font-weight: var(--wpds-typography-font-weight-medium, 499);
1993
1993
  padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
1994
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1994
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1995
1995
  }
1996
1996
 
1997
1997
  /* Column width intents via colgroup: make non-primary columns shrink-to-fit */
@@ -2030,7 +2030,7 @@ div.dataviews-view-list {
2030
2030
  }
2031
2031
 
2032
2032
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
2033
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2033
+ min-height: var(--wpds-dimension-size-sm, 24px);
2034
2034
  overflow: hidden;
2035
2035
  align-content: center;
2036
2036
  text-align: start;
@@ -2042,15 +2042,15 @@ div.dataviews-view-list {
2042
2042
  }
2043
2043
 
2044
2044
  .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 {
2045
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2045
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2046
2046
  }
2047
2047
 
2048
2048
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
2049
- 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);
2049
+ box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
2050
2050
  }
2051
2051
 
2052
2052
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
2053
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2053
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2054
2054
  }
2055
2055
 
2056
2056
  .dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
@@ -2058,7 +2058,7 @@ div.dataviews-view-list {
2058
2058
  }
2059
2059
 
2060
2060
  .dataviews-view-picker-grid:focus-visible [data-active-item=true] {
2061
- outline: 2px solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2061
+ outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2062
2062
  }
2063
2063
 
2064
2064
  .dataviews-view-picker-grid .dataviews-selection-checkbox {
@@ -2073,7 +2073,7 @@ div.dataviews-view-list {
2073
2073
  width: 100%;
2074
2074
  aspect-ratio: 1/1;
2075
2075
  min-height: 0;
2076
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
2076
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2077
2077
  border-radius: var(--wpds-border-radius-md, 4px);
2078
2078
  position: relative;
2079
2079
  }
@@ -2108,19 +2108,19 @@ div.dataviews-view-list {
2108
2108
  }
2109
2109
 
2110
2110
  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
2111
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2111
+ min-height: var(--wpds-dimension-size-sm, 24px);
2112
2112
  line-height: var(--wpds-typography-line-height-sm, 20px);
2113
2113
  padding-top: calc(var(--wpds-dimension-base, 4px) / 2);
2114
2114
  }
2115
2115
 
2116
2116
  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
2117
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2117
+ min-height: var(--wpds-dimension-size-sm, 24px);
2118
2118
  align-items: center;
2119
2119
  }
2120
2120
 
2121
2121
  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
2122
2122
  width: 35%;
2123
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2123
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2124
2124
  overflow: hidden;
2125
2125
  text-overflow: ellipsis;
2126
2126
  white-space: nowrap;
@@ -2171,7 +2171,7 @@ div.dataviews-view-list {
2171
2171
  .dataviews-view-picker-grid-group__header {
2172
2172
  font-size: var(--wpds-typography-font-size-lg, 15px);
2173
2173
  font-weight: var(--wpds-typography-font-weight-medium, 499);
2174
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2174
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2175
2175
  margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2176
2176
  padding: 0 calc(var(--wpds-dimension-base, 4px) * 12);
2177
2177
  }
@@ -2189,7 +2189,7 @@ div.dataviews-view-list {
2189
2189
  }
2190
2190
 
2191
2191
  .dataviews-view-picker-table tbody:focus-visible [data-active-item=true] {
2192
- outline: 2px solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2192
+ outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2193
2193
  }
2194
2194
 
2195
2195
  .dataviews-view-picker-table .dataviews-selection-checkbox .components-checkbox-control__input.components-checkbox-control__input {
@@ -2202,15 +2202,15 @@ div.dataviews-view-list {
2202
2202
  }
2203
2203
 
2204
2204
  .dataviews-view-picker-table .dataviews-view-table__row.is-selected {
2205
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2205
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2206
2206
  }
2207
2207
 
2208
2208
  .dataviews-view-picker-table .dataviews-view-table__row.is-hovered {
2209
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2209
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2210
2210
  }
2211
2211
 
2212
2212
  .dataviews-view-picker-table .dataviews-view-table__row.is-selected.is-hovered {
2213
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2213
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2214
2214
  }
2215
2215
 
2216
2216
  .dataviews-view-activity {
@@ -2221,13 +2221,13 @@ div.dataviews-view-list {
2221
2221
  .dataviews-view-activity .dataviews-view-activity__group-header {
2222
2222
  font-size: var(--wpds-typography-font-size-lg, 15px);
2223
2223
  font-weight: var(--wpds-typography-font-weight-medium, 499);
2224
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2224
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2225
2225
  margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2226
2226
  padding: 0;
2227
2227
  }
2228
2228
 
2229
2229
  .dataviews-view-activity .dataviews-view-activity__item-actions {
2230
- min-width: calc(var(--wpds-dimension-base, 4px) * 6);
2230
+ min-width: var(--wpds-dimension-size-sm, 24px);
2231
2231
  }
2232
2232
 
2233
2233
  .dataviews-view-activity .dataviews-view-activity__item-content {
@@ -2237,7 +2237,7 @@ div.dataviews-view-list {
2237
2237
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title,
2238
2238
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-description,
2239
2239
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
2240
- min-height: calc(var(--wpds-dimension-base, 4px) * 4);
2240
+ min-height: var(--wpds-dimension-size-2xs, 16px);
2241
2241
  }
2242
2242
 
2243
2243
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title {
@@ -2253,7 +2253,7 @@ div.dataviews-view-list {
2253
2253
  }
2254
2254
 
2255
2255
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable:focus-visible {
2256
- outline: var(--wp-admin-border-width-focus) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2256
+ outline: var(--wp-admin-border-width-focus) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2257
2257
  outline-offset: var(--wp-admin-border-width-focus);
2258
2258
  border-radius: var(--wpds-border-radius-sm, 2px);
2259
2259
  }
@@ -2271,7 +2271,7 @@ div.dataviews-view-list {
2271
2271
  }
2272
2272
 
2273
2273
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
2274
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2274
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2275
2275
  display: flex;
2276
2276
  gap: var(--wpds-dimension-gap-md, 12px);
2277
2277
  row-gap: var(--wpds-dimension-gap-xs, 4px);
@@ -2317,7 +2317,7 @@ div.dataviews-view-list {
2317
2317
  }
2318
2318
 
2319
2319
  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type::before {
2320
- height: calc(var(--wpds-dimension-base, 4px) * 3);
2320
+ height: var(--wpds-dimension-size-3xs, 12px);
2321
2321
  }
2322
2322
 
2323
2323
  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type-icon {
@@ -2330,11 +2330,11 @@ div.dataviews-view-list {
2330
2330
  }
2331
2331
 
2332
2332
  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type {
2333
- width: calc(var(--wpds-dimension-base, 4px) * 6);
2333
+ width: var(--wpds-dimension-size-sm, 24px);
2334
2334
  }
2335
2335
 
2336
2336
  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type::before {
2337
- height: calc(var(--wpds-dimension-base, 4px) * 3);
2337
+ height: var(--wpds-dimension-size-3xs, 12px);
2338
2338
  }
2339
2339
 
2340
2340
  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type-icon {
@@ -2348,11 +2348,11 @@ div.dataviews-view-list {
2348
2348
  }
2349
2349
 
2350
2350
  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type {
2351
- width: calc(var(--wpds-dimension-base, 4px) * 8);
2351
+ width: var(--wpds-dimension-size-md, 32px);
2352
2352
  }
2353
2353
 
2354
2354
  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type::before {
2355
- height: calc(var(--wpds-dimension-base, 4px) * 2);
2355
+ height: var(--wpds-dimension-size-4xs, 8px);
2356
2356
  }
2357
2357
 
2358
2358
  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type-icon {
@@ -2384,7 +2384,7 @@ div.dataviews-view-list {
2384
2384
  .dataviews-view-activity .dataviews-view-activity__item-type-icon {
2385
2385
  overflow: hidden;
2386
2386
  flex-shrink: 0;
2387
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
2387
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2388
2388
  }
2389
2389
 
2390
2390
  .dataviews-view-activity .dataviews-view-activity__item-type-icon img,
@@ -2436,7 +2436,7 @@ div.dataviews-view-list {
2436
2436
  }
2437
2437
 
2438
2438
  .dataviews-view-picker-activity:focus-visible .dataviews-view-picker-activity__item[data-active-item=true] {
2439
- outline: 2px solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2439
+ outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2440
2440
  outline-offset: -2px;
2441
2441
  }
2442
2442
 
@@ -2448,7 +2448,7 @@ div.dataviews-view-list {
2448
2448
  }
2449
2449
 
2450
2450
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected, .dataviews-view-picker-activity .dataviews-view-picker-activity__item:hover {
2451
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2451
+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2452
2452
  }
2453
2453
 
2454
2454
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected {
@@ -2461,7 +2461,7 @@ div.dataviews-view-list {
2461
2461
  }
2462
2462
 
2463
2463
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type::before {
2464
- height: calc(var(--wpds-dimension-base, 4px) * 3);
2464
+ height: var(--wpds-dimension-size-3xs, 12px);
2465
2465
  }
2466
2466
 
2467
2467
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type-icon {
@@ -2474,11 +2474,11 @@ div.dataviews-view-list {
2474
2474
  }
2475
2475
 
2476
2476
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type {
2477
- width: calc(var(--wpds-dimension-base, 4px) * 6);
2477
+ width: var(--wpds-dimension-size-sm, 24px);
2478
2478
  }
2479
2479
 
2480
2480
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type::before {
2481
- height: calc(var(--wpds-dimension-base, 4px) * 3);
2481
+ height: var(--wpds-dimension-size-3xs, 12px);
2482
2482
  }
2483
2483
 
2484
2484
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type-icon {
@@ -2492,11 +2492,11 @@ div.dataviews-view-list {
2492
2492
  }
2493
2493
 
2494
2494
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type {
2495
- width: calc(var(--wpds-dimension-base, 4px) * 8);
2495
+ width: var(--wpds-dimension-size-md, 32px);
2496
2496
  }
2497
2497
 
2498
2498
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type::before {
2499
- height: calc(var(--wpds-dimension-base, 4px) * 2);
2499
+ height: var(--wpds-dimension-size-4xs, 8px);
2500
2500
  }
2501
2501
 
2502
2502
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type-icon {
@@ -2524,7 +2524,7 @@ div.dataviews-view-list {
2524
2524
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title,
2525
2525
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-description,
2526
2526
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields {
2527
- min-height: calc(var(--wpds-dimension-base, 4px) * 4);
2527
+ min-height: var(--wpds-dimension-size-2xs, 16px);
2528
2528
  }
2529
2529
 
2530
2530
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title {
@@ -2540,7 +2540,7 @@ div.dataviews-view-list {
2540
2540
  }
2541
2541
 
2542
2542
  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields {
2543
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2543
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2544
2544
  display: flex;
2545
2545
  gap: var(--wpds-dimension-gap-md, 12px);
2546
2546
  row-gap: var(--wpds-dimension-gap-xs, 4px);
@@ -2592,7 +2592,7 @@ div.dataviews-view-list {
2592
2592
  .dataviews-view-picker-activity .dataviews-view-picker-activity-group__header {
2593
2593
  font-size: var(--wpds-typography-font-size-lg, 15px);
2594
2594
  font-weight: var(--wpds-typography-font-weight-medium, 499);
2595
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2595
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2596
2596
  margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2597
2597
  padding: 0;
2598
2598
  padding-inline-start: var(--wpds-dimension-padding-2xl, 24px);
@@ -2628,7 +2628,7 @@ div.dataviews-view-list {
2628
2628
 
2629
2629
  .dataviews-picker-footer__bulk-selection {
2630
2630
  align-self: flex-start;
2631
- height: calc(var(--wpds-dimension-base, 4px) * 8);
2631
+ height: var(--wpds-dimension-size-md, 32px);
2632
2632
  }
2633
2633
 
2634
2634
  .dataviews-picker-footer__actions {
@@ -2664,7 +2664,7 @@ div.dataviews-view-list {
2664
2664
  }
2665
2665
 
2666
2666
  .dataviews-controls__date-preset:active {
2667
- background-color: var(--wpds-color-bg-interactive-neutral-strong-active, #1e1e1e);
2667
+ background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
2668
2668
  }
2669
2669
 
2670
2670
  .dataforms-layouts-panel__field-trigger {
@@ -2672,7 +2672,7 @@ div.dataviews-view-list {
2672
2672
  color: inherit;
2673
2673
  display: flex;
2674
2674
  width: 100%;
2675
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2675
+ min-height: var(--wpds-dimension-size-sm, 24px);
2676
2676
  cursor: var(--wpds-cursor-control, pointer);
2677
2677
  align-items: flex-start;
2678
2678
  border-radius: var(--wpds-border-radius-sm, 2px);
@@ -2681,7 +2681,7 @@ div.dataviews-view-list {
2681
2681
 
2682
2682
  .dataforms-layouts-panel__field-trigger--label-side {
2683
2683
  flex-direction: row;
2684
- gap: var(--wpds-dimension-gap-md, 12px);
2684
+ gap: var(--wpds-dimension-gap-sm, 8px);
2685
2685
  }
2686
2686
 
2687
2687
  .dataforms-layouts-panel__field-trigger--label-top {
@@ -2694,7 +2694,7 @@ div.dataviews-view-list {
2694
2694
  }
2695
2695
 
2696
2696
  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover {
2697
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2697
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2698
2698
  }
2699
2699
 
2700
2700
  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-trigger-icon {
@@ -2702,7 +2702,7 @@ div.dataviews-view-list {
2702
2702
  }
2703
2703
 
2704
2704
  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-label {
2705
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2705
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2706
2706
  }
2707
2707
 
2708
2708
  .dataforms-layouts-panel__field-trigger.is-disabled {
@@ -2710,7 +2710,7 @@ div.dataviews-view-list {
2710
2710
  }
2711
2711
 
2712
2712
  .dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control {
2713
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2713
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2714
2714
  font-weight: var(--wpds-typography-font-weight-regular, 400);
2715
2715
  }
2716
2716
 
@@ -2720,12 +2720,12 @@ div.dataviews-view-list {
2720
2720
  }
2721
2721
 
2722
2722
  .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 {
2723
- fill: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2723
+ fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2724
2724
  }
2725
2725
 
2726
2726
  .dataforms-layouts-panel__field-trigger-icon {
2727
2727
  padding: 0;
2728
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2728
+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2729
2729
  flex: 0 0 auto;
2730
2730
  opacity: 0;
2731
2731
  border-radius: var(--wpds-border-radius-xs, 1px);
@@ -2733,7 +2733,7 @@ div.dataviews-view-list {
2733
2733
 
2734
2734
  .dataforms-layouts-panel__field-trigger-icon:focus-visible {
2735
2735
  opacity: 1;
2736
- 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));
2736
+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2737
2737
  }
2738
2738
 
2739
2739
  .dataforms-layouts-panel__field-dropdown-anchor {
@@ -2747,12 +2747,12 @@ div.dataviews-view-list {
2747
2747
  .dataforms-layouts-panel__field-label {
2748
2748
  width: 38%;
2749
2749
  flex-shrink: 0;
2750
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2750
+ min-height: var(--wpds-dimension-size-sm, 24px);
2751
2751
  display: flex;
2752
2752
  align-items: center;
2753
2753
  line-height: var(--wpds-typography-line-height-sm, 20px);
2754
2754
  hyphens: auto;
2755
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2755
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2756
2756
  }
2757
2757
 
2758
2758
  .dataforms-layouts-panel__field-label .components-base-control__label {
@@ -2762,14 +2762,14 @@ div.dataviews-view-list {
2762
2762
  }
2763
2763
 
2764
2764
  .dataforms-layouts-panel__field-label.has-error {
2765
- color: var(--wpds-color-fg-content-error-weak, #cc1818);
2765
+ color: var(--wpds-color-foreground-content-error-weak, #cc1818);
2766
2766
  }
2767
2767
 
2768
2768
  .dataforms-layouts-panel__field-label-error-content {
2769
2769
  position: relative;
2770
2770
  z-index: 1;
2771
2771
  cursor: help;
2772
- fill: var(--wpds-color-fg-content-error-weak, #cc1818);
2772
+ fill: var(--wpds-color-foreground-content-error-weak, #cc1818);
2773
2773
  display: inline-flex;
2774
2774
  flex-direction: row;
2775
2775
  align-items: center;
@@ -2783,11 +2783,13 @@ div.dataviews-view-list {
2783
2783
  .dataforms-layouts-panel__field-control {
2784
2784
  flex-grow: 1;
2785
2785
  min-width: 0;
2786
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2786
+ min-height: var(--wpds-dimension-size-sm, 24px);
2787
2787
  line-height: var(--wpds-typography-line-height-md, 24px);
2788
2788
  display: flex;
2789
2789
  align-items: center;
2790
- overflow: hidden;
2790
+ overflow: clip;
2791
+ padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2792
+ margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2791
2793
  word-break: break-word;
2792
2794
  font-weight: var(--wpds-typography-font-weight-medium, 499);
2793
2795
  }
@@ -2796,23 +2798,6 @@ div.dataviews-view-list {
2796
2798
  min-width: 0;
2797
2799
  }
2798
2800
 
2799
- .dataforms-layouts-panel__field-control .components-button {
2800
- max-width: 100%;
2801
- text-align: left;
2802
- white-space: normal;
2803
- text-wrap: balance;
2804
- text-wrap: pretty;
2805
- min-height: 32px;
2806
- }
2807
-
2808
- .dataforms-layouts-panel__field-control.components-button.is-link[aria-disabled=true] {
2809
- text-decoration: none;
2810
- }
2811
-
2812
- .dataforms-layouts-panel__field-control .components-dropdown {
2813
- max-width: 100%;
2814
- }
2815
-
2816
2801
  .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-label {
2817
2802
  width: 100%;
2818
2803
  }
@@ -2849,7 +2834,7 @@ div.dataviews-view-list {
2849
2834
 
2850
2835
  .dataforms-layouts-regular__field {
2851
2836
  width: 100%;
2852
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2837
+ min-height: var(--wpds-dimension-size-md, 32px);
2853
2838
  justify-content: flex-start !important;
2854
2839
  align-items: flex-start !important;
2855
2840
  }
@@ -2857,13 +2842,13 @@ div.dataviews-view-list {
2857
2842
  .dataforms-layouts-regular__field .components-base-control__label,
2858
2843
  .dataforms-layouts-regular__field .components-input-control__label,
2859
2844
  .dataforms-layouts-regular__field .components-form-token-field__label {
2860
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2845
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2861
2846
  }
2862
2847
 
2863
2848
  .dataforms-layouts-regular__field-label {
2864
2849
  width: 38%;
2865
2850
  flex-shrink: 0;
2866
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2851
+ min-height: var(--wpds-dimension-size-md, 32px);
2867
2852
  display: flex;
2868
2853
  align-items: center;
2869
2854
  line-height: var(--wpds-typography-line-height-sm, 20px);
@@ -2880,7 +2865,7 @@ div.dataviews-view-list {
2880
2865
 
2881
2866
  .dataforms-layouts-regular__field-control {
2882
2867
  flex-grow: 1;
2883
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2868
+ min-height: var(--wpds-dimension-size-md, 32px);
2884
2869
  display: flex;
2885
2870
  align-items: center;
2886
2871
  }
@@ -2898,7 +2883,7 @@ div.dataviews-view-list {
2898
2883
  }
2899
2884
 
2900
2885
  .dataforms-layouts-card__field-description {
2901
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2886
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2902
2887
  display: block;
2903
2888
  font-size: var(--wpds-typography-font-size-md, 13px);
2904
2889
  margin-bottom: var(--wpds-dimension-gap-lg, 16px);
@@ -2913,7 +2898,7 @@ div.dataviews-view-list {
2913
2898
 
2914
2899
  .dataforms-layouts-details__summary-content {
2915
2900
  display: inline-flex;
2916
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2901
+ min-height: var(--wpds-dimension-size-sm, 24px);
2917
2902
  }
2918
2903
 
2919
2904
  .dataforms-layouts-details__content {
@@ -3878,8 +3863,7 @@ button.font-library__upload-area {
3878
3863
  }
3879
3864
 
3880
3865
  .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
3881
- .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta,
3882
- .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__applied-text {
3866
+ .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta {
3883
3867
  color: #1e1e1e;
3884
3868
  }
3885
3869
 
@@ -3905,14 +3889,13 @@ button.font-library__upload-area {
3905
3889
  }
3906
3890
 
3907
3891
  .global-styles-ui-screen-revisions__apply-button.is-primary,
3908
- .global-styles-ui-screen-revisions__applied-text {
3892
+ .global-styles-ui-screen-revisions__active-badge {
3909
3893
  align-self: flex-start;
3910
- margin: 4px 12px 12px 40px;
3894
+ margin: 0 12px 12px 40px;
3911
3895
  }
3912
3896
 
3913
3897
  .global-styles-ui-screen-revisions__changes,
3914
- .global-styles-ui-screen-revisions__meta,
3915
- .global-styles-ui-screen-revisions__applied-text {
3898
+ .global-styles-ui-screen-revisions__meta {
3916
3899
  color: #757575;
3917
3900
  font-size: 12px;
3918
3901
  }
@@ -4551,7 +4534,7 @@ button.font-library__upload-area {
4551
4534
  box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
4552
4535
  box-sizing: border-box;
4553
4536
  z-index: 1;
4554
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
4537
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
4555
4538
  width: calc(100% + 2px);
4556
4539
  left: -1px;
4557
4540
  min-width: initial;
@@ -4608,11 +4591,6 @@ button.font-library__upload-area {
4608
4591
  .edit-site-list__rename-modal {
4609
4592
  z-index: 1000001;
4610
4593
  }
4611
- @media (min-width: 782px) {
4612
- .edit-site-list__rename-modal .components-base-control {
4613
- width: 320px;
4614
- }
4615
- }
4616
4594
 
4617
4595
  .edit-site-editor__editor-interface {
4618
4596
  opacity: 1;
@@ -4738,13 +4716,13 @@ button.font-library__upload-area {
4738
4716
 
4739
4717
  .edit-site-layout {
4740
4718
  height: 100%;
4741
- background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
4742
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
4719
+ background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4720
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4743
4721
  display: flex;
4744
4722
  flex-direction: column;
4745
4723
  }
4746
4724
  .edit-site-layout:not(.is-full-canvas) .editor-visual-editor {
4747
- background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
4725
+ background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4748
4726
  }
4749
4727
 
4750
4728
  .edit-site-layout__content {
@@ -4811,7 +4789,10 @@ button.font-library__upload-area {
4811
4789
  display: flex;
4812
4790
  flex-direction: column;
4813
4791
  flex-grow: 1;
4814
- background: var(--wpds-color-bg-surface-neutral, #fcfcfc);
4792
+ }
4793
+
4794
+ .edit-site-sidebar__screen-wrapper:has(.edit-site-layout__mobile-content) {
4795
+ background: var(--wpds-color-background-surface-neutral, #fcfcfc);
4815
4796
  }
4816
4797
 
4817
4798
  .edit-site-layout__canvas-container {
@@ -4835,7 +4816,7 @@ button.font-library__upload-area {
4835
4816
  justify-content: flex-end;
4836
4817
  }
4837
4818
  .edit-site-layout__canvas .edit-site-resizable-frame__inner {
4838
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
4819
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4839
4820
  }
4840
4821
  @media (min-width: 782px) {
4841
4822
  .edit-site-layout__canvas {
@@ -4855,7 +4836,7 @@ button.font-library__upload-area {
4855
4836
  }
4856
4837
  @media (min-width: 782px) {
4857
4838
  .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4858
- border-radius: 8px;
4839
+ border-radius: var(--wpds-border-radius-xl, 12px);
4859
4840
  }
4860
4841
  .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
4861
4842
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
@@ -4900,7 +4881,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4900
4881
  view-transition-name: toggle;
4901
4882
  /* stylelint-enable */
4902
4883
  position: relative;
4903
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
4884
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
4904
4885
  height: 64px;
4905
4886
  width: 64px;
4906
4887
  overflow: hidden;
@@ -4908,11 +4889,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4908
4889
  display: flex;
4909
4890
  align-items: center;
4910
4891
  justify-content: center;
4911
- background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
4892
+ background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4912
4893
  border-radius: 0;
4913
4894
  }
4914
4895
  .edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
4915
- color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
4896
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
4916
4897
  }
4917
4898
  .edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout__view-mode-toggle.components-button:focus {
4918
4899
  box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
@@ -4951,8 +4932,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4951
4932
  left: auto;
4952
4933
  right: 0;
4953
4934
  width: 280px;
4954
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
4955
- background: var(--wpds-color-bg-surface-neutral-strong, #fff);
4935
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4936
+ background: var(--wpds-color-background-surface-neutral-strong, #fff);
4956
4937
  }
4957
4938
  .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
4958
4939
  top: auto;
@@ -4975,7 +4956,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4975
4956
  }
4976
4957
  @media (min-width: 782px) {
4977
4958
  .edit-site-layout__area {
4978
- border-radius: 8px;
4959
+ border-radius: var(--wpds-border-radius-xl, 12px);
4979
4960
  margin: 16px 16px 16px 0;
4980
4961
  }
4981
4962
  }
@@ -4996,11 +4977,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4996
4977
  }
4997
4978
 
4998
4979
  .edit-site-save-hub {
4999
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
4980
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
5000
4981
  border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5001
4982
  flex-shrink: 0;
5002
4983
  margin: 0;
5003
- padding: 16px 16px;
4984
+ padding: 16px;
5004
4985
  }
5005
4986
 
5006
4987
  .edit-site-save-hub__button {
@@ -5015,7 +4996,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5015
4996
  color: inherit;
5016
4997
  }
5017
4998
  .edit-site-save-hub__button:not(.is-primary).is-busy, .edit-site-save-hub__button:not(.is-primary).is-busy[aria-disabled=true]:hover {
5018
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
4999
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5019
5000
  }
5020
5001
 
5021
5002
  @media (min-width: 600px) {
@@ -5110,7 +5091,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5110
5091
  }
5111
5092
 
5112
5093
  .edit-site-sidebar-button {
5113
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5094
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5114
5095
  flex-shrink: 0;
5115
5096
  }
5116
5097
  .edit-site-sidebar-button:focus:not(:disabled) {
@@ -5122,31 +5103,31 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5122
5103
  outline: 3px solid transparent;
5123
5104
  }
5124
5105
  .edit-site-sidebar-button:hover:not(:disabled, [aria-disabled=true]), .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not(:disabled, [aria-disabled=true]):active, .edit-site-sidebar-button[aria-expanded=true] {
5125
- color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5106
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5126
5107
  }
5127
5108
 
5128
5109
  .edit-site-sidebar-navigation-item.components-item {
5129
- color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
5110
+ color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5130
5111
  padding: 8px 6px 8px 16px;
5131
5112
  border: none;
5132
5113
  min-height: 40px;
5133
5114
  }
5134
5115
  .edit-site-sidebar-navigation-item.components-item:hover, .edit-site-sidebar-navigation-item.components-item:focus, .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
5135
- color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5116
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5136
5117
  }
5137
5118
  .edit-site-sidebar-navigation-item.components-item:hover .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item:focus .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item[aria-current=true] .edit-site-sidebar-navigation-item__drilldown-indicator {
5138
- fill: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5119
+ fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5139
5120
  }
5140
5121
  .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
5141
- background: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
5142
- color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5122
+ background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
5123
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5143
5124
  font-weight: 499;
5144
5125
  }
5145
5126
  .edit-site-sidebar-navigation-item.components-item:focus-visible {
5146
5127
  transform: translateZ(0);
5147
5128
  }
5148
5129
  .edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
5149
- fill: var(--wpds-color-fg-interactive-neutral-weak, #707070);
5130
+ fill: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5150
5131
  }
5151
5132
  .edit-site-sidebar-navigation-item.components-item.with-suffix {
5152
5133
  padding-right: 16px;
@@ -5176,7 +5157,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5176
5157
  padding: 0 16px;
5177
5158
  }
5178
5159
  .edit-site-sidebar-navigation-screen__content .components-text {
5179
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
5160
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
5180
5161
  }
5181
5162
  .edit-site-sidebar-navigation-screen__content .components-heading {
5182
5163
  margin-bottom: 8px;
@@ -5185,7 +5166,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5185
5166
  .edit-site-sidebar-navigation-screen__title-icon {
5186
5167
  position: sticky;
5187
5168
  top: 0;
5188
- background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
5169
+ background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5189
5170
  padding-top: 48px;
5190
5171
  margin-bottom: 8px;
5191
5172
  padding-bottom: 8px;
@@ -5227,7 +5208,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5227
5208
  .edit-site-sidebar-navigation-screen__footer {
5228
5209
  position: sticky;
5229
5210
  bottom: 0;
5230
- background-color: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
5211
+ background-color: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5231
5212
  gap: 0;
5232
5213
  padding: 8px 16px;
5233
5214
  margin: 16px 0 0;
@@ -5248,20 +5229,20 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5248
5229
  width: 100%;
5249
5230
  }
5250
5231
  .edit-site-sidebar-navigation-screen__input-control .components-input-control__container {
5251
- background: var(--wpds-color-bg-interactive-neutral-weak, #0000);
5232
+ background: var(--wpds-color-background-interactive-neutral-weak, #0000);
5252
5233
  }
5253
5234
  .edit-site-sidebar-navigation-screen__input-control .components-input-control__container .components-button {
5254
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e) !important;
5235
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e) !important;
5255
5236
  }
5256
5237
  .edit-site-sidebar-navigation-screen__input-control .components-input-control__input {
5257
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e) !important;
5258
- background: var(--wpds-color-bg-interactive-neutral-weak, #0000) !important;
5238
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e) !important;
5239
+ background: var(--wpds-color-background-interactive-neutral-weak, #0000) !important;
5259
5240
  }
5260
5241
  .edit-site-sidebar-navigation-screen__input-control .components-input-control__backdrop {
5261
5242
  border: 4px !important;
5262
5243
  }
5263
5244
  .edit-site-sidebar-navigation-screen__input-control .components-base-control__help {
5264
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
5245
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
5265
5246
  }
5266
5247
 
5267
5248
  .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:focus,
@@ -5271,10 +5252,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5271
5252
  }
5272
5253
 
5273
5254
  .sidebar-navigation__more-menu .components-button {
5274
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5255
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5275
5256
  }
5276
5257
  .sidebar-navigation__more-menu .components-button:hover, .sidebar-navigation__more-menu .components-button:focus, .sidebar-navigation__more-menu .components-button[aria-current] {
5277
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5258
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5278
5259
  }
5279
5260
 
5280
5261
  .edit-site-sidebar-navigation-screen-patterns__group {
@@ -5292,7 +5273,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5292
5273
  margin-top: 16px;
5293
5274
  }
5294
5275
  .edit-site-sidebar-navigation-screen-patterns__group-header p {
5295
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
5276
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
5296
5277
  }
5297
5278
  .edit-site-sidebar-navigation-screen-patterns__group-header h2 {
5298
5279
  font-size: 11px;
@@ -5324,24 +5305,24 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5324
5305
  padding-right: 0;
5325
5306
  }
5326
5307
  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button {
5327
- color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
5308
+ color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5328
5309
  }
5329
5310
  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button:focus, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button[aria-current] {
5330
- color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5311
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5331
5312
  }
5332
5313
  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
5333
- color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
5314
+ color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5334
5315
  }
5335
5316
  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu:focus {
5336
- color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5317
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5337
5318
  }
5338
5319
  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-inserter__toggle {
5339
- background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
5340
- color: var(--wpds-color-fg-interactive-brand-strong, #fff);
5320
+ background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
5321
+ color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
5341
5322
  }
5342
5323
  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-inserter__toggle:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-inserter__toggle:focus {
5343
- background: var(--wpds-color-bg-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
5344
- color: var(--wpds-color-fg-interactive-brand-strong-active, #fff);
5324
+ background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
5325
+ color: var(--wpds-color-foreground-interactive-brand-strong-active, #fff);
5345
5326
  }
5346
5327
 
5347
5328
  .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
@@ -5392,7 +5373,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5392
5373
  }
5393
5374
 
5394
5375
  .edit-site-site-hub__title .components-button {
5395
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5376
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5396
5377
  display: block;
5397
5378
  flex-grow: 1;
5398
5379
  font-size: 15px;
@@ -5406,14 +5387,14 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5406
5387
  white-space: nowrap;
5407
5388
  }
5408
5389
  .edit-site-site-hub__title .components-button:hover, .edit-site-site-hub__title .components-button:focus, .edit-site-site-hub__title .components-button:active {
5409
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5390
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5410
5391
  }
5411
5392
  .edit-site-site-hub__title .components-button:focus {
5412
5393
  box-shadow: none;
5413
5394
  outline: none;
5414
5395
  }
5415
5396
  .edit-site-site-hub__title .components-button:focus-visible {
5416
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-bg-surface-neutral-weak, #f4f4f4), 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
5397
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-background-surface-neutral-weak, #f4f4f4), 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
5417
5398
  outline: 2px solid transparent;
5418
5399
  outline-offset: 2px;
5419
5400
  }
@@ -5434,10 +5415,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5434
5415
  }
5435
5416
 
5436
5417
  .edit-site-site-hub_toggle-command-center {
5437
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5418
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5438
5419
  }
5439
5420
  .edit-site-site-hub_toggle-command-center:hover svg, .edit-site-site-hub_toggle-command-center:active svg {
5440
- fill: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5421
+ fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5441
5422
  }
5442
5423
 
5443
5424
  .edit-site-site-icon__icon {
@@ -5650,7 +5631,7 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
5650
5631
  outline: none;
5651
5632
  }
5652
5633
  .edit-site-styles .edit-site-sidebar-button {
5653
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5634
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5654
5635
  }
5655
5636
 
5656
5637
  .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon {
@@ -5683,7 +5664,7 @@ body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle:hover .edit-sit
5683
5664
  color: var(--wp-admin-theme-color);
5684
5665
  }
5685
5666
  body.has-admin-bar-in-editor .edit-site-sidebar-navigation-screen__title-icon {
5686
- padding-top: 16px;
5667
+ padding-top: 32px;
5687
5668
  }
5688
5669
  body.has-admin-bar-in-editor .edit-site-layout__content,
5689
5670
  body.has-admin-bar-in-editor .edit-site-layout__sidebar {
@@ -5788,7 +5769,7 @@ body.js.site-editor-php .media-frame select.attachment-filters:last-of-type {
5788
5769
  }
5789
5770
 
5790
5771
  body.js.site-editor-php {
5791
- background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
5772
+ background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5792
5773
  }
5793
5774
 
5794
5775
  .edit-site {