Changeset 52562

Timestamp:

01/11/2022 06:25:38 PM (3 years ago)

Author:

ryelle

Message:

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.

Location:

trunk/src/wp-admin/css

Files:

• colors/_admin.scss (modified) (1 diff)
• colors/_variables.scss (modified) (1 diff)
• colors/blue/colors.scss (modified) (1 diff)
• colors/coffee/colors.scss (modified) (1 diff)
• colors/ectoplasm/colors.scss (modified) (1 diff)
• colors/light/colors.scss (modified) (1 diff)
• colors/midnight/colors.scss (modified) (1 diff)
• colors/modern/colors.scss (modified) (1 diff)
• colors/ocean/colors.scss (modified) (1 diff)
• colors/sunrise/colors.scss (modified) (1 diff)
• dashboard.css (modified) (6 diffs)

trunk/src/wp-admin/css/colors/_admin.scss

@@ -782 +782 @@
     }
 }
+
+/* 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;
+    }
+}

trunk/src/wp-admin/css/colors/_variables.scss

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

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

@@ +1 @@
+$scheme-name: "blue";
 $base-color: #52accc;
 $icon-color: #e5f8ff;

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

@@ +1 @@
+$scheme-name: "coffee";
 $base-color: #59524c;
 $highlight-color: #c7a589;

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

@@ +1 @@
+$scheme-name: "ectoplasm";
 $base-color: #523f6d;
 $icon-color: #ece6f6;

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

@@ +1 @@
+$scheme-name: "light";
 $base-color: #e5e5e5;
 $icon-color: #999;

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

@@ +1 @@
+$scheme-name: "midnight";
 $base-color: #363b3f;
 $highlight-color: #e14d43;

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

@@ +1 @@
+$scheme-name: "modern";
 $base-color: #1e1e1e;
 $highlight-color: #3858e9;

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

@@ +1 @@
+$scheme-name: "ocean";
 $base-color: #738e96;
 $icon-color: #f2fcff;

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

@@ +1 @@
+$scheme-name: "sunrise";
 $base-color: #cf4944;
 $highlight-color: #dd823b;

trunk/src/wp-admin/css/dashboard.css

@@ -116 +116 @@
     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 +148 @@
     font-weight: 400;
     line-height: 1.4;
-    color: #fff;
-}
-
-.welcome-panel a {
-    color: #fff;
 }
 
@@ -159 +153 @@
     font-size: inherit;
     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;
 }
 
@@ -184 +199 @@
     content: '\f335';
     font-size: 24px;
+    color: #fff;
+}
+
+.welcome-panel .welcome-panel-close {
     color: #fff;
 }
@@ -231 +250 @@
     gap: 32px;
     align-self: flex-end;
-    background: #3858e9;
+    background: #fff;
 }
 
@@ -237 +256 @@
     height: 60px;
     width: 60px;
-    background-color: #1d35b4;
+    background-color: #1d2327;
     background-position: center;
     background-size: 24px 24px;