Skip to content

Conversation

@vpomerleau
Copy link
Contributor

@vpomerleau vpomerleau commented Jan 23, 2026

Because

  • We want to allow setting a gradient as button colour
  • We want to allow customization of headline text size and color

This pull request

  • Update the CmsButtonWithFallback component to support setting a gradient as buttonColor
  • Update calculate-contrast to provide better contrast on light colour gradient
  • Update cta styling to prevent a border artifact when background is gradient
  • Support headlineFontSize and headlineTextColor attributes from cmsInfo

Issue that this pull request solves

Closes: FXA-12791

Checklist

Put an x in the boxes that apply

  • My commit is GPG signed.
  • If applicable, I have modified or added tests which pass locally.
  • I have added necessary documentation (if appropriate).
  • I have verified that my changes render correctly in RTL (if appropriate).

Screenshots (Optional)

Example medium headline font size with blue text and gradient button
image

Button styling examples from storybook with automated text color adjustments based on contrast with button colour.
image

Other information (Optional)

Testing requires:

Because:

* We want to allow setting a gradient as button colour
* We want to allow customization of headline text size and color

This commit:

* Update the CmsButtonWithFallback component to support setting a gradient as buttonColor
* Update calculate-contrast to provide better contrast on light colour gradient
* Update cta styling to prevent a border artifact when background is gradient
* Support headlineFontSize and headlineTextColor attributes from cmsInfo

Closes #FXA-12791
@vpomerleau vpomerleau marked this pull request as ready for review January 23, 2026 20:32
@vpomerleau vpomerleau requested a review from a team as a code owner January 23, 2026 20:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants