PluginProbe
Gutenberg / 24.1.0
Gutenberg v24.1.0
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/components/style-rtl.css +80 -169 23.9.0 → 24.1.0 View file →
@@ -167,12 +167,13 @@
167 167 min-height: 36px;
168 168 text-align: right;
169 169 width: 100%;
170 170 font-weight: var(--wpds-typography-font-weight-default, 400);
171 + position: relative;
171 172 }
172 -.components-autocomplete__result.components-button:focus:not(:disabled) {
173 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
174 - outline: 2px solid transparent;
173 +.components-autocomplete__result.components-button:focus:not(:disabled):not(:active) {
174 + box-shadow: 0 0 0 calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
175 + z-index: 1;
175 176 }
176 177
177 178 .components-badge {
178 179 box-sizing: border-box;
@@ -278,11 +279,9 @@
278 279 font-size: 13px;
279 280 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
280 281 margin: 0;
281 282 cursor: var(--wpds-cursor-control, pointer);
282 - -webkit-appearance: none;
283 - -moz-appearance: none;
284 - appearance: none;
283 + appearance: none;
285 284 background: none;
286 285 height: 36px;
287 286 align-items: center;
288 287 box-sizing: border-box;
@@ -533,13 +532,8 @@
533 532 fill: currentColor;
534 533 outline: none;
535 534 flex-shrink: 0;
536 535 }
537 -@media (forced-colors: active) {
538 - .components-button svg {
539 - fill: CanvasText;
540 - }
541 -}
542 536
543 537 @keyframes components-button__busy-animation {
544 538 0% {
545 539 background-position: right 200px top 0;
@@ -558,8 +552,9 @@
558 552 }
559 553
560 554 .components-checkbox-control__label {
561 555 line-height: var(--checkbox-input-size);
556 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
562 557 }
563 558 .components-checkbox-control:not(:has(:disabled)) .components-checkbox-control__label {
564 559 cursor: var(--wpds-cursor-control, pointer);
565 560 }
@@ -564,9 +559,9 @@
564 559 cursor: var(--wpds-cursor-control, pointer);
565 560 }
566 561
567 562 .components-checkbox-control__input[type=checkbox] {
568 - border: 1px solid #1e1e1e;
563 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
569 564 margin-left: 12px;
570 565 transition: none;
571 566 border-radius: 2px;
572 567 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -584,9 +579,9 @@
584 579 /* Override core line-height. To be reviewed. */
585 580 line-height: normal;
586 581 }
587 582 }
588 -.components-checkbox-control__input[type=checkbox]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
583 +.components-checkbox-control__input[type=checkbox]:hover:not(:disabled, [aria-disabled=true]) {
589 584 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
590 585 }
591 586 .components-checkbox-control__input[type=checkbox]:focus {
592 587 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)));
@@ -593,13 +588,13 @@
593 588 outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
594 589 border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
595 590 box-shadow: none;
596 591 }
597 -.components-checkbox-control__input[type=checkbox]::-moz-placeholder {
592 +.components-checkbox-control__input[type=checkbox]::placeholder {
598 593 color: rgba(30, 30, 30, 0.62);
599 594 }
600 -.components-checkbox-control__input[type=checkbox]::placeholder {
601 - color: rgba(30, 30, 30, 0.62);
595 +.components-checkbox-control__input[type=checkbox]:hover:not(:disabled, [aria-disabled=true]) {
596 + background: var(--wpds-color-background-interactive-neutral-active, #fff);
602 597 }
603 598 .components-checkbox-control__input[type=checkbox]:focus {
604 599 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
605 600 outline: 2px solid transparent;
@@ -627,9 +622,9 @@
627 622 display: inline-block;
628 623 vertical-align: middle;
629 624 width: 16px;
630 625 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
631 - font: normal 30px/1 dashicons;
626 + font: 400 30px/1 dashicons;
632 627 speak: none;
633 628 -webkit-font-smoothing: antialiased;
634 629 -moz-osx-font-smoothing: grayscale;
635 630 }
@@ -639,13 +634,17 @@
639 634 font-size: 21px;
640 635 }
641 636 }
642 637 .components-checkbox-control__input[type=checkbox][aria-disabled=true], .components-checkbox-control__input[type=checkbox]:disabled {
643 - background: #f0f0f0;
644 - border-color: #ddd;
638 + background: var(--wpds-color-background-interactive-neutral-disabled, #fff);
639 + border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
640 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
645 641 cursor: default;
646 642 opacity: 1;
647 643 }
644 +.components-checkbox-control__input[type=checkbox][aria-disabled=true]:checked::before, .components-checkbox-control__input[type=checkbox][aria-disabled=true][aria-checked=mixed]::before, .components-checkbox-control__input[type=checkbox]:disabled:checked::before, .components-checkbox-control__input[type=checkbox]:disabled[aria-checked=mixed]::before {
645 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
646 +}
648 647 .components-checkbox-control__input[type=checkbox] {
649 648 background: #fff;
650 649 color: #1e1e1e;
651 650 clear: none;
@@ -657,11 +656,9 @@
657 656 text-align: center;
658 657 vertical-align: top;
659 658 width: var(--checkbox-input-size);
660 659 height: var(--checkbox-input-size);
661 - -webkit-appearance: none;
662 - -moz-appearance: none;
663 - appearance: none;
660 + appearance: none;
664 661 }
665 662 @media not (prefers-reduced-motion) {
666 663 .components-checkbox-control__input[type=checkbox] {
667 664 transition: 0.1s border-color ease-in-out;
@@ -695,32 +692,24 @@
695 692 }
696 693
697 694 svg.components-checkbox-control__checked,
698 695 svg.components-checkbox-control__indeterminate {
699 - --checkmark-size: var(--checkbox-input-size);
700 - fill: #fff;
696 + color: #fff;
701 697 cursor: var(--wpds-cursor-control, pointer);
702 698 position: absolute;
703 699 right: 50%;
704 700 top: 50%;
705 701 transform: translate(50%, -50%);
706 - width: var(--checkmark-size);
707 - height: var(--checkmark-size);
702 + width: var(--checkbox-input-size);
703 + height: var(--checkbox-input-size);
708 704 -webkit-user-select: none;
709 - -moz-user-select: none;
710 705 user-select: none;
711 706 pointer-events: none;
712 707 }
713 -@media (min-width: 600px) {
714 - svg.components-checkbox-control__checked,
715 - svg.components-checkbox-control__indeterminate {
716 - --checkmark-size: calc(var(--checkbox-input-size) + 4px);
717 - }
718 -}
719 708
720 709 .components-checkbox-control:has(:disabled) svg.components-checkbox-control__checked,
721 710 .components-checkbox-control:has(:disabled) svg.components-checkbox-control__indeterminate {
722 - fill: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
711 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
723 712 }
724 713
725 714 .components-checkbox-control__help {
726 715 display: inline-block;
@@ -758,14 +747,14 @@
758 747 transform: scale(1);
759 748 }
760 749 @media not (prefers-reduced-motion) {
761 750 .components-circular-option-picker__option-wrapper {
762 - transition: 100ms transform ease;
751 + transition: 100ms transform ease-out;
763 752 will-change: transform;
764 753 }
765 754 }
766 755 .components-circular-option-picker__option-wrapper:hover {
767 - transform: scale(1.2);
756 + transform: scale(1.1);
768 757 }
769 758 .components-circular-option-picker__option-wrapper > div {
770 759 height: 100%;
771 760 width: 100%;
@@ -773,12 +762,9 @@
773 762
774 763 .components-circular-option-picker__option-wrapper::before {
775 764 content: "";
776 765 position: absolute;
777 - top: 1px;
778 - right: 1px;
779 - bottom: 1px;
780 - left: 1px;
766 + inset: 1px;
781 767 border-radius: 50%;
782 768 z-index: -1;
783 769 background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
784 770 }
@@ -800,13 +786,9 @@
800 786 }
801 787 .components-circular-option-picker__option {
802 788 cursor: var(--wpds-cursor-control, pointer);
803 789 }
804 -.components-circular-option-picker__option:hover {
805 - box-shadow: inset 0 0 0 14px !important;
806 -}
807 790 .components-circular-option-picker__option[aria-pressed=true], .components-circular-option-picker__option[aria-selected=true] {
808 - box-shadow: inset 0 0 0 4px;
809 791 position: relative;
810 792 z-index: 1;
811 793 overflow: visible;
812 794 }
@@ -820,34 +802,13 @@
820 802 }
821 803 .components-circular-option-picker__option::after {
822 804 content: "";
823 805 position: absolute;
824 - top: -1px;
825 - right: -1px;
826 - bottom: -1px;
827 - left: -1px;
806 + inset: -1px;
807 + border: 1px solid transparent;
828 808 border-radius: 50%;
829 809 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
830 - border: 1px solid transparent;
831 - box-sizing: inherit;
832 810 }
833 -.components-circular-option-picker__option:focus::after {
834 - content: "";
835 - border-radius: 50%;
836 - box-shadow: inset 0 0 0 2px #fff;
837 - position: absolute;
838 - top: 50%;
839 - right: 50%;
840 - transform: translate(50%, -50%);
841 - border: 2px solid #757575;
842 - width: calc(100% + 4px);
843 - height: calc(100% + 4px);
844 -}
845 -.components-circular-option-picker__option.components-button:focus {
846 - background-color: transparent;
847 - box-shadow: inset 0 0 0 14px;
848 - outline: none;
849 -}
850 811
851 812 .components-circular-option-picker__button-action .components-circular-option-picker__option {
852 813 color: #fff;
853 814 background: #fff;
@@ -865,12 +826,8 @@
865 826 width: 260px;
866 827 padding: 8px;
867 828 }
868 829
869 -.components-dropdown-menu__menu .components-palette-edit__menu-button {
870 - width: 100%;
871 -}
872 -
873 830 .component-color-indicator {
874 831 width: 20px;
875 832 height: 20px;
876 833 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
@@ -923,9 +880,9 @@
923 880 /* Override core line-height. To be reviewed. */
924 881 line-height: normal;
925 882 }
926 883 }
927 -.components-combobox-control__suggestions-container:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
884 +.components-combobox-control__suggestions-container:hover:not(:disabled, [aria-disabled=true]) {
928 885 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
929 886 }
930 887 .components-combobox-control__suggestions-container:focus {
931 888 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)));
@@ -932,11 +889,8 @@
932 889 outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
933 890 border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
934 891 box-shadow: none;
935 892 }
936 -.components-combobox-control__suggestions-container::-moz-placeholder {
937 - color: rgba(30, 30, 30, 0.62);
938 -}
939 893 .components-combobox-control__suggestions-container::placeholder {
940 894 color: rgba(30, 30, 30, 0.62);
941 895 }
942 896 .components-combobox-control__suggestions-container {
@@ -1058,14 +1012,19 @@
1058 1012 width: inherit;
1059 1013 border-radius: 50%;
1060 1014 padding: 0;
1061 1015 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
1062 - outline: 2px solid transparent;
1063 1016 }
1064 -.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus, .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
1017 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
1065 1018 box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
1066 - outline: 1.5px solid transparent;
1067 1019 }
1020 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus:not(:active) {
1021 + outline-offset: 1px;
1022 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
1023 +}
1024 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus:not(:active).is-active {
1025 + box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
1026 +}
1068 1027
1069 1028 .components-custom-gradient-picker__remove-control-point-wrapper {
1070 1029 padding-bottom: 8px;
1071 1030 }
@@ -1387,39 +1346,39 @@
1387 1346 background-color: #fff;
1388 1347 border-width: 0;
1389 1348 transform: translateX(-16px);
1390 1349 }
1391 -.components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
1350 +.components-form-toggle.is-disabled .components-form-toggle__track, [inert] .components-form-toggle .components-form-toggle__track {
1392 1351 background-color: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
1393 1352 border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
1394 1353 }
1395 1354 @media (forced-colors: active) {
1396 - .components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
1355 + .components-form-toggle.is-disabled .components-form-toggle__track, [inert] .components-form-toggle .components-form-toggle__track {
1397 1356 border-color: GrayText;
1398 1357 }
1399 1358 }
1400 -.components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
1359 +.components-form-toggle.is-disabled .components-form-toggle__thumb, [inert] .components-form-toggle .components-form-toggle__thumb {
1401 1360 background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1402 1361 box-shadow: none;
1403 1362 }
1404 1363 @media (forced-colors: active) {
1405 - .components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
1364 + .components-form-toggle.is-disabled .components-form-toggle__thumb, [inert] .components-form-toggle .components-form-toggle__thumb {
1406 1365 border-color: GrayText;
1407 1366 }
1408 1367 }
1409 -.components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
1368 +.components-form-toggle.is-disabled.is-checked .components-form-toggle__track, [inert] .components-form-toggle.is-checked .components-form-toggle__track {
1410 1369 background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1411 1370 border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1412 1371 }
1413 1372 @media (forced-colors: active) {
1414 - .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
1373 + .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, [inert] .components-form-toggle.is-checked .components-form-toggle__track {
1415 1374 border-color: GrayText;
1416 1375 }
1417 - .components-form-toggle.is-disabled.is-checked .components-form-toggle__track::after, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track::after {
1376 + .components-form-toggle.is-disabled.is-checked .components-form-toggle__track::after, [inert] .components-form-toggle.is-checked .components-form-toggle__track::after {
1418 1377 border-top-color: GrayText;
1419 1378 }
1420 1379 }
1421 -.components-form-toggle.is-disabled.is-checked .components-form-toggle__thumb, .components-disabled .components-form-toggle.is-checked .components-form-toggle__thumb {
1380 +.components-form-toggle.is-disabled.is-checked .components-form-toggle__thumb, [inert] .components-form-toggle.is-checked .components-form-toggle__thumb {
1422 1381 background-color: #fff;
1423 1382 }
1424 1383
1425 1384 .components-form-toggle input.components-form-toggle__input[type=checkbox] {
@@ -1460,9 +1419,9 @@
1460 1419 /* Override core line-height. To be reviewed. */
1461 1420 line-height: normal;
1462 1421 }
1463 1422 }
1464 -.components-form-token-field__input-container:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
1423 +.components-form-token-field__input-container:hover:not(:disabled, [aria-disabled=true]) {
1465 1424 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
1466 1425 }
1467 1426 .components-form-token-field__input-container:focus {
1468 1427 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)));
@@ -1469,11 +1428,8 @@
1469 1428 outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1470 1429 border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1471 1430 box-shadow: none;
1472 1431 }
1473 -.components-form-token-field__input-container::-moz-placeholder {
1474 - color: rgba(30, 30, 30, 0.62);
1475 -}
1476 1432 .components-form-token-field__input-container::placeholder {
1477 1433 color: rgba(30, 30, 30, 0.62);
1478 1434 }
1479 1435 .components-form-token-field__input-container {
@@ -2154,9 +2110,9 @@
2154 2110 }
2155 2111
2156 2112 .components-notice {
2157 2113 --wp-components-notice-background-color: var(--wpds-color-background-surface-info-weak, #f3f9ff);
2158 - --wp-components-notice-border-color: var(--wpds-color-stroke-surface-info, #a9c6e7);
2114 + --wp-components-notice-border-color: var(--wpds-color-stroke-surface-info, #adc6e2);
2159 2115 --wp-components-notice-text-color: var(--wpds-color-foreground-content-info, #001b4f);
2160 2116 box-sizing: border-box;
2161 2117 display: grid;
2162 2118 grid-template-columns: 1fr auto;
@@ -2171,19 +2127,19 @@
2171 2127 line-height: var(--wpds-typography-line-height-sm, 20px);
2172 2128 }
2173 2129 .components-notice.is-success {
2174 2130 --wp-components-notice-background-color: var(--wpds-color-background-surface-success-weak, #ebffed);
2175 - --wp-components-notice-border-color: var(--wpds-color-stroke-surface-success, #94d29e);
2131 + --wp-components-notice-border-color: var(--wpds-color-stroke-surface-success, #92d39d);
2176 2132 --wp-components-notice-text-color: var(--wpds-color-foreground-content-success, #002900);
2177 2133 }
2178 2134 .components-notice.is-warning {
2179 2135 --wp-components-notice-background-color: var(--wpds-color-background-surface-warning-weak, #fff7e1);
2180 - --wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning, #e1bc7c);
2136 + --wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning, #e1bd7c);
2181 2137 --wp-components-notice-text-color: var(--wpds-color-foreground-content-warning, #2e1900);
2182 2138 }
2183 2139 .components-notice.is-error {
2184 2140 --wp-components-notice-background-color: var(--wpds-color-background-surface-error-weak, #fff6f5);
2185 - --wp-components-notice-border-color: var(--wpds-color-stroke-surface-error, #dab1aa);
2141 + --wp-components-notice-border-color: var(--wpds-color-stroke-surface-error, #e0afa7);
2186 2142 --wp-components-notice-text-color: var(--wpds-color-foreground-content-error, #470000);
2187 2143 }
2188 2144
2189 2145 .components-notice__content {
@@ -2209,13 +2165,9 @@
2209 2165 margin-inline-start: var(--wpds-dimension-gap-xs, 4px);
2210 2166 }
2211 2167 .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus {
2212 2168 color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
2213 - background-color: transparent;
2214 2169 }
2215 -.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
2216 - box-shadow: none;
2217 -}
2218 2170
2219 2171 .components-notice-list {
2220 2172 display: flex;
2221 2173 flex-direction: column;
@@ -2405,9 +2357,9 @@
2405 2357 font-size: 13px;
2406 2358 letter-spacing: initial;
2407 2359 line-height: initial;
2408 2360 text-transform: none;
2409 - font-weight: normal;
2361 + font-weight: 400;
2410 2362 }
2411 2363
2412 2364 .components-placeholder__label {
2413 2365 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
@@ -2419,15 +2371,8 @@
2419 2371 .components-placeholder__label .block-editor-block-icon {
2420 2372 margin-left: 4px;
2421 2373 fill: currentColor;
2422 2374 }
2423 -@media (forced-colors: active) {
2424 - .components-placeholder__label > svg,
2425 - .components-placeholder__label .dashicon,
2426 - .components-placeholder__label .block-editor-block-icon {
2427 - fill: CanvasText;
2428 - }
2429 -}
2430 2375 .components-placeholder__label:empty {
2431 2376 display: none;
2432 2377 }
2433 2378
@@ -2467,9 +2412,9 @@
2467 2412 /* Override core line-height. To be reviewed. */
2468 2413 line-height: normal;
2469 2414 }
2470 2415 }
2471 -.components-placeholder__input[type=url]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
2416 +.components-placeholder__input[type=url]:hover:not(:disabled, [aria-disabled=true]) {
2472 2417 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
2473 2418 }
2474 2419 .components-placeholder__input[type=url]:focus {
2475 2420 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)));
@@ -2476,11 +2421,8 @@
2476 2421 outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2477 2422 border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
2478 2423 box-shadow: none;
2479 2424 }
2480 -.components-placeholder__input[type=url]::-moz-placeholder {
2481 - color: rgba(30, 30, 30, 0.62);
2482 -}
2483 2425 .components-placeholder__input[type=url]::placeholder {
2484 2426 color: rgba(30, 30, 30, 0.62);
2485 2427 }
2486 2428 .components-placeholder__input[type=url] {
@@ -2616,9 +2558,8 @@
2616 2558 background: #fff;
2617 2559 box-shadow: 0 0 0 1px #ccc, 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02);
2618 2560 border-radius: 4px;
2619 2561 box-sizing: border-box;
2620 - width: -moz-min-content;
2621 2562 width: min-content;
2622 2563 }
2623 2564 .is-alternate .components-popover__content {
2624 2565 box-shadow: 0 0 0 1px #1e1e1e;
@@ -2723,10 +2664,9 @@
2723 2664 .components-radio-control__option {
2724 2665 display: grid;
2725 2666 grid-template-columns: auto 1fr;
2726 2667 grid-template-rows: auto minmax(0, max-content);
2727 - -moz-column-gap: 8px;
2728 - column-gap: 8px;
2668 + column-gap: 8px;
2729 2669 align-items: center;
2730 2670 }
2731 2671
2732 2672 .components-radio-control__input[type=radio] {
@@ -2784,11 +2724,9 @@
2784 2724 .components-radio-control__input[type=radio] {
2785 2725 display: inline-flex;
2786 2726 margin: 0;
2787 2727 padding: 0;
2788 - -webkit-appearance: none;
2789 - -moz-appearance: none;
2790 - appearance: none;
2728 + appearance: none;
2791 2729 }
2792 2730 .components-radio-control__input[type=radio]:not(:disabled) {
2793 2731 cursor: var(--wpds-cursor-control, pointer);
2794 2732 }
@@ -2817,8 +2755,9 @@
2817 2755
2818 2756 .components-radio-control__label {
2819 2757 grid-column: 2;
2820 2758 grid-row: 1;
2759 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2821 2760 }
2822 2761 .components-radio-control__input:not(:disabled) + .components-radio-control__label {
2823 2762 cursor: var(--wpds-cursor-control, pointer);
2824 2763 }
@@ -3047,9 +2986,8 @@
3047 2986 pointer-events: auto;
3048 2987 }
3049 2988 @media (min-width: 600px) {
3050 2989 .components-snackbar {
3051 - width: -moz-fit-content;
3052 2990 width: fit-content;
3053 2991 }
3054 2992 }
3055 2993 .components-snackbar:focus {
@@ -3076,14 +3014,10 @@
3076 3014 .components-snackbar__action.components-external-link {
3077 3015 margin-right: 32px;
3078 3016 color: #fff;
3079 3017 flex-shrink: 0;
3018 + --focus-color: #fff;
3080 3019 }
3081 -.components-snackbar__action.components-button:focus,
3082 -.components-snackbar__action.components-external-link:focus {
3083 - box-shadow: none;
3084 - outline: 1px dotted #fff;
3085 -}
3086 3020 .components-snackbar__action.components-button:hover,
3087 3021 .components-snackbar__action.components-external-link:hover {
3088 3022 text-decoration: none;
3089 3023 color: currentColor;
@@ -3123,9 +3057,8 @@
3123 3057 border-radius: 0;
3124 3058 height: 48px !important;
3125 3059 background: transparent;
3126 3060 border: none;
3127 - box-shadow: none;
3128 3061 cursor: var(--wpds-cursor-control, pointer);
3129 3062 padding: 3px var(--wpds-dimension-padding-lg, 16px);
3130 3063 margin-right: 0;
3131 3064 font-weight: var(--wpds-typography-font-weight-default, 400);
@@ -3138,9 +3071,8 @@
3138 3071 color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
3139 3072 }
3140 3073 .components-tab-panel__tabs-item:focus:not(:disabled) {
3141 3074 position: relative;
3142 - box-shadow: none;
3143 3075 outline: none;
3144 3076 }
3145 3077 .components-tab-panel__tabs-item::after {
3146 3078 content: "";
@@ -3167,19 +3099,14 @@
3167 3099 content: "";
3168 3100 position: absolute;
3169 3101 inset: var(--wpds-dimension-padding-md, 12px);
3170 3102 pointer-events: none;
3171 - box-shadow: 0 0 0 0 transparent;
3172 3103 border-radius: var(--wpds-border-radius-sm, 2px);
3173 3104 }
3174 -@media not (prefers-reduced-motion) {
3175 - .components-tab-panel__tabs-item::before {
3176 - transition: box-shadow 0.1s linear;
3177 - }
3178 -}
3179 3105 .components-tab-panel__tabs-item:focus-visible::before {
3180 - 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));
3181 - outline: 2px solid transparent;
3106 + 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)));
3107 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3108 + outline-offset: 0;
3182 3109 }
3183 3110 .components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item {
3184 3111 border-radius: var(--wpds-border-radius-sm, 2px);
3185 3112 }
@@ -3190,14 +3117,13 @@
3190 3117 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
3191 3118 }
3192 3119
3193 3120 .components-tab-panel__tab-content:focus {
3194 - box-shadow: none;
3195 3121 outline: none;
3196 3122 }
3197 3123 .components-tab-panel__tab-content:focus-visible {
3198 - 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));
3199 - outline: 2px solid transparent;
3124 + 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)));
3125 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3200 3126 outline-offset: 0;
3201 3127 }
3202 3128
3203 3129 .components-text-control__input,
@@ -3247,22 +3173,22 @@
3247 3173 /* Override core line-height. To be reviewed. */
3248 3174 line-height: normal;
3249 3175 }
3250 3176 }
3251 -.components-text-control__input:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3252 -.components-text-control__input[type=text]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3253 -.components-text-control__input[type=tel]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3254 -.components-text-control__input[type=time]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3255 -.components-text-control__input[type=url]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3256 -.components-text-control__input[type=week]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3257 -.components-text-control__input[type=password]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3258 -.components-text-control__input[type=color]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3259 -.components-text-control__input[type=date]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3260 -.components-text-control__input[type=datetime]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3261 -.components-text-control__input[type=datetime-local]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3262 -.components-text-control__input[type=email]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3263 -.components-text-control__input[type=month]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3264 -.components-text-control__input[type=number]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
3177 +.components-text-control__input:hover:not(:disabled, [aria-disabled=true]),
3178 +.components-text-control__input[type=text]:hover:not(:disabled, [aria-disabled=true]),
3179 +.components-text-control__input[type=tel]:hover:not(:disabled, [aria-disabled=true]),
3180 +.components-text-control__input[type=time]:hover:not(:disabled, [aria-disabled=true]),
3181 +.components-text-control__input[type=url]:hover:not(:disabled, [aria-disabled=true]),
3182 +.components-text-control__input[type=week]:hover:not(:disabled, [aria-disabled=true]),
3183 +.components-text-control__input[type=password]:hover:not(:disabled, [aria-disabled=true]),
3184 +.components-text-control__input[type=color]:hover:not(:disabled, [aria-disabled=true]),
3185 +.components-text-control__input[type=date]:hover:not(:disabled, [aria-disabled=true]),
3186 +.components-text-control__input[type=datetime]:hover:not(:disabled, [aria-disabled=true]),
3187 +.components-text-control__input[type=datetime-local]:hover:not(:disabled, [aria-disabled=true]),
3188 +.components-text-control__input[type=email]:hover:not(:disabled, [aria-disabled=true]),
3189 +.components-text-control__input[type=month]:hover:not(:disabled, [aria-disabled=true]),
3190 +.components-text-control__input[type=number]:hover:not(:disabled, [aria-disabled=true]) {
3265 3191 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
3266 3192 }
3267 3193 .components-text-control__input:focus,
3268 3194 .components-text-control__input[type=text]:focus,
@@ -3282,11 +3208,8 @@
3282 3208 outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3283 3209 border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
3284 3210 box-shadow: none;
3285 3211 }
3286 -.components-text-control__input::-moz-placeholder, .components-text-control__input[type=text]::-moz-placeholder, .components-text-control__input[type=tel]::-moz-placeholder, .components-text-control__input[type=time]::-moz-placeholder, .components-text-control__input[type=url]::-moz-placeholder, .components-text-control__input[type=week]::-moz-placeholder, .components-text-control__input[type=password]::-moz-placeholder, .components-text-control__input[type=color]::-moz-placeholder, .components-text-control__input[type=date]::-moz-placeholder, .components-text-control__input[type=datetime]::-moz-placeholder, .components-text-control__input[type=datetime-local]::-moz-placeholder, .components-text-control__input[type=email]::-moz-placeholder, .components-text-control__input[type=month]::-moz-placeholder, .components-text-control__input[type=number]::-moz-placeholder {
3287 - color: rgba(30, 30, 30, 0.62);
3288 -}
3289 3212 .components-text-control__input::placeholder,
3290 3213 .components-text-control__input[type=text]::placeholder,
3291 3214 .components-text-control__input[type=tel]::placeholder,
3292 3215 .components-text-control__input[type=time]::placeholder,
@@ -3318,11 +3241,8 @@
3318 3241 .components-text-control__input[type=number] {
3319 3242 padding-right: 12px;
3320 3243 padding-left: 12px;
3321 3244 }
3322 -.components-text-control__input::-moz-placeholder, .components-text-control__input[type=text]::-moz-placeholder, .components-text-control__input[type=tel]::-moz-placeholder, .components-text-control__input[type=time]::-moz-placeholder, .components-text-control__input[type=url]::-moz-placeholder, .components-text-control__input[type=week]::-moz-placeholder, .components-text-control__input[type=password]::-moz-placeholder, .components-text-control__input[type=color]::-moz-placeholder, .components-text-control__input[type=date]::-moz-placeholder, .components-text-control__input[type=datetime]::-moz-placeholder, .components-text-control__input[type=datetime-local]::-moz-placeholder, .components-text-control__input[type=email]::-moz-placeholder, .components-text-control__input[type=month]::-moz-placeholder, .components-text-control__input[type=number]::-moz-placeholder {
3323 - color: color-mix(in srgb, var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e)), transparent 38%);
3324 -}
3325 3245 .components-text-control__input::placeholder,
3326 3246 .components-text-control__input[type=text]::placeholder,
3327 3247 .components-text-control__input[type=tel]::placeholder,
3328 3248 .components-text-control__input[type=time]::placeholder,
@@ -3349,9 +3269,9 @@
3349 3269 color: #757575;
3350 3270 }
3351 3271 .components-tip svg {
3352 3272 align-self: center;
3353 - fill: #f0b849;
3273 + color: #f0b849;
3354 3274 flex-shrink: 0;
3355 3275 margin-left: 16px;
3356 3276 }
3357 3277 .components-tip p {
@@ -3359,8 +3279,9 @@
3359 3279 }
3360 3280
3361 3281 .components-toggle-control__label {
3362 3282 line-height: 16px;
3283 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3363 3284 }
3364 3285 .components-toggle-control__label:not(.is-disabled) {
3365 3286 cursor: var(--wpds-cursor-control, pointer);
3366 3287 }
@@ -3567,28 +3488,18 @@
3567 3488 margin-right: 8px;
3568 3489 }
3569 3490
3570 3491 .components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-validated-control__content-editable [role=textbox], .components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop, .components-validated-control textarea:invalid[data-validity-visible], .components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3571 - --focus-color: #cc1818;
3492 + --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3572 3493 }
3573 3494
3574 -.components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3575 - border-color: #cc1818;
3495 +.components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-validated-control__content-editable [role=textbox], .components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop, .components-validated-control textarea:invalid[data-validity-visible], .components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3496 + border-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3576 3497 }
3577 -.components-validated-control textarea:invalid[data-validity-visible] {
3578 - border-color: #cc1818;
3579 -}
3580 3498
3581 3499 .components-validated-control__wrapper-with-error-delegate {
3582 3500 position: relative;
3583 3501 }
3584 -.components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop {
3585 - border-color: #cc1818;
3586 -}
3587 -.components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-validated-control__content-editable [role=textbox] {
3588 - border-color: #cc1818;
3589 -}
3590 -
3591 3502 .components-validated-control__error-delegate {
3592 3503 position: absolute;
3593 3504 top: 0;
3594 3505 height: 100%;