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

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

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 { 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: [

return designerName || dialogName || sdkOverrides.title || title || schema.title || startCase(name);
  };

  const getDescription = (): string => {
    return sdkOverrides.description || description || schema.description || '';
  };

  return (
    <div id="{props.id}">
      <div>
        
        {sdkOverrides.description !== false &amp;&amp; (description || schema.description) &amp;&amp; (
          <p>
            {getDescription()}
            {sdkOverrides.helpLink &amp;&amp; sdkOverrides.helpLinkText &amp;&amp; (
              &lt;&gt;
                <br>
                <br>
                <a rel="noopener noreferrer" href="{sdkOverrides.helpLink}">
                  {sdkOverrides.helpLinkText}
                </a>
              
            )}
          </p>
        )}
      </div></div>

{
          fontSize: FontSizes.size32,
          marginBottom: '28px'
        }
      ],

      props.as === 'h2' && [
        {
          fontSize: FontSizes.size24,
          marginBottom: '20px'
        }
      ],

      props.as === 'h3' && [
        {
          fontSize: FontSizes.size20,
          marginBottom: '8px'
        }
      ],
      className
    ]
  };
};

visibility: visible;
    }
  }
`;

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: {

{
        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: {