How to use @uifabric/variants - 10 common examples

const fillVariantSlotsList = (variantType: VariantThemeType): JSX.Element[] => {
    if (props.theme) {
      let currThemeVariant: ITheme;
      let noneVariant = getVariant(props.theme, VariantThemeType.None);
      currThemeVariant = getVariant(props.theme, variantType);
      const currVariantSemanticSlots = currThemeVariant.semanticColors;
      /* "trimming" to get rid of the seamantic color slots & palette slots we don't use for theme designer app */
      const trimmedSemanticSlots = trimSemanticSlotsOrNames(currVariantSemanticSlots);
      const currVariantPaletteSlots = noneVariant.palette; // palette slot values should be based off the default variant
      const trimmedPaletteSlots = trimPaletteSlots(currVariantPaletteSlots);
      const mapping: IMapping = {};
      /**
       * Iterate through the list of semantic colors.
       * For each semantic color, check if it's hex color string is in the list of palette colors.
       * If it is, add it to the mapping.
       */
      for (let semanticColor in trimmedSemanticSlots) {
        if (semanticColor) {
          const paletteColorHexStr = trimmedSemanticSlots[semanticColor as keyof ISemanticColors];
          for (let palette in trimmedPaletteSlots) {

const fillVariantSlotsList = (variantType: VariantThemeType): JSX.Element[] => {
    if (props.theme) {
      let currThemeVariant: ITheme;
      let noneVariant = getVariant(props.theme, VariantThemeType.None);
      currThemeVariant = getVariant(props.theme, variantType);
      const currVariantSemanticSlots = currThemeVariant.semanticColors;
      /* "trimming" to get rid of the seamantic color slots & palette slots we don't use for theme designer app */
      const trimmedSemanticSlots = trimSemanticSlotsOrNames(currVariantSemanticSlots);
      const currVariantPaletteSlots = noneVariant.palette; // palette slot values should be based off the default variant
      const trimmedPaletteSlots = trimPaletteSlots(currVariantPaletteSlots);
      const mapping: IMapping = {};
      /**
       * Iterate through the list of semantic colors.
       * For each semantic color, check if it's hex color string is in the list of palette colors.
       * If it is, add it to the mapping.
       */
      for (let semanticColor in trimmedSemanticSlots) {
        if (semanticColor) {
          const paletteColorHexStr = trimmedSemanticSlots[semanticColor as keyof ISemanticColors];
          for (let palette in trimmedPaletteSlots) {
            if (trimmedPaletteSlots[palette] === paletteColorHexStr) {

}
      const tempJSXList: JSX.Element[] = [];
      for (let i = 0; i < slotNames.length; i++) {
        let slot = slotNames[i];
        let currSlotJSX = semanticSlotWidget(currVariantSemanticSlots[slot as keyof ISemanticColors], mapping[slot]);
        tempJSXList.push(currSlotJSX);
      }
      return tempJSXList;
    } else {
      return [];
    }
  };

  let semanticSlotsNone = props.theme.semanticColors;
  slotNames = trimSemanticSlotsOrNames(Object.keys(semanticSlotsNone)) as ISlotNames;
  noneSlots = fillVariantSlotsList(VariantThemeType.None);
  neutralSlots = fillVariantSlotsList(VariantThemeType.Neutral);
  softSlots = fillVariantSlotsList(VariantThemeType.Soft);
  strongSlots = fillVariantSlotsList(VariantThemeType.Strong);

  return (
    <div>
      
    </div>
  );
};

borderWidth: 1,
            textSize: 13.5,
            textWeight: 600,
            iconSize: 12,
            contentPadding: '0px 6px'
          },
          !props.circular && {
            minHeight: 26
          }
        ];
      }
    }
  }
};

addVariants(WordCustomizations.settings.theme);

textColorHovered: '#fff',
              textColorPressed: '#fff',
              iconColorHovered: '#fff',
              iconColorPressed: '#fff'
            },
          props.primary &&
            !props.disabled && {
              iconColor: 'white'
            }
        ];
      }
    }
  }
};

addVariants(TeamsCustomizations.settings.theme);

