@wordpress/edit-site 6.48.0 → 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 (174) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/build/components/editor/use-editor-title.cjs +1 -1
  3. package/build/components/editor/use-editor-title.cjs.map +2 -2
  4. package/build/components/layout/index.cjs +47 -9
  5. package/build/components/layout/index.cjs.map +3 -3
  6. package/build/components/page-templates/index-legacy.cjs +12 -8
  7. package/build/components/page-templates/index-legacy.cjs.map +2 -2
  8. package/build/components/post-list/quick-edit-modal.cjs +0 -1
  9. package/build/components/post-list/quick-edit-modal.cjs.map +2 -2
  10. package/build/components/resizable-frame/index.cjs.map +2 -2
  11. package/build/components/routes/use-title.cjs +1 -1
  12. package/build/components/routes/use-title.cjs.map +2 -2
  13. package/build/components/save-button/index.cjs +2 -2
  14. package/build/components/save-button/index.cjs.map +1 -1
  15. package/build/components/save-hub/index.cjs +3 -3
  16. package/build/components/save-hub/index.cjs.map +3 -3
  17. package/build/components/sidebar-navigation-item/index.cjs +8 -3
  18. package/build/components/sidebar-navigation-item/index.cjs.map +3 -3
  19. package/build/components/sidebar-navigation-screen/index.cjs +0 -1
  20. package/build/components/sidebar-navigation-screen/index.cjs.map +2 -2
  21. package/build/components/sidebar-navigation-screen-global-styles/index.cjs +2 -18
  22. package/build/components/sidebar-navigation-screen-global-styles/index.cjs.map +3 -3
  23. package/build/components/sidebar-navigation-screen-identity/index.cjs +0 -19
  24. package/build/components/sidebar-navigation-screen-identity/index.cjs.map +3 -3
  25. package/build/components/sidebar-navigation-screen-main/index.cjs +25 -25
  26. package/build/components/sidebar-navigation-screen-main/index.cjs.map +2 -2
  27. package/build/components/sidebar-navigation-screen-patterns/index.cjs +1 -1
  28. package/build/components/sidebar-navigation-screen-patterns/index.cjs.map +2 -2
  29. package/build/components/site-editor-routes/home.cjs +1 -1
  30. package/build/components/site-editor-routes/home.cjs.map +2 -2
  31. package/build/components/site-editor-routes/identity.cjs +1 -12
  32. package/build/components/site-editor-routes/identity.cjs.map +3 -3
  33. package/build/components/site-editor-routes/navigation-item.cjs +2 -10
  34. package/build/components/site-editor-routes/navigation-item.cjs.map +3 -3
  35. package/build/components/site-editor-routes/navigation.cjs +2 -10
  36. package/build/components/site-editor-routes/navigation.cjs.map +3 -3
  37. package/build/components/site-editor-routes/notfound.cjs +1 -1
  38. package/build/components/site-editor-routes/notfound.cjs.map +2 -2
  39. package/build/components/site-editor-routes/page-item.cjs +1 -6
  40. package/build/components/site-editor-routes/page-item.cjs.map +2 -2
  41. package/build/components/site-editor-routes/pages.cjs +6 -9
  42. package/build/components/site-editor-routes/pages.cjs.map +3 -3
  43. package/build/components/site-editor-routes/pattern-item.cjs +1 -1
  44. package/build/components/site-editor-routes/pattern-item.cjs.map +2 -2
  45. package/build/components/site-editor-routes/patterns.cjs +8 -3
  46. package/build/components/site-editor-routes/patterns.cjs.map +2 -2
  47. package/build/components/site-editor-routes/stylebook.cjs +1 -1
  48. package/build/components/site-editor-routes/stylebook.cjs.map +2 -2
  49. package/build/components/site-editor-routes/styles.cjs +1 -9
  50. package/build/components/site-editor-routes/styles.cjs.map +2 -2
  51. package/build/components/site-editor-routes/template-item.cjs +1 -6
  52. package/build/components/site-editor-routes/template-item.cjs.map +2 -2
  53. package/build/components/site-editor-routes/template-part-item.cjs +1 -1
  54. package/build/components/site-editor-routes/template-part-item.cjs.map +2 -2
  55. package/build/components/site-editor-routes/templates.cjs +8 -1
  56. package/build/components/site-editor-routes/templates.cjs.map +2 -2
  57. package/build/components/welcome-guide/editor.cjs +1 -1
  58. package/build/components/welcome-guide/editor.cjs.map +1 -1
  59. package/build/components/welcome-guide/page.cjs +1 -1
  60. package/build/components/welcome-guide/page.cjs.map +1 -1
  61. package/build/components/welcome-guide/template.cjs +1 -1
  62. package/build/components/welcome-guide/template.cjs.map +1 -1
  63. package/build/store/selectors.cjs +2 -4
  64. package/build/store/selectors.cjs.map +2 -2
  65. package/build-module/components/editor/use-editor-title.mjs +1 -1
  66. package/build-module/components/editor/use-editor-title.mjs.map +2 -2
  67. package/build-module/components/layout/index.mjs +49 -11
  68. package/build-module/components/layout/index.mjs.map +2 -2
  69. package/build-module/components/page-templates/index-legacy.mjs +13 -9
  70. package/build-module/components/page-templates/index-legacy.mjs.map +2 -2
  71. package/build-module/components/post-list/quick-edit-modal.mjs +0 -1
  72. package/build-module/components/post-list/quick-edit-modal.mjs.map +2 -2
  73. package/build-module/components/resizable-frame/index.mjs.map +2 -2
  74. package/build-module/components/routes/use-title.mjs +1 -1
  75. package/build-module/components/routes/use-title.mjs.map +2 -2
  76. package/build-module/components/save-button/index.mjs +2 -2
  77. package/build-module/components/save-button/index.mjs.map +1 -1
  78. package/build-module/components/save-hub/index.mjs +3 -3
  79. package/build-module/components/save-hub/index.mjs.map +2 -2
  80. package/build-module/components/sidebar-navigation-item/index.mjs +9 -8
  81. package/build-module/components/sidebar-navigation-item/index.mjs.map +2 -2
  82. package/build-module/components/sidebar-navigation-screen/index.mjs +0 -1
  83. package/build-module/components/sidebar-navigation-screen/index.mjs.map +2 -2
  84. package/build-module/components/sidebar-navigation-screen-global-styles/index.mjs +2 -14
  85. package/build-module/components/sidebar-navigation-screen-global-styles/index.mjs.map +2 -2
  86. package/build-module/components/sidebar-navigation-screen-identity/index.mjs +0 -15
  87. package/build-module/components/sidebar-navigation-screen-identity/index.mjs.map +2 -2
  88. package/build-module/components/sidebar-navigation-screen-main/index.mjs +25 -25
  89. package/build-module/components/sidebar-navigation-screen-main/index.mjs.map +2 -2
  90. package/build-module/components/sidebar-navigation-screen-patterns/index.mjs +1 -1
  91. package/build-module/components/sidebar-navigation-screen-patterns/index.mjs.map +2 -2
  92. package/build-module/components/site-editor-routes/home.mjs +1 -1
  93. package/build-module/components/site-editor-routes/home.mjs.map +2 -2
  94. package/build-module/components/site-editor-routes/identity.mjs +1 -12
  95. package/build-module/components/site-editor-routes/identity.mjs.map +2 -2
  96. package/build-module/components/site-editor-routes/navigation-item.mjs +2 -10
  97. package/build-module/components/site-editor-routes/navigation-item.mjs.map +2 -2
  98. package/build-module/components/site-editor-routes/navigation.mjs +2 -10
  99. package/build-module/components/site-editor-routes/navigation.mjs.map +2 -2
  100. package/build-module/components/site-editor-routes/notfound.mjs +1 -1
  101. package/build-module/components/site-editor-routes/notfound.mjs.map +2 -2
  102. package/build-module/components/site-editor-routes/page-item.mjs +2 -7
  103. package/build-module/components/site-editor-routes/page-item.mjs.map +2 -2
  104. package/build-module/components/site-editor-routes/pages.mjs +6 -9
  105. package/build-module/components/site-editor-routes/pages.mjs.map +2 -2
  106. package/build-module/components/site-editor-routes/pattern-item.mjs +1 -1
  107. package/build-module/components/site-editor-routes/pattern-item.mjs.map +2 -2
  108. package/build-module/components/site-editor-routes/patterns.mjs +8 -3
  109. package/build-module/components/site-editor-routes/patterns.mjs.map +2 -2
  110. package/build-module/components/site-editor-routes/stylebook.mjs +1 -1
  111. package/build-module/components/site-editor-routes/stylebook.mjs.map +2 -2
  112. package/build-module/components/site-editor-routes/styles.mjs +1 -9
  113. package/build-module/components/site-editor-routes/styles.mjs.map +2 -2
  114. package/build-module/components/site-editor-routes/template-item.mjs +2 -7
  115. package/build-module/components/site-editor-routes/template-item.mjs.map +2 -2
  116. package/build-module/components/site-editor-routes/template-part-item.mjs +1 -1
  117. package/build-module/components/site-editor-routes/template-part-item.mjs.map +2 -2
  118. package/build-module/components/site-editor-routes/templates.mjs +8 -1
  119. package/build-module/components/site-editor-routes/templates.mjs.map +2 -2
  120. package/build-module/components/welcome-guide/editor.mjs +1 -1
  121. package/build-module/components/welcome-guide/editor.mjs.map +1 -1
  122. package/build-module/components/welcome-guide/page.mjs +1 -1
  123. package/build-module/components/welcome-guide/page.mjs.map +1 -1
  124. package/build-module/components/welcome-guide/template.mjs +1 -1
  125. package/build-module/components/welcome-guide/template.mjs.map +1 -1
  126. package/build-module/store/selectors.mjs +2 -4
  127. package/build-module/store/selectors.mjs.map +2 -2
  128. package/build-style/{experimental-admin-bar-in-editor-rtl.css → experimental-omnibar-rtl.css} +49 -2
  129. package/build-style/{experimental-admin-bar-in-editor.css → experimental-omnibar.css} +49 -2
  130. package/build-style/style-rtl.css +476 -248
  131. package/build-style/style.css +476 -249
  132. package/package.json +49 -49
  133. package/src/components/layout/index.js +64 -18
  134. package/src/components/layout/style.scss +28 -13
  135. package/src/components/page-patterns/style.scss +1 -2
  136. package/src/components/page-templates/index-legacy.js +17 -9
  137. package/src/components/page-templates/style.scss +0 -5
  138. package/src/components/post-list/quick-edit-modal.js +0 -1
  139. package/src/components/resizable-frame/index.js +0 -1
  140. package/src/components/save-hub/index.js +4 -4
  141. package/src/components/save-hub/style.scss +5 -5
  142. package/src/components/sidebar-button/style.scss +2 -4
  143. package/src/components/sidebar-dataviews/style.scss +0 -1
  144. package/src/components/sidebar-global-styles/style.scss +1 -2
  145. package/src/components/sidebar-navigation-item/index.js +11 -9
  146. package/src/components/sidebar-navigation-item/style.scss +6 -7
  147. package/src/components/sidebar-navigation-screen/index.js +0 -1
  148. package/src/components/sidebar-navigation-screen/style.scss +9 -9
  149. package/src/components/sidebar-navigation-screen-global-styles/index.js +2 -15
  150. package/src/components/sidebar-navigation-screen-identity/index.js +0 -15
  151. package/src/components/sidebar-navigation-screen-main/index.js +24 -22
  152. package/src/components/sidebar-navigation-screen-navigation-menu/style.scss +2 -4
  153. package/src/components/sidebar-navigation-screen-navigation-menus/style.scss +15 -5
  154. package/src/components/sidebar-navigation-screen-patterns/style.scss +2 -3
  155. package/src/components/site-editor-routes/README.md +4 -4
  156. package/src/components/site-editor-routes/home.js +1 -1
  157. package/src/components/site-editor-routes/identity.js +1 -20
  158. package/src/components/site-editor-routes/navigation-item.js +2 -21
  159. package/src/components/site-editor-routes/navigation.js +2 -21
  160. package/src/components/site-editor-routes/notfound.js +1 -1
  161. package/src/components/site-editor-routes/page-item.js +1 -10
  162. package/src/components/site-editor-routes/pages.js +6 -14
  163. package/src/components/site-editor-routes/pattern-item.js +1 -1
  164. package/src/components/site-editor-routes/patterns.js +8 -7
  165. package/src/components/site-editor-routes/stylebook.js +1 -1
  166. package/src/components/site-editor-routes/styles.js +1 -12
  167. package/src/components/site-editor-routes/template-item.js +1 -10
  168. package/src/components/site-editor-routes/template-part-item.js +1 -1
  169. package/src/components/site-editor-routes/templates.js +8 -1
  170. package/src/components/site-hub/style.scss +5 -6
  171. package/src/components/welcome-guide/page.js +1 -1
  172. package/src/{experimental-admin-bar-in-editor.scss → experimental-omnibar.scss} +6 -2
  173. package/src/store/selectors.js +3 -7
  174. package/src/style.scss +2 -3
