Administration: Update design of the Dashboard welcome panel.

Tone down the brightness of the dashboard panel by using a white background behind the main text, and use the highlight color from each color scheme for the main background. This also introduces a `$scheme-name` SCSS variable to allow overrides for specific color schemes.

Props critterverse, sabernhardt, joedolson, audrasjb.
See #54489.


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


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

wp-admin/css/colors/_admin.scss

@@ -781,3 +781,17 @@ div#wp-responsive-toggle a:before {
 		color: $link;
 	}
 }
+
+/* Welcome Panel */
+
+.welcome-panel {
+	background-color: $highlight-color;
+}
+
+[class*="welcome-panel-icon"] {
+	@if ( $scheme-name == "light" ) {
+		background-color: $icon-color;
+	} @else {
+		background-color: $base-color;
+	}
+}

wp-admin/css/colors/_variables.scss

@@ -1,5 +1,6 @@
 // assign default value to all undefined variables
 
+$scheme-name: "default" !default;
 
 // core variables
 

wp-admin/css/colors/blue/colors-rtl.css

@@ -703,3 +703,12 @@ div#wp-responsive-toggle a:before {
   border-bottom-color: #e1a948;
   color: #0073aa;
 }
+
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #096484;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #52accc;
+}

wp-admin/css/colors/blue/colors.css

@@ -703,3 +703,12 @@ div#wp-responsive-toggle a:before {
   border-bottom-color: #e1a948;
   color: #0073aa;
 }
+
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #096484;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #52accc;
+}

wp-admin/css/colors/blue/colors.scss

@@ -1,3 +1,4 @@
+$scheme-name: "blue";
 $base-color: #52accc;
 $icon-color: #e5f8ff;
 $highlight-color: #096484;

wp-admin/css/colors/coffee/colors-rtl.css

@@ -670,3 +670,12 @@ div#wp-responsive-toggle a:before {
   border-bottom-color: #c7a589;
   color: #0073aa;
 }
+
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #c7a589;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #59524c;
+}

wp-admin/css/colors/coffee/colors.css

@@ -670,3 +670,12 @@ div#wp-responsive-toggle a:before {
   border-bottom-color: #c7a589;
   color: #0073aa;
 }
+
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #c7a589;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #59524c;
+}

wp-admin/css/colors/coffee/colors.scss

@@ -1,3 +1,4 @@
+$scheme-name: "coffee";
 $base-color: #59524c;
 $highlight-color: #c7a589;
 $notification-color: #9ea476;

wp-admin/css/colors/ectoplasm/colors-rtl.css

@@ -703,3 +703,12 @@ div#wp-responsive-toggle a:before {
   border-bottom-color: #a3b745;
   color: #0073aa;
 }
+
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #a3b745;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #523f6d;
+}

wp-admin/css/colors/ectoplasm/colors.css

@@ -703,3 +703,12 @@ div#wp-responsive-toggle a:before {
   border-bottom-color: #a3b745;
   color: #0073aa;
 }
+
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #a3b745;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #523f6d;
+}

wp-admin/css/colors/ectoplasm/colors.scss

@@ -1,3 +1,4 @@
+$scheme-name: "ectoplasm";
 $base-color: #523f6d;
 $icon-color: #ece6f6;
 $highlight-color: #a3b745;

wp-admin/css/colors/light/colors-rtl.css

@@ -704,6 +704,15 @@ div#wp-responsive-toggle a:before {
   color: #0073aa;
 }
 
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #04a4cc;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #999;
+}
+
 /* Override the theme filter highlight color for this scheme */
 .theme-section.current,
 .theme-filter.current {

wp-admin/css/colors/light/colors.css

@@ -704,6 +704,15 @@ div#wp-responsive-toggle a:before {
   color: #0073aa;
 }
 
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #04a4cc;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #999;
+}
+
 /* Override the theme filter highlight color for this scheme */
 .theme-section.current,
 .theme-filter.current {

wp-admin/css/colors/light/colors.scss

@@ -1,3 +1,4 @@
+$scheme-name: "light";
 $base-color: #e5e5e5;
 $icon-color: #999;
 $text-color: #333;

wp-admin/css/colors/midnight/colors-rtl.css

@@ -703,3 +703,12 @@ div#wp-responsive-toggle a:before {
   border-bottom-color: #e14d43;
   color: #0073aa;
 }
