CR2023: Update colors for menus in side panel

Bug: 1399971
Change-Id: I2e022554c984d0c9f6f0467fe620493f3db150de
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4617052
Reviewed-by: Thomas Lukaszewicz <tluk@chromium.org>
Reviewed-by: Emily Shack <emshack@chromium.org>
Code-Coverage: Findit <findit-for-me@appspot.gserviceaccount.com>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1158563}

chrome/browser/resources/side_panel/bookmarks/power_bookmarks_context_menu.html

@@ -1,4 +1,4 @@
-<style include="cr-icons cr-hidden-style">
+<style include="cr-icons cr-hidden-style sp-shared-style">
   hr {
     border: none;
     border-top: var(--cr-hairline);

chrome/browser/resources/side_panel/bookmarks/power_bookmarks_context_menu.ts

@@ -4,6 +4,7 @@
 
 import '../strings.m.js';
 import './icons.html.js';
+import '//bookmarks-side-panel.top-chrome/shared/sp_shared_style.css.js';
 import '//resources/cr_elements/cr_action_menu/cr_action_menu.js';
 import '//resources/cr_elements/cr_icon_button/cr_icon_button.js';
 import '//resources/cr_elements/icons.html.js';

chrome/browser/resources/side_panel/shared/sp_shared_style.css

@@ -141,3 +141,13 @@
   border-radius: 12px;
   box-shadow: var(--cr-elevation-3);
 }
+
+:host-context([chrome-refresh-2023]) cr-action-menu {
+  --cr-hairline: 1px solid var(--color-side-panel-menu-divider);
+  --cr-action-menu-disabled-item-color: var(--color-side-panel-menu-disabled);
+  --cr-action-menu-disabled-item-opacity: 1;
+  --cr-menu-background-color: var(--color-side-panel-menu-background);
+  --cr-menu-background-focus-color: var(--cr-hover-background-color);
+  --cr-menu-shadow: var(--cr-elevation-2);
+  --cr-primary-text-color: var(--color-side-panel-menu-foreground);
+}

chrome/browser/ui/color/chrome_color_id.h

@@ -389,6 +389,11 @@
   E_CPONLY(kColorSidePanelFilterChipIconSelected) \
   E_CPONLY(kColorSidePanelFilterChipBackgroundHover) \
   E_CPONLY(kColorSidePanelFilterChipBackgroundSelected) \
+  E_CPONLY(kColorSidePanelMenuBackground) \
+  E_CPONLY(kColorSidePanelMenuDisabled) \
+  E_CPONLY(kColorSidePanelMenuDivider) \
+  E_CPONLY(kColorSidePanelMenuForeground) \
+  E_CPONLY(kColorSidePanelMenuIcon) \
   E_CPONLY(kColorSidePanelScrollbarThumb) \
   E_CPONLY(kColorSidePanelTextfieldBorder) \
   /* Status bubble colors. */ \

chrome/browser/ui/color/material_side_panel_color_mixer.cc

@@ -28,6 +28,13 @@ void AddMaterialSidePanelColorMixer(ui::ColorProvider* provider,
   mixer[kColorSidePanelDialogSecondaryForeground] = {
       ui::kColorSysOnSurfaceSubtle};
 
+  /* Menus within the side panel. */
+  mixer[kColorSidePanelMenuBackground] = {ui::kColorSysSurface};
+  mixer[kColorSidePanelMenuDisabled] = {ui::kColorSysStateDisabled};
+  mixer[kColorSidePanelMenuDivider] = {ui::kColorSysDivider};
+  mixer[kColorSidePanelMenuForeground] = {ui::kColorSysOnSurface};
+  mixer[kColorSidePanelMenuIcon] = {ui::kColorSysOnSurfaceSubtle};
+
   mixer[kColorSidePanelBadgeBackground] = {ui::kColorSysNeutralContainer};
   mixer[kColorSidePanelBadgeBackgroundUpdated] = {
       ui::kColorSysTertiaryContainer};

ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html

@@ -44,6 +44,8 @@
       }
 
       :host ::slotted(.dropdown-item[disabled]) {
+        color: var(--cr-action-menu-disabled-item-color,
+            var(--cr-primary-text-color));
         opacity: var(--cr-action-menu-disabled-item-opacity, 0.65);
       }