Changeset 61860

Timestamp:

03/06/2026 11:21:37 PM (7 days ago)

Author:

joedolson

Message:

Customizer: Set more colors to inherit from admin theme.

Remove color overrides in customizer CSS that are already set in admin theme colors. Set colors to admin theme colors where currently hard coded.

Props madhavishah01, noruzzaman, shailu25, joedolson.
Fixes #64731.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (10 diffs)
• wp-admin/css/customize-nav-menus.css (modified) (3 diffs)
• wp-admin/css/customize-widgets.css (modified) (2 diffs)
• wp-includes/css/customize-preview.css (modified) (2 diffs)

trunk/src/wp-admin/css/customize-controls.css

@@ -84 +84 @@
 }
 
-#customize-save-button-wrapper .save:focus, #publish-settings:focus {
-    box-shadow: 0 1px 0 #2271b1, 0 0 2px 1px #72aee6; /* This is default box shadow for focus */
-}
-
 #customize-save-button-wrapper .save.has-next-sibling {
     border-radius: 3px 0 0 3px;
@@ -500 +496 @@
 }
 
-#customize-controls .customize-info.open .customize-help-toggle,
-#customize-controls .customize-info .customize-help-toggle:focus,
-#customize-controls .customize-info .customize-help-toggle:hover {
-    color: #2271b1;
-}
-
 #customize-controls .customize-info .customize-panel-description,
 #customize-controls .customize-info .customize-section-description,
@@ -610 +600 @@
 }
 
-#customize-controls .control-section:hover > .accordion-section-title,
-#customize-controls .control-section .accordion-section-title button:hover,
-#customize-controls .control-section.open .accordion-section-title,
-#customize-controls .control-section .accordion-section-title button:focus {
-    color: var(--wp-admin-theme-color, #3858e9);
-    background: #f6f7f7;
-    border-left-color: var(--wp-admin-theme-color, #3858e9);
-}
-
 #accordion-section-themes + .control-section {
     border-top: 1px solid #dcdcde;
@@ -628 +609 @@
 .js .control-section .accordion-section-title:focus {
     background: #f6f7f7;
-}
-
-#customize-theme-controls .control-section:hover > .accordion-section-title:after,
-#customize-theme-controls .control-section .accordion-section-title:hover:after,
-#customize-theme-controls .control-section.open .accordion-section-title:after,
-#customize-theme-controls .control-section .accordion-section-title:focus:after,
-#customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
-#customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
-#customize-outer-theme-controls .control-section.open .accordion-section-title:after,
-#customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
-    color: #2271b1;
 }
 
@@ -908 +878 @@
 .customize-controls-preview-toggle:hover {
     background: #fff;
-    color: #2271b1;
-    border-top-color: #2271b1;
     box-shadow: none;
     /* Only visible in Windows High Contrast mode */
@@ -925 +893 @@
 .customize-section-back:hover,
 .customize-section-back:focus {
-    color: #2271b1;
     background: #f6f7f7;
-    border-left-color: #2271b1;
     box-shadow: none;
     /* Only visible in Windows High Contrast mode */
@@ -2034 +2000 @@
 .control-panel-themes .customize-themes-section-title:focus,
 .control-panel-themes .customize-themes-section-title:hover {
-    border-left-color: #2271b1;
-    color: #2271b1;
     background: #f6f7f7;
 }
@@ -2064 +2028 @@
     top: 9px;
     right: 15px;
-    background: #2271b1;
     color: #fff;
-}
-
-.control-panel-themes .customize-themes-section-title.selected {
-    color: #2271b1;
 }
 
@@ -2374 +2333 @@
     .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover,
     .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus {
-        color: #2271b1;
         background: #f6f7f7;
-        border-left-color: #2271b1;
         box-shadow: none;
         /* Only visible in Windows High Contrast mode */
@@ -2472 +2429 @@
 .wp-customizer .theme-overlay .theme-header .left:hover {
     background: #fff;
-    border-bottom: 4px solid #2271b1;
-    color: #2271b1;
 }
 
 .wp-customizer .theme-overlay .theme-header .close:focus:before,
 .wp-customizer .theme-overlay .theme-header .close:hover:before {
-    color: #2271b1;
+    color: var(--wp-admin-theme-color);
 }
 

trunk/src/wp-admin/css/customize-nav-menus.css

@@ -269 +269 @@
 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
-    color: #2271b1;
+    color: var(--wp-admin-theme-color);
 }
 
@@ -837 +837 @@
     position: relative;
     z-index: 10;
-    color: #2271b1;
+    color: var(--wp-admin-theme-color);
 }
 
@@ -843 +843 @@
 .menu-item-handle:hover .item-edit,
 #available-menu-items .menu-item-handle:hover .item-add {
-    color: #2271b1;
+    color: var(--wp-admin-theme-color);
 }
 

trunk/src/wp-admin/css/customize-widgets.css

@@ -188 +188 @@
 #customize-theme-controls .widget-area-select .selected {
     color: #fff;
-    background: #2271b1;
+    background: var(--wp-admin-theme-color);
 }
 
@@ -246 +246 @@
     background: #f6f7f7;
     border-bottom-color: #c3c4c7;
-    color: #2271b1;
-    border-left: 4px solid #2271b1;
+    color: var(--wp-admin-theme-color);;
+    border-left: 4px solid var(--wp-admin-theme-color);
 }
 

trunk/src/wp-includes/css/customize-preview.css

@@ -45 +45 @@
     font-size: 18px;
     z-index: 5;
-    background: #3858e9;
+    background: var( --wp-admin-theme-color, #3858e9 );
     border-radius: 50%;
     border: 2px solid #fff;
@@ -77 +77 @@
 
 .customize-partial-edit-shortcut button:hover {
-    background: #2145e6 !important; /* matches primary buttons */
+    background: var( --wp-admin-theme-color-darker-10, #2145e6 ) !important; /* matches primary buttons */
 }
 
 .customize-partial-edit-shortcut button:focus {
-    box-shadow: 0 0 0 1.5px #3858e9;
+    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px ) var(--wp-admin-theme-color, #3858e9);
 }