+
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #e14d43;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #363b3f;
+}

wp-admin/css/colors/midnight/colors.css

@@ -703,3 +703,12 @@ div#wp-responsive-toggle a:before {
   border-bottom-color: #e14d43;
   color: #0073aa;
 }
+
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #e14d43;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #363b3f;
+}

wp-admin/css/colors/midnight/colors.scss

@@ -1,3 +1,4 @@
+$scheme-name: "midnight";
 $base-color: #363b3f;
 $highlight-color: #e14d43;
 $notification-color: #69a8bb;

wp-admin/css/colors/modern/colors-rtl.css

@@ -703,3 +703,12 @@ div#wp-responsive-toggle a:before {
   border-bottom-color: #3858e9;
   color: #3858e9;
 }
+
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #3858e9;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #1e1e1e;
+}

wp-admin/css/colors/modern/colors.css

@@ -703,3 +703,12 @@ div#wp-responsive-toggle a:before {
   border-bottom-color: #3858e9;
   color: #3858e9;
 }
+
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #3858e9;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #1e1e1e;
+}

wp-admin/css/colors/modern/colors.scss

@@ -1,3 +1,4 @@
+$scheme-name: "modern";
 $base-color: #1e1e1e;
 $highlight-color: #3858e9;
 $menu-submenu-focus-text: #33f078;

wp-admin/css/colors/ocean/colors-rtl.css

@@ -670,3 +670,12 @@ div#wp-responsive-toggle a:before {
   border-bottom-color: #9ebaa0;
   color: #0073aa;
 }
+
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #9ebaa0;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #738e96;
+}

wp-admin/css/colors/ocean/colors.css

@@ -670,3 +670,12 @@ div#wp-responsive-toggle a:before {
   border-bottom-color: #9ebaa0;
   color: #0073aa;
 }
+
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #9ebaa0;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #738e96;
+}

wp-admin/css/colors/ocean/colors.scss

@@ -1,3 +1,4 @@
+$scheme-name: "ocean";
 $base-color: #738e96;
 $icon-color: #f2fcff;
 $highlight-color: #9ebaa0;

wp-admin/css/colors/sunrise/colors-rtl.css

@@ -703,3 +703,12 @@ div#wp-responsive-toggle a:before {
   border-bottom-color: #dd823b;
   color: #0073aa;
 }
+
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #dd823b;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #cf4944;
+}

wp-admin/css/colors/sunrise/colors.css

@@ -703,3 +703,12 @@ div#wp-responsive-toggle a:before {
   border-bottom-color: #dd823b;
   color: #0073aa;
 }
+
+/* Welcome Panel */
+.welcome-panel {
+  background-color: #dd823b;
+}
+
+[class*=welcome-panel-icon] {
+  background-color: #cf4944;
+}

wp-admin/css/colors/sunrise/colors.scss

@@ -1,3 +1,4 @@
+$scheme-name: "sunrise";
 $base-color: #cf4944;
 $highlight-color: #dd823b;
 $notification-color: #ccaf0b;

wp-admin/css/dashboard-rtl.css

@@ -116,10 +116,9 @@
 	position: relative;
 	overflow: auto;
 	margin: 16px 0;
-	background: #3858e9 url(../images/about-texture.png) center repeat;
+	background: #2271b1 url(../images/about-texture.png) center repeat;
 	background-size: 500px 500px;
 	background-blend-mode: overlay;
-	color: #fff;
 	font-size: 14px;
 	line-height: 1.3;
 }
