Implement GM2+ styles.

Feature Description

As we wait for the new GM3 libraries to be out, we can start implementing some GM3 styles within the plugin which will be an intermediary step known as GM2+. Those style changes are:

• Basic colour changes
• Typography, e.g Google Sans and font size adjustments.
• Rounded corners on some UI surfaces.
• Removal of drop shadow on some UI surfaces.
• Buttons to look closer to GM3 (more rounded corners).

---

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

Acceptance criteria

• Current colours should be replaced by the closest ones found in the Figma designs. The following colour mapping should be used.
• Roboto and Google Sans fonts should no longer be used and be replaced by Google Sans Text and Google Sans Display.
• Font sizes and line heights should be adjusted to use the closest possible values from the updated type scale.
• Border radius should be set to either 8px, 16px or 24px for appropriate UI surfaces. For e.g
  • dropdown menus and small UI elements such as tooltips should have a 8px border radius.
  • widgets and “sections” within pages, for e.g sections within the admin settings, should their border radiuses set to 16px.
• Box shadows should be removed from all UI elements.
• Buttons should be updated to match the designs in Figma as close as possible.
  • Buttons should not be all caps.
• Links should be #108080
• Table headers should be 16px and 14px if the widget containing the table has a title.
• Navigation pills should have a font size of 16px (disregard the designs in Figma where the font size is 12px).
• Disregard the rounded bottom corners for the header in the designs. https://www.figma.com/file/f1I9Mc0ITE6Uk0qiTRbggK/GM2%2B?node-id=601%3A775

References:

• https://www.figma.com/file/f1I9Mc0ITE6Uk0qiTRbggK/GM2%2B?node-id=601%3A746
• https://www.figma.com/file/ZL8qlbUyR9lmBaF95t0xpq/sitekit-design-system?node-id=301%3A209

Implementation Brief

Note: When creating a pull request for this, please do it as a draft PR, so that it is not accidentally merged. This PR should not be merged as usual when code review is complete, as it will require an extensive design review together with the UX team, which we will schedule once the PR is ready to review.

• Using includes/Core/Assets/Assets.php,
  • Update get_fonts_src to load Google Sans Text and Google Sans Display instead of Roboto and Google Sans.
  • Font weights should be as follows:
    • Google Sans Text: 400 and 500
    • Google Sans Display: 400, 500 and 700
• Using assets/sass/config/_variables.scss,
  • replace the colours by the mappings found here.
  • update $f-primary to "Google Sans Text", "Helvetica Neue", Helvetica, Arial, sans-serif
  • update $f-secondary to "Google Sans Display", "Helvetica Neue", Helvetica, Arial, sans-serif
  • update $typography to use the closest values from type scale.
  • add new variables for border radiuses, which should be either 16px or 24px.
• Scan *.scss files to look for font-size and line-height declarations and update them to use the closest values from the type scale.
• Remove the shadow mixin from assets/sass/config/_mixins.scss and usage across the codebase or any box-shadow declarations.
• Using assets/sass/widgets/_widgets.scss, set the border-radius to 24px for the .googlesitekit-widget class.
• Drop down menus should be styled as per the designs in Figma, specifically they have a background color now that there is no more box shadow.
• Buttons should be styled as per the designs in Figma specifically,
  • more rounded corners, with the border radius set to 100px.
  • capitalize the button label instead of having it in all caps.
  • colors should remain unchanged for now pending UX review.

Test Coverage

• No new tests to be added.
• VRT to be updated.

QA Brief

• Ensure plugin has been styled as per the designs in Figma.
• We don’t have designs for all the screens, for e.g user input, editing a module settings. Those screens have been styled with the new colors and fonts and has been reviewed by UX.

Changelog entry

• Update the plugin styling in line with Google Material 3.

[eclarke1]

@felixarntz any chance you could get to this CR today please? Might also be worth having 2 sets of eyes on this @aaemnnosttv as this is a big visual change. We are aiming to get this into release 1.78.0. I have also chatted to @asvinb and we are intending to update the AC and QAB once the CR has been approved so it’s clear to QA exactly what has changed (given there’s no true reference point to check against) cc @wpdarren @mohitwp

[mohitwp]

QA Update ✅

• Verified design on latest versions of Chrome, Firefox , Safari and Edge browser.
• Verified responsive design on i-Phone 13, I-pad, Mac Safari and android mobile using browserstack.
• Verified site in zero data state for both gathering and zero data state.
• Verified site when feature flag ‘user input’ is active.
• Verified site when ‘Dashboard sharing’ feature flag is active.
• Verified site with Idea hub enabled.
• Verified CTA’s.
• For comparison, I used reference site shared in slack because Figma designs are out of date and missing many screens.

Note : we require changes in IdeaHub CTA images.

cc @wpdarren