[Visual Refresh] Setup semantic color tokens

mgadewoll commented 1 month ago

Summary

closes https://github.com/elastic/eui-private/issues/125 closes https://github.com/elastic/eui-private/issues/126

This PR implements the base setup for colors tokens. The main idea is to remove our dependency on color calculations and use direct token values instead. To ensure this works in both themes we lift the old color calculations up to the theme definitions level. Additionally all existing tokens are kept to ensure backwards compatibility and the values were updated for the new theme to match expected output.

The token naming is mapped to variables in Figma.

The implemented theme structure:

{
  colors, <- updated with more tokens
  base,
  size,
  border,
  font,
  animation,
  breakpoint,
  levels,
  focus,
  components <- NEW
}

The colors key now holds a lot more color tokens. These new tokens are (grouped):

semantic colors tokens (e.g. primary10 and shade10)
background tokens
border tokens

The components key contains:

buttons key which holds button specific tokens
forms key which holds form specific tokens
component specific tokens that were currently needed to resolve calculations and support old and new theme values

Changes

implements primitive colors for the new theme
implements semantic color tokens for base and common colors
updates existing tokens with new values in the new theme
adds components key on the EuiTheme and adds component specific color tokens
removes usages of color calculations like shade and tint and transparentize (where possible and/or necessary at this time) by adding tokens instead
updates shared mixin functionality of euiBackgroundColor, euiBorderColor, euiButtonColor, euiButtonFilledColor and euiButtonEmptyColor to return tokens
adds new color variant accentSecondary (currently enabled as background color)
adds color variant accentSecondary to relevant components

[!IMPORTANT] This update does not include an update to the static JSON token files.

QA

[x] CI passes
[ ] review theme tokens compared to design (if design hasn't changed 3 times again by then)
[ ] generally review Storybook and docs in the new theme if there are any unexpected styles