`Typography` components with `<hX>` tags color is being defined by WP Core styles

[benbowler]

Bug Description

First noted by @kelvinballoo as part of the QA, h1 and h2 titles have the wrong color in some cases.

Looking at this in more detail, after removing the googlesitekit-heading-X classes, the WP Core styles for headings take precedence:

eg. for the "Settings" heading on the main plugin settings page the color is being taken from the WP Core styles for h1 tags.

The expected behaviour for headings without a specific color override would be to take the default color defined in on the .googlesitekit-plugin class:

site-kit-wp/assets/sass/base/_defaults.scss

Line 28 in 4380912

color: $c-primary;

However the heading tag styles are higher specificity that this general class.

---

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

Acceptance criteria

• The plugin default styles should define a default font color for each heading tag h1, h2, h3, h4, h5, h6 with higher specificity than the WordPress heading styles based on the plugin design guidelines.
• Typography components which use these heading tags, which have no additional style overrides, should display with these default font colors in the dashboard.

Implementation Brief

• Update assets/sass/base/_defaults.scss:
  • Remove the previous definitions of h3 and h6 styles as these should all be handled by the typography styles now:

  • site-kit-wp/assets/sass/base/_defaults.scss

    Lines 48 to 53 in d14b485

    	h3,
    	h6 {
    	color: $c-surfaces-on-surface;
    	font-family: $f-secondary;
    	line-height: 1.16;
    	}

  • Add a css block for h1, h2, h3, h4, h5 and h6, setting only color: $c-primary; as all other styles are handled by the Typography component.

Test Coverage

• Some VRTs may need to be updated, no addition test coverage required.

QA Brief

• Verify that Settings heading in settings screens (as reported in the issue) has primary color (#161b18)
• Do a general smoke testing

Changelog entry

• Fix color issues for hX tags created by the Typography component.

[techanvil]

Hey @benbowler, thanks for creating this issue and drafting the AC.

As it stands the AC is a good summary, however, I think this simple summary masks the potential complexity of this issue.

At the time of writing, there are 58 instances of <Typography> in the codebase, and some of these are in reusable components e.g. LayoutHeader which implies a higher number of specific instances of the component which could be individually styled.

The AC for this issue suggests we'll need to audit all of these cases, reproducing the scenarios for showing the components and checking to see if the colour needs updating or is legitimately overridden. This seems like something that could be quite time consuming and it may be necessary to split it into multiple issues.

Rather than hitting that at the point of drafting the IB, it would be good to plan for it at the AC stage.

That is, unless there's a more efficient way of approaching this that that I haven't considered. WDYT?

[benbowler]

Hey @techanvil, I made the AC a little more technical to remove this openness as I think it doesn't have to be complex and require auditing override cases because these cases will already have the correct font color as an override has been defined. All we are about here are uses of the component which are not overridden which we expect to match our design guidelines but don't because of WordPress admin styles.

[techanvil]

Thanks @benbowler, that's a good, clarifying update. No need for the comprehensive audit, this LGTM!

AC ✅