Bug Description

The Help menu on the service setup screen was verified against Figma and matches the expected design for icon color, spacing, and padding.

However, on the Site Kit plugin/dashboard screens, the Help menu icons appear darker/black compared to the Figma design and the service setup screen, where the icons use the expected grey color.

Expected result:
Help menu icons on the plugin screens should match the Figma/service setup screen icon color.

Actual result:
Help menu icons on the plugin/dashboard screens appear darker/black and do not match the Figma/service setup screen icon color.

Reference:
In Figma, the icon color appears to be #6C726E, while the plugin screen icons appear darker.

Steps to reproduce

1. Enable setupFlowRefresh feature flag.
2. Setup Site kit.
3. Notice Help menu icons color on Main dashboard.

Screenshots

Additional Context

• PHP Version:
• OS: [e.g. iOS]
• Browser: [e.g. chrome, safari]
• Plugin Version: [e.g. 22]
• Device: [e.g. iPhone6]

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The icons in the help menu should use the surfaces/on-surface-variant colour token, matching the Figma design.

Implementation Brief

• In assets/sass/components/global/_googlesitekit-help-menu.scss
  • Add color: $c-surfaces-on-surface-variant to .googlesitekit-icon-wrapper block inside .googlesitekit-help-menu .googlesitekit-cta-link.

Test Coverage

• Attach a scenario to HeaderWithHelpMenuSFR in assets/js/components/Header.stories.js with clickSelector: '.googlesitekit-help-menu__button'. Mirror VRTStory in assets/js/googlesitekit/components-gm2/Select.stories.js.

QA Brief

• Enable setupFlowRefresh feature flag.
• Setup Site kit.
• Notice Help menu icons color is #6C726E i.e. rgb(108, 114, 110).

Changelog entry

• Update icon color in help menu.