3007 - Added new uplift colors

[tmcconechy]

Explain the details for making this change. What existing problem does the pull request solve?

Updated design system tokens to new colors for uplift and did a pass on all three theme variants. This impacts and improves many internal colors in components and charts. Also updated the look and feel of the colors page.

Related github/jira issue (required):
Fixes #3007

Steps necessary to review your pull request (required):

• pull this branch
• npm i for new tokens
• restart demo server
  Kitchen Sink https://3007-new-uplift-colors-enterprise.demo.design.infor.com/?theme=uplift&variant=light
• Uplift Colors / Color Palette Page Design http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/colors/example-index.html?theme=uplift
• Header Colors http://3007-new-uplift-colors-enterprise.demo.design.infor.com//patterns/builder-wizard.html?theme=uplift
• Button Colors http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/button/example-index.html?theme=uplift
  - Not much difference in tertiary hover state so made some changes
  - Not sure about some disabled buttons, made some minor adjustments
• Menu Buttons http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/menubutton/example-index.html?theme=uplift
• Context Menus http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/contextmenu/example-index.html?theme=uplift
• Inputs http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/input/example-index.html?theme=uplift
  - Do the “muted” labels look ok?
  - Check readonly/disabled states and borders and placeholders?
• Autocomplete http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/autocomplete/example-index.html?theme=uplift
• Datepicker http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/datepicker/example-index.html?theme=uplift (WIP needs revision?)
• Switch http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/switch/example-index.html?theme=uplift
• Editor http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/editor/example-index.html?theme=uplift
• Badges http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/badges/example-index.html?theme=uplift
• Chart (Bullet) http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/bullet/example-index.html?theme=uplift
• Chart (Sparkline) http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/sparkline/example-index.html?theme=uplift&variant=light
• Chart (bar) http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/bar-grouped/example-index.html?theme=uplift&variant=light
• Chart (area) http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/area/example-index.html?theme=uplift&variant=light
• Chart (Donut) http://3007-new-uplift-colors-enterprise.demo.design.infor.com//components/donut/example-index.html?theme=uplift&variant=light (edited)

Included in this Pull Request:

• An e2e or functional test for the bug or feature.
• A note to the change log.

[tmcconechy]

@elizabethhartley - please let me know if you have any comments

[EdwardCoyle]

Here's some things I found when reviewing:

Header/Theme Switcher - doesn’t always set the colors correctly:

• header colors on Uplift “default” are different from Uplift “azure”
  
  

• Some font colors set to black against headers where it should probably be white (I specifically noticed this on Turquoise and Amber):
  

Autocomplete (Dark)

• “highlight” color (seen when hovering/selecting with keyboard) is pretty close to the background color
  

Datepicker

• Modal Button focus states inside the picker are differently-sized (the submit button pops out, but the clear button doesn’t)

• Regarding your note about WIP: it actually doesn't look bad to me.
  
  

• I believe the Datepicker configured with a legend is using Soho colors against the Uplift theme, or they are just hardcoded to one color palette (specifically I noticed the emerald and azure don't match up):
  

Editor

• Did the design for the popupmenus switch back to the standard design with an arrow? If not, this branch might need an update from 4.24.x
  

Input fields

• opinion: I actually like the muted colors for the labels a lot more than what we previously had.

Sparkline Chart

• there's something funky about one of the sparklines on this sample when using the Dark/Contrast variants:
  
  

[tmcconechy]

@EdwardCoyle I fixed all the points you noted. I didnt actually see point two of it changing black text. I suspect when i adjusted the colors on point 1 i fixed it? If not let me know