Merge the color schemes component from MP6. Introduces Light, Blue, and Midnight.

Color scheme selection on your own profile page gives you a preview and autosaves the selection.

Also introduces the usage of a preprocessor for core files, namely Sass. For 3.8, we will not expand its implementation past the color schemes. This does require Ruby as well as Sass 3.3.0+ due to the usage of the sourcemap option.

Note that only the default color scheme is available when running out of src. Use build to test the rest as well as the color picker.

props ryelle, melchoyce, tillkruess, drw158, littlethingsstudio, helen. see #25858, #22862.

Built from https://develop.svn.wordpress.org/trunk@26137


git-svn-id: http://core.svn.wordpress.org/trunk@26048 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/admin-ajax.php

@@ -58,6 +58,7 @@ $core_actions_post = array(
 	'wp-remove-post-lock', 'dismiss-wp-pointer', 'upload-attachment', 'get-attachment',
 	'query-attachments', 'save-attachment', 'save-attachment-compat', 'send-link-to-editor',
 	'send-attachment-to-editor', 'save-attachment-order', 'heartbeat', 'get-revision-diffs',
+	'save-user-color-scheme',
 );
 
 // Register core Ajax calls.

wp-admin/css/wp-admin-rtl.css

@@ -5636,12 +5636,6 @@ span.imgedit-scale-warn {
 	width: auto;
 }
 