@@ -1,7 +1,4 @@
1
1
  @charset "UTF-8";
2
- /**
3
- * Colors
4
- */
5
2
  /**
6
3
  * Typography
7
4
  */
@@ -12,6 +9,9 @@
12
9
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
13
10
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
14
11
  */
12
+ /**
13
+ * Colors
14
+ */
15
15
  /**
16
16
  * Fonts & basic variables.
17
17
  */
@@ -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-left: 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
  right: 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) {
@@ -715,6 +715,10 @@
715
715
  outline: 2px solid transparent;
716
716
  }
717
717
 
718
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-moz-placeholder {
719
+ color: rgba(30, 30, 30, 0.62);
720
+ }
721
+
718
722
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
719
723
  color: rgba(30, 30, 30, 0.62);
720
724
  }
@@ -772,8 +776,8 @@
772
776
 
773
777
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
774
778
  position: relative;
775
- background: var(--wpds-color-bg-interactive-neutral-weak, rgba(0, 0, 0, 0));
776
- 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);
777
781
  margin: 0;
778
782
  padding: 0;
779
783
  width: var(--checkbox-size);
@@ -791,13 +795,13 @@
791
795
  }
792
796
  }
793
797
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
794
- 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));
795
799
  border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
796
800
  }
797
801
 
798
802
  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
799
803
  --checkmark-size: var(--checkbox-size);
800
- fill: var(--wpds-color-fg-interactive-neutral-strong, #f0f0f0);
804
+ fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
801
805
  position: absolute;
802
806
  right: 50%;
803
807
  top: 50%;
@@ -846,15 +850,19 @@
846
850
  outline: 2px solid transparent;
847
851
  }
848
852
 
853
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
854
+ color: rgba(30, 30, 30, 0.62);
855
+ }
856
+
849
857
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
850
858
  color: rgba(30, 30, 30, 0.62);
851
859
  }
852
860
 
853
861
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
854
862
  display: block;
855
- padding: 0 calc(var(--wpds-dimension-base, 4px) * 8) 0 var(--wpds-dimension-padding-sm, 8px);
863
+ padding: 0 var(--wpds-dimension-size-md, 32px) 0 var(--wpds-dimension-padding-sm, 8px);
856
864
  width: 100%;
857
- height: calc(var(--wpds-dimension-base, 4px) * 8);
865
+ height: var(--wpds-dimension-size-md, 32px);
858
866
  margin-right: 0;
859
867
  margin-left: 0;
860
868
  /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -867,12 +875,16 @@
867
875
  }
868
876
  }
869
877
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
870
- background: var(--wpds-color-bg-surface-neutral-strong, #fff);
871
- box-shadow: inset 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
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
+ }
881
+
882
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
883
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
872
884
  }
873
885
 
874
886
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
875
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
887
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
876
888
  }
877
889
 
878
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 {
@@ -887,7 +899,7 @@
887
899
  display: flex;
888
900
  align-items: center;
889
901
  justify-content: center;
890
- width: 24px;
902
+ width: var(--wpds-dimension-size-sm, 24px);
891
903
  }
892
904
 
893
905
  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon:dir(ltr) {
@@ -904,20 +916,21 @@
904
916
  top: 0;
905
917
  left: 0;
906
918
  transform: translate(-50%, -50%);
907
- background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
908
- height: calc(var(--wpds-dimension-base, 4px) * 4);
909
- min-width: calc(var(--wpds-dimension-base, 4px) * 4);
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);
910
922
  line-height: var(--wpds-typography-line-height-xs, 16px);
911
923
  padding: 0 var(--wpds-dimension-padding-xs, 4px);
912
924
  text-align: center;
913
925
  border-radius: var(--wpds-border-radius-lg, 8px);
914
926
  font-size: 11px;
915
- outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-bg-surface-neutral-strong, #fff);
916
- color: var(--wpds-color-fg-interactive-neutral-strong, #f0f0f0);
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);
917
929
  box-sizing: border-box;
918
930
  }
919
931
 
920
932
  .dataviews-search {
933
+ width: -moz-fit-content;
921
934
  width: fit-content;
922
935
  }
923
936
 
@@ -942,7 +955,7 @@
942
955
  right: 0;
943
956
  background-color: inherit;
944
957
  padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
945
- border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
958
+ border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
946
959
  flex-shrink: 0;
947
960
  }
948
961
 
@@ -1096,7 +1109,7 @@
1096
1109
  left: var(--wpds-dimension-gap-xs, 4px);
1097
1110
  width: var(--wpds-dimension-gap-xs, 4px);
1098
1111
  height: var(--wpds-dimension-gap-xs, 4px);
1099
- 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));
1100
1113
  border-radius: 50%;
1101
1114
  pointer-events: none;
1102
1115
  }
@@ -1171,7 +1184,7 @@
1171
1184
  right: 0;
1172
1185
  width: 100%;
1173
1186
  height: 100%;
1174
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1187
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1175
1188
  border-radius: var(--wpds-border-radius-md, 4px);
1176
1189
  pointer-events: none;
1177
1190
  outline: 2px solid transparent;
@@ -1192,7 +1205,7 @@
1192
1205
 
1193
1206
  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field,
1194
1207
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field {
1195
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1208
+ min-height: var(--wpds-dimension-size-sm, 24px);
1196
1209
  overflow: hidden;
1197
1210
  align-content: center;
1198
1211
  text-align: start;
@@ -1200,29 +1213,30 @@
1200
1213
 
1201
1214
  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
1202
1215
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
1216
+ width: -moz-fit-content;
1203
1217
  width: fit-content;
1204
1218
  }
1205
1219
 
1206
1220
  .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
1207
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 {
1208
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1222
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1209
1223
  }
1210
1224
 
1211
1225
  .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
1212
1226
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
1213
- box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-bg-surface-neutral-strong, #fff);
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);
1214
1228
  }
1215
1229
 
1216
1230
  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
1217
1231
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
1218
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1232
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1219
1233
  }
1220
1234
 
1221
1235
  .dataviews-view-grid .dataviews-view-grid__media,
1222
1236
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
1223
1237
  width: 100%;
1224
1238
  aspect-ratio: 1/1;
1225
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1239
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1226
1240
  border-radius: var(--wpds-border-radius-md, 4px);
1227
1241
  overflow: hidden;
1228
1242
  position: relative;
@@ -1235,6 +1249,7 @@
1235
1249
 
1236
1250
  .dataviews-view-grid .dataviews-view-grid__media img,
