[Fleet][Eui Visual Refresh] Update text color tokens

[jillguyonnet]

Summary

Closes #201989

This PR updates color variables to the up-to-date naming per #199715 (comment).

Impacted elements:

1. Read-only icon buttons in Fleet and Integrations top bar.
2. Danger-styled context menu item for deleting package policy from agent policy.

I have also reviews all occurrences of color="text throughout fleet and found these to be part of the following components:

• EuiButton
• EuiButtonEmpty
• EuiButtonIcon
• EuiIcon

The use of color="text" seems to be valid for these cases.

Screenshots

Amsterdam

Read-only Fleet top bar:

Read-only Integrations top bar:

Delete integration context menu item:

Borealis

Read-only Fleet top bar:

Read-only Integrations top bar:

Delete integration context menu item:

[elasticmachine]

Pinging @elastic/fleet (Team:Fleet)

[weronikaolejniczak]

@jillguyonnet LGTM 💚

[mgadewoll]

Non blocking cleanup suggestion:
This is perfectly fine, but you can also use the object notation, which removes the need for importing css and using useEuiTheme specifically (since it's only used for this one case).

css={({ euiTheme }) => ({
  color: euiTheme.colors.textDanger,
})

[jillguyonnet]

Hey @mgadewoll thanks - I had tried that but ran into

TypeError: Cannot read properties of undefined (reading 'colors')

Here's the full component:

import React from 'react';
import type { EuiContextMenuItemProps } from '@elastic/eui';
import { EuiContextMenuItem } from '@elastic/eui';

export const DangerEuiContextMenuItem = (props: EuiContextMenuItemProps) => {
  return (
    <EuiContextMenuItem
      {...props}
      css={({ euiTheme }) => ({
        color: euiTheme.colors.textDanger,
      })}
    />
  );
};

Did I miss anything?

I found a similar occurrence with a note that an error is expected, leading to elastic/eui#8123. This comment suggests that the issue should be resolved though.

[mgadewoll]

@jillguyonnet Ah right, then your plugin doesn't have the required type set up yet.
You'll need to add types for your plugin to support this. (emotion docs)

Here an example of the required module.
And this then should be included in your tsconfig.json (example).

[jillguyonnet]

Thanks for this! I'm capturing some frontend cleanup for Fleet UI in a dedicated task, I will add this in order to make getting the last EUI visual refresh PR over the line a priority.

[mgadewoll]

Of course, that makes perfect sense. It wasn't blocking for this PR 👍

[criamico]

LGTM

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: b5de8bc

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
fleet	1.7MB	1.7MB	+122.0B

cc @jillguyonnet