How to use the @uifabric/variants.VariantThemeType.None function in @uifabric/variants

To help you get started, we’ve selected a few @uifabric/variants examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OfficeDev / office-ui-fabric-react / apps / theming-designer / src / components / SemanticSlots.tsx View on Github external
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) {
github OfficeDev / office-ui-fabric-react / apps / theming-designer / src / components / SemanticSlots.tsx View on Github external
}
      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>
  );
};