[Visual Refresh] Setup semantic color tokens

[mgadewoll]

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

• 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

[tkajtoch]

The changes look great. Considering it's targetting a feature branch I don't have any objections

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8097/
• Storybook: https://eui.elastic.co/pr_8097/storybook
• New docs: https://eui.elastic.co/pr_8097/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 410fcd8

History

• 💚 Build #2975 succeeded 70aa39a
• 💚 Build #2970 succeeded b903199
• 💚 Build #2968 succeeded 7e59ef0
• 💔 Build #2966 failed 7e59ef0
• 💚 Build #2964 succeeded e5c32ff
• 💚 Build #2960 succeeded 2a521d6

[tkajtoch]

I'm happy with the latest changes. LGTM!