-.form-table div.color-option {
-	display: block;
-	clear: both;
-	margin-top: 12px;
-}
-
 .form-table input.tog {
 	margin-top: 2px;
 	margin-left: 2px;
@@ -5653,21 +5647,6 @@ span.imgedit-scale-warn {
 	margin-bottom: 0;
 }
 
-.form-table table.color-palette {
-	vertical-align: bottom;
-	float: right;
-	margin: -12px 3px 11px;
-}
-
-.form-table .color-palette td {
-	border-width: 1px 1px 0;
-	border-style: solid solid none;
-	height: 10px;
-	line-height: 20px;
-	width: 10px;
-}
-
-
 .form-table td fieldset label {
 	margin: 0.25em 0 0.5em !important;
 	display: inline-block;
@@ -6330,6 +6309,120 @@ h2 .nav-tab {
 	width: 25em;
 }
 
+.picker-dropdown {
+	background: #fcfcfc;
+	border: 1px solid #dedede;
+	margin-left: 12%;
+	max-width: 270px;
+	position: relative;
+	width: auto;
+}
+
+.picker-dropdown.dropdown-current {
+	padding: 20px;
+	margin-bottom: 15px;
+	cursor: pointer;
+}
+
+.picker-dropdown.dropdown-container {
+	display: none;
+	position: absolute;
+	width: 340px;
+	border-top: none;
+	-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+	z-index: 1;
+}
+
+.picker-expanded .picker-dropdown.dropdown-container {
+	display: block;
+}
+
+.picker-dropdown.dropdown-container:before,
+.picker-dropdown.dropdown-container:after {
+	content: "\0020";
+	display: block;
+	position: absolute;
+	top: -10px;
+	right: 150px;
+	z-index: 2;
+	width: 0;
+	height: 0;
+	overflow: hidden;
+	border: solid 11px transparent;
+	border-top: 0;
+	border-bottom-color: #fefefe;
+}
+
+.picker-dropdown.dropdown-container:before {
+	top: -11px;
+	z-index: 1;
+	border-bottom-color: #dedede;
+}
+
+.picker-dropdown-arrow {
+	position: absolute;
+	top: -1px;
+	left: -42px;
+	display: block;
+	width: 40px;
+	height: 100%;
+	background: white;
+	text-align: center;
+	border: 1px solid #dedede;
+	border-right-width: 0;
+	cursor: pointer;
+}
+
+.picker-dropdown-arrow:before {
+	font: 20px/91px dashicons;
+	content: '\f140';
+}
+
+.picker-expanded .picker-dropdown-arrow:before {
+	content: '\f142';
+}
+
+.color-option {
+	display: block;
+	padding: 20px;
+	border-top: 1px solid #dedede;
+}
+
+.color-option:hover,
+.color-option.selected {
+	background: #f2f8fa;
+}
+
+.color-palette {
+	width: 100%;
+	border-spacing: 0;
+	border-collapse: collapse;
+}
+.color-palette td {
+	height: 20px;
+	padding: 0;
+	border: none;
+}
+
+.color-option {
+	cursor: pointer;
+}
+
+.no-js .dropdown-current {
+	display: none;
+}
+
+.no-js .dropdown-container {
+	display: block;
+	position: static;
+}
+
+.no-js .dropdown-container:before,
+.no-js .dropdown-container:after {
+	display: none;
+}
+
 /*------------------------------------------------------------------------------
   19.0 - Tools
 ------------------------------------------------------------------------------*/

wp-admin/css/wp-admin.css

@@ -5636,12 +5636,6 @@ span.imgedit-scale-warn {
 	width: auto;
 }
 
-.form-table div.color-option {
-	display: block;
-	clear: both;
-	margin-top: 12px;
-}
-
 .form-table input.tog {
 	margin-top: 2px;
 	margin-right: 2px;
@@ -5653,21 +5647,6 @@ span.imgedit-scale-warn {
 	margin-bottom: 0;
 }
 
-.form-table table.color-palette {
-	vertical-align: bottom;
-	float: left;
-	margin: -12px 3px 11px;
-}
-
-.form-table .color-palette td {
-	border-width: 1px 1px 0;
-	border-style: solid solid none;
-	height: 10px;
-	line-height: 20px;
-	width: 10px;
-}
-
-
 .form-table td fieldset label {
 	margin: 0.25em 0 0.5em !important;
 	display: inline-block;
@@ -6330,6 +6309,120 @@ h2 .nav-tab {
 	width: 25em;
 }
 
+.picker-dropdown {
+	background: #fcfcfc;
+	border: 1px solid #dedede;
+	margin-right: 12%;
+	max-width: 270px;
+	position: relative;
+	width: auto;
+}
+
+.picker-dropdown.dropdown-current {
+	padding: 20px;
+	margin-bottom: 15px;
+	cursor: pointer;
+}
+
+.picker-dropdown.dropdown-container {
+	display: none;
+	position: absolute;
+	width: 340px;
+	border-top: none;
+	-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+	z-index: 1;
+}
+
+.picker-expanded .picker-dropdown.dropdown-container {
+	display: block;
+}
+
+.picker-dropdown.dropdown-container:before,
+.picker-dropdown.dropdown-container:after {
+	content: "\0020";
+	display: block;
+	position: absolute;
+	top: -10px;
+	left: 150px;
+	z-index: 2;
+	width: 0;
+	height: 0;
+	overflow: hidden;
+	border: solid 11px transparent;
+	border-top: 0;
+	border-bottom-color: #fefefe;
+}
+
+.picker-dropdown.dropdown-container:before {
+	top: -11px;
+	z-index: 1;
+	border-bottom-color: #dedede;
+}
+
+.picker-dropdown-arrow {
+	position: absolute;
+	top: -1px;
+	right: -42px;
+	display: block;
+	width: 40px;
+	height: 100%;
+	background: white;
+	text-align: center;
+	border: 1px solid #dedede;
+	border-left-width: 0;
+	cursor: pointer;
+}
+
+.picker-dropdown-arrow:before {
+	font: 20px/91px dashicons;
+	content: '\f140';
+}
+
+.picker-expanded .picker-dropdown-arrow:before {
+	content: '\f142';
+}
+
+.color-option {
+	display: block;
+	padding: 20px;
+	border-top: 1px solid #dedede;
+}
+
+.color-option:hover,
+.color-option.selected {
+	background: #f2f8fa;
+}
+
+.color-palette {
+	width: 100%;
+	border-spacing: 0;
+	border-collapse: collapse;
+}
+.color-palette td {
+	height: 20px;
+	padding: 0;
+	border: none;
+}
+
+.color-option {
+	cursor: pointer;
+}
+
+.no-js .dropdown-current {
+	display: none;
+}
+
+.no-js .dropdown-container {
+	display: block;
+	position: static;
+}
+
+.no-js .dropdown-container:before,
+.no-js .dropdown-container:after {
+	display: none;
+}
+
 /*------------------------------------------------------------------------------
   19.0 - Tools
 ------------------------------------------------------------------------------*/

wp-admin/includes/ajax-actions.php

@@ -2244,3 +2244,27 @@ function wp_ajax_get_revision_diffs() {
 	}
 	wp_send_json_success( $return );
 }
+
+/**
+ * Auto-save the selected color scheme for a user's own profile.
+ *
+ * @since  3.8.0
+ */
+function wp_ajax_save_user_color_scheme() {
+	global $_wp_admin_css_colors;
+
+	$user_id = intval( $_POST['user_id'] );
+	$color_scheme = sanitize_key( $_POST['color_scheme'] );
+
+	if ( get_current_user_id() !== $user_id )
+		wp_send_json_error();
+
+	if ( ! get_user_by( 'id', $user_id ) )
+		wp_send_json_error();
+
+	if ( ! isset( $_wp_admin_css_colors[ $color_scheme ] ) )
+		wp_send_json_error();
+
+	update_user_option( $user_id, 'admin_color', $color_scheme, true );
+	wp_send_json_success();
+}

wp-admin/includes/misc.php

@@ -562,29 +562,70 @@ function saveDomDocument($doc, $filename) {
  * @since 3.0.0
  */
 function admin_color_scheme_picker() {
-	global $_wp_admin_css_colors, $user_id; ?>
+	global $_wp_admin_css_colors, $user_id;
-<fieldset><legend class="screen-reader-text"><span><?php _e('Admin Color Scheme')?></span></legend>
+	ksort($_wp_admin_css_colors);
-<?php
+
-$current_color = get_user_option('admin_color', $user_id);
+	$current_color = get_user_option( 'admin_color', $user_id );
-if ( empty($current_color) )
+
-	$current_color = 'fresh';
+	if ( empty( $current_color ) || ! isset( $_wp_admin_css_colors[ $current_color ] ) )
-foreach ( $_wp_admin_css_colors as $color => $color_info ): ?>
+		$current_color = 'fresh';
-<div class="color-option"><input name="admin_color" id="admin_color_<?php echo esc_attr( $color ); ?>" type="radio" value="<?php echo esc_attr( $color ); ?>" class="tog" <?php checked($color, $current_color); ?> />
+
-	<table class="color-palette">
+	$color_info = $_wp_admin_css_colors[ $current_color ];
-	<tr>
+?>
-	<?php foreach ( $color_info->colors as $html_color ): ?>
+
-	<td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $color ); ?>">&nbsp;</td>
+	<fieldset id="color-picker">
-	<?php endforeach; ?>
+		<legend class="screen-reader-text"><span><?php _e( 'Admin Color Scheme' ); ?></span></legend>
-	</tr>
+
-	</table>
+		<div class="picker-dropdown dropdown-current">
+			<div class="picker-dropdown-arrow"></div>
+			<label for="admin_color_<?php echo esc_attr( $current_color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
+			<table class="color-palette">
+				<tr>
+				<?php foreach ( $color_info->colors as $html_color ): ?>
+					<td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $current_color ); ?>">&nbsp;</td>
+				<?php endforeach; ?>
+				</tr>
+			</table>
+		</div>
+
+		<div class="picker-dropdown dropdown-container">
+
+		<?php foreach ( $_wp_admin_css_colors as $color => $color_info ) : ?>
+
+			<div class="color-option <?php echo ( $color == $current_color ) ? 'selected' : ''; ?>">
+				<input name="admin_color" id="admin_color_<?php echo esc_attr( $color ); ?>" type="radio" value="<?php echo esc_attr( $color ); ?>" class="tog" <?php checked( $color, $current_color ); ?> />
+				<input type="hidden" class="css_url" value="<?php echo esc_url( $color_info->url ); ?>" />
+				<input type="hidden" class="icon_colors" value="<?php echo esc_attr( json_encode( array( 'icons' => $color_info->icon_colors ) ) ); ?>" />
+				<label for="admin_color_<?php echo esc_attr( $color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
+				<table class="color-palette">
+					<tr>
+					<?php foreach ( $color_info->colors as $html_color ): ?>
+						<td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $color ); ?>">&nbsp;</td>
+					<?php endforeach; ?>
+					</tr>
+				</table>
+			</div>
+
+		<?php endforeach; ?>
+
+		</div>
+
+	</fieldset>
 
-	<label for="admin_color_<?php echo esc_attr( $color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
-</div>
-	<?php endforeach; ?>
-</fieldset>
 <?php
 }
 
+function set_color_scheme_json() {
+	global $_wp_admin_css_colors;
+
+	$color_scheme = get_user_option( 'admin_color' );
+
+	if ( isset( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) {
+		echo '<script type="text/javascript">var mp6_color_scheme = ' . json_encode( array( 'icons' => $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) . ";</script>\n";
+	}
+}
+add_action( 'admin_head', 'set_color_scheme_json' );
+
 function _ipad_meta() {
 	if ( wp_is_mobile() ) {
 		?>

wp-admin/js/user-profile.js

@@ -73,6 +73,50 @@
 				});
 			});
 		}
