From 1952afd903c3c3d9c3ea9853b95807d6e3e7df0f Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Wed, 3 Jul 2024 18:12:34 -0400 Subject: [PATCH 1/9] add specifity to sidebar styles --- client/my-sites/sidebar/style.scss | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/client/my-sites/sidebar/style.scss b/client/my-sites/sidebar/style.scss index 3b969b3e1166c..f1bf63aab065b 100644 --- a/client/my-sites/sidebar/style.scss +++ b/client/my-sites/sidebar/style.scss @@ -224,15 +224,19 @@ $font-size: rem(14px); &:hover, &:focus { - background-color: var(--color-sidebar-menu-hover-background); - color: var(--color-sidebar-menu-hover-text); + background-color: var(--color-sidebar-submenu-hover-background); + color: var(--color-sidebar-submenu-hover-text); } } .selected .sidebar__menu-link { - background-color: var(--color-sidebar-menu-selected-background); - color: var(--color-sidebar-menu-selected-text); + background-color: var(--color-sidebar-submenu-selected-background); + color: var(--color-sidebar-submenu-selected-text); font-weight: 600; + + &:hover { + color: var(--color-sidebar-submenu-hover-text); + } } .sidebar__menu-link-text { @@ -315,6 +319,7 @@ $font-size: rem(14px); .sidebar__menu.sidebar__menu--selected { .sidebar__heading { background: var(--color-sidebar-menu-hover-background); + color: var(--color-sidebar-menu-selected-text); &::after { display: block; @@ -866,12 +871,18 @@ $font-size: rem(14px); .collapse-sidebar__toggle { .sidebar__menu-link { cursor: pointer; - color: var(--color-sidebar-text-alternative); + color: var(--color-sidebar-text); font-size: rem(13px); &:hover, &:focus { + color: var(--color-sidebar-submenu-hover-text); background-color: transparent; + box-shadow: none; + + .sidebar__menu-icon { + color: var(--color-sidebar-submenu-hover-text); + } } } From f4a70abd12d37f8a4db8b45622a6d1293fdf39e3 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Wed, 3 Jul 2024 20:45:18 -0400 Subject: [PATCH 2/9] fix expandable and selected background color --- client/my-sites/sidebar/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/my-sites/sidebar/style.scss b/client/my-sites/sidebar/style.scss index f1bf63aab065b..2b54e06a9918c 100644 --- a/client/my-sites/sidebar/style.scss +++ b/client/my-sites/sidebar/style.scss @@ -318,7 +318,7 @@ $font-size: rem(14px); // Is toggled open .sidebar__menu.sidebar__menu--selected { .sidebar__heading { - background: var(--color-sidebar-menu-hover-background); + background: var(--color-sidebar-menu-selected-background); color: var(--color-sidebar-menu-selected-text); &::after { From d35b588f9a5c40810640792b37c2956a0e2f39b1 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Wed, 3 Jul 2024 20:50:46 -0400 Subject: [PATCH 3/9] add variable to target the "collapse menu" link --- client/my-sites/sidebar/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/my-sites/sidebar/style.scss b/client/my-sites/sidebar/style.scss index 2b54e06a9918c..1a05c5199c43d 100644 --- a/client/my-sites/sidebar/style.scss +++ b/client/my-sites/sidebar/style.scss @@ -871,7 +871,7 @@ $font-size: rem(14px); .collapse-sidebar__toggle { .sidebar__menu-link { cursor: pointer; - color: var(--color-sidebar-text); + color: var(--color-collapse-menu-text); font-size: rem(13px); &:hover, From c28810dafaad78c9a7c67253c5d94e96ec227d1b Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Wed, 3 Jul 2024 21:34:04 -0400 Subject: [PATCH 4/9] add var for submenu selected hover color --- client/my-sites/sidebar/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/my-sites/sidebar/style.scss b/client/my-sites/sidebar/style.scss index 1a05c5199c43d..8a08eacc613cb 100644 --- a/client/my-sites/sidebar/style.scss +++ b/client/my-sites/sidebar/style.scss @@ -235,7 +235,7 @@ $font-size: rem(14px); font-weight: 600; &:hover { - color: var(--color-sidebar-submenu-hover-text); + color: var(--color-sidebar-submenu-selected-hover-text); } } From 678438feed5fa5a8bb93f66737335ea831987b4f Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Wed, 3 Jul 2024 23:43:12 -0400 Subject: [PATCH 5/9] add navredesign submenu selected hover variable --- client/my-sites/sidebar/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/client/my-sites/sidebar/style.scss b/client/my-sites/sidebar/style.scss index 8a08eacc613cb..26c39f21666b3 100644 --- a/client/my-sites/sidebar/style.scss +++ b/client/my-sites/sidebar/style.scss @@ -638,6 +638,11 @@ $font-size: rem(14px); background-color: revert; color: var(--color-navredesign-sidebar-submenu-selected-text); font-weight: 600; + + &:hover, + &:focus { + color: var(--color-navredesign-sidebar-submenu-selected-hover-text); + } } .sidebar__menu-link { color: var(--color-navredesign-sidebar-submenu-text); From cf545a2ce921aece2adbb9eeb3f83865f7ce5321 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 4 Jul 2024 00:26:23 -0400 Subject: [PATCH 6/9] fix "collapse menu", nav redesign and regular sidebar submenu selected colors --- .../src/shared/color-schemes/_sakura.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss index b38a6c868408b..3eb7d9f91bab7 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss @@ -125,6 +125,14 @@ --color-sidebar-submenu-text: var(--studio-pink-0); --color-sidebar-submenu-hover-text: var(--studio-blue-20); --color-sidebar-submenu-selected-text: var(--studio-pink-0); + --color-sidebar-submenu-selected-hover-text: var(--studio-pink-0); + + /* Sidebar Submenu - Nav Redesign */ + --color-navredesign-sidebar-submenu-selected-text: var(--studio-pink-0); + --color-navredesign-sidebar-submenu-selected-hover-text: var(--studio-pink-0); + + /* Collapse Menu Button Fix */ + --color-collapse-menu-text: var(--color-sidebar-text-alternative); /* Command Palette Items */ --wp-admin-theme-color: var(--studio-blue-50); From 5cec36f38a7973f67f5a89de6bf0920ccc34e5ef Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 4 Jul 2024 00:46:35 -0400 Subject: [PATCH 7/9] fix submenu text color --- .../src/shared/color-schemes/_sakura.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss index 3eb7d9f91bab7..74f4f24c1ca20 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss @@ -120,19 +120,21 @@ --color-sidebar-menu-hover-background-rgb: var(--studio-pink-10-rgb); --color-sidebar-menu-hover-text: var(--studio-pink-90); + /* Sidebar Submenu - Nav Unification */ --color-sidebar-submenu-background: var(--studio-pink-90); - --color-sidebar-submenu-text: var(--studio-pink-0); + --color-sidebar-submenu-text: #f5e9ed; /* Direct from wp-admin */ --color-sidebar-submenu-hover-text: var(--studio-blue-20); - --color-sidebar-submenu-selected-text: var(--studio-pink-0); - --color-sidebar-submenu-selected-hover-text: var(--studio-pink-0); + --color-sidebar-submenu-selected-text: var(--color-sidebar-submenu-text); + --color-sidebar-submenu-selected-hover-text: var(--color-sidebar-submenu-text); /* Sidebar Submenu - Nav Redesign */ - --color-navredesign-sidebar-submenu-selected-text: var(--studio-pink-0); - --color-navredesign-sidebar-submenu-selected-hover-text: var(--studio-pink-0); + --color-navredesign-sidebar-submenu-text: var(--color-sidebar-submenu-text); + --color-navredesign-sidebar-submenu-selected-text: var(--color-sidebar-submenu-text); + --color-navredesign-sidebar-submenu-selected-hover-text: var(--color-sidebar-submenu-text); /* Collapse Menu Button Fix */ - --color-collapse-menu-text: var(--color-sidebar-text-alternative); + --color-collapse-menu-text: #8c1749; /* Direct from wp-admin */ /* Command Palette Items */ --wp-admin-theme-color: var(--studio-blue-50); From 5b2146821775dcec29e34fed433e2f4aac6d2ff7 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Tue, 9 Jul 2024 08:13:04 -0400 Subject: [PATCH 8/9] edit code comment --- .../calypso-color-schemes/src/shared/color-schemes/_sakura.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss index 74f4f24c1ca20..8da48d4c78ef1 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss @@ -133,7 +133,7 @@ --color-navredesign-sidebar-submenu-selected-text: var(--color-sidebar-submenu-text); --color-navredesign-sidebar-submenu-selected-hover-text: var(--color-sidebar-submenu-text); - /* Collapse Menu Button Fix */ + /* Collapse Menu Button */ --color-collapse-menu-text: #8c1749; /* Direct from wp-admin */ /* Command Palette Items */ From 934c1dfc11a7ed1f84023f45ea101dda0e010c3e Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Tue, 9 Jul 2024 10:54:33 -0400 Subject: [PATCH 9/9] remove empty line --- .../calypso-color-schemes/src/shared/color-schemes/_sakura.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss index 8da48d4c78ef1..0f0472932800f 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss @@ -120,7 +120,6 @@ --color-sidebar-menu-hover-background-rgb: var(--studio-pink-10-rgb); --color-sidebar-menu-hover-text: var(--studio-pink-90); - /* Sidebar Submenu - Nav Unification */ --color-sidebar-submenu-background: var(--studio-pink-90); --color-sidebar-submenu-text: #f5e9ed; /* Direct from wp-admin */