[Security Solution][Explore][EUI visual refresh] remove JSON tokens in favor of color tokens

[angorayc]

Context

1. EUI visual refresh:
   Changes are made to EUI that will be visible to end-users in Kibana:

• Updated all colors in EUI
• Reduce the topmost font weights and sizes (think titles and headings)
  These changes are available in a new theme called Borealis.

See parent ticket for how to use the new theme and labels to add to the PR for tracking

2. Replace SCSS with CSS-in-JS: https://github.com/elastic/kibana-team/issues/1417

Description

All usages of JSON tokens have been removed in favor of color tokens, where possible.

Exported legacy JSON tokens will be deprecated in the future and will eventually be replaced with tokens from the EUI theme. We'd appreciate it if teams could spend some time migrating away from these.

Please discontinue use of these and replace them with a JS variable from our theme context.

JSON tokens are anything from:

@elastic/eui/dist/eui_theme_light.json
@elastic/eui/dist/eui_theme_dark.json
import { euiThemeVars } from '@kbn/ui-theme'

For example:
https://github.com/elastic/kibana/blob/main/packages/kbn-visualization-ui-components/components/dimension_buttons/palette_indicator.tsx#L32

Before:

import { euiThemeVars } from '@kbn/ui-theme'
...
height: ${euiThemeVars.euiSizeXS} / 2;

After:

import { useEuiTheme } from '@elastic/eui'
....
const { euiTheme } = useEuiTheme();
...
height: ${euiTheme.size.xs} / 2;

As many usage of euiThemeVars are in styled-components , explore team is planning to use this opportunity completely remove styled-components and migrate to emotion/react .

Tasks

Preview Give feedback

1. Move away from styled-components: Dashboard - landing page, overview, detection and response dashboard #206439
   Team:Threat Hunting:Explore +1
   
2. Move away from styled-components: Dashboard - Data quality dashboard package - [Security Solution][Explore][Data Quality Dashboard] migrate to emotion and use new tokens #205449
3. Move away from styled-components: Dashboard: Explore - landing page, hosts, network, and users #206437
   Team:Threat Hunting:Explore +1
   
4. Move away from styled-components: Empty prompt page and shared components #206436
   Team:Threat Hunting:Explore +1
   
5. Move away from styled-components: Onboarding page #206404
   Team:Threat Hunting:Explore +1
   

To test

Running Kibana with the Borealis theme

In order to run Kibana with Borealis, you'll need to do the following:

1. Set the following in kibana.dev.yml: uiSettings.experimental.themeSwitcherEnabled: true

2. Run Kibana with the following environment variable set:
   KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start

3. This will expose a toggle under Stack Management > Advanced Settings > Theme version, which you can use to toggle between Amsterdam and Borealis.

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[elasticmachine]

Pinging @elastic/security-threat-hunting-explore (Team:Threat Hunting:Explore)

[elasticmachine]

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

[angorayc]

Removed it from Entity Analytics Board to avoid confusion: https://elastic.slack.com/archives/C02CUMTF99B/p1735572444810329

[angorayc]

Meta issue from shared UX: https://github.com/elastic/kibana-team/issues/1417