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

font-weight: ${isActive ? FontWeights.semibold : FontWeights.regular};
  &: hover {
    color: #605e5c;
    background: #f2f2f2;
  }
  &:focus {
    outline: none;
    .ms-Fabric--isFocusVisible &::after {
      top: 0px;
      right: 1px;
      bottom: 0px;
      left: 1px;
      content: '';
      position: absolute;
      z-index: 1;
      border: 1px solid ${NeutralColors.white};
      border-image: initial;
      outline: rgb(102, 102, 102) solid 1px;
    }
  }
`;

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};

      &::after {
        border-left: 3px solid ${CommunicationColors.primary};
      }`}
  `}
`;

marginBottom: swatchGap,
        marginRight: swatchGap,
        position: 'relative',
        minWidth: isCondensed ? 'unset' : 112,
        width: `calc(100% / ${isCondensed ? swatchesPerRowCondensed : swatchesPerRow} - ${swatchGap})`
      },
      getFocusStyle(theme!, {
        inset: -1,
        width: 2
      })
    ],
    swatchSelected: {
      border: '2px solid ' + NeutralColors.gray100,
      selectors: {
        ':after': {
          border: '2px solid ' + NeutralColors.white,
          content: '',
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          top: 0
        }
      }
    },
    swatchTooltip: {
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'flex-end'
    },
    swatchContent: {