How to use the @uifabric/fluent-theme.NeutralColors.gray20 function in @uifabric/fluent-theme

import * as javascript from 'highlight.js/lib/languages/javascript';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
import { NeutralColors } from '@uifabric/fluent-theme';

registerLanguage('javascript', javascript);

export interface IHighlightProps extends React.HTMLAttributes {
  componentRef?: () => void;
}

const rootClass = mergeStyles({
  selectors: {
    '.hljs': {
      display: 'block',
      color: NeutralColors.gray180,
      background: NeutralColors.gray20
    },
    '.hljs-comment, .hljs-quote': {
      color: NeutralColors.gray120,
      fontStyle: 'italic'
    },
    '.hljs-keyword, .hljs-selector-tag, .hljs-subst': {
      color: NeutralColors.gray180,
      fontWeight: 'normal'
    },
    // attribute name
    '.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr ': {
      color: '#008080'
    },
    // @param
    '.hljs-string, .hljs-doctag': {
      color: '#d14'

isScrollable && [
        {
          WebkitOverflowScrolling: 'touch',
          maxHeight: '80vh',
          overflowX: 'hidden',
          overflowY: 'auto',
          padding: '20px 4px',
          position: 'relative'
        },
        globalClassNames.isScrollable
      ],
      isRightAligned && [{ textAlign: 'right' }, globalClassNames.isRightAligned]
    ],
    code: [
      {
        backgroundColor: NeutralColors.gray20,
        overflow: 'hidden',
        selectors: {
          pre: [
            {
              margin: 0,
              overflow: 'auto',
              transition: `all ${AnimationVariables.durationValue3} ${AnimationVariables.easeFunction1}`
            },
            // Collapse code blocks by default
            isCodeVisible ? { maxHeight: 480, minHeight: 120 } : { maxHeight: 0 },
            isCodeVisible && {
              border: '1px solid ' + NeutralColors.gray90,
              borderTop: 0
            }
          ],
          code: {

export const sideBar = isExpand => css`
  width: ${isExpand ? '220' : '48'}px;
  background-color: ${NeutralColors.gray20};
  height: 100%;
  box-shadow: ${Depths.depth8};
  transition: width 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  flex-shrink: 0;
`;

const sharedToggleButtonStyles = {
    marginRight: 0,
    background: 'none',
    backgroundColor: 'transparent',
    border: `1px solid ${theme.palette.neutralTertiary}`,
    borderBottom: 0,
    borderTopLeftRadius: '4px',
    borderTopRightRadius: '4px',
    padding: '4px 12px',
    minWidth: 100,
    transition: `border ${AnimationVariables.durationValue3} ${AnimationVariables.easeFunction1}`
  };

  const codeButtonActiveStyles: IRawStyle = {
    backgroundColor: NeutralColors.gray20,
    borderColor: NeutralColors.gray90,
    selectors: {
      '.ms-Button-icon': {
        color: theme.palette.themePrimary
      },
      '.ms-Button-label': {
        color: NeutralColors.gray160
      }
    }
  };

  const dropdownStyles: Partial = {
    caretDownWrapper: {
      top: '6px'
    },
    title: [

import { IStyleFunction, IRawStyle } from 'office-ui-fabric-react';
import { FontSizes, NeutralColors } from '@uifabric/fluent-theme';
import { ICodeSnippetStyleProps, ICodeSnippetStyles } from './CodeSnippet';

const codeFontFamily = 'Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace';

export const baseCodeStyle: IRawStyle = {
  fontFamily: codeFontFamily,
  fontSize: FontSizes.size14,
  background: NeutralColors.gray20,
  color: NeutralColors.gray160
};

export const getStyles: IStyleFunction = props => {
  return {
    root: [
      {
        overflowY: 'auto',
        maxHeight: '400px',
        display: 'flex',
        margin: '12px 0',

        selectors: {
          code: {
            fontFamily: codeFontFamily,
            lineHeight: '1.6'

flex-shrink: 0;
  width: 255px;
`;

//remove TODO
export const projectWrapper = css``;

export const projectHeader = css`
  font-weight: bold;
  padding: 7px 10px;
  line-height: 14px;
  font-size: ${FontSizes.medium};
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: ${NeutralColors.gray20};
`;

export const projectTree = css`
  flex-grow: 3;
  flex-shrink: 3;
`;

export const assetTree = css`
  flex-grow: 2;
  flex-shrink: 2;
`;
/*******/

export const editorContainer = css`
  display: flex;
  flex-direction: column;