Wp-calypso: Typography: Audit and replace font-weight: 300 with 400

[sixhours]

Should we audit and replace other usages?

@mmtr Please do! The more inconsistencies we can reduce, the better. :)

_Originally posted by @lcollette in https://github.com/Automattic/wp-calypso/pull/39569#issuecomment-589421427_

I'm creating an issue to track replacing 300 weight fonts across Calypso with 400 weight, which is more readable and looks better overall. Our typography documentation suggests we use 400 weight by default: https://wpcalypso.wordpress.com/devdocs/typography

Audit of Usage

39601:

• [x] client/assets/stylesheets/shared/mixins/_heading.scss (Also affects the following sections using the mixin:)
• [x] client/my-sites/domains/domain-search/style.scss (Found no instances of this in action)
• [x] client/my-sites/plugins/jetpack-plugins-setup/style.scss
• [x] client/my-sites/media-library/style.scss (Found no instances of this in action)
• [x] client/my-sites/stats/stats-module/style.scss
• [x] client/components/action-panel/style.scss
• [x] client/components/date-picker/style.scss
• [x] client/components/empty-content/style.scss
• [x] client/components/faq/style.scss
• [x] client/components/forms/form-section-heading/style.scss
• [x] client/components/gsuite/gsuite-price/style.scss (Found no instances of this in action)
• [x] client/components/post-schedule/style.scss
• [x] client/components/sidebar-navigation/style.scss (Found no instances of this in action)
• [x] client/components/web-preview/style.scss
• [x] client/devdocs/style.scss

39947 (edited by @nielslange):

• [x] client/me/account-close/closed.scss
• [x] client/me/account-close/confirm-dialog.scss
• [x] client/me/account-close/style.scss

40001 (edited by @nielslange):

• [x] client/my-sites/checkout/checkout-thank-you/style.scss

40532 (edited by @sixhours)

• [x] client/landing/domains/content-card/style.scss (Couldn't find this one)
• [x] client/layout/guided-tours/style.scss
• [x] client/layout/masterbar/style.scss
• [x] client/my-sites/activity/activity-log-confirm-dialog/style.scss (Couldn't find this one)
• [x] client/my-sites/activity/activity-log-switch/style.scss
• [x] client/my-sites/exporter/style.scss
• [x] client/my-sites/exporter/guided-transfer-card/style.scss

40579 (edited by @sixhours)

• [x] client/my-sites/feature-upsell/style.scss (Couldn't find this one)
• [x] client/my-sites/guided-transfer/style.scss (Couldn't find this one)
• [x] client/my-sites/invites/invite-accept-logged-in/style.scss
• [x] client/my-sites/invites/invite-form-header/style.scss
• [x] client/my-sites/marketing/style.scs
• [x] client/my-sites/marketing/connections/account-dialog-account.scss (Couldn't find this one)
• [x] client/my-sites/plans/current-plan/style.scss
• [x] client/my-sites/plans/current-plan/my-plan-card/style.scss
• [x] client/my-sites/site-settings/delete-site/style.scss
• [x] client/my-sites/stats/post-trends/style.scss (Couldn't find this one)
• [x] client/my-sites/stats/stats-module/style.scss (Couldn't find this one)

40657 (edited by @sixhours)

• [x] client/my-sites/themes/auto-loading-homepage-modal.scss
• [x] client/my-sites/themes/thanks-modal.scss
• [x] client/my-sites/themes/themes-site-selector-modal.scss
• [x] client/signup/site-mockup/style.scss (Could not find this in the wild)
• [x] client/signup/steps/creds-complete/style.scss (Does not appear to be an active signup step)
• [x] client/signup/steps/creds-confirm/style.scss (Does not appear to be an active signup step)
• [x] client/signup/steps/import-url-onboarding/style.scss (Does not appear to be an active signup step)
• [x] client/signup/steps/rewind-migrate/style.scss (Does not appear to be an active signup step)
• [x] client/jetpack-connect/style.scss (Could not find this one, but I suspect it exists)
• [x] client/jetpack-connect/jetpack-new-site/style.scss
• [x] client/blocks/disconnect-jetpack/style.scss (Could not find this in the wild)

40765 (edited by @sixhours):

• [x] client/extensions/woocommerce/app/store-stats/referrers/chart/style.scss
• [x] client/extensions/woocommerce/app/store-stats/store-stats-orders-chart/style.scss
• [x] client/extensions/woocommerce/components/delta/style.scss

40768 (edited by @sixhours)

• [x] client/my-sites/feature-upsell/style.scss (part of FeaturesComponent which doesn't appear to be active anywhere)
• [x] client/landing/domains/content-card/style.scss
• [x] client/extensions/hello-dolly/hello-dolly-page.js (Could not find this in the wild)

[nielslange]

@sixhours Are you also working on the remaining files or shall I work on those?

[sixhours]

@sixhours Are you also working on the remaining files or shall I work on those?

You are absolutely welcome to pick up a bunch! I have been at a meetup so haven't had a chance to turn my attention back to this. I'd just recommend doing them in batches so the resulting PRs are easier for folks to test. :)

[nielslange]

@sixhours Thanks for your reply. I’ll do them in batches, as suggested by you. 😀

[nielslange]

@sixhours Can you tell me how I can identify which file affects which route in Calypso? E.g. the files client/me/account-close/closed.scss, client/me/account-close/confirm-dialog.scss & client/me/account-close/style.scss affect the route .../me/account/close. For other files, e.g. client/landing/domains/content-card/style.scss I would not know which route is affected as the route .../landing/domains does not exist.

[sixhours]

Great question! Usually what I do is search for the class name or names in Github to see where else they're used across Calypso. So if you had the class .domains__landing-page (totally made up) I'd search for domains__landing-page in the wp-calypso repo to see which JSX file(s) it pops up in, which usually clues me into where I'd find those sections on the front end.

Sometimes you won't find them unless a certain condition is true -- like if a domain has status of "DNS configuration required" (random example) that isn't reflected in any of my test sites. That'll require more digging to figure out how to fake the conditions to display on the front end. If I get too far down a rabbit hole there, I'll just note it in the ticket above ("Couldn't figure out how to trigger this") and move on for now.

Sometimes I'm not able to find the class names at all, which I've indicated above with "(Found no instances of this in action)" -- that could mean we can remove those styles. I'm saving that for a different set of commits, though, to prevent breakage.

It's also possible there is a better way to track these things down, but I'm not aware of it. 🙃 Let me know if that makes sense!

[nielslange]

That makes sense and thanks for your detailed explanation. This should definitely help to identify most of the affected sections. 😀