Error Color mismatch between Figma and Production

[jeana-adhoc]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

I was comparing output between figma and staging/production and noticed the error colors are not the same.

What I expected to happen

I expected figma and production to be using the same color for error messages

Reproducing

• Formation version:
• Device: (e.g. iPhone 8, Macbook)
• Browser: (e.g. Firefox, IE 11)

Steps to reproduce:

1. Load a form on staging and trigger an error
2. Load a figma file and recreate the component
3. Load the figma component with an error
4. See the color difference.

Here is a screenshot

The image on the left is from staging, on the right is a brand new component built using VADS component library.

It looks like Figma is using vads-color-error whereas the code is using vads-color-error-dark.

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

Details

Estimating

Designers:
Provide your estimate of 1, 2, 3, 5, 8 or 13
@babsdenney
@danbrady
@LWWright7

[Andrew565]

FWIW, it's not clear here if what needs to change is Figma or the component styles. I checked the va-checkbox component's error styling, and it's pulling from the .usa-error-message class, which is set at the same color as our vads-color-secondary-dark (see attached screenshot). We can easily override this color to whatever color we want, though, if we decide the component needs to change.

[danbrady]

@babsdenney @LWWright7 This is ready for review.

The key point is that USWDS uses $theme-color-error-dark (#b50909) for error text, borders, etc., and not $theme-color-error (#d54309). See USWDS color tokens.

I took a look at all components that have an error state and updated any that used the vads-color-error token to use $vads-color-error-dark instead (which maps to the USWDS value).

These are the components that were updated:

• Form Elements:
  • Label
  • Error Text
  • Hint Text
  • Label Header
• Date Input
• File Input
• Memorable Date
• Privacy Agreement
• Radio Buttons
• Select and Select Element
• Statement of Truth
• Text Input and Text Input Element
• Textarea and Textarea Element

(This list is also in the publishing notes on the Form Elements page.)

Please let me know if I missed any. Thanks!

[LWWright7]

These all look good to me!

[babsdenney]

Everything looks good, just found one tiny spot using the old colors on memorable date (vertical error bar).