How to use the @blueprintjs/core.Colors.GRAY3 function in @blueprintjs/core

{status =>
      ({
        [WebSocket.CONNECTING]: (

background: ${({ state }) =>
      ({
        [IStepState.WAITING]: Colors.GRAY1,
        [IStepState.RUNNING]: Colors.GRAY3,
        [IStepState.SUCCEEDED]: Colors.GREEN2,
        [IStepState.SKIPPED]: Colors.GOLD3,
        [IStepState.FAILED]: Colors.RED5
      }[state])};
  }

to={`/p/${run.pipeline.name}/runs/${run.runId}?q=type:materialization`}
          >{`${run.stats.materializations} materializations`}
          ,{" "}
          {`${run.stats.expectations} expectations passed`}
        
      
      
        {run.pipeline.__typename === "Pipeline" ? (
          
             {run.pipeline.name}
          
        ) : (
          <>
            
             
            
              {run.pipeline.name}
            
          
        )}
      
      
        <div>
          <div>{`Mode: ${run.mode}`}</div>

          {run.stepKeysToExecute &amp;&amp; (
            <div>
              {run.stepKeysToExecute.length === 1
                ? `Step: ${run.stepKeysToExecute.join("")}`
                : `${run.stepKeysToExecute.length} Steps`}</div></div>

settings: {
    description: Colors.GRAY1,
    section: {
      border: Colors.GRAY5,
      color: Colors.GRAY1,
    },
    table: {
      background: Colors.LIGHT_GRAY2,
      border: Colors.GRAY5,
    },
    viewButton: {
      hover: {
        icon: Colors.GRAY1,
        text: Colors.DARK_GRAY1,
      },
      icon: Colors.GRAY3,
      text: Colors.GRAY2,
    },
  },
  twitchState: {
    color: 'rgba(92, 112, 128, 0.8)',
  },
  whisper: {
    background: Colors.LIGHT_GRAY3,
    border: Colors.INDIGO5,
  },
}

export default _.merge(_.cloneDeep(base), light) as ITheme

height: 100%;
  margin: auto;
  width: 180px;
`

const Total = styled.div`
  color: ${Colors.RED3};
  margin: auto;
  height: 100%;
  padding-top: 8px;
  padding-right: 4px;
`

const MaxAmount = styled.div`
  display: flex;
  color: ${Colors.GRAY3}
  font-size: 11px;
  justify-content: flex-end;
  padding-bottom: 5px;
  `

Colors.ROSE4,
    Colors.VIOLET5,
    Colors.INDIGO5,
    Colors.COBALT4,
    Colors.COBALT5,
    Colors.TURQUOISE4,
    Colors.FOREST3,
    Colors.FOREST5,
    Colors.LIME3,
    Colors.LIME4,
    Colors.GOLD4,
    Colors.SEPIA5,
  ],
  chattersList: {
    height: 24,
    typeColor: Colors.GRAY3,
  },
  emotePicker: {
    cellGutter: 0,
    cellSize: 38,
    height: 300,
    maxSize: 28,
    padding: 10,
    width: 344,
  },
  follow: {
    background: 'rgba(219, 55, 55, 0.05)',
    border: 'rgba(219, 55, 55, 0.4)',
  },
  follows: {
    flip: 150,
    height: 78,

export const SolidConfigPort: React.SFC = ({
  x,
  y,
  minified
}) => {
  return (
    <>
      
      
      {!minified && (

  color: ${({ active }) => (active ? Colors.WHITE : Colors.GRAY3)};
  padding: 6px 9px;

/**
 * PauseButton component.
 */
const PauseButton = styled(Button)`
  &.${Classes.BUTTON} .${Classes.ICON} svg,
  .${Classes.DARK} &.${Classes.BUTTON} .${Classes.ICON} svg {
    color: ${Colors.RED4};
  }
`

/**
 * ViewerCount component.
 */
const ViewerCount = styled.div`
  align-items: center;
  color: ${Colors.GRAY3};
  display: flex;
  justify-content: center;
  margin-right: 10px;

  & svg {
    height: 11px;
    margin-left: 6px;
    width: 11px;
  }
`

/**
 * HeaderChannelState Component.
 */
export default class HeaderChannelState extends React.Component {
  /**

title: Colors.WHITE,
    },
    features: {
      color: Colors.DARK_GRAY5,
    },
  },
  notification: {
    background: Colors.DARK_GRAY2,
    border: Colors.BLUE4,
    message: Colors.GRAY4,
  },
  permissions: {
    detail: Colors.GRAY5,
  },
  previews: {
    meta: Colors.GRAY3,
  },
  resource: {
    divider: `linear-gradient(
      90deg,
      rgba(116, 134, 147, 1) 0%,
      rgba(116, 134, 147, 0.4) 50%,
      rgba(116, 134, 147, 0) 100%
    )
  `,
    hover: {
      background: Colors.DARK_GRAY4,
      color: Colors.BLUE5,
      meta: Colors.LIGHT_GRAY1,
    },
    meta: Colors.GRAY3,
  },