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/components/style-rtl.css +80 -169 23.9.1 → trunk 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%;