@@ -149,11 +148,6 @@
 	font-size: 20px;
 	font-weight: 400;
 	line-height: 1.4;
-	color: #fff;
-}
-
-.welcome-panel a {
-	color: #fff;
 }
 
 .welcome-panel p {
@@ -161,6 +155,27 @@
 	line-height: inherit;
 }
 
+.welcome-panel-header {
+	color: #fff;
+}
+
+.welcome-panel-header a {
+	color: #fff;
+}
+
+.welcome-panel-header a:focus,
+.welcome-panel-header a:hover {
+	color: #f5e6ab;
+	text-decoration: none;
+}
+
+.welcome-panel-header a:focus,
+.welcome-panel .welcome-panel-close:focus {
+	outline-color: currentColor;
+	outline-offset: 1px;
+	box-shadow: none;
+}
+
 .welcome-panel-header p {
 	margin: 0.5em 0 0;
 	font-size: 20px;
@@ -187,6 +202,10 @@
 	color: #fff;
 }
 
+.welcome-panel .welcome-panel-close {
+	color: #fff;
+}
+
 .welcome-panel .welcome-panel-close:hover,
 .welcome-panel .welcome-panel-close:focus,
 .welcome-panel .welcome-panel-close:hover::before,
@@ -231,13 +250,13 @@
 	grid-template-columns: repeat(3, 1fr);
 	gap: 32px;
 	align-self: flex-end;
-	background: #3858e9;
+	background: #fff;
 }
 
 [class*="welcome-panel-icon"] {
 	height: 60px;
 	width: 60px;
-	background-color: #1d35b4;
+	background-color: #1d2327;
 	background-position: center;
 	background-size: 24px 24px;
 	background-repeat: no-repeat;

wp-admin/css/dashboard.css

@@ -115,10 +115,9 @@
 	position: relative;
 	overflow: auto;
 	margin: 16px 0;
-	background: #3858e9 url(../images/about-texture.png) center repeat;
+	background: #2271b1 url(../images/about-texture.png) center repeat;
 	background-size: 500px 500px;
 	background-blend-mode: overlay;
-	color: #fff;
 	font-size: 14px;
 	line-height: 1.3;
 }
@@ -148,11 +147,6 @@
 	font-size: 20px;
 	font-weight: 400;
 	line-height: 1.4;
-	color: #fff;
-}
-
-.welcome-panel a {
-	color: #fff;
 }
 
 .welcome-panel p {
@@ -160,6 +154,27 @@
 	line-height: inherit;
 }
 
+.welcome-panel-header {
+	color: #fff;
+}
+
+.welcome-panel-header a {
+	color: #fff;
+}
+
+.welcome-panel-header a:focus,
+.welcome-panel-header a:hover {
+	color: #f5e6ab;
+	text-decoration: none;
+}
+
+.welcome-panel-header a:focus,
+.welcome-panel .welcome-panel-close:focus {
+	outline-color: currentColor;
+	outline-offset: 1px;
+	box-shadow: none;
+}
+
 .welcome-panel-header p {
 	margin: 0.5em 0 0;
 	font-size: 20px;
@@ -186,6 +201,10 @@
 	color: #fff;
 }
 
+.welcome-panel .welcome-panel-close {
+	color: #fff;
+}
+
 .welcome-panel .welcome-panel-close:hover,
 .welcome-panel .welcome-panel-close:focus,
 .welcome-panel .welcome-panel-close:hover::before,
@@ -230,13 +249,13 @@
 	grid-template-columns: repeat(3, 1fr);
 	gap: 32px;
 	align-self: flex-end;
-	background: #3858e9;
+	background: #fff;
 }
 
 [class*="welcome-panel-icon"] {
 	height: 60px;
 	width: 60px;
-	background-color: #1d35b4;
+	background-color: #1d2327;
 	background-position: center;
 	background-size: 24px 24px;
 	background-repeat: no-repeat;

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.0-alpha-52558';
+$wp_version = '6.0-alpha-52562';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.