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

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

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

  background: ${props => (props.selected ? theme.euiColorLightestShade : 'initial')};
  cursor: pointer;

style={{
          position: 'absolute',
          top: 0,
          left: 0
        }}
      >
        
          

          

          {topTraceDuration > 0 && (
            
          )}
        
      
    );

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

} 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)};
  font-size: ${fontSizes.small};
`;

const Footer = styled.div`
  color: ${theme.euiColorMediumShade};
  margin: ${px(units.half)};
  font-size: ${fontSizes.small};

const Container = styled('div')`
  position: relative;
  display: block;
  user-select: none;
  padding-top: ${px(units.half)};
  padding-bottom: ${px(units.plus)};
  margin-right: ${props => px(props.timelineMargins.right)};
  margin-left: ${props => px(props.timelineMargins.left)};
  border-top: 1px solid ${theme.euiColorLightShade};
  background-color: ${props =>
    props.isSelected ? theme.euiColorLightestShade : 'initial'};
  cursor: pointer;

  &:hover {
    background-color: ${theme.euiColorLightestShade};
  }
`;

const ItemBar = styled('div')`
  box-sizing: border-box;
  position: relative;
  height: ${px(unit)};
  min-width: 2px;
  background-color: ${props => props.color};
`;

const ItemText = styled.span`
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;

background: ${props =>
    props.selected ? theme.euiColorLightestShade : 'initial'};
  cursor: pointer;

tickTotal={X_TICK_TOTAL}
              tickFormat={formatX}
            />
            

            {showBackgroundHover && (
              
            )}

            {shouldShowTooltip && (

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