import { FluentTheme } from './fluent/FluentTheme';
import { FluentStyles } from './fluent/FluentStyles';
import { ICustomizations } from 'office-ui-fabric-react';
import { addVariants } from '@uifabric/variants';

export const FluentCustomizations: ICustomizations = {
  settings: {
    theme: { ...FluentTheme }
  },
  scopedSettings: { ...FluentStyles }
};

addVariants(FluentCustomizations.settings.theme);

const tempJSXList: JSX.Element[] = [];
      for (let i = 0; i < slotNames.length; i++) {
        let slot = slotNames[i];
        let currSlotJSX = semanticSlotWidget(currVariantSemanticSlots[slot as keyof ISemanticColors], mapping[slot]);
        tempJSXList.push(currSlotJSX);
      }
      return tempJSXList;
    } else {
      return [];
    }
  };

  let semanticSlotsNone = props.theme.semanticColors;
  slotNames = trimSemanticSlotsOrNames(Object.keys(semanticSlotsNone)) as ISlotNames;
  noneSlots = fillVariantSlotsList(VariantThemeType.None);
  neutralSlots = fillVariantSlotsList(VariantThemeType.Neutral);
  softSlots = fillVariantSlotsList(VariantThemeType.Soft);
  strongSlots = fillVariantSlotsList(VariantThemeType.Strong);

  return (
    <div>
      
    </div>
  );
};

for (let i = 0; i < slotNames.length; i++) {
        let slot = slotNames[i];
        let currSlotJSX = semanticSlotWidget(currVariantSemanticSlots[slot as keyof ISemanticColors], mapping[slot]);
        tempJSXList.push(currSlotJSX);
      }
      return tempJSXList;
    } else {
      return [];
    }
  };

  let semanticSlotsNone = props.theme.semanticColors;
  slotNames = trimSemanticSlotsOrNames(Object.keys(semanticSlotsNone)) as ISlotNames;
  noneSlots = fillVariantSlotsList(VariantThemeType.None);
  neutralSlots = fillVariantSlotsList(VariantThemeType.Neutral);
  softSlots = fillVariantSlotsList(VariantThemeType.Soft);
  strongSlots = fillVariantSlotsList(VariantThemeType.Strong);

  return (
    <div>
      
    </div>
  );
};

let slot = slotNames[i];
        let currSlotJSX = semanticSlotWidget(currVariantSemanticSlots[slot as keyof ISemanticColors], mapping[slot]);
        tempJSXList.push(currSlotJSX);
      }
      return tempJSXList;
    } else {
      return [];
    }
  };

  let semanticSlotsNone = props.theme.semanticColors;
  slotNames = trimSemanticSlotsOrNames(Object.keys(semanticSlotsNone)) as ISlotNames;
  noneSlots = fillVariantSlotsList(VariantThemeType.None);
  neutralSlots = fillVariantSlotsList(VariantThemeType.Neutral);
  softSlots = fillVariantSlotsList(VariantThemeType.Soft);
  strongSlots = fillVariantSlotsList(VariantThemeType.Strong);

  return (
    <div>
      
    </div>
  );
};

purpleLight: '#b4a0ff',
  blueDark: '#002050',
  blueMid: '#00188f',
  blue: '#0078d4',
  blueLight: '#00bcf2',
  tealDark: '#004b50',
  teal: '#008272',
  tealLight: '#00b294',
  greenDark: '#004b1c',
  green: '#107c10',
  greenLight: '#bad80a'
};

export const defaultTheme: ITheme = getTheme(true);

export const neutralTheme = getNeutralVariant(defaultTheme);
export const softTheme = getSoftVariant(defaultTheme);
export const strongTheme = getStrongVariant(defaultTheme);

export const invertedDefaultTheme: ITheme = createTheme({
  palette: invertedDefaultPalette,
  semanticColors: {
    bodyText: defaultTheme.palette.white,
    bodyBackground: defaultTheme.palette.neutralPrimary
  }
});

export const invertedPrimaryTheme: ITheme = createTheme({
  palette: invertedPrimaryPalette,
  semanticColors: {
    bodyText: defaultTheme.palette.white,
    bodyBackground: defaultTheme.palette.themePrimary