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

const Popover = styled(EuiPopover).attrs({
  anchorClassName: 'anchor'
})`
  .anchor {
    display: block;
  }
`;

const SelectContainer = styled.div`
  width: ${px(unit * 16)};
`;

const Counter = styled.div`
  border-radius: ${theme.euiBorderRadius};
  background: ${theme.euiColorLightShade};
  padding: 0 ${theme.paddingSizes.xs};
`;

const ApplyButton = styled(EuiButton)`
  align-self: flex-end;
`;

// needed for IE11
const FlexItem = styled(EuiFlexItem)`
  flex-basis: auto !important;
`;

interface Props {
  name: string;
  title: string;
  options: Array<{

border-radius: 0 0 0 ${borderRadius};
  background: ${props =>
    props.isLibraryFrame
      ? theme.euiColorEmptyShade
      : theme.euiColorLightestShade};
`;

const LineNumber = styled.div<{ highlight: boolean }>`
  position: relative;
  min-width: ${px(units.eighth * 21)};
  padding-left: ${px(units.half)};
  padding-right: ${px(units.quarter)};
  color: ${theme.euiColorMediumShade};
  line-height: ${px(unit + units.eighth)};
  text-align: right;
  border-right: 1px solid ${theme.euiColorLightShade};
  background-color: ${props =>
    props.highlight ? tint(0.1, theme.euiColorWarning) : null};

  &:last-of-type {
    border-radius: 0 0 0 ${borderRadius};
  }
`;

const LineContainer = styled.div`
  overflow: auto;
  margin: 0 0 0 ${px(units.eighth * 21)};
  padding: 0;
  background-color: ${theme.euiColorEmptyShade};

  &:last-of-type {
    border-radius: 0 0 ${borderRadius} 0;

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Suggestion } from '../suggestion';
import { rgba } from 'polished';
import theme from '@elastic/eui/dist/eui_theme_light.json';

const List = styled.ul`
  width: 100%;
  border: 1px solid ${theme.euiColorLightShade};
  border-radius: ${theme.euiSizeXS};
  box-shadow: 0px ${theme.euiSizeXS} ${theme.euiSizeXL} ${rgba(theme.euiTextColor, 0.1)};
  position: absolute;
  background: #fff;
  z-index: 10;
  left: 0;
  max-height: ${theme.euiSize * 20}px;
  overflow: scroll;
`;

export class Suggestions extends Component {
  childNodes = [];

  scrollIntoView = () => {
    const parent = this.parentNode;
    const child = this.childNodes[this.props.index];

borderRadius,
  fontFamilyCode,
  fontSize,
  px,
  unit,
  units
} from '../../../../../../../style/variables';
import { TruncateHeightSection } from './TruncateHeightSection';

registerLanguage('sql', sql);

const DatabaseStatement = styled.div`
  padding: ${px(units.half)} ${px(unit)};
  background: ${tint(0.1, theme.euiColorWarning)}
  border-radius: ${borderRadius};
  border: 1px solid ${theme.euiColorLightShade};
  font-family: ${fontFamilyCode};
  font-size: ${fontSize};
`;

const dbSyntaxLineHeight = unit * 1.5;

interface Props {
  dbContext?: NonNullable['db'];
}

export function DatabaseContext({ dbContext }: Props) {
  if (!dbContext || !dbContext.statement) {
    return null;
  }

  if (dbContext.type !== 'sql') {

* or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { isEmpty } from 'lodash';
import Suggestion from './suggestion';
import { units, px, unit } from '../../../../../../apm/public/style/variables';
import { tint } from 'polished';
import theme from '@elastic/eui/dist/eui_theme_light.json';

const List = styled.ul`
  width: 100%;
  border: 1px solid ${theme.euiColorLightShade};
  border-radius: ${px(units.quarter)};
  box-shadow: 0px ${px(units.quarter)} ${px(units.double)} ${tint(0.1, theme.euiColorFullShade)};
  position: absolute;
  background: #fff;
  z-index: 10;
  left: 0;
  max-height: ${px(unit * 20)};
  overflow: scroll;
`;

class Suggestions extends Component {
  childNodes = [];

  scrollIntoView = () => {
    const parent = this.parentNode;
    const child = this.childNodes[this.props.index];

* These are default values for the context. These defaults are typically
 * overwritten by the Uptime App upon its invocation.
 */
const defaultContext: UMSettingsContextValues = {
  absoluteStartDate: DEFAULT_ABSOLUTE_START_DATE,
  absoluteEndDate: DEFAULT_ABSOLUTE_END_DATE,
  autorefreshIsPaused: AUTOREFRESH_IS_PAUSED,
  autorefreshInterval: AUTOREFRESH_INTERVAL,
  basePath: BASE_PATH,
  colors: {
    danger: euiLightVars.euiColorDanger,
    mean: euiLightVars.euiColorPrimary,
    range: euiLightVars.euiFocusBackgroundColor,
    success: euiLightVars.euiColorSuccess,
    warning: euiLightVars.euiColorWarning,
    gray: euiLightVars.euiColorLightShade,
  },
  dateRangeStart: DATE_RANGE_START,
  dateRangeEnd: DATE_RANGE_END,
  isApmAvailable: true,
  isInfraAvailable: true,
  isLogsAvailable: true,
  refreshApp: () => {
    throw new Error('App refresh was not initialized, set it when you invoke the context');
  },
  setHeadingText: () => {
    throw new Error('setHeadingText was not initialized on UMSettingsContext.');
  },
};

export const UptimeSettingsContext = createContext(defaultContext);

import PropTypes from 'prop-types';
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)};

const cytoscapeDivStyle = {
  height: '85vh',
  background: `linear-gradient(
  90deg,
  ${theme.euiPageBackgroundColor}
    calc(${theme.euiSizeL} - calc(${theme.euiSizeXS} / 2)),
  transparent 1%
)
center,
linear-gradient(
  ${theme.euiPageBackgroundColor}
    calc(${theme.euiSizeL} - calc(${theme.euiSizeXS} / 2)),
  transparent 1%
)
center,
${theme.euiColorLightShade}`,
  backgroundSize: `${theme.euiSizeL} ${theme.euiSizeL}`,
  margin: `-${theme.gutterTypes.gutterLarge}`
};

export function ServiceMap({ serviceName }: ServiceMapProps) {
  const {
    urlParams: { start, end }
  } = useUrlParams();

  const { data } = useFetcher(
    callApmApi => {
      if (start && end) {
        return callApmApi({
          pathname: '/api/apm/service-map',
          params: { query: { start, end } }
        });

let colors: UptimeAppColors;
  if (darkMode) {
    colors = {
      danger: euiDarkVars.euiColorDanger,
      mean: euiDarkVars.euiColorPrimary,
      gray: euiDarkVars.euiColorLightShade,
      range: euiDarkVars.euiFocusBackgroundColor,
      success: euiDarkVars.euiColorSuccess,
      warning: euiDarkVars.euiColorWarning,
    };
  } else {
    colors = {
      danger: euiLightVars.euiColorDanger,
      mean: euiLightVars.euiColorPrimary,
      gray: euiLightVars.euiColorLightShade,
      range: euiLightVars.euiFocusBackgroundColor,
      success: euiLightVars.euiColorSuccess,
      warning: euiLightVars.euiColorWarning,
    };
  }
  const [lastRefresh, setLastRefresh] = useState(Date.now());
  const [headingText, setHeadingText] = useState(undefined);

  useEffect(() => {
    renderGlobalHelpControls();
    setBadge(
      !canSave
        ? {
            text: i18n.translate('xpack.uptime.badge.readOnly.text', {
              defaultMessage: 'Read only',
            }),

interface IBarStyleProps {
  type: ItemType;
  left: number;
  width: number;
  color: string;
}

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};
`;