Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Override Modern color scheme's highlight color to Blueberry 2 #39748

Closed
wants to merge 3 commits into from
Closed

Override Modern color scheme's highlight color to Blueberry 2 #39748

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9933c32
Override Modern color scheme's highlight color to Blueberry 2
fushar Oct 11, 2024
4e182f4
changelog
fushar Oct 11, 2024
6f0be8d
Remove important
fushar Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/packages/masterbar/changelog/update-modern-scheme
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Override Modern color scheme's highlight color to Blueberry 2
28 changes: 28 additions & 0 deletions projects/packages/masterbar/src/admin-color-schemes/class-admin-color-schemes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ public function __construct() {
if ( ( new Host() )->is_wpcom_platform() ) { // Simple and Atomic sites.
add_filter( 'css_do_concat', array( $this, 'disable_css_concat_for_color_schemes' ), 10, 2 );
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_color_scheme_for_sidebar_notice' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_color_scheme_overrides' ) );
}
}

Expand Down Expand Up @@ -157,6 +158,18 @@ public function register_admin_color_schemes() {
)
);

wp_admin_css_color(
'modern',
__( 'Modern', 'jetpack-masterbar' ),
admin_url( 'css/colors/modern/colors.css' ),
array( '#1e1e1e', '#3858e9', '#7b90ff' ),
array(
'base' => '#f3f1f1',
'focus' => '#fff',
'current' => '#fff',
)
);

wp_admin_css_color(
'nightfall',
__( 'Nightfall', 'jetpack-masterbar' ),
Expand Down Expand Up @@ -221,6 +234,21 @@ public function enqueue_color_scheme_for_sidebar_notice() {
}
}

/**
* Enqueues dotcom-specific color scheme overrides.
*/
public function enqueue_color_scheme_overrides() {
$color_scheme = get_user_option( 'admin_color' );
if ( $color_scheme === 'modern' ) {
wp_enqueue_style(
'jetpack-core-color-schemes-overrides-modern',
$this->get_admin_color_scheme_url( $color_scheme ),
array(),
Main::PACKAGE_VERSION
);
}
}

/**
* Currently, the selected color scheme CSS (with id = "colors") is concatenated (by Jetpack Boost / Page Optimize),
* and is output before the default color scheme CSS, making it lose in specificity.
Expand Down
95 changes: 95 additions & 0 deletions projects/packages/masterbar/src/admin-color-schemes/colors/modern/colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
$menu-submenu-focus-text: #7b90ff;

/* Admin Menu: submenu */

#adminmenu .wp-submenu a,
#adminmenu .wp-has-current-submenu .wp-submenu a,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
&:focus, &:hover {
color: $menu-submenu-focus-text;
}
}


/* Admin Menu: current */

#adminmenu .wp-submenu li.current a,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
&:hover, &:focus {
color: $menu-submenu-focus-text;
}
}


/* Admin Menu: collapse button */

#collapse-button:hover,
#collapse-button:focus {
color: $menu-submenu-focus-text;
}


/* Admin Bar */

#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
color: $menu-submenu-focus-text;
}

#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
color: $menu-submenu-focus-text;
}

#wpadminbar:not(.mobile) li:hover .ab-icon:before,
#wpadminbar:not(.mobile) li:hover .ab-item:before,
#wpadminbar:not(.mobile) li:hover .ab-item:after,
#wpadminbar:not(.mobile) li:hover #adminbarsearch:before {
color: $menu-submenu-focus-text;
}


/* Admin Bar: submenu */

#wpadminbar .quicklinks .menupop ul li a:hover,
#wpadminbar .quicklinks .menupop ul li a:focus,
#wpadminbar .quicklinks .menupop ul li a:hover strong,
#wpadminbar .quicklinks .menupop ul li a:focus strong,
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
#wpadminbar .quicklinks .menupop.hover ul li a:hover,
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
#wpadminbar li:hover .ab-icon:before,
#wpadminbar li:hover .ab-item:before,
#wpadminbar li a:focus .ab-icon:before,
#wpadminbar li .ab-item:focus:before,
#wpadminbar li .ab-item:focus .ab-icon:before,
#wpadminbar li.hover .ab-icon:before,
#wpadminbar li.hover .ab-item:before,
#wpadminbar li:hover #adminbarsearch:before,
#wpadminbar li #adminbarsearch.adminbar-focused:before {
color: $menu-submenu-focus-text;
}

#wpadminbar .quicklinks li a:hover .blavatar,
#wpadminbar .quicklinks li a:focus .blavatar,
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
#wpadminbar .menupop .menupop > .ab-item:hover:before,
#wpadminbar.mobile .quicklinks .ab-icon:before,
#wpadminbar.mobile .quicklinks .ab-item:before {
color: $menu-submenu-focus-text;
}


/* Admin Bar: my account */

#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
color: $menu-submenu-focus-text;
}
Loading