1237
1251
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
1252
+ -o-object-fit: cover;
1238
1253
  object-fit: cover;
1239
1254
  width: 100%;
1240
1255
  height: 100%;
@@ -1260,7 +1275,7 @@
1260
1275
  display: block;
1261
1276
  border-radius: var(--wpds-border-radius-md, 4px);
1262
1277
  box-shadow: none;
1263
- background: var(--wpds-color-bg-surface-neutral, #fcfcfc);
1278
+ background: var(--wpds-color-background-surface-neutral, #fcfcfc);
1264
1279
  }
1265
1280
 
1266
1281
  .dataviews-view-grid .dataviews-view-grid__fields,
@@ -1277,21 +1292,21 @@
1277
1292
 
1278
1293
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty),
1279
1294
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
1280
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1295
+ min-height: var(--wpds-dimension-size-sm, 24px);
1281
1296
  line-height: var(--wpds-typography-line-height-sm, 20px);
1282
1297
  padding-top: calc(var(--wpds-dimension-base, 4px) / 2);
1283
1298
  }
1284
1299
 
1285
1300
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field,
1286
1301
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field {
1287
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1302
+ min-height: var(--wpds-dimension-size-sm, 24px);
1288
1303
  align-items: center;
1289
1304
  }
1290
1305
 
1291
1306
  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name,
1292
1307
  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
1293
1308
  width: 35%;
1294
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
1309
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1295
1310
  overflow: hidden;
1296
1311
  text-overflow: ellipsis;
1297
1312
  white-space: nowrap;
@@ -1368,7 +1383,7 @@
1368
1383
  }
1369
1384
 
1370
1385
  .dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
1371
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1386
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1372
1387
  }
1373
1388
 
1374
1389
  @media not (prefers-reduced-motion) {
@@ -1395,7 +1410,7 @@
1395
1410
  .dataviews-view-grid__group-header {
1396
1411
  font-size: var(--wpds-typography-font-size-lg, 15px);
1397
1412
  font-weight: var(--wpds-typography-font-weight-medium, 499);
1398
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1413
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1399
1414
  margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1400
1415
  padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1401
1416
  container-type: inline-size;
@@ -1412,7 +1427,7 @@ div.dataviews-view-list {
1412
1427
  .dataviews-view-list div[role=row],
1413
1428
  .dataviews-view-list div[role=article] {
1414
1429
  margin: 0;
1415
- border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
1430
+ border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
1416
1431
  }
1417
1432
 
1418
1433
  .dataviews-view-list div[role=row] .dataviews-view-list__item-wrapper,
@@ -1425,6 +1440,7 @@ div.dataviews-view-list {
1425
1440
  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
1426
1441
  .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
1427
1442
  display: flex;
1443
+ width: -moz-max-content;
1428
1444
  width: max-content;
1429
1445
  flex: 0 0 auto;
1430
1446
  gap: var(--wpds-dimension-gap-xs, 4px);
@@ -1439,7 +1455,7 @@ div.dataviews-view-list {
1439
1455
 
1440
1456
  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > div,
1441
1457
  .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > div {
1442
- height: 24px;
1458
+ height: var(--wpds-dimension-size-sm, 24px);
1443
1459
  }
1444
1460
 
1445
1461
  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
@@ -1466,21 +1482,21 @@ div.dataviews-view-list {
1466
1482
  }
1467
1483
  .dataviews-view-list div[role=row].is-selected.is-selected,
1468
1484
  .dataviews-view-list div[role=article].is-selected.is-selected {
1469
- border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white));
1485
+ border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
1470
1486
  }
1471
1487
 
1472
1488
  .dataviews-view-list div[role=row].is-selected.is-selected + div[role=row], .dataviews-view-list div[role=row].is-selected.is-selected + div[role=article],
1473
1489
  .dataviews-view-list div[role=article].is-selected.is-selected + div[role=row],
1474
1490
  .dataviews-view-list div[role=article].is-selected.is-selected + div[role=article] {
1475
- border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white));
1491
+ border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
1476
1492
  }
1477
1493
 
1478
1494
  .dataviews-view-list div[role=row]:not(.is-selected):hover, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered, .dataviews-view-list div[role=row]:not(.is-selected):focus-within,
1479
1495
  .dataviews-view-list div[role=article]:not(.is-selected):hover,
1480
1496
  .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
1481
1497
  .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
1482
- color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1483
- background-color: var(--wpds-color-bg-interactive-brand-weak, rgba(0, 0, 0, 0));
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));
1484
1500
  }
1485
1501
 
1486
1502
  .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
@@ -1493,15 +1509,15 @@ div.dataviews-view-list {
1493
1509
  .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
1494
1510
  .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
1495
1511
  .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
1496
- 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));
1497
1513
  }
1498
1514
 
1499
1515
  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
1500
1516
  .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
1501
1517
  .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
1502
1518
  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
1503
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1504
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
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);
1505
1521
  }
1506
1522
 
1507
1523
  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
@@ -1512,7 +1528,7 @@ div.dataviews-view-list {
1512
1528
  .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1513
1529
  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
1514
1530
  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
1515
- color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
1531
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1516
1532
  }
1517
1533
 
1518
1534
  .dataviews-view-list .dataviews-view-list__item {
@@ -1520,6 +1536,8 @@ div.dataviews-view-list {
1520
1536
  z-index: 1;
1521
1537
  inset: 0;
1522
1538
  scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
1539
+ -webkit-appearance: none;
1540
+ -moz-appearance: none;
1523
1541
  appearance: none;
1524
1542
  border: none;
1525
1543
  background: none;
@@ -1535,14 +1553,14 @@ div.dataviews-view-list {
1535
1553
  position: absolute;
1536
1554
  content: "";
1537
1555
  inset: var(--wp-admin-border-width-focus);
1538
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1556
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1539
1557
  border-radius: var(--wpds-border-radius-sm, 2px);
1540
1558
  outline: 2px solid transparent;
1541
1559
  }
1542
1560
 
1543
1561
  .dataviews-view-list .dataviews-view-list__title-field {
1544
1562
  flex: 1;
1545
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1563
+ min-height: var(--wpds-dimension-size-sm, 24px);
1546
1564
  line-height: var(--wpds-typography-line-height-md, 24px);
1547
1565
  overflow: hidden;
1548
1566
  }
@@ -1557,13 +1575,14 @@ div.dataviews-view-list {
1557
1575
  overflow: hidden;
1558
1576
  position: relative;
1559
1577
  flex-shrink: 0;
1560
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1578
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1561
1579
  border-radius: var(--wpds-border-radius-md, 4px);
1562
1580
  }
1563
1581
 
1564
1582
  .dataviews-view-list .dataviews-view-list__media-wrapper img {
1565
1583
  width: 100%;
1566
1584
  height: 100%;
1585
+ -o-object-fit: cover;
1567
1586
  object-fit: cover;
1568
1587
  }
1569
1588
 
@@ -1585,7 +1604,7 @@ div.dataviews-view-list {
1585
1604
  }
1586
1605
 
1587
1606
  .dataviews-view-list .dataviews-view-list__field {
1588
- color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
1607
+ color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
1589
1608
  }
1590
1609
 
1591
1610
  .dataviews-view-list .dataviews-view-list__fields {
@@ -1605,7 +1624,7 @@ div.dataviews-view-list {
1605
1624
  }
1606
1625
 
1607
1626
  .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
1608
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1627
+ min-height: var(--wpds-dimension-size-sm, 24px);
1609
1628
  line-height: var(--wpds-typography-line-height-sm, 20px);
1610
1629
  display: flex;
1611
1630
  align-items: center;
@@ -1620,17 +1639,17 @@ div.dataviews-view-list {
1620
1639
  }
1621
1640
 
1622
1641
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__title-field {
1623
- min-height: calc(var(--wpds-dimension-base, 4px) * 4);
1642
+ min-height: var(--wpds-dimension-size-2xs, 16px);
1624
1643
  line-height: var(--wpds-typography-line-height-xs, 16px);
1625
1644
  }
1626
1645
 
1627
1646
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__media-wrapper {
1628
- width: calc(var(--wpds-dimension-base, 4px) * 8);
1629
- height: calc(var(--wpds-dimension-base, 4px) * 8);
1647
+ width: var(--wpds-dimension-size-md, 32px);
1648
+ height: var(--wpds-dimension-size-md, 32px);
1630
1649
  }
1631
1650
 
1632
1651
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__field-wrapper {
1633
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1652
+ min-height: var(--wpds-dimension-size-md, 32px);
1634
1653
  }
1635
1654
 
1636
1655
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields {
@@ -1639,7 +1658,7 @@ div.dataviews-view-list {
1639
1658
  }
1640
1659
 
1641
1660
  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
1642
- min-height: calc(var(--wpds-dimension-base, 4px) * 4);
1661
+ min-height: var(--wpds-dimension-size-2xs, 16px);
1643
1662
  line-height: var(--wpds-typography-line-height-xs, 16px);
1644
1663
  }
1645
1664
 
@@ -1648,7 +1667,7 @@ div.dataviews-view-list {
1648
1667
  }
1649
1668
 
1650
1669
  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__title-field {
1651
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1670
+ min-height: var(--wpds-dimension-size-md, 32px);
1652
1671
  line-height: var(--wpds-typography-line-height-xl, 32px);
1653
1672
  }
1654
1673
 
@@ -1667,7 +1686,7 @@ div.dataviews-view-list {
1667
1686
  }
1668
1687
 
1669
1688
  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
1670
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1689
+ min-height: var(--wpds-dimension-size-md, 32px);
1671
1690
  line-height: var(--wpds-typography-line-height-md, 24px);
1672
1691
  }
1673
1692
 
@@ -1685,7 +1704,7 @@ div.dataviews-view-list {
1685
1704
  .dataviews-view-list__group-header {
1686
1705
  font-size: var(--wpds-typography-font-size-lg, 15px);
1687
1706
  font-weight: var(--wpds-typography-font-weight-medium, 499);
1688
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1707
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1689
1708
  margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1690
1709
  padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1691
1710
  }
@@ -1696,14 +1715,14 @@ div.dataviews-view-list {
1696
1715
  border-color: inherit;
1697
1716
  border-collapse: collapse;
1698
1717
  position: relative;
1699
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
1718
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1700
1719
  margin-bottom: auto;
1701
1720
  background-color: inherit;
1702
1721
  }
1703
1722
 
1704
1723
  .dataviews-view-table th {
1705
1724
  text-align: right;
1706
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1725
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1707
1726
  font-weight: normal;
1708
1727
  font-size: var(--wpds-typography-font-size-md, 13px);
1709
1728
  }
@@ -1722,7 +1741,7 @@ div.dataviews-view-list {
1722
1741
  .dataviews-view-table th.dataviews-view-table__actions-column--sticky {
1723
1742
  position: sticky;
1724
1743
  left: 0;
1725
- 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));
1726
1745
  }
1727
1746
 
1728
1747
  .dataviews-view-table td.dataviews-view-table__actions-column--stuck::after,
@@ -1734,7 +1753,7 @@ div.dataviews-view-list {
1734
1753
  bottom: 0;
1735
1754
  right: 0;
1736
1755
  width: 1px;
1737
- background-color: var(--wpds-color-bg-surface-neutral, #fcfcfc);
1756
+ background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
1738
1757
  }
1739
1758
 
1740
1759
  .dataviews-view-table td.dataviews-view-table__checkbox-column,
@@ -1749,7 +1768,7 @@ div.dataviews-view-list {
1749
1768
  }
1750
1769
 
1751
1770
  .dataviews-view-table tr {
1752
- border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
1771
+ border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
1753
1772
  background-color: inherit;
1754
1773
  }
1755
1774
 
@@ -1777,16 +1796,16 @@ div.dataviews-view-list {
1777
1796
  }
1778
1797
  }
1779
1798
  .dataviews-view-table tr.is-selected {
1780
- background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1781
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
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);
1782
1801
  }
1783
1802
 
1784
1803
  .dataviews-view-table tr.is-selected, .dataviews-view-table tr.is-selected + tr {
1785
- border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white));
1804
+ border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
1786
1805
  }
