How to use the @uifabric/fluent-theme.NeutralColors.gray120 function in @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'
    },
    '.hljs-title, .hljs-section, .hljs-selector-id': {
      color: '#900',

SyntaxHighlighter.registerLanguage('typescript', ts);
SyntaxHighlighter.registerLanguage('scss', scss);
SyntaxHighlighter.registerLanguage('markdown', md);
SyntaxHighlighter.registerLanguage('bash', bash);
SyntaxHighlighter.registerLanguage('html', xml);

// Customize imported SyntaxHighlighter styles. Available properties:
// https://github.com/conorhastings/react-syntax-highlighter/blob/master/src/styles/hljs/github.js
style.hljs = {
  ...baseCodeStyle,
  padding: 8,
  overflowX: 'auto'
};
// Darken comment color for accessibility
style['hljs-comment'] = style['hljs-quote'] = {
  color: NeutralColors.gray120,
  fontStyle: 'italic'
};

export interface ICodeSnippetProps {
  className?: string;
  language?: string;
  styles?: IStyleFunctionOrObject;
  theme?: ITheme;
}

export type ICodeSnippetStyleProps = Pick;

export interface ICodeSnippetStyles {
  root: IStyle;
}

<a rel="noopener noreferrer" href="{helpURL}">
          {children}
        </a>
      ),
    }
  );

  const getHeight = () =&gt; {
    if (height === null || height === undefined) {
      return '100%';
    }

    return processSize(height);
  };

  let borderColor = NeutralColors.gray120;

  if (hovered) {
    borderColor = NeutralColors.gray160;
  }

  if (isInvalid) {
    borderColor = SharedColors.red20;
  }

  return (

import React, { useState, useRef, useLayoutEffect } from 'react';
import { Separator, createTheme, FontSizes, FontWeights, ISeparatorProps, IconButton } from 'office-ui-fabric-react';
import { NeutralColors } from '@uifabric/fluent-theme';
import { assign } from 'lodash';

const fieldHeaderTheme = createTheme({
  fonts: {
    medium: {
      fontSize: FontSizes.large,
      fontWeight: FontWeights.semibold,
    },
  },
  palette: {
    neutralLighter: NeutralColors.gray120,
  },
});

const defaultStyles: React.CSSProperties = { display: 'flex', justifyContent: 'space-between' };

interface SectionSeparatorProps extends ISeparatorProps {
  collapsable?: boolean;
  defaultCollapsed?: boolean;

  label: React.ReactNode | false;
  styles?: React.CSSProperties;
}

export default function SectionSeparator(props: SectionSeparatorProps) {
  const { styles: styleOverrides, collapsable, defaultCollapsed, label, ...rest } = props;
  const contentRef = useRef(null);