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.css +54 -85 24.0.0 → 24.1.0 View file →
@@ -167,12 +167,13 @@
167 167 min-height: 36px;
168 168 text-align: left;
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;
@@ -551,8 +552,9 @@
551 552 }
552 553
553 554 .components-checkbox-control__label {
554 555 line-height: var(--checkbox-input-size);
556 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
555 557 }
556 558 .components-checkbox-control:not(:has(:disabled)) .components-checkbox-control__label {
557 559 cursor: var(--wpds-cursor-control, pointer);
558 560 }
@@ -557,9 +559,9 @@
557 559 cursor: var(--wpds-cursor-control, pointer);
558 560 }
559 561
560 562 .components-checkbox-control__input[type=checkbox] {
561 - border: 1px solid #1e1e1e;
563 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
562 564 margin-right: 12px;
563 565 transition: none;
564 566 border-radius: 2px;
565 567 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -577,9 +579,9 @@
577 579 /* Override core line-height. To be reviewed. */
578 580 line-height: normal;
579 581 }
580 582 }
581 -.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]) {
582 584 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
583 585 }
584 586 .components-checkbox-control__input[type=checkbox]:focus {
585 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)));
@@ -589,8 +591,11 @@
589 591 }
590 592 .components-checkbox-control__input[type=checkbox]::placeholder {
591 593 color: rgba(30, 30, 30, 0.62);
592 594 }
595 +.components-checkbox-control__input[type=checkbox]:hover:not(:disabled, [aria-disabled=true]) {
596 + background: var(--wpds-color-background-interactive-neutral-active, #fff);
597 +}
593 598 .components-checkbox-control__input[type=checkbox]:focus {
594 599 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
595 600 outline: 2px solid transparent;
596 601 }
@@ -617,9 +622,9 @@
617 622 display: inline-block;
618 623 vertical-align: middle;
619 624 width: 16px;
620 625 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
621 - font: normal 30px/1 dashicons;
626 + font: 400 30px/1 dashicons;
622 627 speak: none;
623 628 -webkit-font-smoothing: antialiased;
624 629 -moz-osx-font-smoothing: grayscale;
625 630 }
@@ -629,13 +634,17 @@
629 634 font-size: 21px;
630 635 }
631 636 }
632 637 .components-checkbox-control__input[type=checkbox][aria-disabled=true], .components-checkbox-control__input[type=checkbox]:disabled {
633 - background: #f0f0f0;
634 - 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);
635 641 cursor: default;
636 642 opacity: 1;
637 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 +}
638 647 .components-checkbox-control__input[type=checkbox] {
639 648 background: #fff;
640 649 color: #1e1e1e;
641 650 clear: none;
@@ -683,9 +692,8 @@
683 692 }
684 693
685 694 svg.components-checkbox-control__checked,
686 695 svg.components-checkbox-control__indeterminate {
687 - --checkmark-size: var(--checkbox-input-size);
688 696 color: #fff;
689 697 cursor: var(--wpds-cursor-control, pointer);
690 698 position: absolute;
691 699 left: 50%;
@@ -690,24 +698,18 @@
690 698 position: absolute;
691 699 left: 50%;
692 700 top: 50%;
693 701 transform: translate(-50%, -50%);
694 - width: var(--checkmark-size);
695 - height: var(--checkmark-size);
702 + width: var(--checkbox-input-size);
703 + height: var(--checkbox-input-size);
696 704 -webkit-user-select: none;
697 705 user-select: none;
698 706 pointer-events: none;
699 707 }
700 -@media (min-width: 600px) {
701 - svg.components-checkbox-control__checked,
702 - svg.components-checkbox-control__indeterminate {
703 - --checkmark-size: calc(var(--checkbox-input-size) + 4px);
704 - }
705 -}
706 708
707 709 .components-checkbox-control:has(:disabled) svg.components-checkbox-control__checked,
708 710 .components-checkbox-control:has(:disabled) svg.components-checkbox-control__indeterminate {
709 - color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
711 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
710 712 }
711 713
712 714 .components-checkbox-control__help {
713 715 display: inline-block;
@@ -745,14 +747,14 @@
745 747 transform: scale(1);
746 748 }
747 749 @media not (prefers-reduced-motion) {
748 750 .components-circular-option-picker__option-wrapper {
749 - transition: 100ms transform ease;
751 + transition: 100ms transform ease-out;
750 752 will-change: transform;
751 753 }
752 754 }
753 755 .components-circular-option-picker__option-wrapper:hover {
754 - transform: scale(1.2);
756 + transform: scale(1.1);
755 757 }
756 758 .components-circular-option-picker__option-wrapper > div {
757 759 height: 100%;
758 760 width: 100%;
@@ -760,12 +762,9 @@
760 762
761 763 .components-circular-option-picker__option-wrapper::before {
762 764 content: "";
763 765 position: absolute;
764 - top: 1px;
765 - left: 1px;
766 - bottom: 1px;
767 - right: 1px;
766 + inset: 1px;
768 767 border-radius: 50%;
769 768 z-index: -1;
770 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');
771 770 }
@@ -787,13 +786,9 @@
787 786 }
788 787 .components-circular-option-picker__option {
789 788 cursor: var(--wpds-cursor-control, pointer);
790 789 }
791 -.components-circular-option-picker__option:hover {
792 - box-shadow: inset 0 0 0 14px !important;
793 -}
794 790 .components-circular-option-picker__option[aria-pressed=true], .components-circular-option-picker__option[aria-selected=true] {
795 - box-shadow: inset 0 0 0 4px;
796 791 position: relative;
797 792 z-index: 1;
798 793 overflow: visible;
799 794 }
@@ -807,34 +802,13 @@
807 802 }
808 803 .components-circular-option-picker__option::after {
809 804 content: "";
810 805 position: absolute;
811 - top: -1px;
812 - left: -1px;
813 - bottom: -1px;
814 - right: -1px;
806 + inset: -1px;
807 + border: 1px solid transparent;
815 808 border-radius: 50%;
816 809 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
817 - border: 1px solid transparent;
818 - box-sizing: inherit;
819 810 }
820 -.components-circular-option-picker__option:focus::after {
821 - content: "";
822 - border-radius: 50%;
823 - box-shadow: inset 0 0 0 2px #fff;
824 - position: absolute;
825 - top: 50%;
826 - left: 50%;
827 - transform: translate(-50%, -50%);
828 - border: 2px solid #757575;
829 - width: calc(100% + 4px);
830 - height: calc(100% + 4px);
831 -}
832 -.components-circular-option-picker__option.components-button:focus {
833 - background-color: transparent;
834 - box-shadow: inset 0 0 0 14px;
835 - outline: none;
836 -}
837 811
838 812 .components-circular-option-picker__button-action .components-circular-option-picker__option {
839 813 color: #fff;
840 814 background: #fff;
@@ -852,12 +826,8 @@
852 826 width: 260px;
853 827 padding: 8px;
854 828 }
855 829
856 -.components-dropdown-menu__menu .components-palette-edit__menu-button {
857 - width: 100%;
858 -}
859 -
860 830 .component-color-indicator {
861 831 width: 20px;
862 832 height: 20px;
863 833 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
@@ -910,9 +880,9 @@
910 880 /* Override core line-height. To be reviewed. */
911 881 line-height: normal;
912 882 }
913 883 }
914 -.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]) {
915 885 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
916 886 }
917 887 .components-combobox-control__suggestions-container:focus {
918 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)));
@@ -1046,14 +1016,19 @@
1046 1016 width: inherit;
1047 1017 border-radius: 50%;
1048 1018 padding: 0;
1049 1019 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
1050 - outline: 2px solid transparent;
1051 1020 }
1052 -.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 {
1021 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
1053 1022 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);
1054 - outline: 1.5px solid transparent;
1055 1023 }
1024 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus:not(:active) {
1025 + outline-offset: 1px;
1026 + 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);
1027 +}
1028 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus:not(:active).is-active {
1029 + 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);
1030 +}
1056 1031
1057 1032 .components-custom-gradient-picker__remove-control-point-wrapper {
1058 1033 padding-bottom: 8px;
1059 1034 }
@@ -1449,9 +1424,9 @@
1449 1424 /* Override core line-height. To be reviewed. */
1450 1425 line-height: normal;
1451 1426 }
1452 1427 }
1453 -.components-form-token-field__input-container:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
1428 +.components-form-token-field__input-container:hover:not(:disabled, [aria-disabled=true]) {
1454 1429 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
1455 1430 }
1456 1431 .components-form-token-field__input-container:focus {
1457 1432 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)));
@@ -2195,13 +2170,9 @@
2195 2170 margin-inline-start: var(--wpds-dimension-gap-xs, 4px);
2196 2171 }
2197 2172 .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 {
2198 2173 color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
2199 - background-color: transparent;
2200 2174 }
2201 -.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
2202 - box-shadow: none;
2203 -}
2204 2175
2205 2176 .components-notice-list {
2206 2177 display: flex;
2207 2178 flex-direction: column;
@@ -2393,9 +2364,9 @@
2393 2364 font-size: 13px;
2394 2365 letter-spacing: initial;
2395 2366 line-height: initial;
2396 2367 text-transform: none;
2397 - font-weight: normal;
2368 + font-weight: 400;
2398 2369 }
2399 2370
2400 2371 .components-placeholder__label {
2401 2372 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
@@ -2448,9 +2419,9 @@
2448 2419 /* Override core line-height. To be reviewed. */
2449 2420 line-height: normal;
2450 2421 }
2451 2422 }
2452 -.components-placeholder__input[type=url]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
2423 +.components-placeholder__input[type=url]:hover:not(:disabled, [aria-disabled=true]) {
2453 2424 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
2454 2425 }
2455 2426 .components-placeholder__input[type=url]:focus {
2456 2427 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)));
@@ -2793,8 +2764,9 @@
2793 2764
2794 2765 .components-radio-control__label {
2795 2766 grid-column: 2;
2796 2767 grid-row: 1;
2768 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2797 2769 }
2798 2770 .components-radio-control__input:not(:disabled) + .components-radio-control__label {
2799 2771 cursor: var(--wpds-cursor-control, pointer);
2800 2772 }
@@ -3054,14 +3026,10 @@
3054 3026 .components-snackbar__action.components-external-link {
3055 3027 margin-left: 32px;
3056 3028 color: #fff;
3057 3029 flex-shrink: 0;
3030 + --focus-color: #fff;
3058 3031 }
3059 -.components-snackbar__action.components-button:focus,
3060 -.components-snackbar__action.components-external-link:focus {
3061 - box-shadow: none;
3062 - outline: 1px dotted #fff;
3063 -}
3064 3032 .components-snackbar__action.components-button:hover,
3065 3033 .components-snackbar__action.components-external-link:hover {
3066 3034 text-decoration: none;
3067 3035 color: currentColor;
@@ -3217,22 +3185,22 @@
3217 3185 /* Override core line-height. To be reviewed. */
3218 3186 line-height: normal;
3219 3187 }
3220 3188 }
3221 -.components-text-control__input:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3222 -.components-text-control__input[type=text]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3223 -.components-text-control__input[type=tel]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3224 -.components-text-control__input[type=time]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3225 -.components-text-control__input[type=url]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3226 -.components-text-control__input[type=week]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3227 -.components-text-control__input[type=password]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3228 -.components-text-control__input[type=color]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3229 -.components-text-control__input[type=date]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3230 -.components-text-control__input[type=datetime]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3231 -.components-text-control__input[type=datetime-local]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3232 -.components-text-control__input[type=email]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3233 -.components-text-control__input[type=month]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3234 -.components-text-control__input[type=number]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
3189 +.components-text-control__input:hover:not(:disabled, [aria-disabled=true]),
3190 +.components-text-control__input[type=text]:hover:not(:disabled, [aria-disabled=true]),
3191 +.components-text-control__input[type=tel]:hover:not(:disabled, [aria-disabled=true]),
3192 +.components-text-control__input[type=time]:hover:not(:disabled, [aria-disabled=true]),
3193 +.components-text-control__input[type=url]:hover:not(:disabled, [aria-disabled=true]),
3194 +.components-text-control__input[type=week]:hover:not(:disabled, [aria-disabled=true]),
3195 +.components-text-control__input[type=password]:hover:not(:disabled, [aria-disabled=true]),
3196 +.components-text-control__input[type=color]:hover:not(:disabled, [aria-disabled=true]),
3197 +.components-text-control__input[type=date]:hover:not(:disabled, [aria-disabled=true]),
3198 +.components-text-control__input[type=datetime]:hover:not(:disabled, [aria-disabled=true]),
3199 +.components-text-control__input[type=datetime-local]:hover:not(:disabled, [aria-disabled=true]),
3200 +.components-text-control__input[type=email]:hover:not(:disabled, [aria-disabled=true]),
3201 +.components-text-control__input[type=month]:hover:not(:disabled, [aria-disabled=true]),
3202 +.components-text-control__input[type=number]:hover:not(:disabled, [aria-disabled=true]) {
3235 3203 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
3236 3204 }
3237 3205 .components-text-control__input:focus,
3238 3206 .components-text-control__input[type=text]:focus,
@@ -3324,8 +3292,9 @@
3324 3292 }
3325 3293
3326 3294 .components-toggle-control__label {
3327 3295 line-height: 16px;
3296 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3328 3297 }
3329 3298 .components-toggle-control__label:not(.is-disabled) {
3330 3299 cursor: var(--wpds-cursor-control, pointer);
3331 3300 }