1787
1806
 
1788
1807
  .dataviews-view-table tr.is-selected .dataviews-view-table__actions-column--sticky {
1789
- 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));
1790
1809
  }
1791
1810
 
1792
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) {
@@ -1794,11 +1813,11 @@ div.dataviews-view-list {
1794
1813
  }
1795
1814
 
1796
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 {
1797
- 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));
1798
1817
  }
1799
1818
 
1800
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 {
1801
- 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));
1802
1821
  }
1803
1822
 
1804
1823
  .dataviews-view-table thead {
@@ -1816,7 +1835,7 @@ div.dataviews-view-list {
1816
1835
  right: 0;
1817
1836
  left: 0;
1818
1837
  height: 1px;
1819
- background-color: var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
1838
+ background-color: var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
1820
1839
  }
1821
1840
 
1822
1841
  .dataviews-view-table thead tr {
@@ -1854,7 +1873,7 @@ div.dataviews-view-list {
1854
1873
  }
1855
1874
 
1856
1875
  .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
1857
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1876
+ min-height: var(--wpds-dimension-size-md, 32px);
1858
1877
  display: flex;
1859
1878
  align-items: center;
1860
1879
  white-space: nowrap;
@@ -1881,7 +1900,7 @@ div.dataviews-view-list {
1881
1900
  }
1882
1901
 
1883
1902
  .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
1884
- color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
1903
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1885
1904
  }
1886
1905
 
1887
1906
  .dataviews-view-table .dataviews-view-table-header-button span {
@@ -1936,18 +1955,19 @@ div.dataviews-view-list {
1936
1955
  }
1937
1956
  .dataviews-column-primary__media {
1938
1957
  max-width: 60px;
1939
- min-width: calc(var(--wpds-dimension-base, 4px) * 8);
1940
- 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);
1941
1960
  overflow: hidden;
1942
1961
  position: relative;
1943
1962
  flex-shrink: 0;
1944
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1963
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1945
1964
  border-radius: var(--wpds-border-radius-md, 4px);
1946
1965
  }
1947
1966
 
1948
1967
  .dataviews-column-primary__media img {
1949
- width: calc(var(--wpds-dimension-base, 4px) * 8);
1950
- 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
+ -o-object-fit: cover;
1951
1971
  object-fit: cover;
1952
1972
  }
1953
1973
 
@@ -1971,7 +1991,7 @@ div.dataviews-view-list {
1971
1991
  .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
1972
1992
  font-weight: var(--wpds-typography-font-weight-medium, 499);
1973
1993
  padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
1974
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1994
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1975
1995
  }
1976
1996
 
1977
1997
  /* Column width intents via colgroup: make non-primary columns shrink-to-fit */
@@ -2010,26 +2030,27 @@ div.dataviews-view-list {
2010
2030
  }
2011
2031
 
2012
2032
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
2013
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2033
+ min-height: var(--wpds-dimension-size-sm, 24px);
2014
2034
  overflow: hidden;
2015
2035
  align-content: center;
2016
2036
  text-align: start;
2017
2037
  }
2018
2038
 
2019
2039
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
2040
+ width: -moz-fit-content;
2020
2041
  width: fit-content;
2021
2042
  }
2022
2043
 
2023
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 {
2024
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2045
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2025
2046
  }
2026
2047
 
2027
2048
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
2028
- box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-bg-surface-neutral-strong, #fff);
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);
2029
2050
  }
2030
2051
 
2031
2052
  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
2032
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2053
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2033
2054
  }
2034
2055
 
2035
2056
  .dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
@@ -2037,7 +2058,7 @@ div.dataviews-view-list {
2037
2058
  }
2038
2059
 
2039
2060
  .dataviews-view-picker-grid:focus-visible [data-active-item=true] {
2040
- 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));
2041
2062
  }
2042
2063
 
2043
2064
  .dataviews-view-picker-grid .dataviews-selection-checkbox {
@@ -2052,12 +2073,13 @@ div.dataviews-view-list {
2052
2073
  width: 100%;
2053
2074
  aspect-ratio: 1/1;
2054
2075
  min-height: 0;
2055
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
2076
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2056
2077
  border-radius: var(--wpds-border-radius-md, 4px);
2057
2078
  position: relative;
2058
2079
  }
2059
2080
 
2060
2081
  .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
2082
+ -o-object-fit: cover;
2061
2083
  object-fit: cover;
2062
2084
  width: 100%;
2063
2085
  height: 100%;
@@ -2086,19 +2108,19 @@ div.dataviews-view-list {
2086
2108
  }
2087
2109
 
2088
2110
  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
2089
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2111
+ min-height: var(--wpds-dimension-size-sm, 24px);
2090
2112
  line-height: var(--wpds-typography-line-height-sm, 20px);
2091
2113
  padding-top: calc(var(--wpds-dimension-base, 4px) / 2);
2092
2114
  }
2093
2115
 
2094
2116
  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
2095
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2117
+ min-height: var(--wpds-dimension-size-sm, 24px);
2096
2118
  align-items: center;
2097
2119
  }
2098
2120
 
2099
2121
  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
2100
2122
  width: 35%;
2101
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2123
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2102
2124
  overflow: hidden;
2103
2125
  text-overflow: ellipsis;
2104
2126
  white-space: nowrap;
@@ -2149,7 +2171,7 @@ div.dataviews-view-list {
2149
2171
  .dataviews-view-picker-grid-group__header {
2150
2172
  font-size: var(--wpds-typography-font-size-lg, 15px);
2151
2173
  font-weight: var(--wpds-typography-font-weight-medium, 499);
2152
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2174
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2153
2175
  margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2154
2176
  padding: 0 calc(var(--wpds-dimension-base, 4px) * 12);
2155
2177
  }
@@ -2167,7 +2189,7 @@ div.dataviews-view-list {
2167
2189
  }
2168
2190
 
2169
2191
  .dataviews-view-picker-table tbody:focus-visible [data-active-item=true] {
2170
- 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));
2171
2193
  }
2172
2194
 
2173
2195
  .dataviews-view-picker-table .dataviews-selection-checkbox .components-checkbox-control__input.components-checkbox-control__input {
@@ -2180,15 +2202,15 @@ div.dataviews-view-list {
2180
2202
  }
2181
2203
 
2182
2204
  .dataviews-view-picker-table .dataviews-view-table__row.is-selected {
2183
- 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));
2184
2206
  }
2185
2207
 
2186
2208
  .dataviews-view-picker-table .dataviews-view-table__row.is-hovered {
2187
- 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));
2188
2210
  }
2189
2211
 
2190
2212
  .dataviews-view-picker-table .dataviews-view-table__row.is-selected.is-hovered {
2191
- 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));
2192
2214
  }
2193
2215
 
