diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 449b0a8e27..cb241905a0 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/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; + } +} diff --git a/src/wp-admin/css/colors/_variables.scss b/src/wp-admin/css/colors/_variables.scss index 8287a23202..21621342a4 100644 --- a/src/wp-admin/css/colors/_variables.scss +++ b/src/wp-admin/css/colors/_variables.scss @@ -1,5 +1,6 @@ // assign default value to all undefined variables +$scheme-name: "default" !default; // core variables diff --git a/src/wp-admin/css/colors/blue/colors.scss b/src/wp-admin/css/colors/blue/colors.scss index b254d73a8f..f44e540adf 100644 --- a/src/wp-admin/css/colors/blue/colors.scss +++ b/src/wp-admin/css/colors/blue/colors.scss @@ -1,3 +1,4 @@ +$scheme-name: "blue"; $base-color: #52accc; $icon-color: #e5f8ff; $highlight-color: #096484; diff --git a/src/wp-admin/css/colors/coffee/colors.scss b/src/wp-admin/css/colors/coffee/colors.scss index 64de62e491..a52491d57d 100644 --- a/src/wp-admin/css/colors/coffee/colors.scss +++ b/src/wp-admin/css/colors/coffee/colors.scss @@ -1,3 +1,4 @@ +$scheme-name: "coffee"; $base-color: #59524c; $highlight-color: #c7a589; $notification-color: #9ea476; diff --git a/src/wp-admin/css/colors/ectoplasm/colors.scss b/src/wp-admin/css/colors/ectoplasm/colors.scss index 8d14570770..230ff9efb4 100644 --- a/src/wp-admin/css/colors/ectoplasm/colors.scss +++ b/src/wp-admin/css/colors/ectoplasm/colors.scss @@ -1,3 +1,4 @@ +$scheme-name: "ectoplasm"; $base-color: #523f6d; $icon-color: #ece6f6; $highlight-color: #a3b745; diff --git a/src/wp-admin/css/colors/light/colors.scss b/src/wp-admin/css/colors/light/colors.scss index 5a75889a55..817bd34549 100644 --- a/src/wp-admin/css/colors/light/colors.scss +++ b/src/wp-admin/css/colors/light/colors.scss @@ -1,3 +1,4 @@ +$scheme-name: "light"; $base-color: #e5e5e5; $icon-color: #999; $text-color: #333; diff --git a/src/wp-admin/css/colors/midnight/colors.scss b/src/wp-admin/css/colors/midnight/colors.scss index 591232b708..8570c9526e 100644 --- a/src/wp-admin/css/colors/midnight/colors.scss +++ b/src/wp-admin/css/colors/midnight/colors.scss @@ -1,3 +1,4 @@ +$scheme-name: "midnight"; $base-color: #363b3f; $highlight-color: #e14d43; $notification-color: #69a8bb; diff --git a/src/wp-admin/css/colors/modern/colors.scss b/src/wp-admin/css/colors/modern/colors.scss index dc32bf0e4d..7b7918174c 100644 --- a/src/wp-admin/css/colors/modern/colors.scss +++ b/src/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; diff --git a/src/wp-admin/css/colors/ocean/colors.scss b/src/wp-admin/css/colors/ocean/colors.scss index 807d98dccf..027c27d470 100644 --- a/src/wp-admin/css/colors/ocean/colors.scss +++ b/src/wp-admin/css/colors/ocean/colors.scss @@ -1,3 +1,4 @@ +$scheme-name: "ocean"; $base-color: #738e96; $icon-color: #f2fcff; $highlight-color: #9ebaa0; diff --git a/src/wp-admin/css/colors/sunrise/colors.scss b/src/wp-admin/css/colors/sunrise/colors.scss index 5dd8d82fc1..75d74d8670 100644 --- a/src/wp-admin/css/colors/sunrise/colors.scss +++ b/src/wp-admin/css/colors/sunrise/colors.scss @@ -1,3 +1,4 @@ +$scheme-name: "sunrise"; $base-color: #cf4944; $highlight-color: #dd823b; $notification-color: #ccaf0b; diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index 4014b7ca75..dcc1ac0144 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/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;