How to use the @elastic/eui/dist/eui_theme_light.json.euiColorEmptyShade function in @elastic/eui

background: ${props =>
        props.selected
          ? theme.euiColorEmptyShade
          : theme.euiColorLightestShade};
    }

import {
  unit,
  units,
  px,
  borderRadius,
  fontSize,
  fontSizes
} from '../../../../style/variables';
import Legend from '../Legend';
import theme from '@elastic/eui/dist/eui_theme_light.json';

const TooltipElm = styled.div`
  margin: 0 ${px(unit)};
  transform: translateY(-50%);
  border: 1px solid ${theme.euiColorLightShade};
  background: ${theme.euiColorEmptyShade};
  border-radius: ${borderRadius};
  font-size: ${fontSize};
  color: ${theme.euiColorFullShade};
`;

const Header = styled.div`
  background: ${theme.euiColorLightestShade};
  border-bottom: 1px solid ${theme.euiColorLightShade};
  border-radius: ${borderRadius} ${borderRadius} 0 0;
  padding: ${px(units.half)};
  color: ${theme.euiColorMediumShade};
`;

const Content = styled.div`
  margin: ${px(units.half)};
  margin-right: ${px(unit)};

background: ${props =>
    props.isLibraryFrame
      ? theme.euiColorEmptyShade
      : theme.euiColorLightestShade};
`;

export function JobGroup({ name }) {
  return (
    <div style="{{" data-test-subj="mlJobGroup">
      {name}
    </div>
  );
}
JobGroup.propTypes = {

background: ${props =>
    props.isLibraryFrame
      ? theme.euiColorEmptyShade
      : theme.euiColorLightestShade};
`;

background: ${props =>
        props.selected ? theme.euiColorEmptyShade : theme.euiColorLightestShade};
    }

export function JobGroup({ name }) {
  return (
    <div style="{{" data-test-subj="mlJobGroup">
      {name}
    </div>
  );
}
JobGroup.propTypes = {

import { i18n } from '@kbn/i18n';
import React from 'react';
import styled from 'styled-components';
import { IStackframe } from '../../../../typings/es_schemas/raw/fields/Stackframe';
import {
  borderRadius,
  fontFamily,
  px,
  unit,
  units
} from '../../../style/variables';
import { Ellipsis } from '../Icons';
import { DottedKeyValueTable } from '../DottedKeyValueTable';

const VariablesContainer = styled.div`
  background: ${theme.euiColorEmptyShade};
  border-top: 1px solid ${theme.euiColorLightShade};
  border-radius: 0 0 ${borderRadius} ${borderRadius};
  padding: ${px(units.half)} ${px(unit)};
  font-family: ${fontFamily};
`;

const VariablesToggle = styled.a`
  display: block;
  cursor: pointer;
  user-select: none;
`;

const VariablesTableContainer = styled.div`
  padding: ${px(units.plus)} ${px(unit)} 0;
`;

import {
  unit,
  units,
  px,
  borderRadius,
  fontSize,
  fontSizes
} from '../../../../style/variables';
import Legend from '../Legend';
import theme from '@elastic/eui/dist/eui_theme_light.json';

const TooltipElm = styled.div`
  margin: 0 ${px(unit)};
  transform: translateY(-50%);
  border: 1px solid ${theme.euiColorLightShade};
  background: ${theme.euiColorEmptyShade};
  border-radius: ${borderRadius};
  font-size: ${fontSize};
  color: ${theme.euiColorFullShade};
`;

const Header = styled.div`
  background: ${theme.euiColorLightestShade};
  border-bottom: 1px solid ${theme.euiColorLightShade};
  border-radius: ${borderRadius} ${borderRadius} 0 0;
  padding: ${px(units.half)};
  color: ${theme.euiColorMediumShade};
`;

const Content = styled.div`
  margin: ${px(units.half)};
  margin-right: ${px(unit)};