Badge/Tag - Update colors for better accessibility contrast

[tmcconechy]

Describe the bug
Make some style changes to badge and tag colors.

Fixes
https://www.figma.com/file/gHmapzCfCqqPRv5RnFfGcE/?node-id=0%3A1

• Change colors in all 3 variants (new)
• Update the badge and tag examples to match
• add status colors to https://main-enterprise.demo.design.infor.com/components/colors/example-index.htm
• Make changes in the web component too
• Make sure tokens are in sync

Additional context
https://jira.infor.com/browse/UXD-1865

[janahintal]

QA Failed.
Light UI Expected color for Status 04 is #1F9254
Result: #1C7F49

Figma: https://www.figma.com/file/gHmapzCfCqqPRv5RnFfGcE/Q3-Accessibility-Tests

[ericangeles]

@janahintal can you please provide the steps for this test? Thanks.

[ericangeles]

@tmcconechy @kevinwhitedesign can we confirm the color that we should use for the New Light? In the example page, we used emerald09 (#1C7F49) but in the Figma file it's #1F9254 (emerald08).

[CindyMercadoReyes]

This issue is now resolved.

[tmcconechy]

I will reverse some of these changes for now due to #6114
The reason being the size and font changes look abrupt and out of place and want to avoid complaints and breaking.

The biggest problem being the size change on the fields that will look out of place on forms with different fields

And the tag size changes in general can cause disruption. So will kick this back for now

Approved with @inforandy

[kevinwhitedesign]

I believe reverting from this change will end in failing accessibility latest WCAG guidelines. Correct me if I'm wrong @elizabethhartley

[tmcconechy]

So according to a scan on https://4580-enterprise.demo.design.infor.com/components/tag/example-index.html only one thing fails...

New Light:

• only the orange alert tag fails -> can easier be fixed by using a lighter alert color

So rather easy to just change one color then change the size of the tags and multiselect and make the multiselect look different on forms. Just has too much impact for this change but will keep it in the backlog for later.

[kevinwhitedesign]

@tmcconechy oh right, we decided to make them all bold for consistency. @elizabethhartley reminded me

[tmcconechy]

Yeah i think in this case we should come back to this one and just have:

• check the 3 themes
• only change the background colors up and down
• change the text color between white or slate 100 depending which bg color
• not change any sizes

Also wondering about yellow or orange alerts - which is most often done

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.