Centralize brand color overrides for core buttons in login and signup

[adamwoodnz]

Part of DSGCOM-92: Update primary buttons on 'Continue as user'

Proposed Changes

• Move all color overrides for branding of core buttons in login and signup to the central overrides file
• Add Blaze Pro orange to the central colors list so that it can be used in the overrides file
• Fix Akismet login button story and Crowdsignal signup button story, which had outdated wrappers

Why are these changes being made?

As the design system grows it's helpful to have all the overrides for branding in a central place, see discussion.

Testing

This PR is a straight refactor apart from the Blaze Pro color variable creation, so it is largely a regression testing exercise.

Storybook

We have stories for the social buttons and login and signup buttons

Run yarn storybook:start

Instructions

For each brand:

1. For each login link below, visit the page
2. Check the branding of the primary button, social buttons and the stepper nav top right link button if applicable
3. Check the same on the signup page
4. Check the same on the magic login page

Note that button replacements are still in progress for Lost Password, Accept Email Invite and 2FA

Login links

WordPress.com
Crowdsignal
Jetpack Cloud
Jetpack Login
Woo
Blaze Pro
Akismet
A4A - Can't link due to GitHub OSS scan rules: go to automatt_c.com/for-agencies/ and click 'Log in'. Edit the URL and change the host to calypso.localhost:3000
Gravatar
WP Job Manager
VIP
Partner Portal - Can't link due to GitHub OSS scan rules: go to hosts.automatt_c.com and you should be redirected to log in. Edit the URL and change the host to calypso.localhost:3000
WP.Cloud - Can't link due to GitHub OSS scan rules: go to wp.cloud and click 'start here'. Edit the URL and change the host to calypso.localhost:3000

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-145615

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-145615&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-145615&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• happy-blocks
• help-center
• notifications
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug dsgcom-92-core-button-centralize-overrides on your sandbox.

[adamwoodnz]

Moved to a central location

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[jasmussen]

I'd love a code check, but this seems an excellent centralized way to group overrides together so that they are at least collected in a central place.

Depending on brand feedback on the black "continue" link, this file could also be where we then let a black color for wp.com login live, yes?

[ciampo]

Question: instead of re-defining --color-accent and --color-accent-60, wouldn't it be more clear if we re-defined the --wp-components-color-* variables?

Re-defining --color-accent and ``--color-accent-60` adds an additional layer of indirection and it took me a moment to fully get what's going on.

[adamwoodnz]

Yeah I tend to agree, and I'm not entirely sure why we landed on this approach. The only benefit I can see is in theory if the product sets the accent color at a high level we get themed components without having to write overrides, eg. with

// class added to .layout
.a8c-for-agencies {
  --color-accent: var(--color-primary-40);
}

all A4A Buttons would now be themed, as Buttons have the global override set up. Other components without one would not.

If we did the same with

.a8c-for-agencies {
  --wp-components-color-accent: var(--color-primary-40);
}

this would affect all core components. Which is ideally what we'd want, but I haven't been comfortable making that wide a change, as there is just too much scope, with tangled styles and hard to reach screens. I haven't even been comfortable setting --color-accent at that sort of scope.

Writing an explicit override per component achieves the same, allowing a more targeted approach per component per brand.

.a8c-for-agencies {
  .components-button {
    --wp-components-color-accent: var(--color-primary-40);
  }
}

Does that make sense?

[ciampo]

Thank you for expanding your thoughts — I agree!

Writing an explicit override per component achieves the same, allowing a more targeted approach per component per brand.

.a8c-for-agencies {
  .components-button {
    --wp-components-color-accent: var(--color-primary-40);
  }
}

Does that make sense?

This could be a good compromise — still a per component override, but with less indirection than the current approach. What you do you think?

[adamwoodnz]

This could be a good compromise — still a per component override, but with less indirection than the current approach. What you do you think?

Yep happy to go that route 👍

[adamwoodnz]

Overrides are setting wp components vars directly now.