How to use the @uifabric/fluent-theme.FontSizes.size14 function in @uifabric/fluent-theme

export const commandBarButton = active => ({
  root: {
    color: active ? '#000' : '#4f4f4f',
    height: '36px',
    width: '220px',
    fontSize: `${FontSizes.size14}`,
    paddingLeft: '0px',
    paddingRight: '0px',
    marginLeft: '0px',
    backgroundColor: 'transparent',
  },
  icon: {
    color: active ? '#000' : '#4f4f4f',
    padding: '0 13px',
    marginLeft: '0px',
    boxSizing: 'border-box',
    fontSize: `${FontSizes.size16}`,
  },
  textContainer: {
    textAlign: 'left',
    zIndex: '1',
    // display: isExpand ? 'inline-block' : 'none',

import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
import { FontSizes } from '@uifabric/fluent-theme';

export const styles = {
  dialog: {
    title: {
      fontWeight: FontWeights.bold,
      fontSize: FontSizes.size20,
      paddingTop: '14px',
      paddingBottom: '11px',
    },
    subText: {
      fontSize: FontSizes.size14,
    },
  },
  modal: {
    main: {
      // maxWidth: '416px !important',
      maxWidth: '80% !important',
      width: '960px !important',
    },
  },
  halfstack: {
    root: [
      {
        flexBasis: '50%',
      },
    ],
  },

stackinput: {
    root: [
      {
        marginBottom: '1rem',
      },
    ],
  },
  dialog: {
    title: {
      fontWeight: FontWeights.bold,
      fontSize: FontSizes.size20,
      paddingTop: '14px',
      paddingBottom: '11px',
    },
    subText: {
      fontSize: FontSizes.size14,
    },
  },
  modal: {
    main: {
      maxWidth: '80% !important',
      width: '960px !important',
    },
  },
  input: {
    subComponentStyles: {
      label: {
        root: [
          {
            fontWeight: FontWeights.semibold,
          },
        ],

import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
import { FontSizes } from '@uifabric/fluent-theme';
import { IDialogContentStyles } from 'office-ui-fabric-react/lib/Dialog';
import { IModalStyles } from 'office-ui-fabric-react/lib/Modal';

export const styles: { dialog: Partial; modal: Partial } = {
  dialog: {
    title: {
      fontWeight: FontWeights.bold,
      fontSize: FontSizes.size20,
      paddingTop: '14px',
      paddingBottom: '11px',
    },
    subText: {
      fontSize: FontSizes.size14,
    },
  },
  modal: {
    main: {
      maxWidth: '416px !important',
    },
  },
};

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,

height: 50,
        lineHeight: 50,
        padding: isLargeDown ? 0 : '0 20px',
        backgroundColor: '#272630',
        overflow: 'hidden',
        whiteSpace: 'no-wrap',
        userSelect: 'none',
        color: 'white'
      },
      globalClassNames.root
    ],
    title: [
      commonStyles,

      {
        fontSize: FontSizes.size14,
        lineHeight: 48
      },
      globalClassNames.title
    ],
    button: [
      commonStyles,
      getFocusStyle(theme, { inset: 1, borderColor: theme.palette.themeLight, outlineColor: 'transparent' }),
      {
        position: 'relative',
        textDecoration: 'none',
        background: 'none',
        backgroundColor: 'transparent',
        border: 'none',
        padding: '0 10px',
        minWidth: 50,
        lineHeight: 50,

export const addButton = (depth: number) => css`
  margin-left: ${depth * 16}px;
  font-size: 12px;
  color: #0078d4;
`;

export const styles = {
  dialog: {
    title: {
      fontWeight: FontWeights.bold,
      fontSize: FontSizes.size20,
      paddingTop: '14px',
      paddingBottom: '11px',
    },
    subText: {
      fontSize: FontSizes.size14,
    },
  },
  modal: {
    main: {
      maxWidth: '600px !important',
    },
  },
};

export const dropdownStyles = {
  label: {
    fontWeight: FontWeights.semibold,
  },
  dropdown: {
    width: '300px',
  },