Fix (Next Theme): Prefer light text on filled primary buttons

[joshuarrrr]

Description

• Update the chooseLightOrDarkText() fn (only in next theme) to prefer light text as long as the contrast ratio is >3.5
• Update the Button OUI docs page to provide all the color variants (except ghost) in the initial example

Note that, because primary is the same color for next dark and light, it now always has the light text.
The current contrast ratio between primary and ghost in the next theme is 3.33.

Issues Resolved

Fixes #935

Check List

• New functionality includes testing.
• New functionality has been documented.
• All tests pass
  • yarn lint
  • yarn test-unit
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

For more information on following Developer Certificate of Origin and signing off your commits, please check here.

[KrooshalUX]

"Note that, because primary is the same color for next dark and light, it now always has the light text.
The current contrast ratio between primary and ghost in the next theme is 3.33."

• What is Ghost set to at this point? Is it# FCFEFF?
• Based on color alone, I get 3.33. But, based on font weight & color, I get a passing contrast ratio (would need to also test the final version in browser once this is merged). Does the rating not take font weight and size into consideration?
• I dont love that dark mode now also has the same light text on the button. This doesnt seem to make much sense to me, and causes visual noise (higher contrast buttons than others).

[joshuarrrr]

What is Ghost set to at this point?

Next light and dark: #FCFEFF

Based on color alone, I get 3.33.

Yeah, it's just the pure color contrast ratio. It's not a rating, it just gets factored in along with other factors to various a11y ratings.

I dont love that dark mode now also has the same light text on the button. This doesnt seem to make much sense to me, and causes visual noise (higher contrast buttons than others).

All the other dark mode colors are noticeably lighter than the light mode equivalents, except for primary in the next theme. Do you want a variation of primary between next light and next dark, or would you like us to make the text calculation button use the underlying theme to preferentially choose dark or light text?

[KrooshalUX]

I am a little confused - In #935 (comment) - you mentioned primary wasn't being transformed for the buttons in "current" dark mode - but I am seeing what you are seeing in "Current" theme, that they are lighter in dark mode ("All the other dark mode colors are noticeably lighter than the light mode equivalents").

I had initially provided that primary color because it was stable across light and dark modes while providing sufficient contrast for buttons with light text at the cont weight/size specified.

[joshuarrrr]

I believe this PR should be closed in favor of #981