cc-button: fix colors (contrast, a11y...)

[hsablonniere]

Context

The contrast for some colors are too low (according to accessibility guidelines).

This mostly concerns background color of our <cc-button> but because those are copy/pasted in other components as a reference, the problem is bigger than just <cc-button> background colors.

TODO

• [x] audit all colors on all components
• [x] list colors that require an update (background, border, focus-ring...)
• [x] list all colors that should move to the common defaultThemeStyles (this can be done in multiple steps)
  • [x] move them and reuse them

Note

• We chose not to implement default text / background colors inside our components just yet.
• This feature will be implemented at the same time as we allow for theme customization because it represents a breaking change.
• We chose not to change the colors of cc-tile-instances so that it remains consistent with icons (could not change icon colors because they need to remain contrasted with dark background). This component will be reworked so the color subject will be handled during this rework.

[florian-sanders-cc]

Questions:

• Do we really need other shades of primary (blue / purple) ? (ribbon / beta for instance)
• cc-input number => color contrast for controls are too low. Also native number input is not good enough ?
• contrast of disabled elements. Could maybe find another way to convey this disabled status (cc-env-var-create)
• we need variables but we also need to all use the same color format (hsl ? hex ?)
• colored texts inside components should rely on variables or classes
• there are many stories where blue color is used for almost all the text which might be too much ? Could rely on black text with grey shades if we need to create distinction between texts

What colors do we need ?

• Primary / Standard (CTA, icons, etc.) - Blue (more contrasted than the current one)
• Secondary - A lighter shade of Primary ?
  • Outlined primary could be enough for this purpose
• Success / Valid (submit button, text, icons) - Green
• Danger / Invalid (delete / remove buttons, icons, text) - Red
• Caution / warning - Orange ?
• Text color - Black ?
  • test with #222 or #333
• Lighter text color - Grey
• Block background - Lighter grey
  • test #fa || #f5
• Link color - Blue ?
  • keep the current one