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

text-decoration: none;
  color: #4f4f4f;
  position: relative;
  ${underTest && `pointer-events: none;`}
  ${!underTest &&
    `&::after {
      content: '';
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
    }

    &:hover {
      background-color: ${active ? NeutralColors.gray40 : NeutralColors.gray30};
    }

    &:focus {
      outline: none;
      .ms-Fabric--isFocusVisible &::after {
        content: "";
        position: absolute;
        z-index: 1;
        border: 1px solid ${NeutralColors.white};
        border-image: initial;
        outline: rgb(102, 102, 102) solid 1px;
      }
    }

    ${active &&
      `background-color: ${NeutralColors.gray40};

export const getStyles = (): ISetupWizardActionBarStyles => {
  return {
    root: {
      whiteSpace: 'nowrap',
      width: '100%',
      display: 'flex',
      flexDirection: 'row',
      border: `1px solid ${NeutralColors.gray40}`,
      height: '75px',
      alignItems: 'center'
    },
    backAction: [
      DefaultFontStyles.medium,
      actionLinkStyle,
      {
        marginLeft: '30px',
        width: '221px'
      }
    ],
    mainAction: [
      DefaultFontStyles.xxLarge,
      actionLinkStyle,
      {
        color: SharedColors.cyanBlue10,

color: NeutralColors.gray130,
        display: 'flex',
        flexDirection: 'column',
        height: '100%'
      }
    ],
    titleSection: {
      border: `1px solid ${NeutralColors.gray40}`,
      height: '75px'
    },
    actionBarSection: {
      whiteSpace: 'nowrap',
      width: '100%',
      display: 'flex',
      flexDirection: 'row',
      border: `1px solid ${NeutralColors.gray40}`,
      height: '75px',
      alignItems: 'center'
    }
  };
};

export const divider = isExpand => css`
  width: ${isExpand ? '85%' : '40%'};
  border-bottom: 1px solid ${NeutralColors.gray40};
  margin: 0 auto;
`;

export const globalNav = css`
  height: 44px;
  width: 48px;
  text-align: center;
  line-height: 44px;
  cursor: pointer;
  font-size: ${FontSizes.size16};
  color: ${SharedColors.cyanBlue10};
  &:hover {
    background: ${NeutralColors.gray40};
  }
`;

export const content = css`
  outline: none;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
`;

export const showDesign = show => css`
  display: ${show ? 'block' : 'none'} !important;
`;

export const leftNavBottom = () => css`