2194
2216
  .dataviews-view-activity {
@@ -2199,13 +2221,13 @@ div.dataviews-view-list {
2199
2221
  .dataviews-view-activity .dataviews-view-activity__group-header {
2200
2222
  font-size: var(--wpds-typography-font-size-lg, 15px);
2201
2223
  font-weight: var(--wpds-typography-font-weight-medium, 499);
2202
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2224
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2203
2225
  margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2204
2226
  padding: 0;
2205
2227
  }
2206
2228
 
2207
2229
  .dataviews-view-activity .dataviews-view-activity__item-actions {
2208
- min-width: calc(var(--wpds-dimension-base, 4px) * 6);
2230
+ min-width: var(--wpds-dimension-size-sm, 24px);
2209
2231
  }
2210
2232
 
2211
2233
  .dataviews-view-activity .dataviews-view-activity__item-content {
@@ -2215,7 +2237,7 @@ div.dataviews-view-list {
2215
2237
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title,
2216
2238
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-description,
2217
2239
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
2218
- min-height: calc(var(--wpds-dimension-base, 4px) * 4);
2240
+ min-height: var(--wpds-dimension-size-2xs, 16px);
2219
2241
  }
2220
2242
 
2221
2243
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title {
@@ -2231,13 +2253,14 @@ div.dataviews-view-list {
2231
2253
  }
2232
2254
 
2233
2255
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable:focus-visible {
2234
- 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));
2235
2257
  outline-offset: var(--wp-admin-border-width-focus);
2236
2258
  border-radius: var(--wpds-border-radius-sm, 2px);
2237
2259
  }
2238
2260
 
2239
2261
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
2240
2262
  display: flex;
2263
+ width: -moz-max-content;
2241
2264
  width: max-content;
2242
2265
  flex: 0 0 auto;
2243
2266
  }
@@ -2248,7 +2271,7 @@ div.dataviews-view-list {
2248
2271
  }
2249
2272
 
2250
2273
  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
2251
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2274
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2252
2275
  display: flex;
2253
2276
  gap: var(--wpds-dimension-gap-md, 12px);
2254
2277
  row-gap: var(--wpds-dimension-gap-xs, 4px);
@@ -2294,7 +2317,7 @@ div.dataviews-view-list {
2294
2317
  }
2295
2318
 
2296
2319
  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type::before {
2297
- height: calc(var(--wpds-dimension-base, 4px) * 3);
2320
+ height: var(--wpds-dimension-size-3xs, 12px);
2298
2321
  }
2299
2322
 
2300
2323
  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type-icon {
@@ -2307,11 +2330,11 @@ div.dataviews-view-list {
2307
2330
  }
2308
2331
 
2309
2332
  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type {
2310
- width: calc(var(--wpds-dimension-base, 4px) * 6);
2333
+ width: var(--wpds-dimension-size-sm, 24px);
2311
2334
  }
2312
2335
 
2313
2336
  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type::before {
2314
- height: calc(var(--wpds-dimension-base, 4px) * 3);
2337
+ height: var(--wpds-dimension-size-3xs, 12px);
2315
2338
  }
2316
2339
 
2317
2340
  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type-icon {
@@ -2325,11 +2348,11 @@ div.dataviews-view-list {
2325
2348
  }
2326
2349
 
2327
2350
  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type {
2328
- width: calc(var(--wpds-dimension-base, 4px) * 8);
2351
+ width: var(--wpds-dimension-size-md, 32px);
2329
2352
  }
2330
2353
 
2331
2354
  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type::before {
2332
- height: calc(var(--wpds-dimension-base, 4px) * 2);
2355
+ height: var(--wpds-dimension-size-4xs, 8px);
2333
2356
  }
2334
2357
 
2335
2358
  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type-icon {
@@ -2361,7 +2384,7 @@ div.dataviews-view-list {
2361
2384
  .dataviews-view-activity .dataviews-view-activity__item-type-icon {
2362
2385
  overflow: hidden;
2363
2386
  flex-shrink: 0;
2364
- background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
2387
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2365
2388
  }
2366
2389
 
2367
2390
  .dataviews-view-activity .dataviews-view-activity__item-type-icon img,
@@ -2371,6 +2394,7 @@ div.dataviews-view-list {
2371
2394
  width: 100%;
2372
2395
  height: 100%;
2373
2396
  margin: 0 auto;
2397
+ -o-object-fit: cover;
2374
2398
  object-fit: cover;
2375
2399
  border-radius: 50%;
2376
2400
  box-sizing: border-box;
@@ -2401,9 +2425,210 @@ div.dataviews-view-list {
2401
2425
  justify-content: space-between;
2402
2426
  }
2403
2427
 
2428
+ .dataviews-view-picker-activity {
2429
+ margin: 0;
2430
+ padding: 0;
2431
+ flex-grow: 1;
2432
+ }
2433
+
2434
+ .dataviews-view-picker-activity:focus-visible[aria-activedescendant] {
2435
+ outline: none;
2436
+ }
2437
+
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, var(--wp-admin-theme-color, #3858e9));
2440
+ outline-offset: -2px;
2441
+ }
2442
+
2443
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item {
2444
+ cursor: var(--wpds-cursor-control, pointer);
2445
+ border-radius: var(--wpds-border-radius-sm, 2px);
2446
+ padding-inline: var(--wpds-dimension-padding-2xl, 24px);
2447
+ transition: background-color 0.1s ease;
2448
+ }
2449
+
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-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2452
+ }
2453
+
2454
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected {
2455
+ outline: 3px solid transparent;
2456
+ outline-offset: -2px;
2457
+ }
2458
+
2459
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type {
2460
+ width: var(--wpds-dimension-padding-md, 12px);
2461
+ }
2462
+
2463
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type::before {
2464
+ height: var(--wpds-dimension-size-3xs, 12px);
2465
+ }
2466
+
2467
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type-icon {
2468
+ width: calc(var(--wpds-dimension-base, 4px) * 3 - 1px);
2469
+ height: calc(var(--wpds-dimension-base, 4px) * 3 - 1px);
2470
+ }
2471
+
2472
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-content {
2473
+ margin: var(--wpds-dimension-gap-md, 12px) 0;
2474
+ }
2475
+
2476
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type {
2477
+ width: var(--wpds-dimension-size-sm, 24px);
2478
+ }
2479
+
2480
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type::before {
2481
+ height: var(--wpds-dimension-size-3xs, 12px);
2482
+ }
2483
+
2484
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type-icon {
2485
+ width: calc(var(--wpds-dimension-base, 4px) * 6 + 1px);
2486
+ height: calc(var(--wpds-dimension-base, 4px) * 6 + 1px);
2487
+ }
2488
+
2489
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-content {
2490
+ margin: var(--wpds-dimension-gap-md, 12px) 0;
2491
+ padding-top: var(--wpds-dimension-padding-sm, 8px);
2492
+ }
2493
+
2494
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type {
2495
+ width: var(--wpds-dimension-size-md, 32px);
2496
+ }
2497
+
2498
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type::before {
2499
+ height: var(--wpds-dimension-size-4xs, 8px);
2500
+ }
2501
+
2502
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type-icon {
2503
+ width: calc(var(--wpds-dimension-base, 4px) * 8 + 1px);
2504
+ height: calc(var(--wpds-dimension-base, 4px) * 8 + 1px);
2505
+ }
2506
+
2507
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-content {
2508
+ margin: var(--wpds-dimension-gap-sm, 8px) 0 var(--wpds-dimension-gap-lg, 16px);
2509
+ padding-top: var(--wpds-dimension-padding-md, 12px);
2510
+ }
2511
+
2512
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-bullet, .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-bullet {
2513
+ width: calc(var(--wpds-dimension-base, 4px) * 2 + 1px);
2514
+ height: calc(var(--wpds-dimension-base, 4px) * 2 + 1px);
2515
+ position: relative;
2516
+ top: 50%;
2517
+ transform: translateY(-50%);
2518
+ }
2519
+
2520
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content {
2521
+ flex-grow: 1;
2522
+ }
2523
+
2524
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title,
2525
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-description,
2526
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields {
2527
+ min-height: var(--wpds-dimension-size-2xs, 16px);
2528
+ }
2529
+
2530
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title {
2531
+ position: relative;
2532
+ display: flex;
2533
+ align-items: center;
2534
+ flex: 1;
2535
+ overflow: hidden;
2536
+ }
2537
+
2538
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-description:empty {
2539
+ display: none;
2540
+ }
2541
+
2542
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields {
2543
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2544
+ display: flex;
2545
+ gap: var(--wpds-dimension-gap-md, 12px);
2546
+ row-gap: var(--wpds-dimension-gap-xs, 4px);
2547
+ flex-wrap: wrap;
2548
+ }
2549
+
2550
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields:empty {
2551
+ display: none;
2552
+ }
2553
+
2554
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields .dataviews-view-picker-activity__item-field:has(.dataviews-view-picker-activity__item-field-value:empty) {
2555
+ display: none;
2556
+ }
2557
+
2558
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields .dataviews-view-picker-activity__item-field-value {
2559
+ display: flex;
2560
+ align-items: center;
2561
+ }
2562
+
2563
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type {
2564
+ align-self: stretch;
2565
+ flex-shrink: 0;
2566
+ }
2567
+
2568
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type::after {
2569
+ content: "";
2570
+ flex: 1 1 auto;
2571
+ width: 1px;
2572
+ margin: 0 auto;
2573
+ background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2574
+ }
2575
+
2576
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type::before {
2577
+ content: "";
2578
+ flex: 0 0 auto;
2579
+ width: 1px;
2580
+ margin: 0 auto;
2581
+ background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2582
+ }
2583
+
2584
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item:first-child .dataviews-view-picker-activity__item-type::before {
2585
+ visibility: hidden;
2586
+ }
2587
+
2588
+ .dataviews-view-picker-activity .dataviews-view-picker-activity-group:last-of-type > .dataviews-view-picker-activity__item:last-of-type .dataviews-view-picker-activity__item-type::after, .dataviews-view-picker-activity > .dataviews-view-picker-activity__item:last-child .dataviews-view-picker-activity__item-type::after {
2589
+ background: linear-gradient(to bottom, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 0%, color-mix(in srgb, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 20%, transparent) 60%, transparent 100%);
2590
+ }
2591
+
2592
+ .dataviews-view-picker-activity .dataviews-view-picker-activity-group__header {
2593
+ font-size: var(--wpds-typography-font-size-lg, 15px);
2594
+ font-weight: var(--wpds-typography-font-weight-medium, 499);
2595
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2596
+ margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2597
+ padding: 0;
2598
+ padding-inline-start: var(--wpds-dimension-padding-2xl, 24px);
2599
+ }
2600
+
2601
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon {
2602
+ overflow: hidden;
2603
+ flex-shrink: 0;
2604
+ background-color: transparent;
2605
+ }
2606
+
2607
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon img,
2608
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon svg,
2609
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon .dataviews-view-picker-activity__item-bullet {
2610
+ display: block;
2611
+ width: 100%;
2612
+ height: 100%;
2613
+ margin: 0 auto;
2614
+ -o-object-fit: cover;
2615
+ object-fit: cover;
2616
+ border-radius: 50%;
2617
+ box-sizing: border-box;
2618
+ box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2619
+ }
2620
+
2621
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon svg {
2622
+ padding: var(--wpds-dimension-padding-xs, 4px);
2623
+ }
2624
+
2625
+ .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon .dataviews-view-picker-activity__item-bullet {
2626
+ background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2627
+ }
2628
+
2404
2629
  .dataviews-picker-footer__bulk-selection {
2405
2630
  align-self: flex-start;
2406
- height: calc(var(--wpds-dimension-base, 4px) * 8);
2631
+ height: var(--wpds-dimension-size-md, 32px);
2407
2632
  }
2408
2633
 
2409
2634
  .dataviews-picker-footer__actions {
@@ -2439,7 +2664,7 @@ div.dataviews-view-list {
2439
2664
  }
2440
2665
 
2441
2666
  .dataviews-controls__date-preset:active {
2442
- background-color: var(--wpds-color-bg-interactive-neutral-strong-active, #1e1e1e);
2667
+ background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
2443
2668
  }
2444
2669
 
2445
2670
  .dataforms-layouts-panel__field-trigger {
@@ -2447,7 +2672,7 @@ div.dataviews-view-list {
2447
2672
  color: inherit;
2448
2673
  display: flex;
2449
2674
  width: 100%;
2450
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2675
+ min-height: var(--wpds-dimension-size-sm, 24px);
2451
2676
  cursor: var(--wpds-cursor-control, pointer);
2452
2677
  align-items: flex-start;
2453
2678
  border-radius: var(--wpds-border-radius-sm, 2px);
@@ -2456,7 +2681,7 @@ div.dataviews-view-list {
2456
2681
 
2457
2682
  .dataforms-layouts-panel__field-trigger--label-side {
2458
2683
  flex-direction: row;
2459
- gap: var(--wpds-dimension-gap-md, 12px);
2684
+ gap: var(--wpds-dimension-gap-sm, 8px);
2460
2685
  }
2461
2686
 
2462
2687
  .dataforms-layouts-panel__field-trigger--label-top {
@@ -2469,7 +2694,7 @@ div.dataviews-view-list {
2469
2694
  }
2470
2695
 
2471
2696
  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover {
2472
- 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));
2473
2698
  }
2474
2699
 
2475
2700
  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-trigger-icon {
@@ -2477,7 +2702,7 @@ div.dataviews-view-list {
2477
2702
  }
2478
2703
 
2479
2704
  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-label {
2480
- 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));
2481
2706
  }
2482
2707
 
2483
2708
  .dataforms-layouts-panel__field-trigger.is-disabled {
@@ -2485,7 +2710,7 @@ div.dataviews-view-list {
2485
2710
  }
2486
2711
 
2487
2712
  .dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control {
2488
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2713
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2489
2714
  font-weight: var(--wpds-typography-font-weight-regular, 400);
2490
2715
  }
2491
2716
 
@@ -2495,12 +2720,12 @@ div.dataviews-view-list {
2495
2720
  }
2496
2721
 
2497
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 {
2498
- 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));
2499
2724
  }
2500
2725
 
2501
2726
  .dataforms-layouts-panel__field-trigger-icon {
2502
2727
  padding: 0;
2503
- 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));
2504
2729
  flex: 0 0 auto;
2505
2730
  opacity: 0;
2506
2731
  border-radius: var(--wpds-border-radius-xs, 1px);
@@ -2508,7 +2733,7 @@ div.dataviews-view-list {
2508
2733
 
2509
2734
  .dataforms-layouts-panel__field-trigger-icon:focus-visible {
2510
2735
  opacity: 1;
2511
- outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
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));
2512
2737
  }
2513
2738
 
2514
2739
  .dataforms-layouts-panel__field-dropdown-anchor {
@@ -2522,12 +2747,12 @@ div.dataviews-view-list {
2522
2747
  .dataforms-layouts-panel__field-label {
2523
2748
  width: 38%;
2524
2749
  flex-shrink: 0;
2525
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2750
+ min-height: var(--wpds-dimension-size-sm, 24px);
2526
2751
  display: flex;
2527
2752
  align-items: center;
2528
2753
  line-height: var(--wpds-typography-line-height-sm, 20px);
2529
2754
  hyphens: auto;
2530
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2755
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2531
2756
  }
2532
2757
 
2533
2758
  .dataforms-layouts-panel__field-label .components-base-control__label {
@@ -2537,14 +2762,14 @@ div.dataviews-view-list {
2537
2762
  }
2538
2763
 
2539
2764
  .dataforms-layouts-panel__field-label.has-error {
2540
- color: var(--wpds-color-fg-content-error-weak, #cc1818);
2765
+ color: var(--wpds-color-foreground-content-error-weak, #cc1818);
2541
2766
  }
2542
2767
 
2543
2768
  .dataforms-layouts-panel__field-label-error-content {
2544
2769
  position: relative;
2545
2770
  z-index: 1;
2546
2771
  cursor: help;
2547
- fill: var(--wpds-color-fg-content-error-weak, #cc1818);
2772
+ fill: var(--wpds-color-foreground-content-error-weak, #cc1818);
2548
2773
  display: inline-flex;
2549
2774
  flex-direction: row;
2550
2775
  align-items: center;
@@ -2558,11 +2783,13 @@ div.dataviews-view-list {
2558
2783
  .dataforms-layouts-panel__field-control {
2559
2784
  flex-grow: 1;
2560
2785
  min-width: 0;
2561
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2786
+ min-height: var(--wpds-dimension-size-sm, 24px);
2562
2787
  line-height: var(--wpds-typography-line-height-md, 24px);
2563
2788
  display: flex;
2564
2789
  align-items: center;
2565
- 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)));
2566
2793
  word-break: break-word;
2567
2794
  font-weight: var(--wpds-typography-font-weight-medium, 499);
2568
2795
  }
@@ -2571,23 +2798,6 @@ div.dataviews-view-list {
2571
2798
  min-width: 0;
2572
2799
  }
2573
2800
 
2574
- .dataforms-layouts-panel__field-control .components-button {
2575
- max-width: 100%;
2576
- text-align: right;
2577
- white-space: normal;
2578
- text-wrap: balance;
2579
- text-wrap: pretty;
2580
- min-height: 32px;
2581
- }
2582
-
2583
- .dataforms-layouts-panel__field-control.components-button.is-link[aria-disabled=true] {
2584
- text-decoration: none;
2585
- }
2586
-
2587
- .dataforms-layouts-panel__field-control .components-dropdown {
2588
- max-width: 100%;
2589
- }
2590
-
2591
2801
  .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-label {
2592
2802
  width: 100%;
2593
2803
  }
@@ -2624,7 +2834,7 @@ div.dataviews-view-list {
2624
2834
 
2625
2835
  .dataforms-layouts-regular__field {
2626
2836
  width: 100%;
2627
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2837
+ min-height: var(--wpds-dimension-size-md, 32px);
2628
2838
  justify-content: flex-start !important;
2629
2839
  align-items: flex-start !important;
2630
2840
  }
@@ -2632,13 +2842,13 @@ div.dataviews-view-list {
2632
2842
  .dataforms-layouts-regular__field .components-base-control__label,
2633
2843
  .dataforms-layouts-regular__field .components-input-control__label,
2634
2844
  .dataforms-layouts-regular__field .components-form-token-field__label {
2635
- color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2845
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2636
2846
  }
2637
2847
 
2638
2848
  .dataforms-layouts-regular__field-label {
2639
2849
  width: 38%;
2640
2850
  flex-shrink: 0;
2641
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2851
+ min-height: var(--wpds-dimension-size-md, 32px);
2642
2852
  display: flex;
2643
2853
  align-items: center;
2644
2854
  line-height: var(--wpds-typography-line-height-sm, 20px);
@@ -2655,7 +2865,7 @@ div.dataviews-view-list {
2655
2865
 
2656
2866
  .dataforms-layouts-regular__field-control {
2657
2867
  flex-grow: 1;
2658
- min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2868
+ min-height: var(--wpds-dimension-size-md, 32px);
2659
2869
  display: flex;
2660
2870
  align-items: center;
2661
2871
  }
@@ -2673,7 +2883,7 @@ div.dataviews-view-list {
2673
2883
  }
2674
2884
 
2675
2885
  .dataforms-layouts-card__field-description {
2676
- color: var(--wpds-color-fg-content-neutral-weak, #707070);
2886
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2677
2887
  display: block;
2678
2888
  font-size: var(--wpds-typography-font-size-md, 13px);
2679
2889
  margin-bottom: var(--wpds-dimension-gap-lg, 16px);
@@ -2688,7 +2898,7 @@ div.dataviews-view-list {
2688
2898
 
2689
2899
  .dataforms-layouts-details__summary-content {
2690
2900
  display: inline-flex;
2691
- min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2901
+ min-height: var(--wpds-dimension-size-sm, 24px);
2692
2902
  }
2693
2903
 
2694
2904
  .dataforms-layouts-details__content {
@@ -3121,7 +3331,9 @@ fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-exp
3121
3331
  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
3122
3332
  width: 100%;
3123
3333
  height: 100%;
3334
+ -o-object-fit: cover;
3124
3335
  object-fit: cover;
3336
+ -o-object-position: 50% 50%;
3125
3337
  object-position: 50% 50%;
3126
3338
  }
3127
3339
 
@@ -3184,6 +3396,7 @@ fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields_
3184
3396
  .fields-controls__author-avatar img {
3185
3397
  width: 16px;
3186
3398
  height: 16px;
3399
+ -o-object-fit: cover;
3187
3400
  object-fit: cover;
3188
3401
  opacity: 0;
3189
3402
  border-radius: 100%;
@@ -3650,8 +3863,7 @@ button.font-library__upload-area {
3650
3863
  }
3651
3864
 
3652
3865
  .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
3653
- .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta,
3654
- .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 {
3655
3867
  color: #1e1e1e;
3656
3868
  }
3657
3869
 
@@ -3677,14 +3889,13 @@ button.font-library__upload-area {
3677
3889
  }
3678
3890
 
3679
3891
  .global-styles-ui-screen-revisions__apply-button.is-primary,
3680
- .global-styles-ui-screen-revisions__applied-text {
3892
+ .global-styles-ui-screen-revisions__active-badge {
3681
3893
  align-self: flex-start;
3682
- margin: 4px 40px 12px 12px;
3894
+ margin: 0 40px 12px 12px;
3683
3895
  }
3684
3896
 
3685
3897
  .global-styles-ui-screen-revisions__changes,
3686
- .global-styles-ui-screen-revisions__meta,
3687
- .global-styles-ui-screen-revisions__applied-text {
3898
+ .global-styles-ui-screen-revisions__meta {
3688
3899
  color: #757575;
3689
3900
  font-size: 12px;
3690
3901
  }
@@ -3989,25 +4200,24 @@ button.font-library__upload-area {
3989
4200
  margin: 16px;
3990
4201
  }
3991
4202
 
3992
- .global-styles-ui-screen-css .components-v-stack {
4203
+ .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel {
3993
4204
  flex: 1 1 auto;
3994
4205
  }
3995
4206
 
3996
- .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input {
4207
+ .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input {
3997
4208
  flex: 1 1 auto;
3998
4209
  display: flex;
3999
4210
  flex-direction: column;
4000
4211
  }
4001
4212
 
4002
- .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
4213
+ .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
4003
4214
  flex: 1 1 auto;
4004
4215
  display: flex;
4005
4216
  flex-direction: column;
4006
4217
  }
4007
4218
 
4008
- .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field .components-textarea-control__input {
4219
+ .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input textarea {
4009
4220
  flex: 1 1 auto;
4010
- direction: ltr;
4011
4221
  }
4012
4222
 
4013
4223
  .global-styles-ui-screen-css-help-link {
@@ -4322,7 +4532,7 @@ button.font-library__upload-area {
4322
4532
  box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
4323
4533
  box-sizing: border-box;
4324
4534
  z-index: 1;
4325
- background-color: #fff;
4535
+ background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
4326
4536
  width: calc(100% + 2px);
4327
4537
  right: -1px;
4328
4538
  min-width: initial;
@@ -4379,11 +4589,6 @@ button.font-library__upload-area {
4379
4589
  .edit-site-list__rename-modal {
4380
4590
  z-index: 1000001;
4381
4591
  }
4382
- @media (min-width: 782px) {
4383
- .edit-site-list__rename-modal .components-base-control {
4384
- width: 320px;
4385
- }
4386
- }
4387
4592
 
4388
4593
  .edit-site-editor__editor-interface {
4389
4594
  opacity: 1;
@@ -4480,7 +4685,8 @@ button.font-library__upload-area {
4480
4685
  .edit-site-welcome-guide__image > img {
4481
4686
  display: block;
4482
4687
  max-width: 100%;
4483
- object-fit: cover;
4688
+ -o-object-fit: cover;
4689
+ object-fit: cover;
4484
4690
  }
4485
4691
  .edit-site-welcome-guide__heading {
4486
4692
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -4508,13 +4714,13 @@ button.font-library__upload-area {
4508
4714
 
4509
4715
  .edit-site-layout {
4510
4716
  height: 100%;
4511
- background: #1e1e1e;
4512
- color: #ccc;
4717
+ background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4718
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4513
4719
  display: flex;
4514
4720
  flex-direction: column;
4515
4721
  }
4516
4722
  .edit-site-layout:not(.is-full-canvas) .editor-visual-editor {
4517
- background: #1e1e1e;
4723
+ background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4518
4724
  }
4519
4725
 
4520
4726
  .edit-site-layout__content {
@@ -4577,6 +4783,16 @@ button.font-library__upload-area {
4577
4783
  padding: 0 12px;
4578
4784
  }
4579
4785
 
4786
+ .edit-site-layout__mobile-content {
4787
+ display: flex;
4788
+ flex-direction: column;
4789
+ flex-grow: 1;
4790
+ }
4791
+
4792
+ .edit-site-sidebar__screen-wrapper:has(.edit-site-layout__mobile-content) {
4793
+ background: var(--wpds-color-background-surface-neutral, #fcfcfc);
4794
+ }
4795
+
4580
4796
  .edit-site-layout__canvas-container {
4581
4797
  position: relative;
4582
4798
  flex-grow: 1;
@@ -4598,7 +4814,7 @@ button.font-library__upload-area {
4598
4814
  justify-content: flex-end;
4599
4815
  }
4600
4816
  .edit-site-layout__canvas .edit-site-resizable-frame__inner {
4601
- color: #1e1e1e;
4817
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4602
4818
  }
4603
4819
  @media (min-width: 782px) {
4604
4820
  .edit-site-layout__canvas {
@@ -4618,7 +4834,7 @@ button.font-library__upload-area {
4618
4834
  }
4619
4835
  @media (min-width: 782px) {
4620
4836
  .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4621
- border-radius: 8px;
4837
+ border-radius: var(--wpds-border-radius-xl, 12px);
4622
4838
  }
4623
4839
  .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
4624
4840
  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);
@@ -4663,7 +4879,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4663
4879
  view-transition-name: toggle;
4664
4880
  /* stylelint-enable */
4665
4881
  position: relative;
4666
- color: #fff;
4882
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
4667
4883
  height: 64px;
4668
4884
  width: 64px;
4669
4885
  overflow: hidden;
@@ -4671,11 +4887,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4671
4887
  display: flex;
4672
4888
  align-items: center;
4673
4889
  justify-content: center;
4674
- background: #1e1e1e;
4890
+ background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4675
4891
  border-radius: 0;
4676
4892
  }
4677
4893
  .edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
4678
- color: #fff;
4894
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
4679
4895
  }
4680
4896
  .edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout__view-mode-toggle.components-button:focus {
4681
4897
  box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
@@ -4714,8 +4930,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4714
4930
  right: auto;
4715
4931
  left: 0;
4716
4932
  width: 280px;
4717
- color: #1e1e1e;
4718
- background: #fff;
4933
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4934
+ background: var(--wpds-color-background-surface-neutral-strong, #fff);
4719
4935
  }
4720
4936
  .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
4721
4937
  top: auto;
@@ -4726,7 +4942,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4726
4942
  }
4727
4943
  @media (min-width: 782px) {
4728
4944
  .edit-site-layout__actions {
4729
- border-right: 1px solid #ddd;
4945
+ border-right: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4730
4946
  }
4731
4947
  }
4732
4948
 
@@ -4738,7 +4954,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4738
4954
  }
4739
4955
  @media (min-width: 782px) {
4740
4956
  .edit-site-layout__area {
4741
- border-radius: 8px;
4957
+ border-radius: var(--wpds-border-radius-xl, 12px);
4742
4958
  margin: 16px 0 16px 16px;
4743
4959
  }
4744
4960
  }
@@ -4759,11 +4975,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4759
4975
  }
4760
4976
 
4761
4977
  .edit-site-save-hub {
4762
- color: #949494;
4763
- border-top: 1px solid #2f2f2f;
4978
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4979
+ border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4764
4980
  flex-shrink: 0;
4765
4981
  margin: 0;
4766
- padding: 16px 16px;
4982
+ padding: 16px;
4767
4983
  }
4768
4984
 
4769
4985
  .edit-site-save-hub__button {
@@ -4774,11 +4990,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4774
4990
  .edit-site-save-hub__button[aria-disabled=true] {
4775
4991
  opacity: 1;
4776
4992
  }
4777
- .edit-site-save-hub__button[aria-disabled=true]:hover {
4993
+ .edit-site-save-hub__button[aria-disabled=true], .edit-site-save-hub__button[aria-disabled=true]:hover {
4778
4994
  color: inherit;
4779
4995
  }
4780
4996
  .edit-site-save-hub__button:not(.is-primary).is-busy, .edit-site-save-hub__button:not(.is-primary).is-busy[aria-disabled=true]:hover {
4781
- color: #1e1e1e;
4997
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
4782
4998
  }
4783
4999
 
4784
5000
  @media (min-width: 600px) {
@@ -4873,7 +5089,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4873
5089
  }
4874
5090
 
4875
5091
  .edit-site-sidebar-button {
4876
- color: #e0e0e0;
5092
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
4877
5093
  flex-shrink: 0;
4878
5094
  }
4879
5095
  .edit-site-sidebar-button:focus:not(:disabled) {
@@ -4885,31 +5101,31 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4885
5101
  outline: 3px solid transparent;
4886
5102
  }
4887
5103
  .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] {
4888
- color: #f0f0f0;
5104
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
4889
5105
  }
4890
5106
 
4891
5107
  .edit-site-sidebar-navigation-item.components-item {
4892
- color: #949494;
5108
+ color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
4893
5109
  padding: 8px 16px 8px 6px;
4894
5110
  border: none;
4895
5111
  min-height: 40px;
4896
5112
  }
4897
5113
  .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] {
4898
- color: #e0e0e0;
5114
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
4899
5115
  }
4900
5116
  .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 {
4901
- fill: #e0e0e0;
5117
+ fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
4902
5118
  }
4903
5119
  .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
4904
- background: #2f2f2f;
4905
- color: #fff;
5120
+ background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
5121
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
4906
5122
  font-weight: 499;
4907
5123
  }
4908
5124
  .edit-site-sidebar-navigation-item.components-item:focus-visible {
4909
5125
  transform: translateZ(0);
4910
5126
  }
4911
5127
  .edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
4912
- fill: #949494;
5128
+ fill: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
4913
5129
  }
4914
5130
  .edit-site-sidebar-navigation-item.components-item.with-suffix {
4915
5131
  padding-left: 16px;
@@ -4939,7 +5155,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4939
5155
  padding: 0 16px;
4940
5156
  }
4941
5157
  .edit-site-sidebar-navigation-screen__content .components-text {
4942
- color: #ccc;
5158
+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4943
5159
  }
4944
5160
  .edit-site-sidebar-navigation-screen__content .components-heading {
4945
5161
  margin-bottom: 8px;
@@ -4948,7 +5164,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4948
5164
  .edit-site-sidebar-navigation-screen__title-icon {
4949
5165
  position: sticky;
4950
5166
  top: 0;
4951
- background: #1e1e1e;
5167
+ background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4952
5168
  padding-top: 48px;
4953
5169
  margin-bottom: 8px;
4954
5170
  padding-bottom: 8px;
@@ -4990,11 +5206,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
4990
5206
  .edit-site-sidebar-navigation-screen__footer {
4991
5207
  position: sticky;
4992
5208
  bottom: 0;
4993
- background-color: #1e1e1e;
5209
+ background-color: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4994
5210
  gap: 0;
4995
5211
  padding: 8px 16px;
4996
5212
  margin: 16px 0 0;
4997
- border-top: 1px solid #2f2f2f;
5213
+ border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4998
5214
  }
4999
5215
  .edit-site-sidebar-navigation-screen__footer .edit-site-sidebar-navigation-screen-details-footer {
5000
5216
  margin-right: -16px;
@@ -5011,20 +5227,20 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5011
5227
  width: 100%;
5012
5228
  }
5013
5229
  .edit-site-sidebar-navigation-screen__input-control .components-input-control__container {
5014
- background: #2f2f2f;
5230
+ background: var(--wpds-color-background-interactive-neutral-weak, #0000);
5015
5231
  }
5016
5232
  .edit-site-sidebar-navigation-screen__input-control .components-input-control__container .components-button {
5017
- color: #e0e0e0 !important;
5233
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e) !important;
5018
5234
  }
5019
5235
  .edit-site-sidebar-navigation-screen__input-control .components-input-control__input {
5020
- color: #e0e0e0 !important;
5021
- background: #2f2f2f !important;
5236
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e) !important;
5237
+ background: var(--wpds-color-background-interactive-neutral-weak, #0000) !important;
5022
5238
  }
5023
5239
  .edit-site-sidebar-navigation-screen__input-control .components-input-control__backdrop {
5024
5240
  border: 4px !important;
5025
5241
  }
5026
5242
  .edit-site-sidebar-navigation-screen__input-control .components-base-control__help {
5027
- color: #949494;
5243
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
5028
5244
  }
5029
5245
 
5030
5246
  .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:focus,
@@ -5034,10 +5250,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5034
5250
  }
5035
5251
 
5036
5252
  .sidebar-navigation__more-menu .components-button {
5037
- color: #e0e0e0;
5253
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5038
5254
  }
5039
5255
  .sidebar-navigation__more-menu .components-button:hover, .sidebar-navigation__more-menu .components-button:focus, .sidebar-navigation__more-menu .components-button[aria-current] {
5040
- color: #f0f0f0;
5256
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5041
5257
  }
5042
5258
 
5043
5259
  .edit-site-sidebar-navigation-screen-patterns__group {
@@ -5055,7 +5271,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5055
5271
  margin-top: 16px;
5056
5272
  }
5057
5273
  .edit-site-sidebar-navigation-screen-patterns__group-header p {
5058
- color: #949494;
5274
+ color: var(--wpds-color-foreground-content-neutral-weak, #707070);
5059
5275
  }
5060
5276
  .edit-site-sidebar-navigation-screen-patterns__group-header h2 {
5061
5277
  font-size: 11px;
@@ -5064,7 +5280,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5064
5280
  }
5065
5281
 
5066
5282
  .edit-site-sidebar-navigation-screen-patterns__divider {
5067
- border-top: 1px solid #2f2f2f;
5283
+ border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5068
5284
  margin: 16px 0;
5069
5285
  }
5070
5286
 
@@ -5087,16 +5303,24 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5087
5303
  padding-left: 0;
5088
5304
  }
5089
5305
  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button {
5090
- color: #949494;
5306
+ color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5091
5307
  }
5092
5308
  .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] {
5093
- color: #fff;
5309
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5094
5310
  }
5095
5311
  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
5096
- color: #949494;
5312
+ color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5097
5313
  }
5098
5314
  .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 {
5099
- color: #fff;
5315
+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5316
+ }
5317
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-inserter__toggle {
5318
+ background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
5319
+ color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
5320
+ }
5321
+ .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 {
5322
+ background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
5323
+ color: var(--wpds-color-foreground-interactive-brand-strong-active, #fff);
5100
5324
  }
5101
5325
 
5102
5326
  .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
@@ -5147,7 +5371,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5147
5371
  }
5148
5372
 
5149
5373
  .edit-site-site-hub__title .components-button {
5150
- color: #e0e0e0;
5374
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5151
5375
  display: block;
5152
5376
  flex-grow: 1;
5153
5377
  font-size: 15px;
@@ -5161,14 +5385,14 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5161
5385
  white-space: nowrap;
5162
5386
  }
5163
5387
  .edit-site-site-hub__title .components-button:hover, .edit-site-site-hub__title .components-button:focus, .edit-site-site-hub__title .components-button:active {
5164
- color: #e0e0e0;
5388
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5165
5389
  }
5166
5390
  .edit-site-site-hub__title .components-button:focus {
5167
5391
  box-shadow: none;
5168
5392
  outline: none;
5169
5393
  }
5170
5394
  .edit-site-site-hub__title .components-button:focus-visible {
5171
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
5395
+ 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);
5172
5396
  outline: 2px solid transparent;
5173
5397
  outline-offset: 2px;
5174
5398
  }
@@ -5189,10 +5413,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5189
5413
  }
5190
5414
 
5191
5415
  .edit-site-site-hub_toggle-command-center {
5192
- color: #e0e0e0;
5416
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5193
5417
  }
5194
5418
  .edit-site-site-hub_toggle-command-center:hover svg, .edit-site-site-hub_toggle-command-center:active svg {
5195
- fill: #f0f0f0;
5419
+ fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5196
5420
  }
5197
5421
 
5198
5422
  .edit-site-site-icon__icon {
@@ -5207,7 +5431,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5207
5431
  .edit-site-site-icon__image {
5208
5432
  width: 100%;
5209
5433
  height: 100%;
5210
- object-fit: cover;
5434
+ -o-object-fit: cover;
5435
+ object-fit: cover;
5211
5436
  background: #333;
5212
5437
  aspect-ratio: 1/1;
5213
5438
  }
@@ -5323,6 +5548,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
5323
5548
  body:has(.edit-site-resizable-frame__inner.is-resizing) {
5324
5549
  cursor: col-resize;
5325
5550
  -webkit-user-select: none;
5551
+ -moz-user-select: none;
5326
5552
  user-select: none;
5327
5553
  }
5328
5554
 
@@ -5403,7 +5629,7 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
5403
5629
  outline: none;
5404
5630
  }
5405
5631
  .edit-site-styles .edit-site-sidebar-button {
5406
- color: #1e1e1e;
5632
+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5407
5633
  }
5408
5634
 
5409
5635
  .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon {
@@ -5436,7 +5662,7 @@ body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle:hover .edit-sit
5436
5662
  color: var(--wp-admin-theme-color);
5437
5663
  }
5438
5664
  body.has-admin-bar-in-editor .edit-site-sidebar-navigation-screen__title-icon {
5439
- padding-top: 16px;
5665
+ padding-top: 32px;
5440
5666
  }
5441
5667
  body.has-admin-bar-in-editor .edit-site-layout__content,
5442
5668
  body.has-admin-bar-in-editor .edit-site-layout__sidebar {
@@ -5465,7 +5691,9 @@ body.has-admin-bar-in-editor .edit-site-layout.is-full-canvas .edit-site-layout_
5465
5691
  height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5466
5692
  }
5467
5693
  body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus,
5468
- body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
5694
+ body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within,
5695
+ body.has-admin-bar-in-editor.is-fullscreen-mode .edit-site-layout__actions.is-entity-save-view-open:focus,
5696
+ body.has-admin-bar-in-editor.is-fullscreen-mode .edit-site-layout__actions.is-entity-save-view-open:focus-within {
5469
5697
  top: var(--wp-admin--admin-bar--height, 0);
5470
5698
  }
5471
5699
  body.has-admin-bar-in-editor.is-fullscreen-mode #wpadminbar {
@@ -5539,7 +5767,7 @@ body.js.site-editor-php .media-frame select.attachment-filters:last-of-type {
5539
5767
  }
5540
5768
 
5541
5769
  body.js.site-editor-php {
5542
- background: #1e1e1e;
5770
+ background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5543
5771
  }
5544
5772
 
5545
5773
  .edit-site {