[Fleet][Meta] Eui Visual Refresh

[criamico]

Context

The EUI team is making updates to EUI that require updates and QA by all Kibana Codeowners. Parent ticket: #199715

We have made the following changes to EUI that will be visible to end-users in Kibana:

1. Updated all colors in EUI
2. Reduce the topmost font weights and sizes (think titles and headings)
   In addition, we are attempting to clean up existing color usage in order to help iterate on these colors faster in the future.

⚠️ From now on, all the UI changes need to be tested both in the "old" Amsterdam theme and the new Borealis. 8.x will remain on Amsterdam and Borealis will only target 9.0.0, so there won't be any backports of Borealis to 8.x. Instructions are in parent issue (see section Instructions for updating and QA).

Changes can be applied directly in Kibana main.

Required

• [Fleet][EUI Visual refresh] Change usage of color success to accentSecondary where needed #201945
• [Fleet][EUI Visual refresh] Rename color variables to use updated names #201989
• [Fleet][EUI Visual refresh] Check color palettes usage and make sure that they are theme-aware #201997
• The person assigned to "Design QA" has reviewed the UI with the new changes and is ready to ship.

Non blocking

• [Fleet][EUI Visual refresh] Remove custom colors from code and replace them with EUI color tokens #202003
• All usages of color functions have been removed in favor of color tokens, where possible. (details) - Fleet is not using any of them
• All usages of JSON tokens have been removed in favor of color tokens, where possible. (details) - Fleet is not using any of them

Address deprecations

As part of this change, we also need to we address some deprecations in Eui:

• EuiThemeProvider: https://github.com/search?q=repo%3Aelastic%2Fkibana+path%3Ax-pack%2Fplugins%2Ffleet%2Fpublic+EuiThemeProvider&type=code. This was deprecated a while ago but we need to check how to replace it (see comment)
• EuiStyled: https://github.com/criamico/kibana/blob/8c14ca26ecce910f779ea7c050834014db3817dc/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/details.tsx#L50 this was also deprecated a while ago but it should be easy to replace as it's only used once across Fleet UI.

[elasticmachine]

Pinging @elastic/fleet (Team:Fleet)

[criamico]

I ran Fleet with the new theme:

• Set the following in kibana.dev.yml: uiSettings.experimental.themeSwitcherEnabled: true
• Start Kibana with command KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start
• Go to Stack Management > Advanced Settings > Theme version and choose Borealis, save and reload

I got some screenshots of Fleet and Integrations:

[jillguyonnet]

@andreadelrio @simosilvestri 👋

Regarding

The person assigned to "Design QA" has reviewed the UI with the new changes and is ready to ship.

All the PRs to update the use of colors have been merged. Is there anything else to validate on your side?

[jillguyonnet]

Regarding deprecations: the two deprecations mentioned in this issue seem non blocking for now. I have gathered additional deprecation and refactor cleanups in #204784, so maybe we could centralise them there. @criamico when you are back can you let me know if that's OK with you?

[criamico]

@jillguyonnet sure! I just saw the deprecations mentioned in #204784 and I agree that we should add the ones in the current issue there.

I'll add the deprecations on the new issue and we can then close this one as completed.

[simosilvestri]

Looks good to me! Thanks @jillguyonnet :)