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.css +54 -85 24.0.0 → trunk 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 }