+
+		var $colorpicker = $( '#color-picker' ),
+			$stylesheet = $( '#colors-css' ),
+			user_id = $( 'input#user_id' ).val(),
+			current_user_id = $( 'input[name="checkuser_id"]' ).val();
+
+		// dropdown toggle
+		$colorpicker.on( 'click', '.dropdown-current', function() {
+			$colorpicker.toggleClass( 'picker-expanded' );
+		});
+
+		$colorpicker.on( 'click', '.color-option', function() {
+
+			var color_scheme = $( this ).children( 'input[name="admin_color"]' ).val();
+
+			// update selected
+			$( this ).siblings( '.selected' ).removeClass( 'selected' )
+			$( this ).addClass( 'selected' );
+			$( this ).find( 'input' ).prop( 'checked', true );
+
+			// update current
+			$colorpicker.find( '.dropdown-current label' ).html( $( this ).children( 'label' ).html() );
+			$colorpicker.find( '.dropdown-current table' ).html( $( this ).children( 'table' ).html() );
+			$colorpicker.toggleClass( 'picker-expanded' );
+
+			// preview/save color scheme
+			if ( user_id == current_user_id ) {
+
+				// repaint icons
+				$stylesheet.attr( 'href', $( this ).children( '.css_url' ).val() );
+				svgPainter.setColors( $.parseJSON( $( this ).children( '.icon_colors' ).val() ) );
+				svgPainter.paint();
+
+				// update user option
+				$.post( ajaxurl, {
+					action: 'save-user-color-scheme',
+					color_scheme: color_scheme,
+					user_id: user_id
+				});
+
+			}
+
+		});
+
 	});
 
 })(jQuery);

