Updates to CTA Button

[americanrefugee]

Figma document

• Button > CTA

Platform

• Web

Storybook page

• Button

Updates requested

It seems that there are some missing variants. In particular, there should a corresponding Destructive state for each CTA size and type.

Large:

• Destructive Primary
• Destructive Primary + Icon
• Destructive Secondary
• Destructive Secondary + Icon
• Destructive Tertiary
• Destructive Tertiary + Icon

Medium:

• Destructive Primary
• Destructive Primary + Icon
• Destructive Secondary
• Destructive Secondary + Icon
• Destructive Tertiary
• Destructive Tertiary + Icon

Also, what I see in Storybook is looking a little different than what's in Figma...

Design nits:

• Font weight: Make sure that we're using Web/font/body/md/semibold for label text (it looks bold currently)
• L/R padding: Make sure the values are correct
  • With icon - 28px left margin, 32px right margin (this ensures that the CTA contents look visually centered in the button)
  • Text only - 32px both left and right margin
• Colour: Make sure that the correct color tokens were used
  • At some point we switched from exact colour values to semantic tokens
  • In the Storybook preview, the Primary button looks too black