From 57aef230c221b772e4294a5f1ada2e447179645f Mon Sep 17 00:00:00 2001 From: Ashar Fuadi Date: Fri, 13 Sep 2024 08:12:14 +0700 Subject: [PATCH] Admin bar: align colors with Calypso's (#39314) --- .../packages/jetpack-mu-wpcom/changelog/admin-bar-colors | 4 ++++ .../src/features/wpcom-admin-bar/wpcom-admin-bar.php | 4 ++-- projects/packages/masterbar/changelog/admin-bar-colors | 4 ++++ .../masterbar/src/admin-color-schemes/colors/_admin.scss | 4 ++-- .../admin-color-schemes/colors/aquatic/_variables.scss | 7 ++++--- .../colors/classic-blue/_variables.scss | 7 ++++--- .../colors/classic-bright/_variables.scss | 9 +++++---- .../colors/classic-dark/_variables.scss | 3 ++- .../admin-color-schemes/colors/contrast/_variables.scss | 5 +++-- .../admin-color-schemes/colors/nightfall/_variables.scss | 5 +++-- .../colors/powder-snow/_variables.scss | 9 +++++---- .../admin-color-schemes/colors/sakura/_variables.scss | 9 +++++---- .../src/admin-color-schemes/colors/sakura/colors.scss | 9 --------- .../admin-color-schemes/colors/sunset/_variables.scss | 8 ++++---- 14 files changed, 47 insertions(+), 40 deletions(-) create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/admin-bar-colors create mode 100644 projects/packages/masterbar/changelog/admin-bar-colors diff --git a/projects/packages/jetpack-mu-wpcom/changelog/admin-bar-colors b/projects/packages/jetpack-mu-wpcom/changelog/admin-bar-colors new file mode 100644 index 0000000000000..e33050dc1b635 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/admin-bar-colors @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Admin bar: align colors with Calypso's diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.php index 8b489f8f7b20a..b56d84423de22 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.php @@ -12,7 +12,7 @@ // The $icon-color variable for admin color schemes. // See: https://github.com/WordPress/wordpress-develop/blob/679cc0c4a261a77bd8fdb140cd9b0b2ff80ebf37/src/wp-admin/css/colors/_variables.scss#L9 -// Only the ones different from the "fresh" scheme are listed. +// Only Core schemes are listed here. Calypso schemes all use #ffffff. const WPCOM_ADMIN_ICON_COLORS = array( 'blue' => '#e5f8ff', 'coffee' => '#f3f2f1', @@ -82,7 +82,7 @@ function wpcom_enqueue_admin_bar_assets() { } $admin_color = is_admin() ? get_user_option( 'admin_color' ) : 'fresh'; - $admin_icon_color = WPCOM_ADMIN_ICON_COLORS[ $admin_color ] ?? WPCOM_ADMIN_ICON_COLORS['fresh']; + $admin_icon_color = WPCOM_ADMIN_ICON_COLORS[ $admin_color ] ?? '#ffffff'; // Force the icon colors to have desktop color even on mobile viewport. wp_add_inline_style( diff --git a/projects/packages/masterbar/changelog/admin-bar-colors b/projects/packages/masterbar/changelog/admin-bar-colors new file mode 100644 index 0000000000000..e33050dc1b635 --- /dev/null +++ b/projects/packages/masterbar/changelog/admin-bar-colors @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Admin bar: align colors with Calypso's diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/_admin.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/_admin.scss index 4c28825f6b528..49a100368a50f 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/_admin.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/_admin.scss @@ -393,14 +393,14 @@ ul#adminmenu > li.current > a.current:after { #wpadminbar a.ab-item, #wpadminbar > #wp-toolbar span.ab-label, #wpadminbar > #wp-toolbar span.noticon { - color: #f0f0f1; + color: #ffffff; } #wpadminbar .ab-icon, #wpadminbar .ab-icon:before, #wpadminbar .ab-item:before, #wpadminbar .ab-item:after { - color: #a7aaad; + color: #ffffff; } #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/_variables.scss index f528eb52248ca..ab5b62c45da71 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/_variables.scss @@ -15,15 +15,16 @@ $body-background: $studio-gray-0; // Calypso --color-surface-backdrop $menu-text: $studio-white; // Calypso --color-sidebar-text $menu-background: $studio-blue-60; // Calypso --color-sidebar-background $menu-highlight-text: $studio-white; // Calypso --color-sidebar-menu-hover-text -$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-icon: $studio-yellow-20; $menu-highlight-background: $studio-blue-50; // Calypso --color-sidebar-menu-hover-background $menu-current-text: $studio-blue-90; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; $menu-current-background: $studio-yellow-20; // Calypso --color-sidebar-menu-selected-background -$menu-submenu-text: $studio-white; // Calypso --color-sidebar-submenu-text -$menu-submenu-background: $studio-blue-80; // Calypso --color-sidebar-submenu-background +$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: $studio-blue-90; // Calypso --color-sidebar-submenu-background $menu-submenu-focus-text: $studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text $menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-text +$adminbar-avatar-frame: $studio-blue-80; // masterbar overrides $masterbar-background: $studio-blue-80; // Calypso --color-masterbar-background diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/_variables.scss index 7d9a7a55b8926..076a2ea97db55 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/_variables.scss @@ -15,15 +15,16 @@ $body-background: $studio-gray-0; // Calypso --color-surface-backdrop $menu-text: $studio-gray-80; // Calypso --color-sidebar-text $menu-background: $studio-gray-5; // Calypso --color-sidebar-background $menu-highlight-text: $studio-blue-50; // Calypso --color-sidebar-menu-hover-text -$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-icon: $studio-orange-30; $menu-highlight-background: $studio-white; // Calypso --color-sidebar-menu-hover-background $menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; $menu-current-background: $studio-gray-60; // Calypso --color-sidebar-menu-selected-background -$menu-submenu-text: $studio-white; // Calypso --color-sidebar-submenu-text -$menu-submenu-background: $studio-blue-60; // Calypso --color-sidebar-submenu-background +$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: $studio-blue-70; // Calypso --color-sidebar-submenu-background $menu-submenu-focus-text: $studio-orange-30; // Calypso --color-sidebar-submenu-hover-text $menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-text +$adminbar-avatar-frame: $studio-blue-70; // masterbar overrides $masterbar-background: $studio-blue-60; // Calypso --color-masterbar-background diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/_variables.scss index 62f993e070734..828f7e8906b3d 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/_variables.scss @@ -15,15 +15,16 @@ $body-background: $studio-gray-0; // Calypso --color-surface-backdrop $menu-text: $studio-gray-80; // Calypso --color-sidebar-text $menu-background: $studio-white; // Calypso --color-sidebar-background $menu-highlight-text: $studio-gray-90; // Calypso --color-sidebar-menu-hover-text -$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-icon: $studio-pink-30; $menu-highlight-background: $studio-gray-5; // Calypso --color-sidebar-menu-hover-background $menu-current-text: $studio-blue-70; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; $menu-current-background: $studio-blue-5; // Calypso --color-sidebar-menu-selected-background -$menu-submenu-text: $studio-blue-70; // Calypso --color-sidebar-submenu-text -$menu-submenu-background: $studio-blue-0; // Calypso --color-sidebar-submenu-background -$menu-submenu-focus-text: $studio-pink-50; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: $studio-blue-70; // Calypso --color-sidebar-submenu-background +$menu-submenu-focus-text: $studio-pink-30; // Calypso --color-sidebar-submenu-hover-text $menu-submenu-current-text: $studio-pink-50; // Calypso --color-sidebar-submenu-selected-text +$adminbar-avatar-frame: $studio-blue-70; // masterbar overrides $masterbar-background: $studio-blue-60; // Calypso --color-masterbar-background diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/_variables.scss index e63ca79f99393..d2733a13ca1f2 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/_variables.scss @@ -21,9 +21,10 @@ $menu-current-text: #ffffff; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; $menu-current-background: #0073aa; // Calypso --color-sidebar-menu-selected-background $menu-submenu-text: #b4b9be; // Calypso --color-sidebar-submenu-text -$menu-submenu-background: #32373c; // Calypso --color-sidebar-submenu-background +$menu-submenu-background: #333; // Calypso --color-sidebar-submenu-background $menu-submenu-focus-text: #00b9eb; // Calypso --color-sidebar-submenu-hover-text $menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-selected-text +$adminbar-avatar-frame: #333; // masterbar overrides $masterbar-background: $base-color; // Calypso --color-masterbar-background diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/_variables.scss index c132a3c394cae..5e27c39476855 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/_variables.scss @@ -15,7 +15,7 @@ $body-background: $studio-white; // Calypso --color-surface-backdrop $menu-text: $studio-gray-90; // Calypso --color-sidebar-text $menu-background: $studio-white; // Calypso --color-sidebar-background $menu-highlight-text: $studio-white; // Calypso --color-sidebar-menu-hover-text -$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-icon: $studio-yellow-20; $menu-highlight-background: $studio-gray-60; // Calypso --color-sidebar-menu-hover-background $menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; @@ -24,10 +24,11 @@ $menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text $menu-submenu-background: $studio-gray-90; // Calypso --color-sidebar-submenu-background $menu-submenu-focus-text: $studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text $menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-selected-text +$adminbar-avatar-frame: $studio-gray-90; // masterbar overrides $masterbar-background: $base-color; // Calypso --color-masterbar-background -$masterbar-highlight-background: $studio-gray-80; // Calypso --color-masterbar-item-hover-background +$masterbar-highlight-background: $studio-gray-90; // Calypso --color-masterbar-item-hover-background $masterbar-active-background: $studio-gray-60; // Calypso --color-masterbar-item-active-background // nav unification overrides diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/_variables.scss index b29e6c4085420..3bc63a400f52c 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/_variables.scss @@ -15,15 +15,16 @@ $body-background: $studio-gray-0; // Calypso --color-surface-backdrop $menu-text: $studio-blue-5; // Calypso --color-sidebar-text $menu-background: $studio-blue-80; // Calypso --color-sidebar-background $menu-highlight-text: $studio-white; // Calypso --color-sidebar-menu-hover-text -$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-icon: $studio-blue-20; $menu-highlight-background: $studio-blue-70; // Calypso --color-sidebar-menu-hover-background $menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; $menu-current-background: $studio-blue-100; // Calypso --color-sidebar-menu-selected-background -$menu-submenu-text: $studio-white; // Calypso --color-sidebar-submenu-text +$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text $menu-submenu-background: $studio-blue-90; // Calypso --color-sidebar-submenu-background $menu-submenu-focus-text: $studio-blue-20; // Calypso --color-sidebar-submenu-hover-text $menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-text +$adminbar-avatar-frame: $studio-blue-100; // masterbar overrides $masterbar-background: $studio-blue-100; // Calypso --color-masterbar-background diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/_variables.scss index 1de98e7b49932..c244eac59b3aa 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/_variables.scss @@ -15,15 +15,16 @@ $body-background: $studio-gray-0; // Calypso --color-surface-backdrop $menu-text: $studio-gray-80; // Calypso --color-sidebar-text $menu-background: $studio-gray-5; // Calypso --color-sidebar-background $menu-highlight-text: $studio-blue-60; // Calypso --color-sidebar-menu-hover-text -$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-icon: $studio-blue-30; $menu-highlight-background: $studio-white; // Calypso --color-sidebar-menu-hover-background $menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; $menu-current-background: $studio-gray-60; // Calypso --color-sidebar-menu-selected-background -$menu-submenu-text: $studio-gray-80; // Calypso --color-sidebar-submenu-text -$menu-submenu-background: $studio-gray-10; // Calypso --color-sidebar-submenu-background -$menu-submenu-focus-text: $studio-blue-60; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: $studio-gray-80; // Calypso --color-sidebar-submenu-background +$menu-submenu-focus-text: $studio-blue-30; // Calypso --color-sidebar-submenu-hover-text $menu-submenu-current-text: $studio-gray-80; // Calypso --color-sidebar-submenu-selected-text +$adminbar-avatar-frame: $studio-gray-90; // masterbar overrides $masterbar-background: $studio-gray-100; // Calypso --color-masterbar-background diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/_variables.scss index 7af27084088eb..f1323ebc7d155 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/_variables.scss @@ -15,16 +15,17 @@ $body-background: $studio-gray-0; // Calypso --color-surface-backdrop $menu-text: $studio-pink-80; // Calypso --color-sidebar-text $menu-background: $studio-pink-5; // Calypso --color-sidebar-background $menu-highlight-text: $studio-pink-90; // Calypso --color-sidebar-menu-hover-text -$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-icon: $studio-blue-20; $menu-highlight-background: $studio-pink-10; // Calypso --color-sidebar-menu-hover-background $menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text -$menu-current-icon: $menu-current-text; +$menu-current-icon: $studio-blue-20; $menu-current-background: $studio-blue-50; // Calypso --color-sidebar-menu-selected-background -$menu-submenu-text: $studio-pink-0; // Calypso --color-sidebar-submenu-text -$menu-submenu-background: $studio-pink-90; // Calypso --color-sidebar-submenu-background +$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: $studio-celadon-80; // Calypso --color-sidebar-submenu-background $menu-submenu-background-alt: $studio-pink-70; // Calypso --color-sidebar-submenu-background-alt $menu-submenu-focus-text: $studio-blue-20; // Calypso --color-sidebar-submenu-hover-text $menu-submenu-current-text: $studio-pink-0; // Calypso --color-sidebar-submenu-selected-text +$adminbar-avatar-frame: $studio-celadon-80; // masterbar overrides $masterbar-background: $studio-celadon-70; // Calypso --color-masterbar-background diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/colors.scss index 2d914af1c749a..07136f2553c45 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/colors.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/colors.scss @@ -1,12 +1,3 @@ @import "variables"; @import "../admin"; @import "sidebar-notice"; - -#wpadminbar:not(.mobile) li:hover .ab-icon:before, -#wpadminbar:not(.mobile) li:hover .ab-item:before { - color: $menu-submenu-current-text; -} - -#wpadminbar #wp-admin-bar-user-info .display-name { - color: $menu-submenu-text; -} diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/_variables.scss index 03f7b325cfde6..e848f6ca96abd 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/_variables.scss @@ -15,15 +15,16 @@ $body-background: $studio-gray-0; // Calypso --color-surface-backdrop $menu-text: $studio-white; // Calypso --color-sidebar-text $menu-background: $studio-red-70; // Calypso --color-sidebar-background $menu-highlight-text: $studio-white; // Calypso --color-sidebar-menu-hover-text -$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-icon: $studio-yellow-20; $menu-highlight-background: $studio-red-80; // Calypso --color-sidebar-menu-hover-background $menu-current-text: $studio-yellow-80; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; $menu-current-background: $studio-yellow-20; // Calypso --color-sidebar-menu-selected-background -$menu-submenu-text: $studio-white; // Calypso --color-sidebar-submenu-text -$menu-submenu-background: $studio-red-60; // Calypso --color-sidebar-submenu-background +$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: $studio-red-90; // Calypso --color-sidebar-submenu-background $menu-submenu-focus-text: $studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text $menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-selected-text +$adminbar-avatar-frame: $studio-red-80; // masterbar overrides $masterbar-background: $studio-red-80; // Calypso --color-masterbar-background @@ -47,4 +48,3 @@ $menu-nudge-text-color: $studio-black; $menu-nudge-cta-background: $highlight-color; $menu-nudge-cta-color: $studio-white; $menu-nudge-cta-background-hover: $studio-orange-60; -