wp-admin/js/user-profile.min.js

@@ -1 +1 @@
-!function(a){function b(){var b,c=a("#pass1").val(),d=(a("#user_login").val(),a("#pass2").val());if(a("#pass-strength-result").removeClass("short bad good strong"),!c)return a("#pass-strength-result").html(pwsL10n.empty),void 0;switch(b=wp.passwordStrength.meter(c,wp.passwordStrength.userInputBlacklist(),d)){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;case 5:a("#pass-strength-result").addClass("short").html(pwsL10n.mismatch);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}a(document).ready(function(){var c=a("#display_name");a("#pass1").val("").keyup(b),a("#pass2").val("").keyup(b),a("#pass-strength-result").show(),a(".color-palette").click(function(){a(this).siblings('input[name="admin_color"]').prop("checked",!0)}),c.length&&a("#first_name, #last_name, #nickname").bind("blur.user_profile",function(){var b=[],d={display_nickname:a("#nickname").val()||"",display_username:a("#user_login").val()||"",display_firstname:a("#first_name").val()||"",display_lastname:a("#last_name").val()||""};d.display_firstname&&d.display_lastname&&(d.display_firstlast=d.display_firstname+" "+d.display_lastname,d.display_lastfirst=d.display_lastname+" "+d.display_firstname),a.each(a("option",c),function(a,c){b.push(c.value)}),a.each(d,function(e,f){if(f){var g=f.replace(/<\/?[a-z][^>]*>/gi,"");d[e].length&&-1==a.inArray(g,b)&&(b.push(g),a("<option />",{text:g}).appendTo(c))}})})})}(jQuery);
+!function(a){function b(){var b,c=a("#pass1").val(),d=(a("#user_login").val(),a("#pass2").val());if(a("#pass-strength-result").removeClass("short bad good strong"),!c)return a("#pass-strength-result").html(pwsL10n.empty),void 0;switch(b=wp.passwordStrength.meter(c,wp.passwordStrength.userInputBlacklist(),d)){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;case 5:a("#pass-strength-result").addClass("short").html(pwsL10n.mismatch);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}a(document).ready(function(){var c=a("#display_name");a("#pass1").val("").keyup(b),a("#pass2").val("").keyup(b),a("#pass-strength-result").show(),a(".color-palette").click(function(){a(this).siblings('input[name="admin_color"]').prop("checked",!0)}),c.length&&a("#first_name, #last_name, #nickname").bind("blur.user_profile",function(){var b=[],d={display_nickname:a("#nickname").val()||"",display_username:a("#user_login").val()||"",display_firstname:a("#first_name").val()||"",display_lastname:a("#last_name").val()||""};d.display_firstname&&d.display_lastname&&(d.display_firstlast=d.display_firstname+" "+d.display_lastname,d.display_lastfirst=d.display_lastname+" "+d.display_firstname),a.each(a("option",c),function(a,c){b.push(c.value)}),a.each(d,function(e,f){if(f){var g=f.replace(/<\/?[a-z][^>]*>/gi,"");d[e].length&&-1==a.inArray(g,b)&&(b.push(g),a("<option />",{text:g}).appendTo(c))}})});var d=a("#color-picker"),e=a("#colors-css"),f=a("input#user_id").val(),g=a('input[name="checkuser_id"]').val();d.on("click",".dropdown-current",function(){d.toggleClass("picker-expanded")}),d.on("click",".color-option",function(){var b=a(this).children('input[name="admin_color"]').val();a(this).siblings(".selected").removeClass("selected"),a(this).addClass("selected"),a(this).find("input").prop("checked",!0),d.find(".dropdown-current label").html(a(this).children("label").html()),d.find(".dropdown-current table").html(a(this).children("table").html()),d.toggleClass("picker-expanded"),f==g&&(e.attr("href",a(this).children(".css_url").val()),svgPainter.setColors(a.parseJSON(a(this).children(".icon_colors").val())),svgPainter.paint(),a.post(ajaxurl,{action:"save-user-color-scheme",color_scheme:b,user_id:f}))})})}(jQuery);

wp-includes/general-template.php

@@ -2085,14 +2085,20 @@ function paginate_links( $args = '' ) {
  * @param string $name The name of the theme.
  * @param string $url The url of the css file containing the colour scheme.
  * @param array $colors Optional An array of CSS color definitions which are used to give the user a feel for the theme.
+ * @param array $icons Optional An array of CSS color definitions used to color any SVG icons
  */
-function wp_admin_css_color($key, $name, $url, $colors = array()) {
+function wp_admin_css_color( $key, $name, $url, $colors = array(), $icons = array() ) {
 	global $_wp_admin_css_colors;
 
 	if ( !isset($_wp_admin_css_colors) )
 		$_wp_admin_css_colors = array();
 
-	$_wp_admin_css_colors[$key] = (object) array('name' => $name, 'url' => $url, 'colors' => $colors);
+	$_wp_admin_css_colors[$key] = (object) array(
+		'name' => $name,
+		'url' => $url,
+		'colors' => $colors,
+		'icon_colors' => $icons,
+	);
 }
 
 /**
@@ -2101,8 +2107,33 @@ function wp_admin_css_color($key, $name, $url, $colors = array()) {
  * @since 3.0.0
  */
 function register_admin_color_schemes() {
-	wp_admin_css_color( 'fresh', _x( 'Default', 'admin color scheme' ), admin_url( 'css/colors-fresh.min.css' ),
+	$suffix = SCRIPT_DEBUG ? '' : '.min';
-		array( '#222', '#333', '#0074a2', '#2ea2cc' ) );
+
+	wp_admin_css_color( 'fresh', _x( 'Default', 'admin color scheme' ),
+		admin_url( "css/colors-fresh$suffix.css" ),
+		array( '#222', '#333', '#0074a2', '#2ea2cc' )
+	);
+
+	// Other color schemes are not available when running out of src
+	if ( ! strpos( $GLOBALS['wp_version'], '-src' ) ) {
+		wp_admin_css_color( 'light', _x( 'Light', 'admin color scheme' ),
+			admin_url( "css/color-schemes/light/colors$suffix.css" ),
+			array( '#e5e5e5', '#999', '#d64e07', '#04a4cc' ),
+			array( 'base' => '#999', 'focus' => '#ccc', 'current' => '#ccc' )
+		);
+
+		wp_admin_css_color( 'blue', _x( 'Blue', 'admin color scheme' ),
+			admin_url( "css/color-schemes/blue/colors$suffix.css" ),
+			array( '#096484', '#4796b3', '#52accc', '#74B6CE' ),
+			array( 'base' => '#e5f8ff', 'focus' => '#fff', 'current' => '#fff' )
+		);
+
+		wp_admin_css_color( 'midnight', _x( 'Midnight', 'admin color scheme' ),
+			admin_url( "css/color-schemes/midnight/colors$suffix.css" ),
+			array( '#25282b', '#363b3f', '#69a8bb', '#e14d43' ),
+			array( 'base' => '#f1f2f3', 'focus' => '#fff', 'current' => '#fff' )
+		);
+	}
 }
 
 /**