PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/styles/edit-site/style.css +806 -830 23.3.0 → trunk View file →
@@ -1,9 +1,5 @@
1 -@charset "UTF-8";
2 1 /**
3 - * Colors
4 - */
5 -/**
6 2 * Typography
7 3 */
8 4 /**
9 5 * SCSS Variables.
@@ -12,8 +8,11 @@
12 8 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
13 9 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
14 10 */
15 11 /**
12 + * Colors
13 + */
14 +/**
16 15 * Fonts & basic variables.
17 16 */
18 17 /**
19 18 * Typography
@@ -68,8 +67,14 @@
68 67 /**
69 68 * Focus styles.
70 69 */
71 70 /**
71 + * Standard focus rings for the WordPress Design System.
72 + *
73 + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
74 + * e.g. `&:focus { @include outset-ring__focus(); }`.
75 + */
76 +/**
72 77 * Applies editor left position to the selector passed as argument
73 78 */
74 79 /**
75 80 * Styles that are reused verbatim in a few places
@@ -176,8 +181,14 @@
176 181 /**
177 182 * Focus styles.
178 183 */
179 184 /**
185 + * Standard focus rings for the WordPress Design System.
186 + *
187 + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
188 + * e.g. `&:focus { @include outset-ring__focus(); }`.
189 + */
190 +/**
180 191 * Applies editor left position to the selector passed as argument
181 192 */
182 193 /**
183 194 * Styles that are reused verbatim in a few places
@@ -201,16 +212,15 @@
201 212 height: 100%;
202 213 flex-grow: 1;
203 214 min-height: 0;
204 215 box-sizing: border-box;
205 - scroll-padding-bottom: calc(var(--wpds-dimension-base, 4px) * 16);
206 - /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
216 + scroll-padding-bottom: 64px;
207 217 container: dataviews-wrapper/inline-size;
208 218 display: flex;
209 219 flex-direction: column;
210 220 font-size: var(--wpds-typography-font-size-md, 13px);
211 221 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));
222 + background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
213 223 }
214 224
215 225 .dataviews__view-actions,
216 226 .dataviews-filters__container {
@@ -227,8 +237,16 @@
227 237 .dataviews-filters__container {
228 238 transition: padding ease-out 0.1s;
229 239 }
230 240 }
241 +.dataviews__search {
242 + flex-grow: 1;
243 +}
244 +
245 +.dataviews__search .dataviews-search {
246 + flex-basis: 210px;
247 +}
248 +
231 249 .dataviews-no-results,
232 250 .dataviews-loading {
233 251 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
234 252 flex-grow: 1;
@@ -265,8 +283,12 @@
265 283 .dataviews-loading-more {
266 284 text-align: center;
267 285 }
268 286
287 +.dataviews-loading-more[aria-hidden=true] {
288 + visibility: hidden;
289 +}
290 +
269 291 @container (max-width: 430px) {
270 292 .dataviews__view-actions,
271 293 .dataviews-filters__container {
272 294 padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
@@ -273,10 +295,10 @@
273 295 }
274 296 }
275 297 .dataviews-title-field {
276 298 font-size: var(--wpds-typography-font-size-md, 13px);
277 - font-weight: var(--wpds-typography-font-weight-medium, 499);
278 - color: var(--wpds-color-fg-content-neutral, #1e1e1e);
299 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
300 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
279 301 text-overflow: ellipsis;
280 302 white-space: nowrap;
281 303 width: 100%;
282 304 }
@@ -287,13 +309,13 @@
287 309 white-space: nowrap;
288 310 overflow: hidden;
289 311 display: block;
290 312 flex-grow: 0;
291 - color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
313 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
292 314 }
293 315
294 316 .dataviews-title-field a:hover {
295 - color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
317 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
296 318 }
297 319
298 320 .dataviews-title-field a:focus {
299 321 color: var(--wp-admin-theme-color--rgb);
@@ -308,22 +330,22 @@
308 330 white-space: nowrap;
309 331 overflow: hidden;
310 332 display: block;
311 333 width: 100%;
312 - color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
334 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
313 335 }
314 336
315 337 .dataviews-title-field button.components-button.is-link:hover {
316 - color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
338 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
317 339 }
318 340
319 341 .dataviews-title-field--clickable {
320 342 cursor: var(--wpds-cursor-control, pointer);
321 - color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
343 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
322 344 }
323 345
324 346 .dataviews-title-field--clickable:hover {
325 - color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
347 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
326 348 }
327 349
328 350 .dataviews-title-field--clickable:focus {
329 351 color: var(--wp-admin-theme-color--rgb);
@@ -347,14 +369,14 @@
347 369 overflow: hidden;
348 370 }
349 371
350 372 .dataviews-bulk-actions-footer__item-count {
351 - color: var(--wpds-color-fg-content-neutral, #1e1e1e);
373 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
352 374 }
353 375
354 376 .dataviews-bulk-actions-footer__container {
355 377 margin-right: auto;
356 - min-height: calc(var(--wpds-dimension-base, 4px) * 8);
378 + min-height: var(--wpds-dimension-size-md, 32px);
357 379 }
358 380
359 381 .dataviews-layout__container {
360 382 flex: 1;
@@ -409,9 +431,9 @@
409 431 display: none;
410 432 }
411 433
412 434 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name {
413 - color: var(--wpds-color-fg-content-neutral-weak, #707070);
435 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
414 436 white-space: nowrap;
415 437 overflow: hidden;
416 438 text-overflow: ellipsis;
417 439 flex-shrink: 0; /* Prevents this element from shrinking */
@@ -419,10 +441,10 @@
419 441 }
420 442
421 443 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-select {
422 444 width: 100%;
445 + min-width: 0;
423 446 white-space: nowrap;
424 - overflow: hidden;
425 447 }
426 448
427 449 .dataviews-filters__summary-chip-container {
428 450 position: relative;
@@ -433,10 +455,10 @@
433 455 border-radius: var(--wpds-border-radius-lg, 8px);
434 456 border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
435 457 cursor: var(--wpds-cursor-control, pointer);
436 458 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);
459 + min-height: var(--wpds-dimension-size-md, 32px);
460 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
439 461 position: relative;
440 462 display: flex;
441 463 align-items: center;
442 464 box-sizing: border-box;
@@ -446,41 +468,41 @@
446 468 cursor: default;
447 469 }
448 470
449 471 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
450 - padding-inline-end: calc(24px + var(--wpds-dimension-padding-xs, 4px));
472 + padding-inline-end: calc(var(--wpds-dimension-size-sm, 24px) + var(--wpds-dimension-padding-xs, 4px));
451 473 }
452 474
453 475 .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);
476 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
455 477 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
456 - background-color: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
478 + background-color: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
457 479 }
458 480
459 481 .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));
482 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
483 + background: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0));
462 484 border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
463 485 }
464 486
465 487 .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));
488 + color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
489 + background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
468 490 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
469 491 }
470 492
471 493 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible {
472 494 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));
495 + 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 496 }
475 497
476 498 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
477 - font-weight: var(--wpds-typography-font-weight-medium, 499);
499 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
478 500 }
479 501
480 502 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
481 - width: 24px;
482 - height: 24px;
503 + width: var(--wpds-dimension-size-sm, 24px);
504 + height: var(--wpds-dimension-size-sm, 24px);
483 505 border-radius: var(--wpds-border-radius-md, 4px);
484 506 border: 0;
485 507 padding: 0;
486 508 position: absolute;
@@ -494,34 +516,34 @@
494 516 cursor: var(--wpds-cursor-control, pointer);
495 517 }
496 518
497 519 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
498 - fill: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
520 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
499 521 }
500 522
501 523 .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);
524 + background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
503 525 }
504 526
505 527 .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);
528 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
507 529 }
508 530
509 531 .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));
532 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
511 533 }
512 534
513 535 .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));
536 + background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
515 537 }
516 538
517 539 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus-visible {
518 540 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));
541 + 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 542 }
521 543
522 544 .dataviews-filters__search-widget-filter-combobox-list {
523 - max-height: calc(var(--wpds-dimension-base, 4px) * 46);
545 + max-height: 184px;
524 546 padding: var(--wpds-dimension-padding-xs, 4px);
525 547 overflow: auto;
526 548 border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
527 549 }
@@ -526,9 +548,9 @@
526 548 border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
527 549 }
528 550
529 551 .dataviews-filters__search-widget-filter-combobox-list .dataviews-filters__search-widget-filter-combobox-item-value [data-user-value] {
530 - font-weight: 600;
552 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
531 553 }
532 554
533 555 .dataviews-filters__search-widget-listbox {
534 556 padding: var(--wpds-dimension-padding-xs, 4px);
@@ -542,13 +564,14 @@
542 564 border-radius: var(--wpds-border-radius-sm, 2px);
543 565 box-sizing: border-box;
544 566 padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
545 567 cursor: default;
546 - min-height: calc(var(--wpds-dimension-base, 4px) * 8);
547 - font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
548 - font-weight: 400;
568 + min-height: var(--wpds-dimension-size-md, 32px);
569 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
570 + font-weight: var(--wpds-typography-font-weight-default, 400);
549 571 font-size: 13px;
550 572 line-height: 20px;
573 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
551 574 }
552 575
553 576 .dataviews-filters__search-widget-listitem:last-child {
554 577 margin-block-end: 0;
@@ -554,31 +577,37 @@
554 577 margin-block-end: 0;
555 578 }
556 579
557 580 .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));
581 + background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
582 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
559 583 }
560 584
561 585 .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 586 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);
587 + background: var(--wpds-color-background-surface-neutral-strong, #fff);
564 588 }
565 589
566 590 .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 591 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));
592 + background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
569 593 }
570 594
571 595 .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 {
596 + /* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
597 + background-color: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
572 598 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);
574 599 }
575 600
576 601 .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 602 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));
603 + background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
579 604 }
580 605
606 +.dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-description {
607 + color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
608 +}
609 +
581 610 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-value {
582 611 overflow: hidden;
583 612 text-overflow: ellipsis;
584 613 white-space: nowrap;
@@ -590,9 +619,9 @@
590 619 overflow: hidden;
591 620 text-overflow: ellipsis;
592 621 font-size: var(--wpds-typography-font-size-sm, 12px);
593 622 line-height: 16px;
594 - color: var(--wpds-color-fg-content-neutral-weak, #707070);
623 + color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
595 624 }
596 625
597 626 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
598 627 border: 1px solid #1e1e1e;
@@ -653,9 +682,9 @@
653 682 padding: 0;
654 683 }
655 684
656 685 .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));
686 + background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
658 687 border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
659 688 }
660 689
661 690 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
@@ -668,10 +697,10 @@
668 697 top: 50%;
669 698 left: 50%;
670 699 transform: translate(-50%, -50%);
671 700 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);
701 + background-color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
702 + border: 4px solid var(--wpds-color-foreground-interactive-brand-strong, #fff);
674 703 }
675 704
676 705 @media (min-width: 600px) {
677 706 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
@@ -681,28 +710,22 @@
681 710 }
682 711 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
683 712 --checkbox-size: 24px;
684 713 flex-shrink: 0;
685 - border: 1px solid #1e1e1e;
714 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
686 715 margin-right: 12px;
687 716 transition: none;
688 717 border-radius: 2px;
689 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
718 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
690 719 padding: 6px 8px;
691 720 /* Fonts smaller than 16px causes mobile safari to zoom. */
692 721 font-size: 16px;
693 722 /* Override core line-height. To be reviewed. */
694 723 line-height: normal;
695 - box-shadow: 0 0 0 transparent;
696 - border-radius: 2px;
697 - border: 1px solid #949494;
724 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
725 + border-radius: var(--wpds-border-radius-sm, 2px);
698 726 }
699 727
700 -@media not (prefers-reduced-motion) {
701 - .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
702 - transition: box-shadow 0.1s linear;
703 - }
704 -}
705 728 @media (min-width: 600px) {
706 729 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
707 730 font-size: 13px;
708 731 /* Override core line-height. To be reviewed. */
@@ -708,12 +731,17 @@
708 731 /* Override core line-height. To be reviewed. */
709 732 line-height: normal;
710 733 }
711 734 }
735 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
736 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
737 +}
738 +
712 739 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
713 - border-color: var(--wp-admin-theme-color);
714 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
715 - outline: 2px solid transparent;
740 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
741 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
742 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
743 + box-shadow: none;
716 744 }
717 745
718 746 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
719 747 color: rgba(30, 30, 30, 0.62);
@@ -718,8 +746,12 @@
718 746 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
719 747 color: rgba(30, 30, 30, 0.62);
720 748 }
721 749
750 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
751 + background: var(--wpds-color-background-interactive-neutral-active, #fff);
752 +}
753 +
722 754 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
723 755 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
724 756 outline: 2px solid transparent;
725 757 }
@@ -750,9 +782,9 @@
750 782 display: inline-block;
751 783 vertical-align: middle;
752 784 width: 16px;
753 785 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
754 - font: normal 30px/1 dashicons;
786 + font: 400 30px/1 dashicons;
755 787 speak: none;
756 788 -webkit-font-smoothing: antialiased;
757 789 -moz-osx-font-smoothing: grayscale;
758 790 }
@@ -763,18 +795,24 @@
763 795 font-size: 21px;
764 796 }
765 797 }
766 798 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true], .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled {
767 - background: #f0f0f0;
768 - border-color: #ddd;
799 + background: var(--wpds-color-background-interactive-neutral-disabled, #fff);
800 + border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
801 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
769 802 cursor: default;
770 803 opacity: 1;
771 804 }
772 805
806 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true]:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true][aria-checked=mixed]::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled[aria-checked=mixed]::before {
807 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
808 +}
809 +
773 810 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
774 811 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);
812 + /* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
813 + background: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
814 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
777 815 margin: 0;
778 816 padding: 0;
779 817 width: var(--checkbox-size);
780 818 height: var(--checkbox-size);
@@ -790,15 +828,15 @@
790 828 transition: 0.1s border-color ease-in-out;
791 829 }
792 830 }
793 831 .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));
832 + background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
795 833 border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
796 834 }
797 835
798 836 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
799 837 --checkmark-size: var(--checkbox-size);
800 - fill: var(--wpds-color-fg-interactive-neutral-strong, #f0f0f0);
838 + color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
801 839 position: absolute;
802 840 left: 50%;
803 841 top: 50%;
804 842 transform: translate(-50%, -50%);
@@ -816,24 +854,18 @@
816 854 padding: var(--wpds-dimension-padding-sm, 8px);
817 855 }
818 856
819 857 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
820 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
858 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
821 859 padding: 6px 8px;
822 860 /* Fonts smaller than 16px causes mobile safari to zoom. */
823 861 font-size: 16px;
824 862 /* Override core line-height. To be reviewed. */
825 863 line-height: normal;
826 - box-shadow: 0 0 0 transparent;
827 - border-radius: 2px;
828 - border: 1px solid #949494;
864 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
865 + border-radius: var(--wpds-border-radius-sm, 2px);
829 866 }
830 867
831 -@media not (prefers-reduced-motion) {
832 - .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
833 - transition: box-shadow 0.1s linear;
834 - }
835 -}
836 868 @media (min-width: 600px) {
837 869 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
838 870 font-size: 13px;
839 871 /* Override core line-height. To be reviewed. */
@@ -839,12 +871,17 @@
839 871 /* Override core line-height. To be reviewed. */
840 872 line-height: normal;
841 873 }
842 874 }
875 +.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:hover:not(:disabled, [aria-disabled=true]) {
876 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
877 +}
878 +
843 879 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
844 - border-color: var(--wp-admin-theme-color);
845 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
846 - outline: 2px solid transparent;
880 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
881 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
882 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
883 + box-shadow: none;
847 884 }
848 885
849 886 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
850 887 color: rgba(30, 30, 30, 0.62);
@@ -851,11 +888,11 @@
851 888 }
852 889
853 890 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
854 891 display: block;
855 - padding: 0 var(--wpds-dimension-padding-sm, 8px) 0 calc(var(--wpds-dimension-base, 4px) * 8);
892 + padding: 0 var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-size-md, 32px);
856 893 width: 100%;
857 - height: calc(var(--wpds-dimension-base, 4px) * 8);
894 + height: var(--wpds-dimension-size-md, 32px);
858 895 margin-left: 0;
859 896 margin-right: 0;
860 897 /* Fonts smaller than 16px causes mobile safari to zoom. */
861 898 font-size: 16px;
@@ -866,14 +903,13 @@
866 903 font-size: var(--wpds-typography-font-size-md, 13px);
867 904 }
868 905 }
869 906 .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));
907 + background: var(--wpds-color-background-surface-neutral-strong, #fff);
872 908 }
873 909
874 910 .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);
911 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
876 912 }
877 913
878 914 .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 {
879 915 -webkit-appearance: none;
@@ -886,9 +922,9 @@
886 922 bottom: 0;
887 923 display: flex;
888 924 align-items: center;
889 925 justify-content: center;
890 - width: 24px;
926 + width: var(--wpds-dimension-size-sm, 24px);
891 927 }
892 928
893 929 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon:dir(ltr) {
894 930 transform: scaleX(-1);
@@ -903,25 +939,21 @@
903 939 position: absolute;
904 940 top: 0;
905 941 right: 0;
906 942 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);
943 + background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
944 + height: var(--wpds-dimension-size-2xs, 16px);
945 + min-width: var(--wpds-dimension-size-2xs, 16px);
910 946 line-height: var(--wpds-typography-line-height-xs, 16px);
911 947 padding: 0 var(--wpds-dimension-padding-xs, 4px);
912 948 text-align: center;
913 949 border-radius: var(--wpds-border-radius-lg, 8px);
914 950 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);
951 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-background-surface-neutral-strong, #fff);
952 + color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
917 953 box-sizing: border-box;
918 954 }
919 955
920 -.dataviews-search {
921 - width: fit-content;
922 -}
923 -
924 956 .dataviews-filters__user-input-widget {
925 957 padding: var(--wpds-dimension-padding-lg, 16px);
926 958 }
927 959
@@ -941,9 +973,9 @@
941 973 bottom: 0;
942 974 left: 0;
943 975 background-color: inherit;
944 976 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);
977 + border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
946 978 flex-shrink: 0;
947 979 }
948 980
949 981 @media not (prefers-reduced-motion) {
@@ -982,9 +1014,9 @@
982 1014 }
983 1015 }
984 1016 .dataviews-pagination__page-select {
985 1017 font-size: 11px;
986 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1018 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
987 1019 text-transform: uppercase;
988 1020 }
989 1021
990 1022 @media (min-width: 600px) {
@@ -989,9 +1021,9 @@
989 1021
990 1022 @media (min-width: 600px) {
991 1023 .dataviews-pagination__page-select .components-select-control__input {
992 1024 font-size: 11px !important;
993 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1025 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
994 1026 }
995 1027 }
996 1028 .dataviews-action-modal {
997 1029 z-index: 1000001;
@@ -1020,9 +1052,8 @@
1020 1052 }
1021 1053
1022 1054 .dataviews-view-config {
1023 1055 width: 320px;
1024 - /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
1025 1056 container-type: inline-size;
1026 1057 font-size: var(--wpds-typography-font-size-md, 13px);
1027 1058 line-height: var(--wpds-typography-line-height-sm, 20px);
1028 1059 }
@@ -1095,9 +1126,9 @@
1095 1126 top: var(--wpds-dimension-gap-xs, 4px);
1096 1127 right: var(--wpds-dimension-gap-xs, 4px);
1097 1128 width: var(--wpds-dimension-gap-xs, 4px);
1098 1129 height: var(--wpds-dimension-gap-xs, 4px);
1099 - background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
1130 + background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
1100 1131 border-radius: 50%;
1101 1132 pointer-events: none;
1102 1133 }
1103 1134
@@ -1170,9 +1201,9 @@
1170 1201 top: 0;
1171 1202 left: 0;
1172 1203 width: 100%;
1173 1204 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));
1205 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1175 1206 border-radius: var(--wpds-border-radius-md, 4px);
1176 1207 pointer-events: none;
1177 1208 outline: 2px solid transparent;
1178 1209 }
@@ -1191,9 +1222,9 @@
1191 1222 }
1192 1223
1193 1224 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field,
1194 1225 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field {
1195 - min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1226 + min-height: var(--wpds-dimension-size-sm, 24px);
1196 1227 overflow: hidden;
1197 1228 align-content: center;
1198 1229 text-align: start;
1199 1230 }
@@ -1204,26 +1235,26 @@
1204 1235 }
1205 1236
1206 1237 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
1207 1238 .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);
1239 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1209 1240 }
1210 1241
1211 1242 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
1212 1243 .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);
1244 + 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 1245 }
1215 1246
1216 1247 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
1217 1248 .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));
1249 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1219 1250 }
1220 1251
1221 1252 .dataviews-view-grid .dataviews-view-grid__media,
1222 1253 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
1223 1254 width: 100%;
1224 - aspect-ratio: 1/1;
1225 - background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1255 + aspect-ratio: var(--wp-dataviews-media-aspect-ratio, 1/1);
1256 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1226 1257 border-radius: var(--wpds-border-radius-md, 4px);
1227 1258 overflow: hidden;
1228 1259 position: relative;
1229 1260 }
@@ -1259,11 +1290,21 @@
1259 1290 height: 100%;
1260 1291 display: block;
1261 1292 border-radius: var(--wpds-border-radius-md, 4px);
1262 1293 box-shadow: none;
1263 - background: var(--wpds-color-bg-surface-neutral, #fcfcfc);
1294 + background: var(--wpds-color-background-surface-neutral, #fcfcfc);
1264 1295 }
1265 1296
1297 +.dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media,
1298 +.dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media {
1299 + background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
1300 +}
1301 +
1302 +.dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media img,
1303 +.dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media img {
1304 + object-fit: contain;
1305 +}
1306 +
1266 1307 .dataviews-view-grid .dataviews-view-grid__fields,
1267 1308 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
1268 1309 position: relative;
1269 1310 font-size: 12px;
@@ -1276,16 +1317,16 @@
1276 1317 }
1277 1318
1278 1319 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty),
1279 1320 .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);
1321 + min-height: var(--wpds-dimension-size-sm, 24px);
1281 1322 line-height: var(--wpds-typography-line-height-sm, 20px);
1282 - padding-top: calc(var(--wpds-dimension-base, 4px) / 2);
1323 + padding-top: calc((var(--wpds-dimension-size-sm, 24px) - var(--wpds-typography-line-height-sm, 20px)) / 2);
1283 1324 }
1284 1325
1285 1326 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field,
1286 1327 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field {
1287 - min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1328 + min-height: var(--wpds-dimension-size-sm, 24px);
1288 1329 align-items: center;
1289 1330 }
1290 1331
1291 1332 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name,
@@ -1290,9 +1331,9 @@
1290 1331
1291 1332 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name,
1292 1333 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
1293 1334 width: 35%;
1294 - color: var(--wpds-color-fg-content-neutral-weak, #707070);
1335 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1295 1336 overflow: hidden;
1296 1337 text-overflow: ellipsis;
1297 1338 white-space: nowrap;
1298 1339 }
@@ -1367,9 +1408,9 @@
1367 1408 right: var(--wpds-dimension-padding-xs, 4px);
1368 1409 }
1369 1410
1370 1411 .dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
1371 - background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1412 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1372 1413 }
1373 1414
1374 1415 @media not (prefers-reduced-motion) {
1375 1416 .dataviews-view-grid__card .dataviews-view-grid__media-actions {
@@ -1393,10 +1434,10 @@
1393 1434 }
1394 1435
1395 1436 .dataviews-view-grid__group-header {
1396 1437 font-size: var(--wpds-typography-font-size-lg, 15px);
1397 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1398 - color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1438 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1439 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1399 1440 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1400 1441 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1401 1442 container-type: inline-size;
1402 1443 }
@@ -1411,9 +1452,9 @@
1411 1452
1412 1453 .dataviews-view-list div[role=row],
1413 1454 .dataviews-view-list div[role=article] {
1414 1455 margin: 0;
1415 - border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
1456 + border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
1416 1457 }
1417 1458
1418 1459 .dataviews-view-list div[role=row] .dataviews-view-list__item-wrapper,
1419 1460 .dataviews-view-list div[role=article] .dataviews-view-list__item-wrapper {
@@ -1438,9 +1479,9 @@
1438 1479 }
1439 1480
1440 1481 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > div,
1441 1482 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > div {
1442 - height: 24px;
1483 + height: var(--wpds-dimension-size-sm, 24px);
1443 1484 }
1444 1485
1445 1486 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
1446 1487 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
@@ -1465,15 +1506,15 @@
1465 1506 }
1466 1507 }
1467 1508 .dataviews-view-list div[role=row].is-selected.is-selected,
1468 1509 .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));
1510 + border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
1470 1511 }
1471 1512
1472 1513 .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 1514 .dataviews-view-list div[role=article].is-selected.is-selected + div[role=row],
1474 1515 .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));
1516 + border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
1476 1517 }
1477 1518
1478 1519 .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 1520 .dataviews-view-list div[role=article]:not(.is-selected):hover,
@@ -1478,10 +1519,9 @@
1478 1519 .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 1520 .dataviews-view-list div[role=article]:not(.is-selected):hover,
1480 1521 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
1481 1522 .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));
1523 + background-color: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
1484 1524 }
1485 1525
1486 1526 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
1487 1527 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-title-field,
@@ -1492,9 +1532,9 @@
1492 1532 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field,
1493 1533 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
1494 1534 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
1495 1535 .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));
1536 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1497 1537 }
1498 1538
1499 1539 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
1500 1540 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
@@ -1499,10 +1539,10 @@
1499 1539 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
1500 1540 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
1501 1541 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
1502 1542 .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);
1543 + background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1544 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1505 1545 }
1506 1546
1507 1547 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1508 1548 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
@@ -1511,9 +1551,9 @@
1511 1551 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1512 1552 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1513 1553 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
1514 1554 .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);
1555 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1516 1556 }
1517 1557
1518 1558 .dataviews-view-list .dataviews-view-list__item {
1519 1559 position: absolute;
@@ -1534,9 +1574,9 @@
1534 1574 .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
1535 1575 position: absolute;
1536 1576 content: "";
1537 1577 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));
1578 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1539 1579 border-radius: var(--wpds-border-radius-sm, 2px);
1540 1580 outline: 2px solid transparent;
1541 1581 }
1542 1582
@@ -1541,9 +1581,9 @@
1541 1581 }
1542 1582
1543 1583 .dataviews-view-list .dataviews-view-list__title-field {
1544 1584 flex: 1;
1545 - min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1585 + min-height: var(--wpds-dimension-size-sm, 24px);
1546 1586 line-height: var(--wpds-typography-line-height-md, 24px);
1547 1587 overflow: hidden;
1548 1588 }
1549 1589
@@ -1551,14 +1591,14 @@
1551 1591 z-index: 1;
1552 1592 }
1553 1593
1554 1594 .dataviews-view-list .dataviews-view-list__media-wrapper {
1555 - width: calc(var(--wpds-dimension-base, 4px) * 13);
1556 - height: calc(var(--wpds-dimension-base, 4px) * 13);
1595 + width: 48px;
1596 + height: 48px;
1557 1597 overflow: hidden;
1558 1598 position: relative;
1559 1599 flex-shrink: 0;
1560 - background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1600 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1561 1601 border-radius: var(--wpds-border-radius-md, 4px);
1562 1602 }
1563 1603
1564 1604 .dataviews-view-list .dataviews-view-list__media-wrapper img {
@@ -1578,15 +1618,15 @@
1578 1618 border-radius: var(--wpds-border-radius-md, 4px);
1579 1619 }
1580 1620
1581 1621 .dataviews-view-list .dataviews-view-list__field-wrapper {
1582 - min-height: calc(var(--wpds-dimension-base, 4px) * 13);
1622 + min-height: 48px;
1583 1623 flex-grow: 1;
1584 1624 min-width: 0;
1585 1625 }
1586 1626
1587 1627 .dataviews-view-list .dataviews-view-list__field {
1588 - color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
1628 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1589 1629 }
1590 1630
1591 1631 .dataviews-view-list .dataviews-view-list__fields {
1592 1632 display: flex;
@@ -1604,9 +1644,9 @@
1604 1644 display: none;
1605 1645 }
1606 1646
1607 1647 .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
1608 - min-height: calc(var(--wpds-dimension-base, 4px) * 6);
1648 + min-height: var(--wpds-dimension-size-sm, 24px);
1609 1649 line-height: var(--wpds-typography-line-height-sm, 20px);
1610 1650 display: flex;
1611 1651 align-items: center;
1612 1652 }
@@ -1619,19 +1659,19 @@
1619 1659 padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-2xl, 24px);
1620 1660 }
1621 1661
1622 1662 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__title-field {
1623 - min-height: calc(var(--wpds-dimension-base, 4px) * 4);
1663 + min-height: var(--wpds-dimension-size-2xs, 16px);
1624 1664 line-height: var(--wpds-typography-line-height-xs, 16px);
1625 1665 }
1626 1666
1627 1667 .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);
1668 + width: var(--wpds-dimension-size-md, 32px);
1669 + height: var(--wpds-dimension-size-md, 32px);
1630 1670 }
1631 1671
1632 1672 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__field-wrapper {
1633 - min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1673 + min-height: var(--wpds-dimension-size-md, 32px);
1634 1674 }
1635 1675
1636 1676 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields {
1637 1677 gap: var(--wpds-dimension-gap-sm, 8px);
@@ -1638,9 +1678,9 @@
1638 1678 row-gap: var(--wpds-dimension-gap-xs, 4px);
1639 1679 }
1640 1680
1641 1681 .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);
1682 + min-height: var(--wpds-dimension-size-2xs, 16px);
1643 1683 line-height: var(--wpds-typography-line-height-xs, 16px);
1644 1684 }
1645 1685
1646 1686 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__item-wrapper {
@@ -1647,19 +1687,19 @@
1647 1687 padding: var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
1648 1688 }
1649 1689
1650 1690 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__title-field {
1651 - min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1691 + min-height: var(--wpds-dimension-size-md, 32px);
1652 1692 line-height: var(--wpds-typography-line-height-xl, 32px);
1653 1693 }
1654 1694
1655 1695 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__media-wrapper {
1656 - width: calc(var(--wpds-dimension-base, 4px) * 16);
1657 - height: calc(var(--wpds-dimension-base, 4px) * 16);
1696 + width: 64px;
1697 + height: 64px;
1658 1698 }
1659 1699
1660 1700 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__field-wrapper {
1661 - min-height: calc(var(--wpds-dimension-base, 4px) * 16);
1701 + min-height: 64px;
1662 1702 }
1663 1703
1664 1704 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields {
1665 1705 gap: var(--wpds-dimension-gap-lg, 16px);
@@ -1666,9 +1706,9 @@
1666 1706 row-gap: var(--wpds-dimension-gap-sm, 8px);
1667 1707 }
1668 1708
1669 1709 .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);
1710 + min-height: var(--wpds-dimension-size-md, 32px);
1671 1711 line-height: var(--wpds-typography-line-height-md, 24px);
1672 1712 }
1673 1713
1674 1714 .dataviews-view-list.is-refreshing {
@@ -1683,11 +1723,11 @@
1683 1723 }
1684 1724 }
1685 1725 .dataviews-view-list__group-header {
1686 1726 font-size: var(--wpds-typography-font-size-lg, 15px);
1687 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1688 - color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1689 - margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1727 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1728 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1729 + margin: 0 0 var(--wpds-dimension-gap-lg, 16px) 0;
1690 1730 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1691 1731 }
1692 1732
1693 1733 .dataviews-view-table {
@@ -1695,9 +1735,9 @@
1695 1735 text-indent: 0;
1696 1736 border-color: inherit;
1697 1737 border-collapse: collapse;
1698 1738 position: relative;
1699 - color: var(--wpds-color-fg-content-neutral-weak, #707070);
1739 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1700 1740 margin-bottom: auto;
1701 1741 background-color: inherit;
1702 1742 }
1703 1743
@@ -1702,10 +1742,10 @@
1702 1742 }
1703 1743
1704 1744 .dataviews-view-table th {
1705 1745 text-align: left;
1706 - color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1707 - font-weight: normal;
1746 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1747 + font-weight: 400;
1708 1748 font-size: var(--wpds-typography-font-size-md, 13px);
1709 1749 }
1710 1750
1711 1751 .dataviews-view-table td,
@@ -1721,9 +1761,9 @@
1721 1761 .dataviews-view-table td.dataviews-view-table__actions-column--sticky,
1722 1762 .dataviews-view-table th.dataviews-view-table__actions-column--sticky {
1723 1763 position: sticky;
1724 1764 right: 0;
1725 - background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong, #fff));
1765 + background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
1726 1766 }
1727 1767
1728 1768 .dataviews-view-table td.dataviews-view-table__actions-column--stuck::after,
1729 1769 .dataviews-view-table th.dataviews-view-table__actions-column--stuck::after {
@@ -1733,9 +1773,9 @@
1733 1773 top: 0;
1734 1774 bottom: 0;
1735 1775 left: 0;
1736 1776 width: 1px;
1737 - background-color: var(--wpds-color-bg-surface-neutral, #fcfcfc);
1777 + background-color: var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
1738 1778 }
1739 1779
1740 1780 .dataviews-view-table td.dataviews-view-table__checkbox-column,
1741 1781 .dataviews-view-table th.dataviews-view-table__checkbox-column {
@@ -1748,9 +1788,9 @@
1748 1788 min-width: auto;
1749 1789 }
1750 1790
1751 1791 .dataviews-view-table tr {
1752 - border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
1792 + border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
1753 1793 background-color: inherit;
1754 1794 }
1755 1795
1756 1796 .dataviews-view-table tr td:first-child,
@@ -1776,18 +1816,18 @@
1776 1816 opacity: 1;
1777 1817 }
1778 1818 }
1779 1819 .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);
1820 + background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1821 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1782 1822 }
1783 1823
1784 1824 .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));
1825 + border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
1786 1826 }
1787 1827
1788 1828 .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));
1829 + background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1790 1830 }
1791 1831
1792 1832 .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) {
1793 1833 opacity: 1;
@@ -1793,13 +1833,13 @@
1793 1833 opacity: 1;
1794 1834 }
1795 1835
1796 1836 .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));
1837 + background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
1798 1838 }
1799 1839
1800 1840 .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));
1841 + background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1802 1842 }
1803 1843
1804 1844 .dataviews-view-table thead {
1805 1845 position: sticky;
@@ -1815,9 +1855,9 @@
1815 1855 bottom: 0;
1816 1856 left: 0;
1817 1857 right: 0;
1818 1858 height: 1px;
1819 - background-color: var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
1859 + background-color: var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
1820 1860 }
1821 1861
1822 1862 .dataviews-view-table thead tr {
1823 1863 border: 0;
@@ -1828,9 +1868,9 @@
1828 1868 padding-top: var(--wpds-dimension-padding-sm, 8px);
1829 1869 padding-bottom: var(--wpds-dimension-padding-sm, 8px);
1830 1870 font-size: 11px;
1831 1871 text-transform: uppercase;
1832 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1872 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1833 1873 }
1834 1874
1835 1875 .dataviews-view-table thead th:has(.dataviews-view-table-header-button) {
1836 1876 padding-left: var(--wpds-dimension-padding-xs, 4px);
@@ -1853,9 +1893,9 @@
1853 1893 vertical-align: top;
1854 1894 }
1855 1895
1856 1896 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
1857 - min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1897 + min-height: var(--wpds-dimension-size-md, 32px);
1858 1898 display: flex;
1859 1899 align-items: center;
1860 1900 white-space: nowrap;
1861 1901 }
@@ -1876,13 +1916,13 @@
1876 1916 .dataviews-view-table .dataviews-view-table-header-button {
1877 1917 padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
1878 1918 font-size: 11px;
1879 1919 text-transform: uppercase;
1880 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1920 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1881 1921 }
1882 1922
1883 1923 .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
1884 - color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
1924 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1885 1925 }
1886 1926
1887 1927 .dataviews-view-table .dataviews-view-table-header-button span {
1888 1928 speak: none;
@@ -1935,20 +1975,20 @@
1935 1975 }
1936 1976 }
1937 1977 .dataviews-column-primary__media {
1938 1978 max-width: 60px;
1939 - min-width: calc(var(--wpds-dimension-base, 4px) * 8);
1940 - min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1979 + min-width: var(--wpds-dimension-size-md, 32px);
1980 + min-height: var(--wpds-dimension-size-md, 32px);
1941 1981 overflow: hidden;
1942 1982 position: relative;
1943 1983 flex-shrink: 0;
1944 - background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1984 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1945 1985 border-radius: var(--wpds-border-radius-md, 4px);
1946 1986 }
1947 1987
1948 1988 .dataviews-column-primary__media img {
1949 - width: calc(var(--wpds-dimension-base, 4px) * 8);
1950 - height: calc(var(--wpds-dimension-base, 4px) * 8);
1989 + width: var(--wpds-dimension-size-md, 32px);
1990 + height: var(--wpds-dimension-size-md, 32px);
1951 1991 object-fit: cover;
1952 1992 }
1953 1993
1954 1994 .dataviews-column-primary__media::after {
@@ -1961,8 +2001,19 @@
1961 2001 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
1962 2002 border-radius: var(--wpds-border-radius-md, 4px);
1963 2003 }
1964 2004
2005 +.dataviews-view-table.has-media-aspect-ratio .dataviews-column-primary__media {
2006 + height: var(--wpds-dimension-size-md, 32px);
2007 + aspect-ratio: var(--wp-dataviews-media-aspect-ratio, 1/1);
2008 + min-width: 0;
2009 +}
2010 +
2011 +.dataviews-view-table.has-media-aspect-ratio .dataviews-column-primary__media img {
2012 + width: 100%;
2013 + height: 100%;
2014 +}
2015 +
1965 2016 .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media),
1966 2017 .dataviews-view-table__primary-column-content:not(.dataviews-column-primary__media) {
1967 2018 min-width: 15ch;
1968 2019 max-width: 80ch;
@@ -1968,11 +2019,11 @@
1968 2019 max-width: 80ch;
1969 2020 }
1970 2021
1971 2022 .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
1972 - font-weight: var(--wpds-typography-font-weight-medium, 499);
2023 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1973 2024 padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
1974 - color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2025 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1975 2026 }
1976 2027
1977 2028 /* Column width intents via colgroup: make non-primary columns shrink-to-fit */
1978 2029 .dataviews-view-table col[class^=dataviews-view-table__col-]:not(.dataviews-view-table__col-first-data):not(.dataviews-view-table__col-expand) {
@@ -2009,9 +2060,9 @@
2009 2060 padding: var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-padding-xs, 4px);
2010 2061 }
2011 2062
2012 2063 .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);
2064 + min-height: var(--wpds-dimension-size-sm, 24px);
2014 2065 overflow: hidden;
2015 2066 align-content: center;
2016 2067 text-align: start;
2017 2068 }
@@ -2020,17 +2071,17 @@
2020 2071 width: fit-content;
2021 2072 }
2022 2073
2023 2074 .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);
2075 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2025 2076 }
2026 2077
2027 2078 .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);
2079 + 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 2080 }
2030 2081
2031 2082 .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));
2083 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2033 2084 }
2034 2085
2035 2086 .dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
2036 2087 outline: none;
@@ -2036,9 +2087,9 @@
2036 2087 outline: none;
2037 2088 }
2038 2089
2039 2090 .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));
2091 + outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2041 2092 }
2042 2093
2043 2094 .dataviews-view-picker-grid .dataviews-selection-checkbox {
2044 2095 top: var(--wpds-dimension-padding-sm, 8px) !important;
@@ -2051,10 +2102,11 @@
2051 2102 .dataviews-view-picker-grid .dataviews-view-picker-grid__media {
2052 2103 width: 100%;
2053 2104 aspect-ratio: 1/1;
2054 2105 min-height: 0;
2055 - background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
2106 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2056 2107 border-radius: var(--wpds-border-radius-md, 4px);
2108 + overflow: hidden;
2057 2109 position: relative;
2058 2110 }
2059 2111
2060 2112 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
@@ -2074,8 +2126,16 @@
2074 2126 border-radius: var(--wpds-border-radius-md, 4px);
2075 2127 pointer-events: none;
2076 2128 }
2077 2129
2130 +.dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media {
2131 + background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
2132 +}
2133 +
2134 +.dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media img {
2135 + object-fit: contain;
2136 +}
2137 +
2078 2138 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
2079 2139 position: relative;
2080 2140 font-size: 12px;
2081 2141 line-height: 16px;
@@ -2085,21 +2145,21 @@
2085 2145 padding: 0 0 var(--wpds-dimension-padding-md, 12px);
2086 2146 }
2087 2147
2088 2148 .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);
2149 + min-height: var(--wpds-dimension-size-sm, 24px);
2090 2150 line-height: var(--wpds-typography-line-height-sm, 20px);
2091 - padding-top: calc(var(--wpds-dimension-base, 4px) / 2);
2151 + padding-top: calc((var(--wpds-dimension-size-sm, 24px) - var(--wpds-typography-line-height-sm, 20px)) / 2);
2092 2152 }
2093 2153
2094 2154 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
2095 - min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2155 + min-height: var(--wpds-dimension-size-sm, 24px);
2096 2156 align-items: center;
2097 2157 }
2098 2158
2099 2159 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
2100 2160 width: 35%;
2101 - color: var(--wpds-color-fg-content-neutral-weak, #707070);
2161 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2102 2162 overflow: hidden;
2103 2163 text-overflow: ellipsis;
2104 2164 white-space: nowrap;
2105 2165 }
@@ -2147,12 +2207,12 @@
2147 2207 }
2148 2208
2149 2209 .dataviews-view-picker-grid-group__header {
2150 2210 font-size: var(--wpds-typography-font-size-lg, 15px);
2151 - font-weight: var(--wpds-typography-font-weight-medium, 499);
2152 - color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2211 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2212 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2153 2213 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2154 - padding: 0 calc(var(--wpds-dimension-base, 4px) * 12);
2214 + padding: 0 48px;
2155 2215 }
2156 2216
2157 2217 .dataviews-view-picker-table {
2158 2218 background-color: inherit;
@@ -2158,9 +2218,9 @@
2158 2218 background-color: inherit;
2159 2219 }
2160 2220
2161 2221 .dataviews-view-picker-table .dataviews-view-table__checkbox-column {
2162 - width: calc(var(--wpds-dimension-base, 4px) * 12);
2222 + width: 48px;
2163 2223 }
2164 2224
2165 2225 .dataviews-view-picker-table tbody:focus-visible[aria-activedescendant] {
2166 2226 outline: none;
@@ -2166,9 +2226,9 @@
2166 2226 outline: none;
2167 2227 }
2168 2228
2169 2229 .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));
2230 + outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2171 2231 }
2172 2232
2173 2233 .dataviews-view-picker-table .dataviews-selection-checkbox .components-checkbox-control__input.components-checkbox-control__input {
2174 2234 pointer-events: none;
@@ -2179,17 +2239,17 @@
2179 2239 cursor: var(--wpds-cursor-control, pointer);
2180 2240 }
2181 2241
2182 2242 .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));
2243 + background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2184 2244 }
2185 2245
2186 2246 .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));
2247 + background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2188 2248 }
2189 2249
2190 2250 .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));
2251 + background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2192 2252 }
2193 2253
2194 2254 .dataviews-view-activity {
2195 2255 margin: 0 0 auto;
@@ -2197,16 +2257,16 @@
2197 2257 }
2198 2258
2199 2259 .dataviews-view-activity .dataviews-view-activity__group-header {
2200 2260 font-size: var(--wpds-typography-font-size-lg, 15px);
2201 - font-weight: var(--wpds-typography-font-weight-medium, 499);
2202 - color: var(--wpds-color-fg-content-neutral-weak, #707070);
2261 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2262 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2203 2263 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2204 2264 padding: 0;
2205 2265 }
2206 2266
2207 2267 .dataviews-view-activity .dataviews-view-activity__item-actions {
2208 - min-width: calc(var(--wpds-dimension-base, 4px) * 6);
2268 + min-width: var(--wpds-dimension-size-sm, 24px);
2209 2269 }
2210 2270
2211 2271 .dataviews-view-activity .dataviews-view-activity__item-content {
2212 2272 flex-grow: 1;
@@ -2214,9 +2274,9 @@
2214 2274
2215 2275 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title,
2216 2276 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-description,
2217 2277 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
2218 - min-height: calc(var(--wpds-dimension-base, 4px) * 4);
2278 + min-height: var(--wpds-dimension-size-2xs, 16px);
2219 2279 }
2220 2280
2221 2281 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title {
2222 2282 position: relative;
@@ -2230,9 +2290,9 @@
2230 2290 cursor: var(--wpds-cursor-control, pointer);
2231 2291 }
2232 2292
2233 2293 .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));
2294 + outline: var(--wp-admin-border-width-focus) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2235 2295 outline-offset: var(--wp-admin-border-width-focus);
2236 2296 border-radius: var(--wpds-border-radius-sm, 2px);
2237 2297 }
2238 2298
@@ -2247,9 +2307,9 @@
2247 2307 z-index: 1;
2248 2308 }
2249 2309
2250 2310 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
2251 - color: var(--wpds-color-fg-content-neutral-weak, #707070);
2311 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2252 2312 display: flex;
2253 2313 gap: var(--wpds-dimension-gap-md, 12px);
2254 2314 row-gap: var(--wpds-dimension-gap-xs, 4px);
2255 2315 flex-wrap: wrap;
@@ -2293,14 +2353,14 @@
2293 2353 width: var(--wpds-dimension-padding-md, 12px);
2294 2354 }
2295 2355
2296 2356 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type::before {
2297 - height: calc(var(--wpds-dimension-base, 4px) * 3);
2357 + height: var(--wpds-dimension-size-3xs, 12px);
2298 2358 }
2299 2359
2300 2360 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type-icon {
2301 - width: calc(var(--wpds-dimension-base, 4px) * 3 - 1px);
2302 - height: calc(var(--wpds-dimension-base, 4px) * 3 - 1px);
2361 + width: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
2362 + height: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
2303 2363 }
2304 2364
2305 2365 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-content {
2306 2366 margin: var(--wpds-dimension-gap-md, 12px) 0;
@@ -2306,18 +2366,18 @@
2306 2366 margin: var(--wpds-dimension-gap-md, 12px) 0;
2307 2367 }
2308 2368
2309 2369 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type {
2310 - width: calc(var(--wpds-dimension-base, 4px) * 6);
2370 + width: var(--wpds-dimension-size-sm, 24px);
2311 2371 }
2312 2372
2313 2373 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type::before {
2314 - height: calc(var(--wpds-dimension-base, 4px) * 3);
2374 + height: var(--wpds-dimension-size-3xs, 12px);
2315 2375 }
2316 2376
2317 2377 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type-icon {
2318 - width: calc(var(--wpds-dimension-base, 4px) * 6 + 1px);
2319 - height: calc(var(--wpds-dimension-base, 4px) * 6 + 1px);
2378 + width: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
2379 + height: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
2320 2380 }
2321 2381
2322 2382 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-content {
2323 2383 margin: var(--wpds-dimension-gap-md, 12px) 0;
@@ -2324,18 +2384,18 @@
2324 2384 padding-top: var(--wpds-dimension-padding-sm, 8px);
2325 2385 }
2326 2386
2327 2387 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type {
2328 - width: calc(var(--wpds-dimension-base, 4px) * 8);
2388 + width: var(--wpds-dimension-size-md, 32px);
2329 2389 }
2330 2390
2331 2391 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type::before {
2332 - height: calc(var(--wpds-dimension-base, 4px) * 2);
2392 + height: var(--wpds-dimension-size-4xs, 8px);
2333 2393 }
2334 2394
2335 2395 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type-icon {
2336 - width: calc(var(--wpds-dimension-base, 4px) * 8 + 1px);
2337 - height: calc(var(--wpds-dimension-base, 4px) * 8 + 1px);
2396 + width: calc(var(--wpds-dimension-size-md, 32px) + 1px);
2397 + height: calc(var(--wpds-dimension-size-md, 32px) + 1px);
2338 2398 }
2339 2399
2340 2400 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-content {
2341 2401 margin: var(--wpds-dimension-gap-sm, 8px) 0 var(--wpds-dimension-gap-lg, 16px);
@@ -2342,10 +2402,10 @@
2342 2402 padding-top: var(--wpds-dimension-padding-md, 12px);
2343 2403 }
2344 2404
2345 2405 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-bullet, .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-bullet {
2346 - width: calc(var(--wpds-dimension-base, 4px) * 2 + 1px);
2347 - height: calc(var(--wpds-dimension-base, 4px) * 2 + 1px);
2406 + width: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
2407 + height: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
2348 2408 position: relative;
2349 2409 top: 50%;
2350 2410 transform: translateY(-50%);
2351 2411 }
@@ -2360,9 +2420,9 @@
2360 2420
2361 2421 .dataviews-view-activity .dataviews-view-activity__item-type-icon {
2362 2422 overflow: hidden;
2363 2423 flex-shrink: 0;
2364 - background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
2424 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2365 2425 }
2366 2426
2367 2427 .dataviews-view-activity .dataviews-view-activity__item-type-icon img,
2368 2428 .dataviews-view-activity .dataviews-view-activity__item-type-icon svg,
@@ -2400,11 +2460,211 @@
2400 2460 .dataviews-view-activity + .dataviews-pagination {
2401 2461 justify-content: space-between;
2402 2462 }
2403 2463
2464 +.dataviews-view-picker-activity {
2465 + margin: 0;
2466 + padding: 0;
2467 + flex-grow: 1;
2468 +}
2469 +
2470 +.dataviews-view-picker-activity:focus-visible[aria-activedescendant] {
2471 + outline: none;
2472 +}
2473 +
2474 +.dataviews-view-picker-activity:focus-visible .dataviews-view-picker-activity__item[data-active-item=true] {
2475 + outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2476 + outline-offset: -2px;
2477 +}
2478 +
2479 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item {
2480 + cursor: var(--wpds-cursor-control, pointer);
2481 + border-radius: var(--wpds-border-radius-sm, 2px);
2482 + padding-inline: var(--wpds-dimension-padding-2xl, 24px);
2483 + transition: background-color 0.1s ease;
2484 +}
2485 +
2486 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected, .dataviews-view-picker-activity .dataviews-view-picker-activity__item:hover {
2487 + background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2488 +}
2489 +
2490 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected {
2491 + outline: 3px solid transparent;
2492 + outline-offset: -2px;
2493 +}
2494 +
2495 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type {
2496 + width: var(--wpds-dimension-padding-md, 12px);
2497 +}
2498 +
2499 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type::before {
2500 + height: var(--wpds-dimension-size-3xs, 12px);
2501 +}
2502 +
2503 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type-icon {
2504 + width: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
2505 + height: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
2506 +}
2507 +
2508 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-content {
2509 + margin: var(--wpds-dimension-gap-md, 12px) 0;
2510 +}
2511 +
2512 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type {
2513 + width: var(--wpds-dimension-size-sm, 24px);
2514 +}
2515 +
2516 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type::before {
2517 + height: var(--wpds-dimension-size-3xs, 12px);
2518 +}
2519 +
2520 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type-icon {
2521 + width: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
2522 + height: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
2523 +}
2524 +
2525 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-content {
2526 + margin: var(--wpds-dimension-gap-md, 12px) 0;
2527 + padding-top: var(--wpds-dimension-padding-sm, 8px);
2528 +}
2529 +
2530 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type {
2531 + width: var(--wpds-dimension-size-md, 32px);
2532 +}
2533 +
2534 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type::before {
2535 + height: var(--wpds-dimension-size-4xs, 8px);
2536 +}
2537 +
2538 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type-icon {
2539 + width: calc(var(--wpds-dimension-size-md, 32px) + 1px);
2540 + height: calc(var(--wpds-dimension-size-md, 32px) + 1px);
2541 +}
2542 +
2543 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-content {
2544 + margin: var(--wpds-dimension-gap-sm, 8px) 0 var(--wpds-dimension-gap-lg, 16px);
2545 + padding-top: var(--wpds-dimension-padding-md, 12px);
2546 +}
2547 +
2548 +.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 {
2549 + width: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
2550 + height: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
2551 + position: relative;
2552 + top: 50%;
2553 + transform: translateY(-50%);
2554 +}
2555 +
2556 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content {
2557 + flex-grow: 1;
2558 +}
2559 +
2560 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title,
2561 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-description,
2562 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields {
2563 + min-height: var(--wpds-dimension-size-2xs, 16px);
2564 +}
2565 +
2566 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title {
2567 + position: relative;
2568 + display: flex;
2569 + align-items: center;
2570 + flex: 1;
2571 + overflow: hidden;
2572 +}
2573 +
2574 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-description:empty {
2575 + display: none;
2576 +}
2577 +
2578 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields {
2579 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2580 + display: flex;
2581 + gap: var(--wpds-dimension-gap-md, 12px);
2582 + row-gap: var(--wpds-dimension-gap-xs, 4px);
2583 + flex-wrap: wrap;
2584 +}
2585 +
2586 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields:empty {
2587 + display: none;
2588 +}
2589 +
2590 +.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) {
2591 + display: none;
2592 +}
2593 +
2594 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields .dataviews-view-picker-activity__item-field-value {
2595 + display: flex;
2596 + align-items: center;
2597 +}
2598 +
2599 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type {
2600 + align-self: stretch;
2601 + flex-shrink: 0;
2602 +}
2603 +
2604 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type::after {
2605 + content: "";
2606 + flex: 1 1 auto;
2607 + width: 1px;
2608 + margin: 0 auto;
2609 + background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2610 +}
2611 +
2612 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type::before {
2613 + content: "";
2614 + flex: 0 0 auto;
2615 + width: 1px;
2616 + margin: 0 auto;
2617 + background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2618 +}
2619 +
2620 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item:first-child .dataviews-view-picker-activity__item-type::before {
2621 + visibility: hidden;
2622 +}
2623 +
2624 +.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 {
2625 + 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%);
2626 +}
2627 +
2628 +.dataviews-view-picker-activity .dataviews-view-picker-activity-group__header {
2629 + font-size: var(--wpds-typography-font-size-lg, 15px);
2630 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2631 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2632 + margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2633 + padding: 0;
2634 + padding-inline-start: var(--wpds-dimension-padding-2xl, 24px);
2635 +}
2636 +
2637 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon {
2638 + overflow: hidden;
2639 + flex-shrink: 0;
2640 + background-color: transparent;
2641 +}
2642 +
2643 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon img,
2644 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon svg,
2645 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon .dataviews-view-picker-activity__item-bullet {
2646 + display: block;
2647 + width: 100%;
2648 + height: 100%;
2649 + margin: 0 auto;
2650 + object-fit: cover;
2651 + border-radius: 50%;
2652 + box-sizing: border-box;
2653 + box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2654 +}
2655 +
2656 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon svg {
2657 + padding: var(--wpds-dimension-padding-xs, 4px);
2658 +}
2659 +
2660 +.dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon .dataviews-view-picker-activity__item-bullet {
2661 + background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2662 +}
2663 +
2404 2664 .dataviews-picker-footer__bulk-selection {
2405 2665 align-self: flex-start;
2406 - height: calc(var(--wpds-dimension-base, 4px) * 8);
2666 + height: var(--wpds-dimension-size-md, 32px);
2407 2667 }
2408 2668
2409 2669 .dataviews-picker-footer__actions {
2410 2670 align-self: flex-end;
@@ -2438,17 +2698,38 @@
2438 2698 border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2439 2699 }
2440 2700
2441 2701 .dataviews-controls__date-preset:active {
2442 - background-color: var(--wpds-color-bg-interactive-neutral-strong-active, #1e1e1e);
2702 + background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
2443 2703 }
2444 2704
2705 +.dataviews-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]), .dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
2706 + --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
2707 +}
2708 +
2709 +.dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
2710 + border-color: var(--wpds-color-stroke-interactive-error, #cc1818);
2711 +}
2712 +
2713 +.dataviews-validated-control__wrapper-with-error-delegate {
2714 + position: relative;
2715 +}
2716 +
2717 +.dataviews-validated-control__error-delegate {
2718 + position: absolute;
2719 + top: 0;
2720 + height: 100%;
2721 + width: 100%;
2722 + opacity: 0;
2723 + pointer-events: none;
2724 +}
2725 +
2445 2726 .dataforms-layouts-panel__field-trigger {
2446 2727 position: relative;
2447 2728 color: inherit;
2448 2729 display: flex;
2449 2730 width: 100%;
2450 - min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2731 + min-height: var(--wpds-dimension-size-sm, 24px);
2451 2732 cursor: var(--wpds-cursor-control, pointer);
2452 2733 align-items: flex-start;
2453 2734 border-radius: var(--wpds-border-radius-sm, 2px);
2454 2735 isolation: isolate;
@@ -2455,9 +2736,9 @@
2455 2736 }
2456 2737
2457 2738 .dataforms-layouts-panel__field-trigger--label-side {
2458 2739 flex-direction: row;
2459 - gap: var(--wpds-dimension-gap-md, 12px);
2740 + gap: var(--wpds-dimension-gap-sm, 8px);
2460 2741 }
2461 2742
2462 2743 .dataforms-layouts-panel__field-trigger--label-top {
2463 2744 display: grid;
@@ -2468,9 +2749,9 @@
2468 2749 align-items: center;
2469 2750 }
2470 2751
2471 2752 .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover {
2472 - color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2753 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2473 2754 }
2474 2755
2475 2756 .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-trigger-icon {
2476 2757 opacity: 1;
@@ -2476,9 +2757,9 @@
2476 2757 opacity: 1;
2477 2758 }
2478 2759
2479 2760 .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));
2761 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2481 2762 }
2482 2763
2483 2764 .dataforms-layouts-panel__field-trigger.is-disabled {
2484 2765 cursor: default;
@@ -2484,10 +2765,10 @@
2484 2765 cursor: default;
2485 2766 }
2486 2767
2487 2768 .dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control {
2488 - color: var(--wpds-color-fg-content-neutral-weak, #707070);
2489 - font-weight: var(--wpds-typography-font-weight-regular, 400);
2769 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2770 + font-weight: var(--wpds-typography-font-weight-default, 400);
2490 2771 }
2491 2772
2492 2773 .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon {
2493 2774 opacity: 1;
@@ -2494,22 +2775,28 @@
2494 2775 fill: currentColor;
2495 2776 }
2496 2777
2497 2778 .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));
2779 + fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2499 2780 }
2500 2781
2501 2782 .dataforms-layouts-panel__field-trigger-icon {
2502 2783 padding: 0;
2503 - color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2784 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2504 2785 flex: 0 0 auto;
2505 2786 opacity: 0;
2506 2787 border-radius: var(--wpds-border-radius-xs, 1px);
2507 2788 }
2508 2789
2790 +.dataforms-layouts-panel__field-trigger-icon::after {
2791 + content: "";
2792 + position: absolute;
2793 + inset: 0;
2794 +}
2795 +
2509 2796 .dataforms-layouts-panel__field-trigger-icon:focus-visible {
2510 2797 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));
2798 + 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 2799 }
2513 2800
2514 2801 .dataforms-layouts-panel__field-dropdown-anchor {
2515 2802 width: 100%;
@@ -2521,14 +2808,14 @@
2521 2808
2522 2809 .dataforms-layouts-panel__field-label {
2523 2810 width: 38%;
2524 2811 flex-shrink: 0;
2525 - min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2812 + min-height: var(--wpds-dimension-size-sm, 24px);
2526 2813 display: flex;
2527 2814 align-items: center;
2528 2815 line-height: var(--wpds-typography-line-height-sm, 20px);
2529 2816 hyphens: auto;
2530 - color: var(--wpds-color-fg-content-neutral-weak, #707070);
2817 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2531 2818 }
2532 2819
2533 2820 .dataforms-layouts-panel__field-label .components-base-control__label {
2534 2821 display: inline;
@@ -2536,16 +2823,14 @@
2536 2823 line-height: inherit;
2537 2824 }
2538 2825
2539 2826 .dataforms-layouts-panel__field-label.has-error {
2540 - color: var(--wpds-color-fg-content-error-weak, #cc1818);
2827 + color: var(--wpds-color-foreground-content-error-weak, #cc1818);
2541 2828 }
2542 2829
2543 2830 .dataforms-layouts-panel__field-label-error-content {
2544 - position: relative;
2545 - z-index: 1;
2546 - cursor: help;
2547 - fill: var(--wpds-color-fg-content-error-weak, #cc1818);
2831 + pointer-events: none;
2832 + color: var(--wpds-color-foreground-content-error-weak, #cc1818);
2548 2833 display: inline-flex;
2549 2834 flex-direction: row;
2550 2835 align-items: center;
2551 2836 gap: var(--wpds-dimension-gap-xs, 4px);
@@ -2550,45 +2835,31 @@
2550 2835 align-items: center;
2551 2836 gap: var(--wpds-dimension-gap-xs, 4px);
2552 2837 }
2553 2838
2554 -.dataforms-layouts-panel__field-label-error-content svg {
2555 - fill: currentColor;
2556 -}
2557 -
2558 2839 .dataforms-layouts-panel__field-control {
2559 2840 flex-grow: 1;
2560 2841 min-width: 0;
2561 - min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2842 + min-height: var(--wpds-dimension-size-sm, 24px);
2562 2843 line-height: var(--wpds-typography-line-height-md, 24px);
2563 2844 display: flex;
2564 2845 align-items: center;
2565 - overflow: hidden;
2566 - word-break: break-word;
2567 - font-weight: var(--wpds-typography-font-weight-medium, 499);
2846 + overflow: clip;
2847 + padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2848 + margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2849 + word-break: normal;
2850 + overflow-wrap: anywhere;
2851 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2568 2852 }
2569 2853
2854 +.dataforms-layouts-panel__field-control:has(a, button) {
2855 + z-index: 1;
2856 +}
2857 +
2570 2858 .dataforms-layouts-panel__field-control > * {
2571 2859 min-width: 0;
2572 2860 }
2573 2861
2574 -.dataforms-layouts-panel__field-control .components-button {
2575 - max-width: 100%;
2576 - text-align: left;
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 2862 .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-label {
2592 2863 width: 100%;
2593 2864 }
2594 2865
@@ -2617,15 +2888,11 @@
2617 2888 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
2618 2889 z-index: 159990;
2619 2890 }
2620 2891
2621 -.dataforms-layouts-panel__summary-button:empty {
2622 - min-width: 160px;
2623 -}
2624 -
2625 2892 .dataforms-layouts-regular__field {
2626 2893 width: 100%;
2627 - min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2894 + min-height: var(--wpds-dimension-size-md, 32px);
2628 2895 justify-content: flex-start !important;
2629 2896 align-items: flex-start !important;
2630 2897 }
2631 2898
@@ -2631,15 +2898,15 @@
2631 2898
2632 2899 .dataforms-layouts-regular__field .components-base-control__label,
2633 2900 .dataforms-layouts-regular__field .components-input-control__label,
2634 2901 .dataforms-layouts-regular__field .components-form-token-field__label {
2635 - color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2902 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2636 2903 }
2637 2904
2638 2905 .dataforms-layouts-regular__field-label {
2639 2906 width: 38%;
2640 2907 flex-shrink: 0;
2641 - min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2908 + min-height: var(--wpds-dimension-size-md, 32px);
2642 2909 display: flex;
2643 2910 align-items: center;
2644 2911 line-height: var(--wpds-typography-line-height-sm, 20px);
2645 2912 hyphens: auto;
@@ -2654,9 +2921,9 @@
2654 2921 }
2655 2922
2656 2923 .dataforms-layouts-regular__field-control {
2657 2924 flex-grow: 1;
2658 - min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2925 + min-height: var(--wpds-dimension-size-md, 32px);
2659 2926 display: flex;
2660 2927 align-items: center;
2661 2928 }
2662 2929
@@ -2672,9 +2939,9 @@
2672 2939 display: contents;
2673 2940 }
2674 2941
2675 2942 .dataforms-layouts-card__field-description {
2676 - color: var(--wpds-color-fg-content-neutral-weak, #707070);
2943 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2677 2944 display: block;
2678 2945 font-size: var(--wpds-typography-font-size-md, 13px);
2679 2946 margin-bottom: var(--wpds-dimension-gap-lg, 16px);
2680 2947 }
@@ -2687,9 +2954,9 @@
2687 2954 }
2688 2955
2689 2956 .dataforms-layouts-details__summary-content {
2690 2957 display: inline-flex;
2691 - min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2958 + min-height: var(--wpds-dimension-size-sm, 24px);
2692 2959 }
2693 2960
2694 2961 .dataforms-layouts-details__content {
2695 2962 padding-top: var(--wpds-dimension-padding-md, 12px);
@@ -2699,10 +2966,10 @@
2699 2966 width: 100%;
2700 2967 }
2701 2968
2702 2969 .dataforms-layouts__wrapper {
2703 - font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2704 - font-weight: 400;
2970 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2971 + font-weight: var(--wpds-typography-font-weight-default, 400);
2705 2972 font-size: 13px;
2706 2973 line-height: 20px;
2707 2974 }
2708 2975
@@ -2775,8 +3042,14 @@
2775 3042 /**
2776 3043 * Focus styles.
2777 3044 */
2778 3045 /**
3046 + * Standard focus rings for the WordPress Design System.
3047 + *
3048 + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
3049 + * e.g. `&:focus { @include outset-ring__focus(); }`.
3050 + */
3051 +/**
2779 3052 * Applies editor left position to the selector passed as argument
2780 3053 */
2781 3054 /**
2782 3055 * Styles that are reused verbatim in a few places
@@ -2834,9 +3107,9 @@
2834 3107 padding: 12px;
2835 3108 display: grid;
2836 3109 align-items: center;
2837 3110 grid-template-columns: min-content 1fr min-content;
2838 - grid-gap: 4px 8px;
3111 + gap: 4px 8px;
2839 3112 color: #1e1e1e;
2840 3113 }
2841 3114
2842 3115 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
@@ -2913,9 +3186,8 @@
2913 3186 line-height: 1.5;
2914 3187 }
2915 3188
2916 3189 fieldset.fields__media-edit {
2917 - /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
2918 3190 container-type: inline-size;
2919 3191 }
2920 3192
2921 3193 fieldset.fields__media-edit .fields__media-edit-compact-group {
@@ -3151,9 +3423,8 @@
3151 3423 }
3152 3424
3153 3425 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
3154 3426 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
3155 - /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
3156 3427 }
3157 3428
3158 3429 @container (max-width: 500px) {
3159 3430 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
@@ -3220,18 +3491,15 @@
3220 3491 padding: 0;
3221 3492 margin: 0;
3222 3493 }
3223 3494
3224 -.fields-controls__slug .fields-controls__slug-external-icon {
3225 - margin-left: 5ch;
3226 -}
3227 -
3228 3495 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
3229 3496 padding-inline-start: 0 !important;
3230 3497 }
3231 3498
3232 3499 .fields-controls__slug .fields-controls__slug-help-link {
3233 - word-break: break-word;
3500 + word-break: normal;
3501 + overflow-wrap: anywhere;
3234 3502 }
3235 3503
3236 3504 .fields-controls__slug .fields-controls__slug-help {
3237 3505 display: flex;
@@ -3238,9 +3506,9 @@
3238 3506 flex-direction: column;
3239 3507 }
3240 3508
3241 3509 .fields-controls__slug .fields-controls__slug-help .fields-controls__slug-help-slug {
3242 - font-weight: 600;
3510 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3243 3511 }
3244 3512
3245 3513 .fields-controls__featured-image-image,
3246 3514 .fields-controls__featured-image-placeholder {
@@ -3359,8 +3627,14 @@
3359 3627 /**
3360 3628 * Focus styles.
3361 3629 */
3362 3630 /**
3631 + * Standard focus rings for the WordPress Design System.
3632 + *
3633 + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
3634 + * e.g. `&:focus { @include outset-ring__focus(); }`.
3635 + */
3636 +/**
3363 3637 * Applies editor left position to the selector passed as argument
3364 3638 */
3365 3639 /**
3366 3640 * Styles that are reused verbatim in a few places
@@ -3394,9 +3668,9 @@
3394 3668 }
3395 3669
3396 3670 .font-library-modal .font-library__subtitle {
3397 3671 text-transform: uppercase;
3398 - font-weight: 499;
3672 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3399 3673 font-size: 11px;
3400 3674 }
3401 3675
3402 3676 .font-library-modal__tab-panel {
@@ -3434,9 +3708,9 @@
3434 3708 .font-library__footer {
3435 3709 position: absolute;
3436 3710 width: 100%;
3437 3711 bottom: 0;
3438 - border-top: 1px solid #ddd;
3712 + border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3439 3713 padding: 24px;
3440 3714 background-color: #fff;
3441 3715 box-sizing: border-box;
3442 3716 flex-grow: 0 !important;
@@ -3445,22 +3719,26 @@
3445 3719 }
3446 3720
3447 3721 .font-library__page-selection {
3448 3722 font-size: 11px;
3449 - font-weight: 499;
3723 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3450 3724 text-transform: uppercase;
3451 3725 }
3452 3726
3453 3727 @media (min-width: 600px) {
3454 - .font-library__page-selection .font-library__page-selection-trigger {
3728 + .font-library__page-selection .components-select-control__input {
3455 3729 font-size: 11px !important;
3456 - font-weight: 499;
3730 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3457 3731 }
3458 3732 }
3733 +.font-library__search {
3734 + width: 240px;
3735 +}
3736 +
3459 3737 .font-library__fonts-title {
3460 3738 text-transform: uppercase;
3461 3739 font-size: 11px;
3462 - font-weight: 600;
3740 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3463 3741 margin-top: 0;
3464 3742 margin-bottom: 0;
3465 3743 }
3466 3744
@@ -3474,11 +3752,15 @@
3474 3752 .font-library__fonts-list-item {
3475 3753 margin-bottom: 0;
3476 3754 }
3477 3755
3756 +.font-library__font-demo {
3757 + position: relative;
3758 +}
3759 +
3478 3760 .font-library__font-card {
3479 3761 box-sizing: border-box;
3480 - border: 1px solid #ddd;
3762 + border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3481 3763 width: 100%;
3482 3764 height: auto !important;
3483 3765 padding: 16px;
3484 3766 margin-top: -1px; /* To collapse the margin with the previous element */
@@ -3492,13 +3774,13 @@
3492 3774 position: relative;
3493 3775 }
3494 3776
3495 3777 .font-library__font-card .font-library__font-card__name {
3496 - font-weight: bold;
3778 + font-weight: 700;
3497 3779 }
3498 3780
3499 3781 .font-library__font-card .font-library__font-card__count {
3500 - color: #757575;
3782 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3501 3783 }
3502 3784
3503 3785 .font-library__font-card .font-library__font-variant_demo-image {
3504 3786 display: block;
@@ -3505,8 +3787,25 @@
3505 3787 height: 24px;
3506 3788 width: auto;
3507 3789 }
3508 3790
3791 +@media not (prefers-reduced-motion) {
3792 + .font-library__font-card .font-library__font-variant_demo-image {
3793 + transition: opacity var(--wpds-motion-duration-lg, 300ms) var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
3794 + }
3795 +}
3796 +.font-library__font-card .font-library__font-variant_demo-image.is-loading {
3797 + position: absolute;
3798 + top: 0;
3799 + left: 0;
3800 + opacity: 0;
3801 +}
3802 +
3803 +.font-library__font-card .font-library__font-variant-demo-skeleton {
3804 + height: 24px;
3805 + border-radius: var(--wpds-border-radius-sm, 2px);
3806 +}
3807 +
3509 3808 .font-library__font-card .font-library__font-variant_demo-text {
3510 3809 white-space: nowrap;
3511 3810 flex-shrink: 0;
3512 3811 }
@@ -3518,9 +3817,9 @@
3518 3817 }
3519 3818 .font-library-modal__tablist-container {
3520 3819 position: sticky;
3521 3820 top: 0;
3522 - border-bottom: 1px solid #ddd;
3821 + border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3523 3822 background: #fff;
3524 3823 z-index: 1;
3525 3824 }
3526 3825
@@ -3541,9 +3840,9 @@
3541 3840 width: 80%;
3542 3841 }
3543 3842
3544 3843 .font-library__local-fonts .font-library__upload-area__text {
3545 - color: #757575;
3844 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3546 3845 }
3547 3846
3548 3847 .font-library__google-fonts-confirm {
3549 3848 display: flex;
@@ -3578,115 +3877,22 @@
3578 3877 .font-library__select-all .components-checkbox-control__label {
3579 3878 padding-left: 16px;
3580 3879 }
3581 3880
3582 -.global-styles-ui-pagination .components-button.is-tertiary {
3583 - width: 32px;
3584 - height: 32px;
3585 - justify-content: center;
3586 -}
3587 -
3588 -.global-styles-ui-screen-revisions__revisions-list {
3589 - list-style: none;
3590 - margin: 0 16px 16px 16px;
3591 - flex-grow: 1;
3592 -}
3593 -
3594 -.global-styles-ui-screen-revisions__revisions-list li {
3595 - margin-bottom: 0;
3596 -}
3597 -
3598 -.global-styles-ui-screen-revisions__revision-item {
3599 - position: relative;
3600 - cursor: var(--wpds-cursor-control, pointer);
3881 +.global-styles-ui-screen-revisions {
3601 3882 display: flex;
3602 3883 flex-direction: column;
3884 + flex-grow: 1;
3885 + min-height: 0;
3603 3886 }
3604 3887
3605 -.global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
3606 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3607 - outline: 2px solid transparent;
3888 +.global-styles-ui-screen-revisions__actions {
3889 + margin-inline-start: auto;
3608 3890 }
3609 3891
3610 -.global-styles-ui-screen-revisions__revision-item:hover {
3611 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3612 -}
3613 -
3614 -.global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
3615 - color: var(--wp-admin-theme-color);
3616 -}
3617 -
3618 -.global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
3619 - position: absolute;
3620 - content: "\a";
3621 - display: block;
3622 -}
3623 -
3624 -.global-styles-ui-screen-revisions__revision-item::before {
3625 - background: #ddd;
3626 - border-radius: 50%;
3627 - height: 8px;
3628 - width: 8px;
3629 - top: 18px;
3630 - left: 17px;
3631 - transform: translate(-50%, -50%);
3632 - z-index: 1;
3633 - border: 4px solid transparent;
3634 -}
3635 -
3636 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
3637 - border-radius: 2px;
3638 - outline: 3px solid transparent;
3639 - outline-offset: -2px;
3640 - color: var(--wp-admin-theme-color);
3641 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3642 -}
3643 -
3644 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
3645 - color: var(--wp-admin-theme-color);
3646 -}
3647 -
3648 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
3649 - background: var(--wp-admin-theme-color);
3650 -}
3651 -
3652 -.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 {
3655 - color: #1e1e1e;
3656 -}
3657 -
3658 -.global-styles-ui-screen-revisions__revision-item::after {
3659 - height: 100%;
3660 - left: 16px;
3661 - top: 0;
3662 - width: 0;
3663 - border: 0.5px solid #ddd;
3664 -}
3665 -
3666 -.global-styles-ui-screen-revisions__revision-item:first-child::after {
3667 - top: 18px;
3668 -}
3669 -
3670 -.global-styles-ui-screen-revisions__revision-item:last-child::after {
3671 - height: 18px;
3672 -}
3673 -
3674 -.global-styles-ui-screen-revisions__revision-item-wrapper {
3675 - display: block;
3676 - padding: 12px 12px 4px 40px;
3677 -}
3678 -
3679 -.global-styles-ui-screen-revisions__apply-button.is-primary,
3680 -.global-styles-ui-screen-revisions__applied-text {
3681 - align-self: flex-start;
3682 - margin: 4px 12px 12px 40px;
3683 -}
3684 -
3685 -.global-styles-ui-screen-revisions__changes,
3686 -.global-styles-ui-screen-revisions__meta,
3687 -.global-styles-ui-screen-revisions__applied-text {
3688 - color: #757575;
3892 +.global-styles-ui-screen-revisions__date {
3893 + text-transform: uppercase;
3894 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3689 3895 font-size: 12px;
3690 3896 }
3691 3897
3692 3898 .global-styles-ui-screen-revisions__description {
@@ -3695,11 +3901,11 @@
3695 3901 align-items: flex-start;
3696 3902 gap: 8px;
3697 3903 }
3698 3904
3699 -.global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
3700 - text-transform: uppercase;
3701 - font-weight: 600;
3905 +.global-styles-ui-screen-revisions__changes,
3906 +.global-styles-ui-screen-revisions__meta {
3907 + color: #2f2f2f;
3702 3908 font-size: 12px;
3703 3909 }
3704 3910
3705 3911 .global-styles-ui-screen-revisions__meta {
@@ -3705,11 +3911,10 @@
3705 3911 .global-styles-ui-screen-revisions__meta {
3706 3912 display: flex;
3707 3913 justify-content: start;
3708 3914 width: 100%;
3709 - align-items: flex-start;
3915 + align-items: center;
3710 3916 text-align: left;
3711 - margin-bottom: 4px;
3712 3917 }
3713 3918
3714 3919 .global-styles-ui-screen-revisions__meta img {
3715 3920 width: 16px;
@@ -3717,16 +3922,12 @@
3717 3922 border-radius: 100%;
3718 3923 margin-right: 8px;
3719 3924 }
3720 3925
3721 -.global-styles-ui-screen-revisions__loading {
3722 - margin: 24px auto !important;
3723 -}
3724 -
3725 3926 .global-styles-ui-screen-revisions__changes {
3726 3927 text-align: left;
3727 3928 line-height: 1.4;
3728 - margin-left: 12px;
3929 + margin: 0 0 0 12px;
3729 3930 list-style: disc;
3730 3931 }
3731 3932
3732 3933 .global-styles-ui-screen-revisions__changes li {
@@ -3732,47 +3933,8 @@
3732 3933 .global-styles-ui-screen-revisions__changes li {
3733 3934 margin-bottom: 4px;
3734 3935 }
3735 3936
3736 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
3737 - justify-content: space-between;
3738 - gap: 2px;
3739 -}
3740 -
3741 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
3742 - position: absolute;
3743 - left: -1000px;
3744 - height: 1px;
3745 - margin: -1px;
3746 - overflow: hidden;
3747 -}
3748 -
3749 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
3750 - font-size: 12px;
3751 - will-change: opacity;
3752 -}
3753 -
3754 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
3755 - color: #1e1e1e;
3756 -}
3757 -
3758 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
3759 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
3760 - color: #949494;
3761 -}
3762 -
3763 -.global-styles-ui-screen-revisions__footer {
3764 - height: 56px;
3765 - z-index: 1;
3766 - position: sticky;
3767 - min-width: 100%;
3768 - bottom: 0;
3769 - background: #fff;
3770 - padding: 12px;
3771 - border-top: 1px solid #ddd;
3772 - box-sizing: border-box;
3773 -}
3774 -
3775 3937 .global-styles-ui-variations_item {
3776 3938 box-sizing: border-box;
3777 3939 cursor: var(--wpds-cursor-control, pointer);
3778 3940 }
@@ -3853,13 +4015,34 @@
3853 4015 justify-content: center;
3854 4016 border-radius: 2px;
3855 4017 }
3856 4018
4019 +.global-styles-ui-block-types-filter {
4020 + margin-bottom: 12px;
4021 + padding: 0 16px;
4022 +}
4023 +
3857 4024 .global-styles-ui-block-types-search {
3858 - margin-bottom: 10px;
3859 - padding: 0 16px;
4025 + flex-grow: 1;
3860 4026 }
3861 4027
4028 +.global-styles-ui-block-types-item-list .global-styles-ui-block-types-item__icon {
4029 + min-width: 24px;
4030 +}
4031 +
4032 +.global-styles-ui-block-types-item-list__no-results {
4033 + padding-top: 16px;
4034 +}
4035 +
4036 +.global-styles-ui-block-types-item__indicator {
4037 + background: var(--wp-admin-theme-color);
4038 + border-radius: 50%;
4039 + flex: none;
4040 + height: 6px;
4041 + margin-left: auto;
4042 + width: 6px;
4043 +}
4044 +
3862 4045 .global-styles-ui-screen-typography__font-variants-count {
3863 4046 color: #757575;
3864 4047 }
3865 4048
@@ -3882,15 +4065,15 @@
3882 4065
3883 4066 .global-styles-ui-subtitle {
3884 4067 margin-bottom: 0 !important;
3885 4068 text-transform: uppercase;
3886 - font-weight: 499 !important;
4069 + font-weight: var(--wpds-typography-font-weight-emphasis, 600) !important;
3887 4070 font-size: 11px !important;
3888 4071 }
3889 4072
3890 4073 .global-styles-ui-section-title {
3891 4074 color: #2f2f2f;
3892 - font-weight: 600;
4075 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3893 4076 line-height: 1.2;
3894 4077 padding: 16px 16px 0;
3895 4078 margin: 0;
3896 4079 }
@@ -3901,10 +4084,20 @@
3901 4084
3902 4085 .global-styles-ui__color-indicator-wrapper {
3903 4086 height: 24px;
3904 4087 flex-shrink: 0;
4088 + display: flex;
4089 + align-items: center;
3905 4090 }
3906 4091
4092 +.global-styles-ui__palette-preview {
4093 + display: inline-flex;
4094 +}
4095 +
4096 +.global-styles-ui__palette-preview > * + * {
4097 + margin-inline-start: -8px;
4098 +}
4099 +
3907 4100 .global-styles-ui__shadows-panel__options-container,
3908 4101 .global-styles-ui__typography-panel__options-container {
3909 4102 height: 24px;
3910 4103 }
@@ -3916,9 +4109,10 @@
3916 4109 border-radius: 2px;
3917 4110 overflow: hidden;
3918 4111 }
3919 4112
3920 -.global-styles-ui__shadow-preview-panel {
4113 +.global-styles-ui__shadow-preview-panel,
4114 +.global-styles-ui__text-shadow-preview-panel {
3921 4115 height: 144px;
3922 4116 border: #ddd 1px solid;
3923 4117 border-radius: 2px;
3924 4118 overflow: auto;
@@ -3928,9 +4122,9 @@
3928 4122 /*rtl:end:ignore*/
3929 4123 background-size: 16px 16px;
3930 4124 }
3931 4125
3932 -.global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
4126 +.global-styles-ui__shadow-preview-block {
3933 4127 border: #ddd 1px solid;
3934 4128 border-radius: 2px;
3935 4129 background-color: #fff;
3936 4130 width: 60%;
@@ -3936,22 +4130,44 @@
3936 4130 width: 60%;
3937 4131 height: 60px;
3938 4132 }
3939 4133
3940 -.global-styles-ui__shadow-editor__dropdown-content {
4134 +.global-styles-ui__text-shadow-preview-panel {
4135 + margin-block: -8px 16px;
4136 +}
4137 +
4138 +.global-styles-ui__text-shadow-preview-text {
4139 + font-size: 24px;
4140 +}
4141 +
4142 +.global-styles-ui__text-shadow-editor__header {
4143 + margin-block-end: 8px;
4144 +}
4145 +
4146 +.global-styles-ui__text-shadow-editor__inputs {
4147 + display: grid;
4148 + grid-template-columns: repeat(2, 1fr);
4149 + gap: 16px;
4150 +}
4151 +
4152 +.global-styles-ui__shadow-editor__dropdown-content,
4153 +.global-styles-ui__text-shadow-editor__dropdown-content {
3941 4154 width: 280px;
3942 4155 }
3943 4156
3944 -.global-styles-ui__shadow-editor-panel {
4157 +.global-styles-ui__shadow-editor-panel,
4158 +.global-styles-ui__text-shadow-editor-panel {
3945 4159 margin-bottom: 4px;
3946 4160 }
3947 4161
3948 -.global-styles-ui__shadow-editor__dropdown {
4162 +.global-styles-ui__shadow-editor__dropdown,
4163 +.global-styles-ui__text-shadow-editor__dropdown {
3949 4164 width: 100%;
3950 4165 position: relative;
3951 4166 }
3952 4167
3953 -.global-styles-ui__shadow-editor__dropdown-toggle {
4168 +.global-styles-ui__shadow-editor__dropdown-toggle,
4169 +.global-styles-ui__text-shadow-editor__dropdown-toggle {
3954 4170 width: 100%;
3955 4171 height: auto;
3956 4172 padding-top: 8px;
3957 4173 padding-bottom: 8px;
@@ -3958,14 +4174,16 @@
3958 4174 text-align: left;
3959 4175 border-radius: inherit;
3960 4176 }
3961 4177
3962 -.global-styles-ui__shadow-editor__dropdown-toggle.is-open {
4178 +.global-styles-ui__shadow-editor__dropdown-toggle.is-open,
4179 +.global-styles-ui__text-shadow-editor__dropdown-toggle.is-open {
3963 4180 background: #f0f0f0;
3964 4181 color: var(--wp-admin-theme-color);
3965 4182 }
3966 4183
3967 -.global-styles-ui__shadow-editor__remove-button {
4184 +.global-styles-ui__shadow-editor__remove-button,
4185 +.global-styles-ui__text-shadow-editor__remove-button {
3968 4186 position: absolute;
3969 4187 right: 8px;
3970 4188 top: 8px;
3971 4189 opacity: 0;
@@ -3970,18 +4188,19 @@
3970 4188 top: 8px;
3971 4189 opacity: 0;
3972 4190 }
3973 4191
3974 -.global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
3975 - border: none;
3976 -}
3977 -
3978 -.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover {
4192 +.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover,
4193 +.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
4194 +.global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
4195 +.global-styles-ui__text-shadow-editor__remove-button:focus,
4196 +.global-styles-ui__text-shadow-editor__remove-button:hover {
3979 4197 opacity: 1;
3980 4198 }
3981 4199
3982 4200 @media (hover: none) {
3983 - .global-styles-ui__shadow-editor__remove-button {
4201 + .global-styles-ui__shadow-editor__remove-button,
4202 + .global-styles-ui__text-shadow-editor__remove-button {
3984 4203 opacity: 1;
3985 4204 }
3986 4205 }
3987 4206 .global-styles-ui-screen-css {
@@ -3990,28 +4209,26 @@
3990 4209 flex-direction: column;
3991 4210 margin: 16px;
3992 4211 }
3993 4212
3994 -.global-styles-ui-screen-css .components-v-stack {
4213 +.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel {
3995 4214 flex: 1 1 auto;
3996 4215 }
3997 4216
3998 -.global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input {
4217 +.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input {
3999 4218 flex: 1 1 auto;
4000 4219 display: flex;
4001 4220 flex-direction: column;
4002 4221 }
4003 4222
4004 -.global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
4223 +.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
4005 4224 flex: 1 1 auto;
4006 4225 display: flex;
4007 4226 flex-direction: column;
4008 4227 }
4009 4228
4010 -.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 {
4229 +.global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input textarea {
4011 4230 flex: 1 1 auto;
4012 - /*rtl:ignore*/
4013 - direction: ltr;
4014 4231 }
4015 4232
4016 4233 .global-styles-ui-screen-css-help-link {
4017 4234 display: inline-block;
@@ -4036,8 +4253,16 @@
4036 4253 flex-direction: column;
4037 4254 height: 100%;
4038 4255 }
4039 4256
4257 +.global-styles-ui-color-palette__tablist-container {
4258 + border-bottom: 1px solid #ddd;
4259 +}
4260 +
4261 +.global-styles-ui-color-palette__tablist {
4262 + margin-bottom: -1px;
4263 +}
4264 +
4040 4265 .global-styles-ui-sidebar__navigator-screen .single-column {
4041 4266 grid-column: span 1;
4042 4267 }
4043 4268
@@ -4059,9 +4284,10 @@
4059 4284 clip-path: border-box;
4060 4285 }
4061 4286
4062 4287 .global-styles-ui-color-palette-panel,
4063 -.global-styles-ui-gradient-palette-panel {
4288 +.global-styles-ui-gradient-palette-panel,
4289 +.global-styles-ui-duotone-palette-panel {
4064 4290 padding: 16px;
4065 4291 }
4066 4292
4067 4293 .edit-site-custom-template-modal__contents-wrapper {
@@ -4070,13 +4296,8 @@
4070 4296 }
4071 4297 .edit-site-custom-template-modal__contents-wrapper > * {
4072 4298 width: 100%;
4073 4299 }
4074 -.edit-site-custom-template-modal__contents-wrapper__suggestions_list {
4075 - margin-left: -12px;
4076 - margin-right: -12px;
4077 - width: calc(100% + 24px);
4078 -}
4079 4300 .edit-site-custom-template-modal__contents > .components-button {
4080 4301 height: auto;
4081 4302 justify-content: center;
4082 4303 }
@@ -4086,10 +4307,14 @@
4086 4307 }
4087 4308 }
4088 4309 @media (min-width: 600px) {
4089 4310 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
4090 - max-height: 224px;
4091 4311 overflow-y: auto;
4312 + max-height: calc(224px + 4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4313 + padding: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4314 + margin-inline: calc(-2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4315 + width: calc(100% + 4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4316 + scroll-padding-block: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4092 4317 }
4093 4318 }
4094 4319 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
4095 4320 display: block;
@@ -4115,11 +4340,8 @@
4115 4340 }
4116 4341 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
4117 4342 background-color: #f0f0f0;
4118 4343 }
4119 -.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
4120 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
4121 -}
4122 4344 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4123 4345 overflow: hidden;
4124 4346 text-overflow: ellipsis;
4125 4347 display: block;
@@ -4151,14 +4373,10 @@
4151 4373 }
4152 4374 }
4153 4375 .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4154 4376 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4155 - fill: var(--wp-admin-theme-color);
4377 + color: var(--wp-admin-theme-color);
4156 4378 }
4157 -.edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
4158 - flex-grow: 1;
4159 - align-items: flex-start;
4160 -}
4161 4379 .edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4162 4380 padding: 8px;
4163 4381 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4164 4382 border-radius: 100%;
@@ -4172,9 +4390,8 @@
4172 4390 display: flex;
4173 4391 flex-direction: column;
4174 4392 border: 1px solid #ddd;
4175 4393 justify-content: center;
4176 - outline: 1px solid transparent;
4177 4394 }
4178 4395 .edit-site-custom-template-modal__contents > .components-button span:first-child,
4179 4396 .edit-site-add-new-template__template-list__contents > .components-button span:first-child {
4180 4397 color: #1e1e1e;
@@ -4192,14 +4409,8 @@
4192 4409 .edit-site-custom-template-modal__contents > .components-button:hover span,
4193 4410 .edit-site-add-new-template__template-list__contents > .components-button:hover span {
4194 4411 color: var(--wp-admin-theme-color);
4195 4412 }
4196 -.edit-site-custom-template-modal__contents > .components-button:focus,
4197 -.edit-site-add-new-template__template-list__contents > .components-button:focus {
4198 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4199 - border-color: transparent;
4200 - outline: 3px solid transparent;
4201 -}
4202 4413 .edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
4203 4414 .edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
4204 4415 color: var(--wp-admin-theme-color);
4205 4416 }
@@ -4211,10 +4422,12 @@
4211 4422 }
4212 4423
4213 4424 .edit-site-add-new-template__template-list__contents > .components-button {
4214 4425 height: 100%;
4426 + padding: 16px;
4215 4427 text-align: start;
4216 4428 align-items: flex-start;
4429 + justify-content: flex-start;
4217 4430 }
4218 4431
4219 4432 .edit-site-visual-editor__editor-canvas.is-focused {
4220 4433 outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
@@ -4221,8 +4434,9 @@
4221 4434 outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
4222 4435 }
4223 4436
4224 4437 .edit-site-canvas-loader {
4438 + --wp-components-color-foreground: var(--color);
4225 4439 width: 100%;
4226 4440 height: 100%;
4227 4441 display: flex;
4228 4442 position: absolute;
@@ -4237,11 +4451,8 @@
4237 4451 animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
4238 4452 animation-fill-mode: forwards;
4239 4453 }
4240 4454 }
4241 -.edit-site-canvas-loader > div {
4242 - width: 160px;
4243 -}
4244 4455
4245 4456 @keyframes edit-site-canvas-loader__fade-in-animation {
4246 4457 from {
4247 4458 opacity: 0;
@@ -4305,11 +4516,12 @@
4305 4516 .edit-site-patterns__section-header .screen-reader-shortcut:focus {
4306 4517 top: 0;
4307 4518 }
4308 4519
4309 -.edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
4520 +.edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.fields-field__pattern-sync-status-fully) {
4310 4521 background: rgba(var(--wp-block-synced-color--rgb), 0.04);
4311 4522 color: var(--wp-block-synced-color);
4523 + border-color: currentColor;
4312 4524 }
4313 4525
4314 4526 .dataviews-action-modal__duplicate-pattern [role=dialog] > [role=document] {
4315 4527 width: 350px;
@@ -4324,9 +4536,9 @@
4324 4536 border-bottom-right-radius: 2px;
4325 4537 box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
4326 4538 box-sizing: border-box;
4327 4539 z-index: 1;
4328 - background-color: #fff;
4540 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
4329 4541 width: calc(100% + 2px);
4330 4542 left: -1px;
4331 4543 min-width: initial;
4332 4544 max-height: 96px;
@@ -4381,13 +4593,8 @@
4381 4593
4382 4594 .edit-site-list__rename-modal {
4383 4595 z-index: 1000001;
4384 4596 }
4385 -@media (min-width: 782px) {
4386 - .edit-site-list__rename-modal .components-base-control {
4387 - width: 320px;
4388 - }
4389 -}
4390 4597
4391 4598 .edit-site-editor__editor-interface {
4392 4599 opacity: 1;
4393 4600 }
@@ -4409,61 +4616,8 @@
4409 4616 display: flex;
4410 4617 justify-content: center;
4411 4618 }
4412 4619
4413 -.edit-site-editor__view-mode-toggle {
4414 - /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4415 - view-transition-name: toggle;
4416 - /* stylelint-enable */
4417 - top: 0;
4418 - left: 0;
4419 - height: 64px;
4420 - width: 64px;
4421 - z-index: 100;
4422 -}
4423 -.edit-site-editor__view-mode-toggle .components-button {
4424 - color: #fff;
4425 - height: 100%;
4426 - width: 100%;
4427 - border-radius: 0;
4428 - overflow: hidden;
4429 - padding: 0;
4430 - display: flex;
4431 - align-items: center;
4432 - justify-content: center;
4433 -}
4434 -.edit-site-editor__view-mode-toggle .components-button:hover, .edit-site-editor__view-mode-toggle .components-button:active {
4435 - color: #fff;
4436 -}
4437 -.edit-site-editor__view-mode-toggle .components-button:focus {
4438 - box-shadow: none;
4439 -}
4440 -.edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon svg,
4441 -.edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon img {
4442 - background: #1e1e1e;
4443 - display: block;
4444 -}
4445 -
4446 -.edit-site-editor__back-icon {
4447 - position: absolute;
4448 - top: 0;
4449 - left: 0;
4450 - width: 64px;
4451 - height: 64px;
4452 - display: flex;
4453 - align-items: center;
4454 - justify-content: center;
4455 - background-color: hsl(0, 0%, 80%);
4456 - pointer-events: none;
4457 -}
4458 -.edit-site-editor__back-icon svg {
4459 - fill: currentColor;
4460 -}
4461 -.edit-site-editor__back-icon.has-site-icon {
4462 - background-color: hsla(0, 0%, 100%, 0.6);
4463 - backdrop-filter: saturate(180%) blur(15px);
4464 -}
4465 -
4466 4620 .edit-site-welcome-guide {
4467 4621 width: 312px;
4468 4622 }
4469 4623 .edit-site-welcome-guide.guide-editor .edit-site-welcome-guide__image {
@@ -4485,9 +4639,9 @@
4485 4639 max-width: 100%;
4486 4640 object-fit: cover;
4487 4641 }
4488 4642 .edit-site-welcome-guide__heading {
4489 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4643 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4490 4644 font-size: 24px;
4491 4645 line-height: 1.4;
4492 4646 margin: 16px 0 16px 0;
4493 4647 padding: 0 32px;
@@ -4505,24 +4659,25 @@
4505 4659 margin: 0 4px;
4506 4660 vertical-align: text-top;
4507 4661 }
4508 4662 .edit-site-welcome-guide .components-button:hover svg {
4509 - fill: #fff;
4663 + color: #fff;
4510 4664 }
4511 4665
4512 4666 .edit-site-layout {
4513 4667 height: 100%;
4514 - background: #1e1e1e;
4515 - color: #ccc;
4668 + background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4669 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4516 4670 display: flex;
4517 4671 flex-direction: column;
4518 4672 }
4519 4673 .edit-site-layout:not(.is-full-canvas) .editor-visual-editor {
4520 - background: #1e1e1e;
4674 + background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4521 4675 }
4522 4676
4523 4677 .edit-site-layout__content {
4524 4678 height: 100%;
4679 + min-height: 0;
4525 4680 flex-grow: 1;
4526 4681 display: flex;
4527 4682 }
4528 4683
@@ -4537,16 +4692,17 @@
4537 4692 }
4538 4693 }
4539 4694 .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
4540 4695 position: fixed !important;
4541 - height: 100vh;
4696 + height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
4542 4697 left: 0;
4543 - top: 0;
4698 + top: var(--wp-admin--admin-bar--height, 0);
4544 4699 }
4545 4700 .edit-site-layout__sidebar-region .edit-site-layout__sidebar {
4546 4701 display: flex;
4547 4702 flex-direction: column;
4548 4703 height: 100%;
4704 + min-height: 0;
4549 4705 }
4550 4706 .edit-site-layout__sidebar-region .resizable-editor__drag-handle {
4551 4707 right: 0;
4552 4708 }
@@ -4579,8 +4735,18 @@
4579 4735 .edit-site-layout__mobile .edit-site-sidebar-navigation-screen__main {
4580 4736 padding: 0 12px;
4581 4737 }
4582 4738
4739 +.edit-site-layout__mobile-content {
4740 + display: flex;
4741 + flex-direction: column;
4742 + flex-grow: 1;
4743 +}
4744 +
4745 +.edit-site-sidebar__screen-wrapper:has(.edit-site-layout__mobile-content) {
4746 + background: var(--wpds-color-background-surface-neutral, #fcfcfc);
4747 +}
4748 +
4583 4749 .edit-site-layout__canvas-container {
4584 4750 position: relative;
4585 4751 flex-grow: 1;
4586 4752 z-index: 2;
@@ -4600,9 +4766,9 @@
4600 4766 .edit-site-layout__canvas.is-right-aligned {
4601 4767 justify-content: flex-end;
4602 4768 }
4603 4769 .edit-site-layout__canvas .edit-site-resizable-frame__inner {
4604 - color: #1e1e1e;
4770 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4605 4771 }
4606 4772 @media (min-width: 782px) {
4607 4773 .edit-site-layout__canvas {
4608 4774 top: 16px;
@@ -4620,9 +4786,9 @@
4620 4786 }
4621 4787 }
4622 4788 @media (min-width: 782px) {
4623 4789 .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4624 - border-radius: 8px;
4790 + border-radius: var(--wpds-border-radius-xl, 12px);
4625 4791 }
4626 4792 .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
4627 4793 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);
4628 4794 }
@@ -4643,9 +4809,8 @@
4643 4809 .edit-site-template-pages-preview {
4644 4810 height: 100%;
4645 4811 }
4646 4812
4647 -/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4648 4813 html.canvas-mode-edit-transition::view-transition-group(toggle) {
4649 4814 animation-delay: 255ms;
4650 4815 }
4651 4816
@@ -4655,61 +4820,8 @@
4655 4820 ::view-transition-new(*) {
4656 4821 animation: none !important;
4657 4822 }
4658 4823 }
4659 -/* stylelint-enable */
4660 -.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
4661 - display: none;
4662 -}
4663 -
4664 -.edit-site-layout__view-mode-toggle.components-button {
4665 - /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4666 - view-transition-name: toggle;
4667 - /* stylelint-enable */
4668 - position: relative;
4669 - color: #fff;
4670 - height: 64px;
4671 - width: 64px;
4672 - overflow: hidden;
4673 - padding: 0;
4674 - display: flex;
4675 - align-items: center;
4676 - justify-content: center;
4677 - background: #1e1e1e;
4678 - border-radius: 0;
4679 -}
4680 -.edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
4681 - color: #fff;
4682 -}
4683 -.edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout__view-mode-toggle.components-button:focus {
4684 - box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
4685 - outline: 4px solid rgba(0, 0, 0, 0);
4686 - outline-offset: 4px;
4687 -}
4688 -.edit-site-layout__view-mode-toggle.components-button::before {
4689 - content: "";
4690 - display: block;
4691 - position: absolute;
4692 - top: 9px;
4693 - right: 9px;
4694 - bottom: 9px;
4695 - left: 17px;
4696 - border-radius: 4px;
4697 - box-shadow: none;
4698 -}
4699 -@media not (prefers-reduced-motion) {
4700 - .edit-site-layout__view-mode-toggle.components-button::before {
4701 - transition: box-shadow 0.1s ease;
4702 - }
4703 -}
4704 -.edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
4705 - display: flex;
4706 - height: 64px;
4707 - width: 64px;
4708 - justify-content: center;
4709 - align-items: center;
4710 -}
4711 -
4712 4824 .edit-site-layout__actions {
4713 4825 z-index: 100000;
4714 4826 position: fixed !important;
4715 4827 top: -9999em;
@@ -4716,10 +4828,10 @@
4716 4828 bottom: auto;
4717 4829 left: auto;
4718 4830 right: 0;
4719 4831 width: 280px;
4720 - color: #1e1e1e;
4721 - background: #fff;
4832 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4833 + background: var(--wpds-color-background-surface-neutral-strong, #fff);
4722 4834 }
4723 4835 .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
4724 4836 top: auto;
4725 4837 bottom: 0;
@@ -4724,13 +4836,13 @@
4724 4836 top: auto;
4725 4837 bottom: 0;
4726 4838 }
4727 4839 .edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
4728 - top: 0;
4840 + top: var(--wp-admin--admin-bar--height, 0);
4729 4841 }
4730 4842 @media (min-width: 782px) {
4731 4843 .edit-site-layout__actions {
4732 - border-left: 1px solid #ddd;
4844 + border-left: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4733 4845 }
4734 4846 }
4735 4847
4736 4848 .edit-site-layout__area {
@@ -4740,9 +4852,9 @@
4740 4852 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
4741 4853 }
4742 4854 @media (min-width: 782px) {
4743 4855 .edit-site-layout__area {
4744 - border-radius: 8px;
4856 + border-radius: var(--wpds-border-radius-xl, 12px);
4745 4857 margin: 16px 16px 16px 0;
4746 4858 }
4747 4859 }
4748 4860
@@ -4747,9 +4859,9 @@
4747 4859 }
4748 4860
4749 4861 .edit-site-layout__snackbar {
4750 4862 position: fixed;
4751 - bottom: 24px;
4863 + bottom: var(--wpds-dimension-size-md, 32px);
4752 4864 left: 0;
4753 4865 right: 0;
4754 4866 padding-inline: 16px;
4755 4867 box-sizing: border-box;
@@ -4761,13 +4873,13 @@
4761 4873 margin-inline: auto;
4762 4874 }
4763 4875
4764 4876 .edit-site-save-hub {
4765 - color: #949494;
4766 - border-top: 1px solid #2f2f2f;
4877 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4878 + border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4767 4879 flex-shrink: 0;
4768 4880 margin: 0;
4769 - padding: 16px 16px;
4881 + padding: 16px;
4770 4882 }
4771 4883
4772 4884 .edit-site-save-hub__button {
4773 4885 color: inherit;
@@ -4776,13 +4888,13 @@
4776 4888 }
4777 4889 .edit-site-save-hub__button[aria-disabled=true] {
4778 4890 opacity: 1;
4779 4891 }
4780 -.edit-site-save-hub__button[aria-disabled=true]:hover {
4892 +.edit-site-save-hub__button[aria-disabled=true], .edit-site-save-hub__button[aria-disabled=true]:hover {
4781 4893 color: inherit;
4782 4894 }
4783 4895 .edit-site-save-hub__button:not(.is-primary).is-busy, .edit-site-save-hub__button:not(.is-primary).is-busy[aria-disabled=true]:hover {
4784 - color: #1e1e1e;
4896 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
4785 4897 }
4786 4898
4787 4899 @media (min-width: 600px) {
4788 4900 .edit-site-save-panel__modal {
@@ -4791,8 +4903,10 @@
4791 4903 }
4792 4904
4793 4905 .edit-site-sidebar__content {
4794 4906 flex-grow: 1;
4907 + flex-basis: 0;
4908 + min-height: 0;
4795 4909 overflow-y: auto;
4796 4910 overflow-x: hidden;
4797 4911 contain: content;
4798 4912 }
@@ -4875,46 +4989,36 @@
4875 4989 animation-name: local--slide-from-right;
4876 4990 }
4877 4991
4878 4992 .edit-site-sidebar-button {
4879 - color: #e0e0e0;
4993 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
4880 4994 flex-shrink: 0;
4881 4995 }
4882 -.edit-site-sidebar-button:focus:not(:disabled) {
4883 - box-shadow: none;
4996 +.edit-site-sidebar-button:focus:not(:focus-visible) {
4884 4997 outline: none;
4885 4998 }
4886 -.edit-site-sidebar-button:focus-visible:not(:disabled) {
4887 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4888 - outline: 3px solid transparent;
4889 -}
4890 4999 .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] {
4891 - color: #f0f0f0;
5000 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
4892 5001 }
4893 5002
4894 5003 .edit-site-sidebar-navigation-item.components-item {
4895 - color: #949494;
5004 + color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
4896 5005 padding: 8px 6px 8px 16px;
4897 5006 border: none;
4898 5007 min-height: 40px;
4899 5008 }
4900 -.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] {
4901 - color: #e0e0e0;
5009 +.edit-site-sidebar-navigation-item.components-item:focus, .edit-site-sidebar-navigation-item.components-item[aria-current=true], .edit-site-sidebar-navigation-item.components-item.edit-site-sidebar-navigation-item.components-item:hover {
5010 + color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
4902 5011 }
4903 -.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 {
4904 - fill: #e0e0e0;
4905 -}
4906 5012 .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
4907 - background: #2f2f2f;
4908 - color: #fff;
4909 - font-weight: 499;
5013 + background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
5014 + color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5015 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4910 5016 }
4911 5017 .edit-site-sidebar-navigation-item.components-item:focus-visible {
5018 + --wp-components-color-accent: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
4912 5019 transform: translateZ(0);
4913 5020 }
4914 -.edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
4915 - fill: #949494;
4916 -}
4917 5021 .edit-site-sidebar-navigation-item.components-item.with-suffix {
4918 5022 padding-right: 16px;
4919 5023 }
4920 5024
@@ -4941,9 +5045,9 @@
4941 5045 .edit-site-sidebar-navigation-screen__content {
4942 5046 padding: 0 16px;
4943 5047 }
4944 5048 .edit-site-sidebar-navigation-screen__content .components-text {
4945 - color: #ccc;
5049 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4946 5050 }
4947 5051 .edit-site-sidebar-navigation-screen__content .components-heading {
4948 5052 margin-bottom: 8px;
4949 5053 }
@@ -4950,10 +5054,10 @@
4950 5054
4951 5055 .edit-site-sidebar-navigation-screen__title-icon {
4952 5056 position: sticky;
4953 5057 top: 0;
4954 - background: #1e1e1e;
4955 - padding-top: 48px;
5058 + background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5059 + padding-top: 32px;
4956 5060 margin-bottom: 8px;
4957 5061 padding-bottom: 8px;
4958 5062 z-index: 1;
4959 5063 }
@@ -4992,13 +5096,13 @@
4992 5096
4993 5097 .edit-site-sidebar-navigation-screen__footer {
4994 5098 position: sticky;
4995 5099 bottom: 0;
4996 - background-color: #1e1e1e;
5100 + background-color: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4997 5101 gap: 0;
4998 5102 padding: 8px 16px;
4999 5103 margin: 16px 0 0;
5000 - border-top: 1px solid #2f2f2f;
5104 + border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5001 5105 }
5002 5106 .edit-site-sidebar-navigation-screen__footer .edit-site-sidebar-navigation-screen-details-footer {
5003 5107 margin-left: -16px;
5004 5108 margin-right: -16px;
@@ -5013,22 +5117,22 @@
5013 5117 .edit-site-sidebar-navigation-screen__input-control {
5014 5118 width: 100%;
5015 5119 }
5016 5120 .edit-site-sidebar-navigation-screen__input-control .components-input-control__container {
5017 - background: #2f2f2f;
5121 + background: var(--wpds-color-background-interactive-neutral-weak, #0000);
5018 5122 }
5019 5123 .edit-site-sidebar-navigation-screen__input-control .components-input-control__container .components-button {
5020 - color: #e0e0e0 !important;
5124 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e) !important;
5021 5125 }
5022 5126 .edit-site-sidebar-navigation-screen__input-control .components-input-control__input {
5023 - color: #e0e0e0 !important;
5024 - background: #2f2f2f !important;
5127 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e) !important;
5128 + background: var(--wpds-color-background-interactive-neutral-weak, #0000) !important;
5025 5129 }
5026 5130 .edit-site-sidebar-navigation-screen__input-control .components-input-control__backdrop {
5027 5131 border: 4px !important;
5028 5132 }
5029 5133 .edit-site-sidebar-navigation-screen__input-control .components-base-control__help {
5030 - color: #949494;
5134 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
5031 5135 }
5032 5136
5033 5137 .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:focus,
5034 5138 .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:hover,
@@ -5036,12 +5140,12 @@
5036 5140 background: none;
5037 5141 }
5038 5142
5039 5143 .sidebar-navigation__more-menu .components-button {
5040 - color: #e0e0e0;
5144 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5041 5145 }
5042 5146 .sidebar-navigation__more-menu .components-button:hover, .sidebar-navigation__more-menu .components-button:focus, .sidebar-navigation__more-menu .components-button[aria-current] {
5043 - color: #f0f0f0;
5147 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5044 5148 }
5045 5149
5046 5150 .edit-site-sidebar-navigation-screen-patterns__group {
5047 5151 margin-bottom: 24px;
@@ -5057,18 +5161,18 @@
5057 5161 .edit-site-sidebar-navigation-screen-patterns__group-header {
5058 5162 margin-top: 16px;
5059 5163 }
5060 5164 .edit-site-sidebar-navigation-screen-patterns__group-header p {
5061 - color: #949494;
5165 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
5062 5166 }
5063 5167 .edit-site-sidebar-navigation-screen-patterns__group-header h2 {
5064 5168 font-size: 11px;
5065 - font-weight: 499;
5169 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5066 5170 text-transform: uppercase;
5067 5171 }
5068 5172
5069 5173 .edit-site-sidebar-navigation-screen-patterns__divider {
5070 - border-top: 1px solid #2f2f2f;
5174 + border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5071 5175 margin: 16px 0;
5072 5176 }
5073 5177
5074 5178 .edit-site-sidebar-navigation-screen__description {
@@ -5089,19 +5193,27 @@
5089 5193 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu-cell {
5090 5194 padding-right: 0;
5091 5195 }
5092 5196 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button {
5093 - color: #949494;
5197 + color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5094 5198 }
5095 5199 .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] {
5096 - color: #fff;
5200 + color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5097 5201 }
5098 5202 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
5099 - color: #949494;
5203 + color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5100 5204 }
5101 5205 .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 {
5102 - color: #fff;
5206 + color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5103 5207 }
5208 +.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-inserter__toggle {
5209 + background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
5210 + color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
5211 +}
5212 +.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 {
5213 + background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
5214 + color: var(--wpds-color-foreground-interactive-brand-strong-active, #fff);
5215 +}
5104 5216
5105 5217 .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
5106 5218 margin-left: auto;
5107 5219 margin-right: auto;
@@ -5116,13 +5228,8 @@
5116 5228 margin-left: -16px;
5117 5229 margin-right: -16px;
5118 5230 }
5119 5231
5120 -.edit-site-sidebar-navigation-screen-templates-browse {
5121 - margin-left: -16px;
5122 - margin-right: -16px;
5123 -}
5124 -
5125 5232 .edit-site-sidebar-dataviews {
5126 5233 margin-left: -16px;
5127 5234 margin-right: -16px;
5128 5235 }
@@ -5129,111 +5236,16 @@
5129 5236
5130 5237 .edit-site-site-hub {
5131 5238 display: flex;
5132 5239 align-items: center;
5133 - justify-content: space-between;
5134 - gap: 8px;
5135 - margin-right: 12px;
5240 + padding-left: 16px;
5136 5241 height: 64px;
5137 5242 }
5138 5243
5139 -.edit-site-site-hub__actions {
5140 - flex-shrink: 0;
5244 +.edit-site-site-hub__back-button:hover:not(:disabled, [aria-disabled=true]), .edit-site-site-hub__back-button:active:not(:disabled, [aria-disabled=true]) {
5245 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5141 5246 }
5142 5247
5143 -.edit-site-site-hub__view-mode-toggle-container {
5144 - height: 64px;
5145 - width: 64px;
5146 - flex-shrink: 0;
5147 -}
5148 -.edit-site-site-hub__view-mode-toggle-container.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
5149 - background: transparent;
5150 -}
5151 -
5152 -.edit-site-site-hub__title .components-button {
5153 - color: #e0e0e0;
5154 - display: block;
5155 - flex-grow: 1;
5156 - font-size: 15px;
5157 - font-weight: 499;
5158 - overflow: hidden;
5159 - padding-right: 16px;
5160 - margin-left: -4px;
5161 - position: relative;
5162 - text-decoration: none;
5163 - text-overflow: ellipsis;
5164 - white-space: nowrap;
5165 -}
5166 -.edit-site-site-hub__title .components-button:hover, .edit-site-site-hub__title .components-button:focus, .edit-site-site-hub__title .components-button:active {
5167 - color: #e0e0e0;
5168 -}
5169 -.edit-site-site-hub__title .components-button:focus {
5170 - box-shadow: none;
5171 - outline: none;
5172 -}
5173 -.edit-site-site-hub__title .components-button:focus-visible {
5174 - 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);
5175 - outline: 2px solid transparent;
5176 - outline-offset: 2px;
5177 -}
5178 -.edit-site-site-hub__title .components-button::after {
5179 - content: "↗";
5180 - font-weight: 400;
5181 - opacity: 0;
5182 - position: absolute;
5183 - right: 0;
5184 -}
5185 -@media not (prefers-reduced-motion) {
5186 - .edit-site-site-hub__title .components-button::after {
5187 - transition: opacity 0.1s linear;
5188 - }
5189 -}
5190 -.edit-site-site-hub__title .components-button:hover::after, .edit-site-site-hub__title .components-button:focus::after, .edit-site-site-hub__title .components-button:active::after {
5191 - opacity: 1;
5192 -}
5193 -
5194 -.edit-site-site-hub_toggle-command-center {
5195 - color: #e0e0e0;
5196 -}
5197 -.edit-site-site-hub_toggle-command-center:hover svg, .edit-site-site-hub_toggle-command-center:active svg {
5198 - fill: #f0f0f0;
5199 -}
5200 -
5201 -.edit-site-site-icon__icon {
5202 - fill: currentColor;
5203 - width: 100%;
5204 - height: 100%;
5205 -}
5206 -.edit-site-layout.is-full-canvas .edit-site-site-icon__icon {
5207 - padding: 12px;
5208 -}
5209 -
5210 -.edit-site-site-icon__image {
5211 - width: 100%;
5212 - height: 100%;
5213 - object-fit: cover;
5214 - background: #333;
5215 - aspect-ratio: 1/1;
5216 -}
5217 -.edit-site-layout.is-full-canvas .edit-site-site-icon__image {
5218 - border-radius: 0;
5219 -}
5220 -
5221 -.edit-site-editor__view-mode-toggle button:focus {
5222 - position: relative;
5223 -}
5224 -.edit-site-editor__view-mode-toggle button:focus::before {
5225 - content: "";
5226 - display: block;
5227 - position: absolute;
5228 - z-index: 1;
5229 - top: 0;
5230 - right: 0;
5231 - bottom: 0;
5232 - left: 0;
5233 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 calc(1px + var(--wp-admin-border-width-focus)) #fff;
5234 -}
5235 -
5236 5248 .fields-controls__password {
5237 5249 border-top: 1px solid #e0e0e0;
5238 5250 padding-top: 16px;
5239 5251 }
@@ -5398,18 +5410,26 @@
5398 5410 padding-left: 0;
5399 5411 padding-right: 0;
5400 5412 }
5401 5413 .edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen {
5402 - padding-top: 12px;
5403 - padding-left: 12px;
5404 - padding-right: 12px;
5405 - padding-bottom: 12px;
5414 + padding: 12px;
5406 5415 outline: none;
5407 5416 }
5417 +.edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen .global-styles-ui-color-palette__tablist-container {
5418 + margin-inline: -12px;
5419 + width: calc(100% + 24px);
5420 + padding-inline: 12px;
5421 +}
5408 5422 .edit-site-styles .edit-site-sidebar-button {
5409 - color: #1e1e1e;
5423 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5410 5424 }
5411 5425
5426 +.edit-site-styles__content {
5427 + flex-grow: 1;
5428 + min-height: 0;
5429 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
5430 +}
5431 +
5412 5432 .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon {
5413 5433 width: auto;
5414 5434 padding: 0 var(--wpds-dimension-padding-xs, 4px);
5415 5435 }
@@ -5420,66 +5440,16 @@
5420 5440 content: attr(aria-label);
5421 5441 font-size: var(--wpds-typography-font-size-sm, 12px);
5422 5442 }
5423 5443
5424 -body.has-admin-bar-in-editor {
5425 - margin-top: 0;
5426 - height: 100%;
5427 -}
5428 -body.has-admin-bar-in-editor:has(.editor-editor-interface.is-distraction-free) {
5429 - --wp-admin--admin-bar--height: 0;
5430 -}
5431 -body.has-admin-bar-in-editor .edit-site-site-hub__title,
5432 -body.has-admin-bar-in-editor .edit-site-site-hub__actions {
5433 - display: none;
5434 -}
5435 -body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle .edit-site-editor__back-icon {
5436 - background: transparent;
5437 -}
5438 -body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle:hover .edit-site-editor__back-icon {
5439 - color: var(--wp-admin-theme-color);
5440 -}
5441 -body.has-admin-bar-in-editor .edit-site-sidebar-navigation-screen__title-icon {
5442 - padding-top: 16px;
5443 -}
5444 -body.has-admin-bar-in-editor .edit-site-layout__content,
5445 -body.has-admin-bar-in-editor .edit-site-layout__sidebar {
5444 +.edit-site-sidebar-identity__form {
5445 + flex-grow: 1;
5446 5446 min-height: 0;
5447 + overflow: auto;
5448 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
5449 + padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
5447 5450 }
5448 -body.has-admin-bar-in-editor .edit-site-sidebar__content {
5449 - flex-basis: 0;
5450 - min-height: 0;
5451 -}
5452 -body.has-admin-bar-in-editor .edit-site {
5453 - box-sizing: border-box;
5454 - padding-top: var(--wp-admin--admin-bar--height, 0);
5455 - height: 100vh;
5456 - min-height: 100vh;
5457 -}
5458 -@media (min-width: 600px) {
5459 - body.has-admin-bar-in-editor .edit-site {
5460 - padding-top: 0;
5461 - top: var(--wp-admin--admin-bar--height, 0);
5462 - height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5463 - min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5464 - }
5465 -}
5466 -body.has-admin-bar-in-editor .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
5467 - top: var(--wp-admin--admin-bar--height, 0);
5468 - height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5469 -}
5470 -body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus,
5471 -body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
5472 - top: var(--wp-admin--admin-bar--height, 0);
5473 -}
5474 -body.has-admin-bar-in-editor.is-fullscreen-mode #wpadminbar {
5475 - display: block;
5476 -}
5477 -body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
5478 - display: none;
5479 -}
5480 5451
5481 -/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
5482 5452 ::view-transition-image-pair(root) {
5483 5453 isolation: auto;
5484 5454 }
5485 5455
@@ -5489,13 +5459,8 @@
5489 5459 mix-blend-mode: normal;
5490 5460 display: block;
5491 5461 }
5492 5462
5493 -/* stylelint-enable */
5494 -body.js #wpadminbar {
5495 - display: none;
5496 -}
5497 -
5498 5463 body.js #wpbody {
5499 5464 padding-top: 0;
5500 5465 }
5501 5466
@@ -5541,10 +5506,19 @@
5541 5506 max-width: 100%;
5542 5507 }
5543 5508
5544 5509 body.js.site-editor-php {
5545 - background: #1e1e1e;
5510 + background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5546 5511 }
5512 +@media (min-width: 782px) {
5513 + body.js.site-editor-php:has(.editor-editor-interface.is-distraction-free) {
5514 + --wp-admin--admin-bar--height: 0px;
5515 + --wp-editor-admin-bar-display: none;
5516 + }
5517 + body.js.site-editor-php #wpadminbar {
5518 + display: var(--wp-editor-admin-bar-display, block);
5519 + }
5520 +}
5547 5521
5548 5522 .edit-site {
5549 5523 box-sizing: border-box;
5550 5524 }
@@ -5553,8 +5527,9 @@
5553 5527 .edit-site *::after {
5554 5528 box-sizing: inherit;
5555 5529 }
5556 5530 .edit-site {
5531 + padding-top: var(--wp-admin--admin-bar--height, 0);
5557 5532 height: 100vh;
5558 5533 }
5559 5534 @media (min-width: 600px) {
5560 5535 .edit-site {
@@ -5559,12 +5534,13 @@
5559 5534 @media (min-width: 600px) {
5560 5535 .edit-site {
5561 5536 bottom: 0;
5562 5537 left: 0;
5563 - min-height: 100vh;
5538 + height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
5539 + padding-top: 0;
5564 5540 position: fixed;
5565 5541 right: 0;
5566 - top: 0;
5542 + top: var(--wp-admin--admin-bar--height, 0);
5567 5543 }
5568 5544 }
5569 5545 .no-js .edit-site {
5570 5546 min-height: 0;