Index: src/wp-admin/css/colors/_admin.scss =================================================================== --- src/wp-admin/css/colors/_admin.scss (revision 38944) +++ src/wp-admin/css/colors/_admin.scss (working copy) @@ -475,26 +475,6 @@ color: $menu-highlight-text; } -/* Customize */ - -#customize-theme-controls .widget-area-select .selected { - background-color: $menu-highlight-background; - color: $menu-highlight-text; -} - -#customize-footer-actions .devices button:focus { - border-bottom-color: $highlight-color; -} - -#customize-controls .control-section:hover > .accordion-section-title, -#customize-controls .control-section .accordion-section-title:hover, -#customize-controls .control-section.open .accordion-section-title, -#customize-controls .control-section .accordion-section-title:focus, -#available-widgets .widget-tpl:hover, -#available-widgets .widget-tpl.selected { - border-left-color: $highlight-color; -} - /* Responsive Component */ div#wp-responsive-toggle a:before { Index: src/wp-admin/css/customize-controls.css =================================================================== --- src/wp-admin/css/customize-controls.css (revision 38944) +++ src/wp-admin/css/customize-controls.css (working copy) @@ -21,7 +21,7 @@ } #customize-controls .description { - color: #555; + color: #555d66; } #customize-header-actions .button-primary { @@ -82,7 +82,7 @@ #customize-controls .customize-info .accordion-section-title { background: #fff; - color: #555; + color: #555d66; border-left: none; border-right: none; border-bottom: none; @@ -92,7 +92,7 @@ #customize-controls .customize-info.open .accordion-section-title:after, #customize-controls .customize-info .accordion-section-title:hover:after, #customize-controls .customize-info .accordion-section-title:focus:after { - color: #333; + color: #32373c; } #customize-controls .customize-info .accordion-section-title:after { @@ -134,7 +134,7 @@ box-shadow: none; -webkit-appearance: none; background: transparent; - color: #555; + color: #555d66; border: none; } @@ -153,7 +153,7 @@ #customize-controls .customize-info .customize-panel-description, #customize-controls .customize-info .customize-section-description, #customize-controls .no-widget-areas-rendered-notice { - color: #555; + color: #555d66; display: none; background: #fff; padding: 12px 15px; @@ -187,10 +187,13 @@ } #customize-theme-controls .accordion-section-title { - color: #555; + color: #555d66; background-color: #fff; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #ddd; border-left: 4px solid #fff; + transition: .15s color ease-in-out, + .15s background-color ease-in-out, + .15s border-color ease-in-out; } #customize-theme-controls .accordion-section-title:after { @@ -199,7 +202,7 @@ } #customize-theme-controls .accordion-section-content { - color: #555; + color: #555d66; background: transparent; } @@ -207,9 +210,9 @@ #customize-controls .control-section .accordion-section-title:hover, #customize-controls .control-section.open .accordion-section-title, #customize-controls .control-section .accordion-section-title:focus { - color: #191e23; - background: #f5f5f5; - border-left: 4px solid #0073aa; + color: #0073aa; + background: #f3f3f5; + border-left-color: #0073aa; } #accordion-section-themes + .control-section { @@ -220,7 +223,7 @@ .js .control-section .accordion-section-title:hover, .js .control-section.open .accordion-section-title, .js .control-section .accordion-section-title:focus { - background: #f5f5f5; + background: #f3f3f5; } #customize-theme-controls .control-section:hover > .accordion-section-title:after, @@ -227,7 +230,7 @@ #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 { - color: #23282d; + color: #0073aa; } #customize-theme-controls .control-section.open { @@ -394,7 +397,7 @@ padding: 10px 10px 12px 14px; margin: 0; line-height: 21px; - color: #555; + color: #555d66; } .accordion-sub-container.control-panel-content { @@ -418,16 +421,21 @@ top: 0; left: 0; width: 45px; - height: 45px; + height: 41px; padding: 0 2px 0 0; background: #eee; border: none; + border-top: 4px solid #eee; border-right: 1px solid #ddd; color: #444; text-align: left; cursor: pointer; - -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; - transition: color .1s ease-in-out, background .1s ease-in-out; + -webkit-transition: color .15s ease-in-out, + border-color .15s ease-in-out, + background .15s ease-in-out; + transition: color .1s ease-in-out, + border-color .15s ease-in-out, + background .15s ease-in-out; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; @@ -444,11 +452,16 @@ background: #fff; border: none; border-right: 1px solid #ddd; + border-left: 4px solid #fff; -webkit-box-shadow: none; box-shadow: none; cursor: pointer; - -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; - transition: color .1s ease-in-out, background .1s ease-in-out; + -webkit-transition: color .15s ease-in-out, + border-color .15s ease-in-out, + background .15s ease-in-out; + transition: color .15s ease-in-out, + border-color .15s ease-in-out, + background .15s ease-in-out; } .customize-section-back { @@ -471,7 +484,7 @@ #customize-controls .panel-meta.customize-info .accordion-section-title:hover, #customize-controls .cannot-expand:hover .accordion-section-title { background: #fff; - color: #555; + color: #555d66; border-left-color: #fff; } @@ -479,20 +492,22 @@ .customize-controls-close:hover, .customize-controls-preview-toggle:focus, .customize-controls-preview-toggle:hover { - background: #ddd; - border-color: #ccc; - color: #000; + background: #fff; + color: #0073aa; + border-top-color: #0073aa; outline: none; -webkit-box-shadow: none; box-shadow: none; } + .customize-panel-back:hover, .customize-panel-back:focus, .customize-section-back:hover, .customize-section-back:focus { - color: #23282d; - background: #f5f5f5; + color: #0073aa; + background: #f3f3f5; + border-left-color: #0073aa; outline: none; -webkit-box-shadow: none; box-shadow: none; @@ -502,18 +517,27 @@ font: normal 22px/45px dashicons; content: "\f335"; position: relative; - top: 1px; + top: -3px; left: 13px; } +.customize-controls-close:focus:before { + top: -3px; +} + .customize-panel-back:before, .customize-section-back:before { font: normal 20px/72px dashicons; content: "\f341"; position: relative; - left: 13px; + left: 9px; } +.customize-panel-back:focus:before, +.customize-section-back:focus:before { + left: 10px; +} + .wp-full-overlay-sidebar .wp-full-overlay-header { background-color: #eee; -webkit-transition: padding ease-in-out .18s; @@ -854,7 +878,7 @@ } .customize-control-color .dropdown .dropdown-content { - background-color: #555; + background-color: #555d66; border: 1px solid rgba(0, 0, 0, 0.15); } @@ -937,7 +961,7 @@ display: none; position: absolute; width: 100%; - color: #555; + color: #555d66; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -992,7 +1016,7 @@ .customize-control-header .uploaded .header-view .close { font-size: 20px; color: #fff; - background: #555; + background: #555d66; background: rgba(0, 0, 0, 0.5); position: absolute; top: 10px; @@ -1153,7 +1177,7 @@ #customize-theme-controls .control-panel-themes > .accordion-section-title { cursor: default; background: #fff; - color: #555; + color: #555d66; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; border-left: none; @@ -1411,6 +1435,9 @@ font-weight: 600; color: #555d66; text-shadow: none; + transition: .15s color ease-in-out, + .15s background-color ease-in-out, + .15s border-color ease-in-out; } .control-panel-themes .theme-section { @@ -1420,9 +1447,9 @@ .control-panel-themes .customize-themes-section-title:focus, .control-panel-themes .customize-themes-section-title:hover { + color: #0073aa; + background: #f3f3f5; border-left-color: #0073aa; - color: #0073aa; - background: #f5f5f5; } .control-panel-themes .theme-section .customize-themes-section-title.selected:after { @@ -1478,7 +1505,7 @@ } .control-panel-themes .filter-details { - background: #f5f5f5; + background: #f3f3f5; margin: 0; padding: 8px 15px; border-top: none; @@ -1486,10 +1513,10 @@ display: none; } -.control-panel-themes .customize-themes-section-title.selected.details-open { - border-bottom-color: #f5f5f5; - border-left-color: #f5f5f5; - background: #f5f5f5; +.control-panel-themes .customize-themes-section-title.details-open { + border-bottom-color: #f3f3f5; + border-left-color: #f3f3f5; + background: #f3f3f5; } .control-panel-themes .favorites-form.filter-details label { @@ -2154,6 +2181,9 @@ background: #fff; border-bottom: 1px solid #ddd; border-left: 4px solid #fff; + transition: .15s color ease-in-out, + .15s background-color ease-in-out, + .15s border-color ease-in-out; cursor: pointer; display: none; } @@ -2229,7 +2259,7 @@ background: #eee; border: 0; border-right: 1px solid #ddd; - color: #444; + color: #555d66; cursor: pointer; -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; transition: color .1s ease-in-out, background .1s ease-in-out; @@ -2310,7 +2340,7 @@ padding: 9px 10px 12px 14px; margin: 0; line-height: 24px; - color: #555; + color: #555d66; display: block; overflow: hidden; white-space: nowrap; Index: src/wp-admin/css/customize-widgets.css =================================================================== --- src/wp-admin/css/customize-widgets.css (revision 38944) +++ src/wp-admin/css/customize-widgets.css (working copy) @@ -229,8 +229,9 @@ #available-widgets .widget-tpl:hover, #available-widgets .widget-tpl.selected { - background: #f5f5f5; + background: #f3f3f5; border-bottom-color: #ccc; + color: #0073aa; border-left: 4px solid #0073aa; } Index: src/wp-admin/css/themes.css =================================================================== --- src/wp-admin/css/themes.css (revision 38944) +++ src/wp-admin/css/themes.css (working copy) @@ -1508,8 +1508,9 @@ box-shadow: none; border-top: 1px solid transparent; border-bottom: 4px solid transparent; - -webkit-transition: background .1s ease-in-out; - transition: background .1s ease-in-out; + transition: .15s color ease-in-out, + .15s background-color ease-in-out, + .15s border-color ease-in-out; } .wp-full-overlay-footer .devices button:focus { @@ -1537,15 +1538,18 @@ background-color: #fff; } -.wp-full-overlay-footer .devices button:focus { - background-color: #fff; +.wp-full-overlay-footer .devices button:focus, +.wp-full-overlay-footer .devices button.active:hover { border-bottom-color: #0073aa; } -.wp-full-overlay-footer .devices button.active:before, +.wp-full-overlay-footer .devices button.active:before { + color: #191e23; +} + .wp-full-overlay-footer .devices button:hover:before, .wp-full-overlay-footer .devices button:focus:before { - color: #191e23; + color: #0073aa; } .wp-full-overlay-footer .devices .preview-desktop:before { Index: src/wp-admin/js/customize-controls.js =================================================================== --- src/wp-admin/js/customize-controls.js (revision 38944) +++ src/wp-admin/js/customize-controls.js (working copy) @@ -984,6 +984,7 @@ content = section.contentContainer, overlay = section.headContainer.closest( '.wp-full-overlay' ), backBtn = content.find( '.customize-section-back' ), + focusTarget = content.find( ':focusable' ).first(), sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(), expand; @@ -997,7 +998,14 @@ sectionTitle.attr( 'tabindex', '-1' ); backBtn.attr( 'tabindex', '0' ); - backBtn.focus(); + // Note that we can't always use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583 + if ( ! focusTarget.length ) { + focusTarget = content.find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' ).first(); + if ( ! focusTarget.length ) { + focusTarget = backBtn; // Fall back to focusing the back button. + } + } + focusTarget.focus(); content.css( 'top', '' ); container.scrollTop( 0 ); @@ -1958,7 +1966,8 @@ overlay = accordionSection.closest( '.wp-full-overlay' ), container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ), topPanel = panel.headContainer.find( '.accordion-section-title' ), - backBtn = accordionSection.find( '.customize-panel-back' ); + backBtn = accordionSection.find( '.customize-panel-back' ), + focusTarget = accordionSection.find( ':focusable' ).first(); if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) { // Collapse any sibling sections/panels @@ -1977,7 +1986,14 @@ topPanel.attr( 'tabindex', '-1' ); backBtn.attr( 'tabindex', '0' ); - backBtn.focus(); + // Note that we can't always use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583 + if ( ! focusTarget.length ) { + focusTarget = accordionSection.find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' ).first(); + if ( ! focusTarget.length ) { + focusTarget = backBtn; // Fall back to focusing the back button. + } + } + focusTarget.focus(); accordionSection.css( 'top', '' ); container.scrollTop( 0 );