Deprecate use of ghost and ink colors

[ryankeairns]

Prior to having EuiThemeProvider, ghost and ink colors were used as "always on" white and black colors, respectively, regardless of the current color mode. They are set in theme color files like so:

eui/src/themes/amsterdam/global_styling/variables/_colors.ts

Lines 132 to 137 in afecfda

	export const colors: _EuiThemeColors = {
	ghost: '#FFF',
	ink: '#000',
	LIGHT: light_colors,
	DARK: dark_colors_ams,
	};

Historically, in the cases of both the global/top EuiHeader and EuiBottomBar (for example) the background is always in dark mode and, in turn, we would use these color values to set styles on contained elements. With EuiThemeProvider you can now do the following, instead:

<EuiThemeProvider colorMode={'dark'}>

  <BottomBar ref={ref} {...props} />

</EuiThemeProvider>

The caveat here is that the EUI components wrapped by the theme provider need to have been converted to Emotion which - as of this writing - is not complete. Do we need to wait for 100% conversion? No, but some of the outstanding component conversions are impacted by this (e.g. EuiCollapsibleNav).

The point of this discussion item is to capture the new pattern and note that we will discontinue using ghost and ink once the relevant Emotion conversions is complete. We have a few comments in the code base where ghost is noted as being deprecated (files listed below) which we will remove and revisit - whether to do an actual deprecation is another question - once the related Emotion conversions are done... where 'related' = those that are affected by use of these colors.

eui/src/components/button/button.tsx

Lines 53 to 55 in afecfda

	* Any of the named color palette options.
	* **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
	*/

eui/src-docs/src/views/button/button_example.js

Lines 721 to 723 in afecfda

	to invert all colors to dark mode. The legacy{' '}
	<EuiCode language="js">{'color="ghost"'}</EuiCode> now uses this
	method and is set for deprecation. An example usage of inverted

eui/src/components/button/button_icon/button_icon.tsx

Lines 53 to 56 in afecfda

	/**
	* Any of the named color palette options.
	* **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
	*/

eui/src/components/button/button_empty/button_empty.tsx

Lines 58 to 61 in afecfda

	/**
	* Any of the named color palette options.
	* **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
	*/

[ryankeairns]

TODO: cross-check the outstanding Emotion conversions and their reliance upon these color values.

[cee-chen]

Taking a quick peek at Kibana usage: it looks like there's not as many color="ghost" usages as I thought 🤔

https://github.com/search?q=repo%3Aelastic%2Fkibana%20color%3D%22ghost%22&type=code

The ghost text color is kind of interesting/weird usage though. Personally, I think I lean towards trying to deprecate ghost usage in Kibana before EUI - that way we don't run into unexpected shenanigans. The migration path should be something like:

<EuiButton color="ghost">
// becomes
<EuiThemeProvider colorMode="dark">
  <EuiButton />
</EuiThemeProvider>

<EuiTextColor color="ghost">
// becomes
<EuiTextColor color={euiTheme.colors.ghost}>

<EuiLink color="ghost">
// deprecated entirely. or tell people to use a `<EuiThemeProvider colorMode="dark">` wrapper.

Thoughts?

[ryankeairns]

That's a smart tactic - clear the runway before we deprecate. +1 the idea

[cee-chen]

Update to this: #7296 removes color="ghost" from all button components.

I'm leaning towards leaving EuiText, EuiTextColor, EuiLink and EuiIcon alone in terms of allowing them to have color="ghost". Their usage of the prop isn't as problematic in terms of code.

If you're okay with that, we can go ahead and close this discussion - does that work for you @ryankeairns?