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-rtl.css +380 -627 23.5.3 → trunk View file →
@@ -1,5 +1,4 @@
1 -@charset "UTF-8";
2 1 /**
3 2 * Typography
4 3 */
5 4 /**
@@ -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
@@ -202,9 +213,8 @@
202 213 flex-grow: 1;
203 214 min-height: 0;
204 215 box-sizing: border-box;
205 216 scroll-padding-bottom: 64px;
206 - /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
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);
@@ -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,9 +295,9 @@
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);
299 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
278 300 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
279 301 text-overflow: ellipsis;
280 302 white-space: nowrap;
281 303 width: 100%;
@@ -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;
@@ -473,9 +495,9 @@
473 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 503 width: var(--wpds-dimension-size-sm, 24px);
@@ -494,9 +516,9 @@
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-foreground-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 524 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
@@ -502,13 +524,13 @@
502 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-foreground-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-foreground-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 536 background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
@@ -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);
@@ -543,12 +565,13 @@
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 568 min-height: var(--wpds-dimension-size-md, 32px);
547 - font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
548 - font-weight: 400;
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;
@@ -555,8 +578,9 @@
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 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));
@@ -568,10 +592,11 @@
568 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-background-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));
@@ -577,8 +602,12 @@
577 602 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
578 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-foreground-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;
@@ -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-left: 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,20 +731,25 @@
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 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-moz-placeholder {
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
722 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
723 - color: rgba(30, 30, 30, 0.62);
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);
724 752 }
725 753
726 754 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
727 755 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
@@ -754,9 +782,9 @@
754 782 display: inline-block;
755 783 vertical-align: middle;
756 784 width: 16px;
757 785 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
758 - font: normal 30px/1 dashicons;
786 + font: 400 30px/1 dashicons;
759 787 speak: none;
760 788 -webkit-font-smoothing: antialiased;
761 789 -moz-osx-font-smoothing: grayscale;
762 790 }
@@ -767,17 +795,23 @@
767 795 font-size: 21px;
768 796 }
769 797 }
770 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 {
771 - background: #f0f0f0;
772 - 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);
773 802 cursor: default;
774 803 opacity: 1;
775 804 }
776 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 +
777 810 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
778 811 position: relative;
779 - background: var(--wpds-color-background-interactive-neutral-weak, rgba(0, 0, 0, 0));
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));
780 814 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
781 815 margin: 0;
782 816 padding: 0;
783 817 width: var(--checkbox-size);
@@ -800,9 +834,9 @@
800 834 }
801 835
802 836 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
803 837 --checkmark-size: var(--checkbox-size);
804 - fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
838 + color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
805 839 position: absolute;
806 840 right: 50%;
807 841 top: 50%;
808 842 transform: translate(50%, -50%);
@@ -820,24 +854,18 @@
820 854 padding: var(--wpds-dimension-padding-sm, 8px);
821 855 }
822 856
823 857 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
824 - 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;
825 859 padding: 6px 8px;
826 860 /* Fonts smaller than 16px causes mobile safari to zoom. */
827 861 font-size: 16px;
828 862 /* Override core line-height. To be reviewed. */
829 863 line-height: normal;
830 - box-shadow: 0 0 0 transparent;
831 - border-radius: 2px;
832 - 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);
833 866 }
834 867
835 -@media not (prefers-reduced-motion) {
836 - .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
837 - transition: box-shadow 0.1s linear;
838 - }
839 -}
840 868 @media (min-width: 600px) {
841 869 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
842 870 font-size: 13px;
843 871 /* Override core line-height. To be reviewed. */
@@ -843,16 +871,17 @@
843 871 /* Override core line-height. To be reviewed. */
844 872 line-height: normal;
845 873 }
846 874 }
847 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
848 - border-color: var(--wp-admin-theme-color);
849 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
850 - outline: 2px solid transparent;
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);
851 877 }
852 878
853 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
854 - color: rgba(30, 30, 30, 0.62);
879 +.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
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;
855 884 }
856 885
857 886 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
858 887 color: rgba(30, 30, 30, 0.62);
@@ -875,15 +904,10 @@
875 904 }
876 905 }
877 906 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
878 907 background: var(--wpds-color-background-surface-neutral-strong, #fff);
879 - box-shadow: inset 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
880 908 }
881 909
882 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
883 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
884 -}
885 -
886 910 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
887 911 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
888 912 }
889 913
@@ -928,13 +952,8 @@
928 952 color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
929 953 box-sizing: border-box;
930 954 }
931 955
932 -.dataviews-search {
933 - width: -moz-fit-content;
934 - width: fit-content;
935 -}
936 -
937 956 .dataviews-filters__user-input-widget {
938 957 padding: var(--wpds-dimension-padding-lg, 16px);
939 958 }
940 959
@@ -995,9 +1014,9 @@
995 1014 }
996 1015 }
997 1016 .dataviews-pagination__page-select {
998 1017 font-size: 11px;
999 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1018 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1000 1019 text-transform: uppercase;
1001 1020 }
1002 1021
1003 1022 @media (min-width: 600px) {
@@ -1002,9 +1021,9 @@
1002 1021
1003 1022 @media (min-width: 600px) {
1004 1023 .dataviews-pagination__page-select .components-select-control__input {
1005 1024 font-size: 11px !important;
1006 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1025 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1007 1026 }
1008 1027 }
1009 1028 .dataviews-action-modal {
1010 1029 z-index: 1000001;
@@ -1033,9 +1052,8 @@
1033 1052 }
1034 1053
1035 1054 .dataviews-view-config {
1036 1055 width: 320px;
1037 - /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
1038 1056 container-type: inline-size;
1039 1057 font-size: var(--wpds-typography-font-size-md, 13px);
1040 1058 line-height: var(--wpds-typography-line-height-sm, 20px);
1041 1059 }
@@ -1212,9 +1230,8 @@
1212 1230 }
1213 1231
1214 1232 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
1215 1233 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
1216 - width: -moz-fit-content;
1217 1234 width: fit-content;
1218 1235 }
1219 1236
1220 1237 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
@@ -1234,9 +1251,9 @@
1234 1251
1235 1252 .dataviews-view-grid .dataviews-view-grid__media,
1236 1253 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
1237 1254 width: 100%;
1238 - aspect-ratio: 1/1;
1255 + aspect-ratio: var(--wp-dataviews-media-aspect-ratio, 1/1);
1239 1256 background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1240 1257 border-radius: var(--wpds-border-radius-md, 4px);
1241 1258 overflow: hidden;
1242 1259 position: relative;
@@ -1248,9 +1265,8 @@
1248 1265 }
1249 1266
1250 1267 .dataviews-view-grid .dataviews-view-grid__media img,
1251 1268 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
1252 - -o-object-fit: cover;
1253 1269 object-fit: cover;
1254 1270 width: 100%;
1255 1271 height: 100%;
1256 1272 }
@@ -1277,8 +1293,18 @@
1277 1293 box-shadow: none;
1278 1294 background: var(--wpds-color-background-surface-neutral, #fcfcfc);
1279 1295 }
1280 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 +
1281 1307 .dataviews-view-grid .dataviews-view-grid__fields,
1282 1308 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
1283 1309 position: relative;
1284 1310 font-size: 12px;
@@ -1408,9 +1434,9 @@
1408 1434 }
1409 1435
1410 1436 .dataviews-view-grid__group-header {
1411 1437 font-size: var(--wpds-typography-font-size-lg, 15px);
1412 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1438 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1413 1439 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1414 1440 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1415 1441 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1416 1442 container-type: inline-size;
@@ -1439,9 +1465,8 @@
1439 1465
1440 1466 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
1441 1467 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
1442 1468 display: flex;
1443 - width: -moz-max-content;
1444 1469 width: max-content;
1445 1470 flex: 0 0 auto;
1446 1471 gap: var(--wpds-dimension-gap-xs, 4px);
1447 1472 white-space: nowrap;
@@ -1494,10 +1519,9 @@
1494 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,
1495 1520 .dataviews-view-list div[role=article]:not(.is-selected):hover,
1496 1521 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
1497 1522 .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
1498 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1499 - background-color: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0));
1523 + background-color: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
1500 1524 }
1501 1525
1502 1526 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
1503 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,
@@ -1508,9 +1532,9 @@
1508 1532 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field,
1509 1533 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
1510 1534 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
1511 1535 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
1512 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1536 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1513 1537 }
1514 1538
1515 1539 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
1516 1540 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
@@ -1516,9 +1540,9 @@
1516 1540 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
1517 1541 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
1518 1542 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
1519 1543 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1520 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1544 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1521 1545 }
1522 1546
1523 1547 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1524 1548 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
@@ -1527,9 +1551,9 @@
1527 1551 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1528 1552 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1529 1553 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
1530 1554 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
1531 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1555 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1532 1556 }
1533 1557
1534 1558 .dataviews-view-list .dataviews-view-list__item {
1535 1559 position: absolute;
@@ -1535,10 +1559,8 @@
1535 1559 position: absolute;
1536 1560 z-index: 1;
1537 1561 inset: 0;
1538 1562 scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
1539 - -webkit-appearance: none;
1540 - -moz-appearance: none;
1541 1563 appearance: none;
1542 1564 border: none;
1543 1565 background: none;
1544 1566 padding: 0;
@@ -1581,9 +1603,8 @@
1581 1603
1582 1604 .dataviews-view-list .dataviews-view-list__media-wrapper img {
1583 1605 width: 100%;
1584 1606 height: 100%;
1585 - -o-object-fit: cover;
1586 1607 object-fit: cover;
1587 1608 }
1588 1609
1589 1610 .dataviews-view-list .dataviews-view-list__media-wrapper::after {
@@ -1603,9 +1624,9 @@
1603 1624 min-width: 0;
1604 1625 }
1605 1626
1606 1627 .dataviews-view-list .dataviews-view-list__field {
1607 - color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
1628 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1608 1629 }
1609 1630
1610 1631 .dataviews-view-list .dataviews-view-list__fields {
1611 1632 display: flex;
@@ -1702,11 +1723,11 @@
1702 1723 }
1703 1724 }
1704 1725 .dataviews-view-list__group-header {
1705 1726 font-size: var(--wpds-typography-font-size-lg, 15px);
1706 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1727 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1707 1728 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1708 - margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1729 + margin: 0 0 var(--wpds-dimension-gap-lg, 16px) 0;
1709 1730 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1710 1731 }
1711 1732
1712 1733 .dataviews-view-table {
@@ -1722,9 +1743,9 @@
1722 1743
1723 1744 .dataviews-view-table th {
1724 1745 text-align: right;
1725 1746 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1726 - font-weight: normal;
1747 + font-weight: 400;
1727 1748 font-size: var(--wpds-typography-font-size-md, 13px);
1728 1749 }
1729 1750
1730 1751 .dataviews-view-table td,
@@ -1752,9 +1773,9 @@
1752 1773 top: 0;
1753 1774 bottom: 0;
1754 1775 right: 0;
1755 1776 width: 1px;
1756 - background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
1777 + background-color: var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
1757 1778 }
1758 1779
1759 1780 .dataviews-view-table td.dataviews-view-table__checkbox-column,
1760 1781 .dataviews-view-table th.dataviews-view-table__checkbox-column {
@@ -1847,9 +1868,9 @@
1847 1868 padding-top: var(--wpds-dimension-padding-sm, 8px);
1848 1869 padding-bottom: var(--wpds-dimension-padding-sm, 8px);
1849 1870 font-size: 11px;
1850 1871 text-transform: uppercase;
1851 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1872 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1852 1873 }
1853 1874
1854 1875 .dataviews-view-table thead th:has(.dataviews-view-table-header-button) {
1855 1876 padding-right: var(--wpds-dimension-padding-xs, 4px);
@@ -1895,9 +1916,9 @@
1895 1916 .dataviews-view-table .dataviews-view-table-header-button {
1896 1917 padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
1897 1918 font-size: 11px;
1898 1919 text-transform: uppercase;
1899 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1920 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1900 1921 }
1901 1922
1902 1923 .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
1903 1924 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
@@ -1966,9 +1987,8 @@
1966 1987
1967 1988 .dataviews-column-primary__media img {
1968 1989 width: var(--wpds-dimension-size-md, 32px);
1969 1990 height: var(--wpds-dimension-size-md, 32px);
1970 - -o-object-fit: cover;
1971 1991 object-fit: cover;
1972 1992 }
1973 1993
1974 1994 .dataviews-column-primary__media::after {
@@ -1981,8 +2001,19 @@
1981 2001 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
1982 2002 border-radius: var(--wpds-border-radius-md, 4px);
1983 2003 }
1984 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 +
1985 2016 .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media),
1986 2017 .dataviews-view-table__primary-column-content:not(.dataviews-column-primary__media) {
1987 2018 min-width: 15ch;
1988 2019 max-width: 80ch;
@@ -1988,9 +2019,9 @@
1988 2019 max-width: 80ch;
1989 2020 }
1990 2021
1991 2022 .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
1992 - font-weight: var(--wpds-typography-font-weight-medium, 499);
2023 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1993 2024 padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
1994 2025 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1995 2026 }
1996 2027
@@ -2036,9 +2067,8 @@
2036 2067 text-align: start;
2037 2068 }
2038 2069
2039 2070 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
2040 - width: -moz-fit-content;
2041 2071 width: fit-content;
2042 2072 }
2043 2073
2044 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 {
@@ -2074,13 +2104,13 @@
2074 2104 aspect-ratio: 1/1;
2075 2105 min-height: 0;
2076 2106 background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2077 2107 border-radius: var(--wpds-border-radius-md, 4px);
2108 + overflow: hidden;
2078 2109 position: relative;
2079 2110 }
2080 2111
2081 2112 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
2082 - -o-object-fit: cover;
2083 2113 object-fit: cover;
2084 2114 width: 100%;
2085 2115 height: 100%;
2086 2116 }
@@ -2096,8 +2126,16 @@
2096 2126 border-radius: var(--wpds-border-radius-md, 4px);
2097 2127 pointer-events: none;
2098 2128 }
2099 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 +
2100 2138 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
2101 2139 position: relative;
2102 2140 font-size: 12px;
2103 2141 line-height: 16px;
@@ -2169,9 +2207,9 @@
2169 2207 }
2170 2208
2171 2209 .dataviews-view-picker-grid-group__header {
2172 2210 font-size: var(--wpds-typography-font-size-lg, 15px);
2173 - font-weight: var(--wpds-typography-font-weight-medium, 499);
2211 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2174 2212 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2175 2213 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2176 2214 padding: 0 48px;
2177 2215 }
@@ -2219,9 +2257,9 @@
2219 2257 }
2220 2258
2221 2259 .dataviews-view-activity .dataviews-view-activity__group-header {
2222 2260 font-size: var(--wpds-typography-font-size-lg, 15px);
2223 - font-weight: var(--wpds-typography-font-weight-medium, 499);
2261 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2224 2262 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2225 2263 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2226 2264 padding: 0;
2227 2265 }
@@ -2259,9 +2297,8 @@
2259 2297 }
2260 2298
2261 2299 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
2262 2300 display: flex;
2263 - width: -moz-max-content;
2264 2301 width: max-content;
2265 2302 flex: 0 0 auto;
2266 2303 }
2267 2304
@@ -2393,9 +2430,8 @@
2393 2430 display: block;
2394 2431 width: 100%;
2395 2432 height: 100%;
2396 2433 margin: 0 auto;
2397 - -o-object-fit: cover;
2398 2434 object-fit: cover;
2399 2435 border-radius: 50%;
2400 2436 box-sizing: border-box;
2401 2437 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -2590,9 +2626,9 @@
2590 2626 }
2591 2627
2592 2628 .dataviews-view-picker-activity .dataviews-view-picker-activity-group__header {
2593 2629 font-size: var(--wpds-typography-font-size-lg, 15px);
2594 - font-weight: var(--wpds-typography-font-weight-medium, 499);
2630 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2595 2631 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2596 2632 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2597 2633 padding: 0;
2598 2634 padding-inline-start: var(--wpds-dimension-padding-2xl, 24px);
@@ -2610,9 +2646,8 @@
2610 2646 display: block;
2611 2647 width: 100%;
2612 2648 height: 100%;
2613 2649 margin: 0 auto;
2614 - -o-object-fit: cover;
2615 2650 object-fit: cover;
2616 2651 border-radius: 50%;
2617 2652 box-sizing: border-box;
2618 2653 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -2666,8 +2701,29 @@
2666 2701 .dataviews-controls__date-preset:active {
2667 2702 background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
2668 2703 }
2669 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 +
2670 2726 .dataforms-layouts-panel__field-trigger {
2671 2727 position: relative;
2672 2728 color: inherit;
2673 2729 display: flex;
@@ -2710,9 +2766,9 @@
2710 2766 }
2711 2767
2712 2768 .dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control {
2713 2769 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2714 - font-weight: var(--wpds-typography-font-weight-regular, 400);
2770 + font-weight: var(--wpds-typography-font-weight-default, 400);
2715 2771 }
2716 2772
2717 2773 .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon {
2718 2774 opacity: 1;
@@ -2730,8 +2786,14 @@
2730 2786 opacity: 0;
2731 2787 border-radius: var(--wpds-border-radius-xs, 1px);
2732 2788 }
2733 2789
2790 +.dataforms-layouts-panel__field-trigger-icon::after {
2791 + content: "";
2792 + position: absolute;
2793 + inset: 0;
2794 +}
2795 +
2734 2796 .dataforms-layouts-panel__field-trigger-icon:focus-visible {
2735 2797 opacity: 1;
2736 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));
2737 2799 }
@@ -2765,11 +2827,9 @@
2765 2827 color: var(--wpds-color-foreground-content-error-weak, #cc1818);
2766 2828 }
2767 2829
2768 2830 .dataforms-layouts-panel__field-label-error-content {
2769 - position: relative;
2770 - z-index: 1;
2771 - cursor: help;
2831 + pointer-events: none;
2772 2832 color: var(--wpds-color-foreground-content-error-weak, #cc1818);
2773 2833 display: inline-flex;
2774 2834 flex-direction: row;
2775 2835 align-items: center;
@@ -2785,12 +2845,17 @@
2785 2845 align-items: center;
2786 2846 overflow: clip;
2787 2847 padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2788 2848 margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2789 - word-break: break-word;
2790 - font-weight: var(--wpds-typography-font-weight-medium, 499);
2849 + word-break: normal;
2850 + overflow-wrap: anywhere;
2851 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2791 2852 }
2792 2853
2854 +.dataforms-layouts-panel__field-control:has(a, button) {
2855 + z-index: 1;
2856 +}
2857 +
2793 2858 .dataforms-layouts-panel__field-control > * {
2794 2859 min-width: 0;
2795 2860 }
2796 2861
@@ -2823,12 +2888,8 @@
2823 2888 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
2824 2889 z-index: 159990;
2825 2890 }
2826 2891
2827 -.dataforms-layouts-panel__summary-button:empty {
2828 - min-width: 160px;
2829 -}
2830 -
2831 2892 .dataforms-layouts-regular__field {
2832 2893 width: 100%;
2833 2894 min-height: var(--wpds-dimension-size-md, 32px);
2834 2895 justify-content: flex-start !important;
@@ -2905,10 +2966,10 @@
2905 2966 width: 100%;
2906 2967 }
2907 2968
2908 2969 .dataforms-layouts__wrapper {
2909 - font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2910 - 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);
2911 2972 font-size: 13px;
2912 2973 line-height: 20px;
2913 2974 }
2914 2975
@@ -2981,8 +3042,14 @@
2981 3042 /**
2982 3043 * Focus styles.
2983 3044 */
2984 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 +/**
2985 3052 * Applies editor left position to the selector passed as argument
2986 3053 */
2987 3054 /**
2988 3055 * Styles that are reused verbatim in a few places
@@ -3040,9 +3107,9 @@
3040 3107 padding: 12px;
3041 3108 display: grid;
3042 3109 align-items: center;
3043 3110 grid-template-columns: min-content 1fr min-content;
3044 - grid-gap: 4px 8px;
3111 + gap: 4px 8px;
3045 3112 color: #1e1e1e;
3046 3113 }
3047 3114
3048 3115 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
@@ -3119,9 +3186,8 @@
3119 3186 line-height: 1.5;
3120 3187 }
3121 3188
3122 3189 fieldset.fields__media-edit {
3123 - /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
3124 3190 container-type: inline-size;
3125 3191 }
3126 3192
3127 3193 fieldset.fields__media-edit .fields__media-edit-compact-group {
@@ -3326,11 +3392,9 @@
3326 3392
3327 3393 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
3328 3394 width: 100%;
3329 3395 height: 100%;
3330 - -o-object-fit: cover;
3331 3396 object-fit: cover;
3332 - -o-object-position: 50% 50%;
3333 3397 object-position: 50% 50%;
3334 3398 }
3335 3399
3336 3400 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
@@ -3359,9 +3423,8 @@
3359 3423 }
3360 3424
3361 3425 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
3362 3426 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
3363 - /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
3364 3427 }
3365 3428
3366 3429 @container (max-width: 500px) {
3367 3430 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
@@ -3391,9 +3454,8 @@
3391 3454
3392 3455 .fields-controls__author-avatar img {
3393 3456 width: 16px;
3394 3457 height: 16px;
3395 - -o-object-fit: cover;
3396 3458 object-fit: cover;
3397 3459 opacity: 0;
3398 3460 border-radius: 100%;
3399 3461 }
@@ -3429,18 +3491,15 @@
3429 3491 padding: 0;
3430 3492 margin: 0;
3431 3493 }
3432 3494
3433 -.fields-controls__slug .fields-controls__slug-external-icon {
3434 - margin-right: 5ch;
3435 -}
3436 -
3437 3495 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
3438 3496 padding-inline-start: 0 !important;
3439 3497 }
3440 3498
3441 3499 .fields-controls__slug .fields-controls__slug-help-link {
3442 - word-break: break-word;
3500 + word-break: normal;
3501 + overflow-wrap: anywhere;
3443 3502 }
3444 3503
3445 3504 .fields-controls__slug .fields-controls__slug-help {
3446 3505 display: flex;
@@ -3447,9 +3506,9 @@
3447 3506 flex-direction: column;
3448 3507 }
3449 3508
3450 3509 .fields-controls__slug .fields-controls__slug-help .fields-controls__slug-help-slug {
3451 - font-weight: 600;
3510 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3452 3511 }
3453 3512
3454 3513 .fields-controls__featured-image-image,
3455 3514 .fields-controls__featured-image-placeholder {
@@ -3568,8 +3627,14 @@
3568 3627 /**
3569 3628 * Focus styles.
3570 3629 */
3571 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 +/**
3572 3637 * Applies editor left position to the selector passed as argument
3573 3638 */
3574 3639 /**
3575 3640 * Styles that are reused verbatim in a few places
@@ -3603,9 +3668,9 @@
3603 3668 }
3604 3669
3605 3670 .font-library-modal .font-library__subtitle {
3606 3671 text-transform: uppercase;
3607 - font-weight: 499;
3672 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3608 3673 font-size: 11px;
3609 3674 }
3610 3675
3611 3676 .font-library-modal__tab-panel {
@@ -3643,9 +3708,9 @@
3643 3708 .font-library__footer {
3644 3709 position: absolute;
3645 3710 width: 100%;
3646 3711 bottom: 0;
3647 - border-top: 1px solid #ddd;
3712 + border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3648 3713 padding: 24px;
3649 3714 background-color: #fff;
3650 3715 box-sizing: border-box;
3651 3716 flex-grow: 0 !important;
@@ -3654,22 +3719,26 @@
3654 3719 }
3655 3720
3656 3721 .font-library__page-selection {
3657 3722 font-size: 11px;
3658 - font-weight: 499;
3723 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3659 3724 text-transform: uppercase;
3660 3725 }
3661 3726
3662 3727 @media (min-width: 600px) {
3663 - .font-library__page-selection .font-library__page-selection-trigger {
3728 + .font-library__page-selection .components-select-control__input {
3664 3729 font-size: 11px !important;
3665 - font-weight: 499;
3730 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3666 3731 }
3667 3732 }
3733 +.font-library__search {
3734 + width: 240px;
3735 +}
3736 +
3668 3737 .font-library__fonts-title {
3669 3738 text-transform: uppercase;
3670 3739 font-size: 11px;
3671 - font-weight: 600;
3740 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3672 3741 margin-top: 0;
3673 3742 margin-bottom: 0;
3674 3743 }
3675 3744
@@ -3683,11 +3752,15 @@
3683 3752 .font-library__fonts-list-item {
3684 3753 margin-bottom: 0;
3685 3754 }
3686 3755
3756 +.font-library__font-demo {
3757 + position: relative;
3758 +}
3759 +
3687 3760 .font-library__font-card {
3688 3761 box-sizing: border-box;
3689 - border: 1px solid #ddd;
3762 + border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3690 3763 width: 100%;
3691 3764 height: auto !important;
3692 3765 padding: 16px;
3693 3766 margin-top: -1px; /* To collapse the margin with the previous element */
@@ -3701,13 +3774,13 @@
3701 3774 position: relative;
3702 3775 }
3703 3776
3704 3777 .font-library__font-card .font-library__font-card__name {
3705 - font-weight: bold;
3778 + font-weight: 700;
3706 3779 }
3707 3780
3708 3781 .font-library__font-card .font-library__font-card__count {
3709 - color: #757575;
3782 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3710 3783 }
3711 3784
3712 3785 .font-library__font-card .font-library__font-variant_demo-image {
3713 3786 display: block;
@@ -3714,8 +3787,25 @@
3714 3787 height: 24px;
3715 3788 width: auto;
3716 3789 }
3717 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 + right: 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 +
3718 3808 .font-library__font-card .font-library__font-variant_demo-text {
3719 3809 white-space: nowrap;
3720 3810 flex-shrink: 0;
3721 3811 }
@@ -3727,9 +3817,9 @@
3727 3817 }
3728 3818 .font-library-modal__tablist-container {
3729 3819 position: sticky;
3730 3820 top: 0;
3731 - border-bottom: 1px solid #ddd;
3821 + border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3732 3822 background: #fff;
3733 3823 z-index: 1;
3734 3824 }
3735 3825
@@ -3750,9 +3840,9 @@
3750 3840 width: 80%;
3751 3841 }
3752 3842
3753 3843 .font-library__local-fonts .font-library__upload-area__text {
3754 - color: #757575;
3844 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3755 3845 }
3756 3846
3757 3847 .font-library__google-fonts-confirm {
3758 3848 display: flex;
@@ -3787,113 +3877,22 @@
3787 3877 .font-library__select-all .components-checkbox-control__label {
3788 3878 padding-right: 16px;
3789 3879 }
3790 3880
3791 -.global-styles-ui-pagination .components-button.is-tertiary {
3792 - width: 32px;
3793 - height: 32px;
3794 - justify-content: center;
3795 -}
3796 -
3797 -.global-styles-ui-screen-revisions__revisions-list {
3798 - list-style: none;
3799 - margin: 0 16px 16px 16px;
3800 - flex-grow: 1;
3801 -}
3802 -
3803 -.global-styles-ui-screen-revisions__revisions-list li {
3804 - margin-bottom: 0;
3805 -}
3806 -
3807 -.global-styles-ui-screen-revisions__revision-item {
3808 - position: relative;
3809 - cursor: var(--wpds-cursor-control, pointer);
3881 +.global-styles-ui-screen-revisions {
3810 3882 display: flex;
3811 3883 flex-direction: column;
3884 + flex-grow: 1;
3885 + min-height: 0;
3812 3886 }
3813 3887
3814 -.global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
3815 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3816 - outline: 2px solid transparent;
3888 +.global-styles-ui-screen-revisions__actions {
3889 + margin-inline-start: auto;
3817 3890 }
3818 3891
3819 -.global-styles-ui-screen-revisions__revision-item:hover {
3820 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3821 -}
3822 -
3823 -.global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
3824 - color: var(--wp-admin-theme-color);
3825 -}
3826 -
3827 -.global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
3828 - position: absolute;
3829 - content: "\a";
3830 - display: block;
3831 -}
3832 -
3833 -.global-styles-ui-screen-revisions__revision-item::before {
3834 - background: #ddd;
3835 - border-radius: 50%;
3836 - height: 8px;
3837 - width: 8px;
3838 - top: 18px;
3839 - right: 17px;
3840 - transform: translate(50%, -50%);
3841 - z-index: 1;
3842 - border: 4px solid transparent;
3843 -}
3844 -
3845 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
3846 - border-radius: 2px;
3847 - outline: 3px solid transparent;
3848 - outline-offset: -2px;
3849 - color: var(--wp-admin-theme-color);
3850 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3851 -}
3852 -
3853 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
3854 - color: var(--wp-admin-theme-color);
3855 -}
3856 -
3857 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
3858 - background: var(--wp-admin-theme-color);
3859 -}
3860 -
3861 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
3862 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta {
3863 - color: #1e1e1e;
3864 -}
3865 -
3866 -.global-styles-ui-screen-revisions__revision-item::after {
3867 - height: 100%;
3868 - right: 16px;
3869 - top: 0;
3870 - width: 0;
3871 - border: 0.5px solid #ddd;
3872 -}
3873 -
3874 -.global-styles-ui-screen-revisions__revision-item:first-child::after {
3875 - top: 18px;
3876 -}
3877 -
3878 -.global-styles-ui-screen-revisions__revision-item:last-child::after {
3879 - height: 18px;
3880 -}
3881 -
3882 -.global-styles-ui-screen-revisions__revision-item-wrapper {
3883 - display: block;
3884 - padding: 12px 40px 4px 12px;
3885 -}
3886 -
3887 -.global-styles-ui-screen-revisions__apply-button.is-primary,
3888 -.global-styles-ui-screen-revisions__active-badge {
3889 - align-self: flex-start;
3890 - margin: 0 40px 12px 12px;
3891 -}
3892 -
3893 -.global-styles-ui-screen-revisions__changes,
3894 -.global-styles-ui-screen-revisions__meta {
3895 - color: #757575;
3892 +.global-styles-ui-screen-revisions__date {
3893 + text-transform: uppercase;
3894 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3896 3895 font-size: 12px;
3897 3896 }
3898 3897
3899 3898 .global-styles-ui-screen-revisions__description {
@@ -3902,11 +3901,11 @@
3902 3901 align-items: flex-start;
3903 3902 gap: 8px;
3904 3903 }
3905 3904
3906 -.global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
3907 - text-transform: uppercase;
3908 - font-weight: 600;
3905 +.global-styles-ui-screen-revisions__changes,
3906 +.global-styles-ui-screen-revisions__meta {
3907 + color: #2f2f2f;
3909 3908 font-size: 12px;
3910 3909 }
3911 3910
3912 3911 .global-styles-ui-screen-revisions__meta {
@@ -3912,11 +3911,10 @@
3912 3911 .global-styles-ui-screen-revisions__meta {
3913 3912 display: flex;
3914 3913 justify-content: start;
3915 3914 width: 100%;
3916 - align-items: flex-start;
3915 + align-items: center;
3917 3916 text-align: right;
3918 - margin-bottom: 4px;
3919 3917 }
3920 3918
3921 3919 .global-styles-ui-screen-revisions__meta img {
3922 3920 width: 16px;
@@ -3924,16 +3922,12 @@
3924 3922 border-radius: 100%;
3925 3923 margin-left: 8px;
3926 3924 }
3927 3925
3928 -.global-styles-ui-screen-revisions__loading {
3929 - margin: 24px auto !important;
3930 -}
3931 -
3932 3926 .global-styles-ui-screen-revisions__changes {
3933 3927 text-align: right;
3934 3928 line-height: 1.4;
3935 - margin-right: 12px;
3929 + margin: 0 12px 0 0;
3936 3930 list-style: disc;
3937 3931 }
3938 3932
3939 3933 .global-styles-ui-screen-revisions__changes li {
@@ -3939,47 +3933,8 @@
3939 3933 .global-styles-ui-screen-revisions__changes li {
3940 3934 margin-bottom: 4px;
3941 3935 }
3942 3936
3943 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
3944 - justify-content: space-between;
3945 - gap: 2px;
3946 -}
3947 -
3948 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
3949 - position: absolute;
3950 - right: -1000px;
3951 - height: 1px;
3952 - margin: -1px;
3953 - overflow: hidden;
3954 -}
3955 -
3956 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
3957 - font-size: 12px;
3958 - will-change: opacity;
3959 -}
3960 -
3961 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
3962 - color: #1e1e1e;
3963 -}
3964 -
3965 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
3966 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
3967 - color: #949494;
3968 -}
3969 -
3970 -.global-styles-ui-screen-revisions__footer {
3971 - height: 56px;
3972 - z-index: 1;
3973 - position: sticky;
3974 - min-width: 100%;
3975 - bottom: 0;
3976 - background: #fff;
3977 - padding: 12px;
3978 - border-top: 1px solid #ddd;
3979 - box-sizing: border-box;
3980 -}
3981 -
3982 3937 .global-styles-ui-variations_item {
3983 3938 box-sizing: border-box;
3984 3939 cursor: var(--wpds-cursor-control, pointer);
3985 3940 }
@@ -4060,13 +4015,34 @@
4060 4015 justify-content: center;
4061 4016 border-radius: 2px;
4062 4017 }
4063 4018
4019 +.global-styles-ui-block-types-filter {
4020 + margin-bottom: 12px;
4021 + padding: 0 16px;
4022 +}
4023 +
4064 4024 .global-styles-ui-block-types-search {
4065 - margin-bottom: 10px;
4066 - padding: 0 16px;
4025 + flex-grow: 1;
4067 4026 }
4068 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-right: auto;
4042 + width: 6px;
4043 +}
4044 +
4069 4045 .global-styles-ui-screen-typography__font-variants-count {
4070 4046 color: #757575;
4071 4047 }
4072 4048
@@ -4089,15 +4065,15 @@
4089 4065
4090 4066 .global-styles-ui-subtitle {
4091 4067 margin-bottom: 0 !important;
4092 4068 text-transform: uppercase;
4093 - font-weight: 499 !important;
4069 + font-weight: var(--wpds-typography-font-weight-emphasis, 600) !important;
4094 4070 font-size: 11px !important;
4095 4071 }
4096 4072
4097 4073 .global-styles-ui-section-title {
4098 4074 color: #2f2f2f;
4099 - font-weight: 600;
4075 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4100 4076 line-height: 1.2;
4101 4077 padding: 16px 16px 0;
4102 4078 margin: 0;
4103 4079 }
@@ -4108,10 +4084,20 @@
4108 4084
4109 4085 .global-styles-ui__color-indicator-wrapper {
4110 4086 height: 24px;
4111 4087 flex-shrink: 0;
4088 + display: flex;
4089 + align-items: center;
4112 4090 }
4113 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 +
4114 4100 .global-styles-ui__shadows-panel__options-container,
4115 4101 .global-styles-ui__typography-panel__options-container {
4116 4102 height: 24px;
4117 4103 }
@@ -4123,9 +4109,10 @@
4123 4109 border-radius: 2px;
4124 4110 overflow: hidden;
4125 4111 }
4126 4112
4127 -.global-styles-ui__shadow-preview-panel {
4113 +.global-styles-ui__shadow-preview-panel,
4114 +.global-styles-ui__text-shadow-preview-panel {
4128 4115 height: 144px;
4129 4116 border: #ddd 1px solid;
4130 4117 border-radius: 2px;
4131 4118 overflow: auto;
@@ -4133,9 +4120,9 @@
4133 4120 background-position: 0 0, 8px 8px;
4134 4121 background-size: 16px 16px;
4135 4122 }
4136 4123
4137 -.global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
4124 +.global-styles-ui__shadow-preview-block {
4138 4125 border: #ddd 1px solid;
4139 4126 border-radius: 2px;
4140 4127 background-color: #fff;
4141 4128 width: 60%;
@@ -4141,22 +4128,44 @@
4141 4128 width: 60%;
4142 4129 height: 60px;
4143 4130 }
4144 4131
4145 -.global-styles-ui__shadow-editor__dropdown-content {
4132 +.global-styles-ui__text-shadow-preview-panel {
4133 + margin-block: -8px 16px;
4134 +}
4135 +
4136 +.global-styles-ui__text-shadow-preview-text {
4137 + font-size: 24px;
4138 +}
4139 +
4140 +.global-styles-ui__text-shadow-editor__header {
4141 + margin-block-end: 8px;
4142 +}
4143 +
4144 +.global-styles-ui__text-shadow-editor__inputs {
4145 + display: grid;
4146 + grid-template-columns: repeat(2, 1fr);
4147 + gap: 16px;
4148 +}
4149 +
4150 +.global-styles-ui__shadow-editor__dropdown-content,
4151 +.global-styles-ui__text-shadow-editor__dropdown-content {
4146 4152 width: 280px;
4147 4153 }
4148 4154
4149 -.global-styles-ui__shadow-editor-panel {
4155 +.global-styles-ui__shadow-editor-panel,
4156 +.global-styles-ui__text-shadow-editor-panel {
4150 4157 margin-bottom: 4px;
4151 4158 }
4152 4159
4153 -.global-styles-ui__shadow-editor__dropdown {
4160 +.global-styles-ui__shadow-editor__dropdown,
4161 +.global-styles-ui__text-shadow-editor__dropdown {
4154 4162 width: 100%;
4155 4163 position: relative;
4156 4164 }
4157 4165
4158 -.global-styles-ui__shadow-editor__dropdown-toggle {
4166 +.global-styles-ui__shadow-editor__dropdown-toggle,
4167 +.global-styles-ui__text-shadow-editor__dropdown-toggle {
4159 4168 width: 100%;
4160 4169 height: auto;
4161 4170 padding-top: 8px;
4162 4171 padding-bottom: 8px;
@@ -4163,14 +4172,16 @@
4163 4172 text-align: right;
4164 4173 border-radius: inherit;
4165 4174 }
4166 4175
4167 -.global-styles-ui__shadow-editor__dropdown-toggle.is-open {
4176 +.global-styles-ui__shadow-editor__dropdown-toggle.is-open,
4177 +.global-styles-ui__text-shadow-editor__dropdown-toggle.is-open {
4168 4178 background: #f0f0f0;
4169 4179 color: var(--wp-admin-theme-color);
4170 4180 }
4171 4181
4172 -.global-styles-ui__shadow-editor__remove-button {
4182 +.global-styles-ui__shadow-editor__remove-button,
4183 +.global-styles-ui__text-shadow-editor__remove-button {
4173 4184 position: absolute;
4174 4185 left: 8px;
4175 4186 top: 8px;
4176 4187 opacity: 0;
@@ -4175,18 +4186,19 @@
4175 4186 top: 8px;
4176 4187 opacity: 0;
4177 4188 }
4178 4189
4179 -.global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
4180 - border: none;
4181 -}
4182 -
4183 -.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 {
4190 +.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,
4191 +.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
4192 +.global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
4193 +.global-styles-ui__text-shadow-editor__remove-button:focus,
4194 +.global-styles-ui__text-shadow-editor__remove-button:hover {
4184 4195 opacity: 1;
4185 4196 }
4186 4197
4187 4198 @media (hover: none) {
4188 - .global-styles-ui__shadow-editor__remove-button {
4199 + .global-styles-ui__shadow-editor__remove-button,
4200 + .global-styles-ui__text-shadow-editor__remove-button {
4189 4201 opacity: 1;
4190 4202 }
4191 4203 }
4192 4204 .global-styles-ui-screen-css {
@@ -4239,8 +4251,16 @@
4239 4251 flex-direction: column;
4240 4252 height: 100%;
4241 4253 }
4242 4254
4255 +.global-styles-ui-color-palette__tablist-container {
4256 + border-bottom: 1px solid #ddd;
4257 +}
4258 +
4259 +.global-styles-ui-color-palette__tablist {
4260 + margin-bottom: -1px;
4261 +}
4262 +
4243 4263 .global-styles-ui-sidebar__navigator-screen .single-column {
4244 4264 grid-column: span 1;
4245 4265 }
4246 4266
@@ -4262,9 +4282,10 @@
4262 4282 clip-path: border-box;
4263 4283 }
4264 4284
4265 4285 .global-styles-ui-color-palette-panel,
4266 -.global-styles-ui-gradient-palette-panel {
4286 +.global-styles-ui-gradient-palette-panel,
4287 +.global-styles-ui-duotone-palette-panel {
4267 4288 padding: 16px;
4268 4289 }
4269 4290
4270 4291 .edit-site-custom-template-modal__contents-wrapper {
@@ -4273,13 +4294,8 @@
4273 4294 }
4274 4295 .edit-site-custom-template-modal__contents-wrapper > * {
4275 4296 width: 100%;
4276 4297 }
4277 -.edit-site-custom-template-modal__contents-wrapper__suggestions_list {
4278 - margin-right: -12px;
4279 - margin-left: -12px;
4280 - width: calc(100% + 24px);
4281 -}
4282 4298 .edit-site-custom-template-modal__contents > .components-button {
4283 4299 height: auto;
4284 4300 justify-content: center;
4285 4301 }
@@ -4289,10 +4305,14 @@
4289 4305 }
4290 4306 }
4291 4307 @media (min-width: 600px) {
4292 4308 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
4293 - max-height: 224px;
4294 4309 overflow-y: auto;
4310 + max-height: calc(224px + 4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4311 + padding: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4312 + margin-inline: calc(-2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4313 + width: calc(100% + 4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4314 + scroll-padding-block: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4295 4315 }
4296 4316 }
4297 4317 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
4298 4318 display: block;
@@ -4318,11 +4338,8 @@
4318 4338 }
4319 4339 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
4320 4340 background-color: #f0f0f0;
4321 4341 }
4322 -.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
4323 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
4324 -}
4325 4342 .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 {
4326 4343 overflow: hidden;
4327 4344 text-overflow: ellipsis;
4328 4345 display: block;
@@ -4354,14 +4371,10 @@
4354 4371 }
4355 4372 }
4356 4373 .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4357 4374 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4358 - fill: var(--wp-admin-theme-color);
4375 + color: var(--wp-admin-theme-color);
4359 4376 }
4360 -.edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
4361 - flex-grow: 1;
4362 - align-items: flex-start;
4363 -}
4364 4377 .edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4365 4378 padding: 8px;
4366 4379 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4367 4380 border-radius: 100%;
@@ -4375,9 +4388,8 @@
4375 4388 display: flex;
4376 4389 flex-direction: column;
4377 4390 border: 1px solid #ddd;
4378 4391 justify-content: center;
4379 - outline: 1px solid transparent;
4380 4392 }
4381 4393 .edit-site-custom-template-modal__contents > .components-button span:first-child,
4382 4394 .edit-site-add-new-template__template-list__contents > .components-button span:first-child {
4383 4395 color: #1e1e1e;
@@ -4395,14 +4407,8 @@
4395 4407 .edit-site-custom-template-modal__contents > .components-button:hover span,
4396 4408 .edit-site-add-new-template__template-list__contents > .components-button:hover span {
4397 4409 color: var(--wp-admin-theme-color);
4398 4410 }
4399 -.edit-site-custom-template-modal__contents > .components-button:focus,
4400 -.edit-site-add-new-template__template-list__contents > .components-button:focus {
4401 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4402 - border-color: transparent;
4403 - outline: 3px solid transparent;
4404 -}
4405 4411 .edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
4406 4412 .edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
4407 4413 color: var(--wp-admin-theme-color);
4408 4414 }
@@ -4414,10 +4420,12 @@
4414 4420 }
4415 4421
4416 4422 .edit-site-add-new-template__template-list__contents > .components-button {
4417 4423 height: 100%;
4424 + padding: 16px;
4418 4425 text-align: start;
4419 4426 align-items: flex-start;
4427 + justify-content: flex-start;
4420 4428 }
4421 4429
4422 4430 .edit-site-visual-editor__editor-canvas.is-focused {
4423 4431 outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
@@ -4424,8 +4432,9 @@
4424 4432 outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
4425 4433 }
4426 4434
4427 4435 .edit-site-canvas-loader {
4436 + --wp-components-color-foreground: var(--color);
4428 4437 width: 100%;
4429 4438 height: 100%;
4430 4439 display: flex;
4431 4440 position: absolute;
@@ -4440,11 +4449,8 @@
4440 4449 animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
4441 4450 animation-fill-mode: forwards;
4442 4451 }
4443 4452 }
4444 -.edit-site-canvas-loader > div {
4445 - width: 160px;
4446 -}
4447 4453
4448 4454 @keyframes edit-site-canvas-loader__fade-in-animation {
4449 4455 from {
4450 4456 opacity: 0;
@@ -4508,11 +4514,12 @@
4508 4514 .edit-site-patterns__section-header .screen-reader-shortcut:focus {
4509 4515 top: 0;
4510 4516 }
4511 4517
4512 -.edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
4518 +.edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.fields-field__pattern-sync-status-fully) {
4513 4519 background: rgba(var(--wp-block-synced-color--rgb), 0.04);
4514 4520 color: var(--wp-block-synced-color);
4521 + border-color: currentColor;
4515 4522 }
4516 4523
4517 4524 .dataviews-action-modal__duplicate-pattern [role=dialog] > [role=document] {
4518 4525 width: 350px;
@@ -4607,61 +4614,8 @@
4607 4614 display: flex;
4608 4615 justify-content: center;
4609 4616 }
4610 4617
4611 -.edit-site-editor__view-mode-toggle {
4612 - /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4613 - view-transition-name: toggle;
4614 - /* stylelint-enable */
4615 - top: 0;
4616 - right: 0;
4617 - height: 64px;
4618 - width: 64px;
4619 - z-index: 100;
4620 -}
4621 -.edit-site-editor__view-mode-toggle .components-button {
4622 - color: #fff;
4623 - height: 100%;
4624 - width: 100%;
4625 - border-radius: 0;
4626 - overflow: hidden;
4627 - padding: 0;
4628 - display: flex;
4629 - align-items: center;
4630 - justify-content: center;
4631 -}
4632 -.edit-site-editor__view-mode-toggle .components-button:hover, .edit-site-editor__view-mode-toggle .components-button:active {
4633 - color: #fff;
4634 -}
4635 -.edit-site-editor__view-mode-toggle .components-button:focus {
4636 - box-shadow: none;
4637 -}
4638 -.edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon svg,
4639 -.edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon img {
4640 - background: #1e1e1e;
4641 - display: block;
4642 -}
4643 -
4644 -.edit-site-editor__back-icon {
4645 - position: absolute;
4646 - top: 0;
4647 - right: 0;
4648 - width: 64px;
4649 - height: 64px;
4650 - display: flex;
4651 - align-items: center;
4652 - justify-content: center;
4653 - background-color: hsl(0, 0%, 80%);
4654 - pointer-events: none;
4655 -}
4656 -.edit-site-editor__back-icon svg {
4657 - fill: currentColor;
4658 -}
4659 -.edit-site-editor__back-icon.has-site-icon {
4660 - background-color: hsla(0, 0%, 100%, 0.6);
4661 - backdrop-filter: saturate(180%) blur(15px);
4662 -}
4663 -
4664 4618 .edit-site-welcome-guide {
4665 4619 width: 312px;
4666 4620 }
4667 4621 .edit-site-welcome-guide.guide-editor .edit-site-welcome-guide__image {
@@ -4680,13 +4634,12 @@
4680 4634 }
4681 4635 .edit-site-welcome-guide__image > img {
4682 4636 display: block;
4683 4637 max-width: 100%;
4684 - -o-object-fit: cover;
4685 - object-fit: cover;
4638 + object-fit: cover;
4686 4639 }
4687 4640 .edit-site-welcome-guide__heading {
4688 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4641 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4689 4642 font-size: 24px;
4690 4643 line-height: 1.4;
4691 4644 margin: 16px 0 16px 0;
4692 4645 padding: 0 32px;
@@ -4704,9 +4657,9 @@
4704 4657 margin: 0 4px;
4705 4658 vertical-align: text-top;
4706 4659 }
4707 4660 .edit-site-welcome-guide .components-button:hover svg {
4708 - fill: #fff;
4661 + color: #fff;
4709 4662 }
4710 4663
4711 4664 .edit-site-layout {
4712 4665 height: 100%;
@@ -4720,8 +4673,9 @@
4720 4673 }
4721 4674
4722 4675 .edit-site-layout__content {
4723 4676 height: 100%;
4677 + min-height: 0;
4724 4678 flex-grow: 1;
4725 4679 display: flex;
4726 4680 }
4727 4681
@@ -4736,16 +4690,17 @@
4736 4690 }
4737 4691 }
4738 4692 .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
4739 4693 position: fixed !important;
4740 - height: 100vh;
4694 + height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
4741 4695 right: 0;
4742 - top: 0;
4696 + top: var(--wp-admin--admin-bar--height, 0);
4743 4697 }
4744 4698 .edit-site-layout__sidebar-region .edit-site-layout__sidebar {
4745 4699 display: flex;
4746 4700 flex-direction: column;
4747 4701 height: 100%;
4702 + min-height: 0;
4748 4703 }
4749 4704 .edit-site-layout__sidebar-region .resizable-editor__drag-handle {
4750 4705 left: 0;
4751 4706 }
@@ -4852,9 +4807,8 @@
4852 4807 .edit-site-template-pages-preview {
4853 4808 height: 100%;
4854 4809 }
4855 4810
4856 -/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4857 4811 html.canvas-mode-edit-transition::view-transition-group(toggle) {
4858 4812 animation-delay: 255ms;
4859 4813 }
4860 4814
@@ -4864,61 +4818,8 @@
4864 4818 ::view-transition-new(*) {
4865 4819 animation: none !important;
4866 4820 }
4867 4821 }
4868 -/* stylelint-enable */
4869 -.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
4870 - display: none;
4871 -}
4872 -
4873 -.edit-site-layout__view-mode-toggle.components-button {
4874 - /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4875 - view-transition-name: toggle;
4876 - /* stylelint-enable */
4877 - position: relative;
4878 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
4879 - height: 64px;
4880 - width: 64px;
4881 - overflow: hidden;
4882 - padding: 0;
4883 - display: flex;
4884 - align-items: center;
4885 - justify-content: center;
4886 - background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4887 - border-radius: 0;
4888 -}
4889 -.edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
4890 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
4891 -}
4892 -.edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout__view-mode-toggle.components-button:focus {
4893 - box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
4894 - outline: 4px solid rgba(0, 0, 0, 0);
4895 - outline-offset: 4px;
4896 -}
4897 -.edit-site-layout__view-mode-toggle.components-button::before {
4898 - content: "";
4899 - display: block;
4900 - position: absolute;
4901 - top: 9px;
4902 - left: 9px;
4903 - bottom: 9px;
4904 - right: 17px;
4905 - border-radius: 4px;
4906 - box-shadow: none;
4907 -}
4908 -@media not (prefers-reduced-motion) {
4909 - .edit-site-layout__view-mode-toggle.components-button::before {
4910 - transition: box-shadow 0.1s ease;
4911 - }
4912 -}
4913 -.edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
4914 - display: flex;
4915 - height: 64px;
4916 - width: 64px;
4917 - justify-content: center;
4918 - align-items: center;
4919 -}
4920 -
4921 4822 .edit-site-layout__actions {
4922 4823 z-index: 100000;
4923 4824 position: fixed !important;
4924 4825 top: -9999em;
@@ -4933,9 +4834,9 @@
4933 4834 top: auto;
4934 4835 bottom: 0;
4935 4836 }
4936 4837 .edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
4937 - top: 0;
4838 + top: var(--wp-admin--admin-bar--height, 0);
4938 4839 }
4939 4840 @media (min-width: 782px) {
4940 4841 .edit-site-layout__actions {
4941 4842 border-right: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -4956,9 +4857,9 @@
4956 4857 }
4957 4858
4958 4859 .edit-site-layout__snackbar {
4959 4860 position: fixed;
4960 - bottom: 24px;
4861 + bottom: var(--wpds-dimension-size-md, 32px);
4961 4862 right: 0;
4962 4863 left: 0;
4963 4864 padding-inline: 16px;
4964 4865 box-sizing: border-box;
@@ -5000,8 +4901,10 @@
5000 4901 }
5001 4902
5002 4903 .edit-site-sidebar__content {
5003 4904 flex-grow: 1;
4905 + flex-basis: 0;
4906 + min-height: 0;
5004 4907 overflow-y: auto;
5005 4908 overflow-x: hidden;
5006 4909 contain: content;
5007 4910 }
@@ -5087,16 +4990,11 @@
5087 4990 .edit-site-sidebar-button {
5088 4991 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5089 4992 flex-shrink: 0;
5090 4993 }
5091 -.edit-site-sidebar-button:focus:not(:disabled) {
5092 - box-shadow: none;
4994 +.edit-site-sidebar-button:focus:not(:focus-visible) {
5093 4995 outline: none;
5094 4996 }
5095 -.edit-site-sidebar-button:focus-visible:not(:disabled) {
5096 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
5097 - outline: 3px solid transparent;
5098 -}
5099 4997 .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] {
5100 4998 color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5101 4999 }
5102 5000
@@ -5105,25 +5003,20 @@
5105 5003 padding: 8px 16px 8px 6px;
5106 5004 border: none;
5107 5005 min-height: 40px;
5108 5006 }
5109 -.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] {
5110 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5007 +.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 {
5008 + color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5111 5009 }
5112 -.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 {
5113 - fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5114 -}
5115 5010 .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
5116 5011 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
5117 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5118 - font-weight: 499;
5012 + color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5013 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5119 5014 }
5120 5015 .edit-site-sidebar-navigation-item.components-item:focus-visible {
5016 + --wp-components-color-accent: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
5121 5017 transform: translateZ(0);
5122 5018 }
5123 -.edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
5124 - fill: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5125 -}
5126 5019 .edit-site-sidebar-navigation-item.components-item.with-suffix {
5127 5020 padding-left: 16px;
5128 5021 }
5129 5022
@@ -5160,9 +5053,9 @@
5160 5053 .edit-site-sidebar-navigation-screen__title-icon {
5161 5054 position: sticky;
5162 5055 top: 0;
5163 5056 background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5164 - padding-top: 48px;
5057 + padding-top: 32px;
5165 5058 margin-bottom: 8px;
5166 5059 padding-bottom: 8px;
5167 5060 z-index: 1;
5168 5061 }
@@ -5270,9 +5163,9 @@
5270 5163 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
5271 5164 }
5272 5165 .edit-site-sidebar-navigation-screen-patterns__group-header h2 {
5273 5166 font-size: 11px;
5274 - font-weight: 499;
5167 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5275 5168 text-transform: uppercase;
5276 5169 }
5277 5170
5278 5171 .edit-site-sidebar-navigation-screen-patterns__divider {
@@ -5301,15 +5194,15 @@
5301 5194 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button {
5302 5195 color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5303 5196 }
5304 5197 .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] {
5305 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5198 + color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5306 5199 }
5307 5200 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
5308 5201 color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5309 5202 }
5310 5203 .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 {
5311 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5204 + color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5312 5205 }
5313 5206 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-inserter__toggle {
5314 5207 background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
5315 5208 color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
@@ -5333,13 +5226,8 @@
5333 5226 margin-right: -16px;
5334 5227 margin-left: -16px;
5335 5228 }
5336 5229
5337 -.edit-site-sidebar-navigation-screen-templates-browse {
5338 - margin-right: -16px;
5339 - margin-left: -16px;
5340 -}
5341 -
5342 5230 .edit-site-sidebar-dataviews {
5343 5231 margin-right: -16px;
5344 5232 margin-left: -16px;
5345 5233 }
@@ -5346,112 +5234,16 @@
5346 5234
5347 5235 .edit-site-site-hub {
5348 5236 display: flex;
5349 5237 align-items: center;
5350 - justify-content: space-between;
5351 - gap: 8px;
5352 - margin-left: 12px;
5238 + padding-right: 16px;
5353 5239 height: 64px;
5354 5240 }
5355 5241
5356 -.edit-site-site-hub__actions {
5357 - flex-shrink: 0;
5242 +.edit-site-site-hub__back-button:hover:not(:disabled, [aria-disabled=true]), .edit-site-site-hub__back-button:active:not(:disabled, [aria-disabled=true]) {
5243 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5358 5244 }
5359 5245
5360 -.edit-site-site-hub__view-mode-toggle-container {
5361 - height: 64px;
5362 - width: 64px;
5363 - flex-shrink: 0;
5364 -}
5365 -.edit-site-site-hub__view-mode-toggle-container.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
5366 - background: transparent;
5367 -}
5368 -
5369 -.edit-site-site-hub__title .components-button {
5370 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5371 - display: block;
5372 - flex-grow: 1;
5373 - font-size: 15px;
5374 - font-weight: 499;
5375 - overflow: hidden;
5376 - padding-left: 16px;
5377 - margin-right: -4px;
5378 - position: relative;
5379 - text-decoration: none;
5380 - text-overflow: ellipsis;
5381 - white-space: nowrap;
5382 -}
5383 -.edit-site-site-hub__title .components-button:hover, .edit-site-site-hub__title .components-button:focus, .edit-site-site-hub__title .components-button:active {
5384 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5385 -}
5386 -.edit-site-site-hub__title .components-button:focus {
5387 - box-shadow: none;
5388 - outline: none;
5389 -}
5390 -.edit-site-site-hub__title .components-button:focus-visible {
5391 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-background-surface-neutral-weak, #f4f4f4), 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
5392 - outline: 2px solid transparent;
5393 - outline-offset: 2px;
5394 -}
5395 -.edit-site-site-hub__title .components-button::after {
5396 - content: "↗";
5397 - font-weight: 400;
5398 - opacity: 0;
5399 - position: absolute;
5400 - left: 0;
5401 -}
5402 -@media not (prefers-reduced-motion) {
5403 - .edit-site-site-hub__title .components-button::after {
5404 - transition: opacity 0.1s linear;
5405 - }
5406 -}
5407 -.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 {
5408 - opacity: 1;
5409 -}
5410 -
5411 -.edit-site-site-hub_toggle-command-center {
5412 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5413 -}
5414 -.edit-site-site-hub_toggle-command-center:hover svg, .edit-site-site-hub_toggle-command-center:active svg {
5415 - fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5416 -}
5417 -
5418 -.edit-site-site-icon__icon {
5419 - fill: currentColor;
5420 - width: 100%;
5421 - height: 100%;
5422 -}
5423 -.edit-site-layout.is-full-canvas .edit-site-site-icon__icon {
5424 - padding: 12px;
5425 -}
5426 -
5427 -.edit-site-site-icon__image {
5428 - width: 100%;
5429 - height: 100%;
5430 - -o-object-fit: cover;
5431 - object-fit: cover;
5432 - background: #333;
5433 - aspect-ratio: 1/1;
5434 -}
5435 -.edit-site-layout.is-full-canvas .edit-site-site-icon__image {
5436 - border-radius: 0;
5437 -}
5438 -
5439 -.edit-site-editor__view-mode-toggle button:focus {
5440 - position: relative;
5441 -}
5442 -.edit-site-editor__view-mode-toggle button:focus::before {
5443 - content: "";
5444 - display: block;
5445 - position: absolute;
5446 - z-index: 1;
5447 - top: 0;
5448 - left: 0;
5449 - bottom: 0;
5450 - right: 0;
5451 - 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;
5452 -}
5453 -
5454 5246 .fields-controls__password {
5455 5247 border-top: 1px solid #e0e0e0;
5456 5248 padding-top: 16px;
5457 5249 }
@@ -5543,9 +5335,8 @@
5543 5335 }
5544 5336 body:has(.edit-site-resizable-frame__inner.is-resizing) {
5545 5337 cursor: col-resize;
5546 5338 -webkit-user-select: none;
5547 - -moz-user-select: none;
5548 5339 user-select: none;
5549 5340 }
5550 5341
5551 5342 .edit-site-resizable-frame__inner.is-resizing::before {
@@ -5617,18 +5408,26 @@
5617 5408 padding-right: 0;
5618 5409 padding-left: 0;
5619 5410 }
5620 5411 .edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen {
5621 - padding-top: 12px;
5622 - padding-right: 12px;
5623 - padding-left: 12px;
5624 - padding-bottom: 12px;
5412 + padding: 12px;
5625 5413 outline: none;
5626 5414 }
5415 +.edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen .global-styles-ui-color-palette__tablist-container {
5416 + margin-inline: -12px;
5417 + width: calc(100% + 24px);
5418 + padding-inline: 12px;
5419 +}
5627 5420 .edit-site-styles .edit-site-sidebar-button {
5628 5421 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5629 5422 }
5630 5423
5424 +.edit-site-styles__content {
5425 + flex-grow: 1;
5426 + min-height: 0;
5427 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
5428 +}
5429 +
5631 5430 .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon {
5632 5431 width: auto;
5633 5432 padding: 0 var(--wpds-dimension-padding-xs, 4px);
5634 5433 }
@@ -5639,68 +5438,16 @@
5639 5438 content: attr(aria-label);
5640 5439 font-size: var(--wpds-typography-font-size-sm, 12px);
5641 5440 }
5642 5441
5643 -body.has-admin-bar-in-editor {
5644 - margin-top: 0;
5645 - height: 100%;
5646 -}
5647 -body.has-admin-bar-in-editor:has(.editor-editor-interface.is-distraction-free) {
5648 - --wp-admin--admin-bar--height: 0;
5649 -}
5650 -body.has-admin-bar-in-editor .edit-site-site-hub__title,
5651 -body.has-admin-bar-in-editor .edit-site-site-hub__actions {
5652 - display: none;
5653 -}
5654 -body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle .edit-site-editor__back-icon {
5655 - background: transparent;
5656 -}
5657 -body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle:hover .edit-site-editor__back-icon {
5658 - color: var(--wp-admin-theme-color);
5659 -}
5660 -body.has-admin-bar-in-editor .edit-site-sidebar-navigation-screen__title-icon {
5661 - padding-top: 32px;
5662 -}
5663 -body.has-admin-bar-in-editor .edit-site-layout__content,
5664 -body.has-admin-bar-in-editor .edit-site-layout__sidebar {
5442 +.edit-site-sidebar-identity__form {
5443 + flex-grow: 1;
5665 5444 min-height: 0;
5445 + overflow: auto;
5446 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
5447 + padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
5666 5448 }
5667 -body.has-admin-bar-in-editor .edit-site-sidebar__content {
5668 - flex-basis: 0;
5669 - min-height: 0;
5670 -}
5671 -body.has-admin-bar-in-editor .edit-site {
5672 - box-sizing: border-box;
5673 - padding-top: var(--wp-admin--admin-bar--height, 0);
5674 - height: 100vh;
5675 - min-height: 100vh;
5676 -}
5677 -@media (min-width: 600px) {
5678 - body.has-admin-bar-in-editor .edit-site {
5679 - padding-top: 0;
5680 - top: var(--wp-admin--admin-bar--height, 0);
5681 - height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5682 - min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5683 - }
5684 -}
5685 -body.has-admin-bar-in-editor .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
5686 - top: var(--wp-admin--admin-bar--height, 0);
5687 - height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5688 -}
5689 -body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus,
5690 -body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within,
5691 -body.has-admin-bar-in-editor.is-fullscreen-mode .edit-site-layout__actions.is-entity-save-view-open:focus,
5692 -body.has-admin-bar-in-editor.is-fullscreen-mode .edit-site-layout__actions.is-entity-save-view-open:focus-within {
5693 - top: var(--wp-admin--admin-bar--height, 0);
5694 -}
5695 -body.has-admin-bar-in-editor.is-fullscreen-mode #wpadminbar {
5696 - display: block;
5697 -}
5698 -body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
5699 - display: none;
5700 -}
5701 5449
5702 -/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
5703 5450 ::view-transition-image-pair(root) {
5704 5451 isolation: auto;
5705 5452 }
5706 5453
@@ -5710,13 +5457,8 @@
5710 5457 mix-blend-mode: normal;
5711 5458 display: block;
5712 5459 }
5713 5460
5714 -/* stylelint-enable */
5715 -body.js #wpadminbar {
5716 - display: none;
5717 -}
5718 -
5719 5461 body.js #wpbody {
5720 5462 padding-top: 0;
5721 5463 }
5722 5464
@@ -5764,8 +5506,17 @@
5764 5506
5765 5507 body.js.site-editor-php {
5766 5508 background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5767 5509 }
5510 +@media (min-width: 782px) {
5511 + body.js.site-editor-php:has(.editor-editor-interface.is-distraction-free) {
5512 + --wp-admin--admin-bar--height: 0px;
5513 + --wp-editor-admin-bar-display: none;
5514 + }
5515 + body.js.site-editor-php #wpadminbar {
5516 + display: var(--wp-editor-admin-bar-display, block);
5517 + }
5518 +}
5768 5519
5769 5520 .edit-site {
5770 5521 box-sizing: border-box;
5771 5522 }
@@ -5774,8 +5525,9 @@
5774 5525 .edit-site *::after {
5775 5526 box-sizing: inherit;
5776 5527 }
5777 5528 .edit-site {
5529 + padding-top: var(--wp-admin--admin-bar--height, 0);
5778 5530 height: 100vh;
5779 5531 }
5780 5532 @media (min-width: 600px) {
5781 5533 .edit-site {
@@ -5780,12 +5532,13 @@
5780 5532 @media (min-width: 600px) {
5781 5533 .edit-site {
5782 5534 bottom: 0;
5783 5535 right: 0;
5784 - min-height: 100vh;
5536 + height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
5537 + padding-top: 0;
5785 5538 position: fixed;
5786 5539 left: 0;
5787 - top: 0;
5540 + top: var(--wp-admin--admin-bar--height, 0);
5788 5541 }
5789 5542 }
5790 5543 .no-js .edit-site {
5791 5544 min-height: 0;