feat(icon): support duotone icons

Thanks to @testinfected who prepared a PR to create duotone icons in create-fomantic-icons script
The changes are adopted from his PR

This PR prepares FUI to support Font Awesome duotone icons . As those need a pro plan, the generation of related selectors is disabled by default (as the duotone icon list is also empty by default) and one has to set variationInconDuotone: true as well as generate the icon.variables via fomantic/create-fomantic-icons before being able to use them in FUI

When used, such icons can benefit from a color combination to be set via primary-secondary classname logic. For example

<!-- This will show a duotone icon inheriting the default text color --> 
<i class="camera duotone icon"></i>

<!-- This will show a duotone icon inheriting the single purple color --> 
<i class="purple camera duotone icon"></i>

<!-- THIS however will show a duotone icon having a red primary and a purple secondary icon --> 
<i class="red-purple camera duotone icon"></i>

src/definitions/elements/icon.less

@@ -163,7 +163,7 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
     transform: scale(1, -1);
   }
 
-  & when(@variationIconGroups) {
+  & when (@variationIconGroups) {
     .icons i.flipped.icon:not(.corner):not(:first-child),
     .icons i.horizontally.flipped.icon:not(.corner):not(:first-child) {
       transform: translateX(-50%) translateY(-50%) scale(-1, 1);
@@ -194,7 +194,7 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
     transform: rotate(180deg);
   }
 
-  & when(@variationIconGroups) {
+  & when (@variationIconGroups) {
     .icons i.rotated.rotated.icon:not(.corner):not(:first-child),
     .icons i.right.rotated.icon:not(.corner):not(:first-child),
     .icons i.clockwise.rotated.icon:not(.corner):not(:first-child) {
@@ -245,7 +245,7 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
     transform: scale(1, -1) rotate(180deg);
   }
 
-  & when(@variationIconGroups) {
+  & when (@variationIconGroups) {
     .icons i.rotated.flipped.icon:not(.corner):not(:first-child),
     .icons i.right.rotated.flipped.icon:not(.corner):not(:first-child),
     .icons i.clockwise.rotated.flipped.icon:not(.corner):not(:first-child) {
@@ -529,6 +529,16 @@ i.icons {
   });
 };
 
+.generateSecondaryIcons(@map) {
+  each(@map,{
+    @escapedKey: replace(@key,'^([0-9])','\3$1 ');
+    @normalizedKey: replace(@escapedKey,'_','.','g');
+    i.icon.@{normalizedKey}::after {
+      content: "@{value}";
+    }
+  });
+};
+
 & when (@variationIconDeprecated) {
 
   /* Deprecated *In/Out Naming Conflict) */
@@ -584,7 +594,7 @@ i.icons {
   }
 }
 
-& when(@variationIconBrand) {
+& when (@variationIconBrand) {
   /*******************************
             Brand Icons
   *******************************/
@@ -598,4 +608,68 @@ i.icons {
   }
 }
 
+& when (@variationIconDuotone) {
+  /*******************************
+            Duotone Icons
+  *******************************/
+
+  /* Make duotone icons use the proper font */
+  i.icon.duotone {
+    font-family: @duotoneFontName;
+    /* To position the secondary layer on top of the first layer */
+    position: relative;
+  }
+
+  /* Set the default opacity levels and colors for each layer */
+  i.icon.duotone::before {
+    color: @duotonePrimaryColor;
+    opacity: @duotonePrimaryOpacity;
+  }
+
+  i.icon.duotone::after {
+    /* Position secondary layer to the left, centered horizontally and aligned vertically to flex with different line heights */
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: center;
+
+    color: @duotoneSecondaryColor;
+    opacity: @duotoneSecondaryOpacity;
+  }
+
+  .generateIcons(@icon-duotone-map,false);
+  .generateSecondaryIcons(@icon-duotone-secondary-map);
+
+  & when (@variationIconAliases) {
+
+    /* Aliases */
+    .generateIcons(@icon-duotone-aliases-map,false);
+    .generateSecondaryIcons(@icon-duotone-secondary-aliases-map);
+  }
+
+  /*
+   * Colors for duotone icons, in the form `primary-secondary`(e.g. `black-grey duotone icon`).
+   */
+  & when not (@variationIconColors = false) {
+    each(@variationIconColors, {
+      @color: @value;
+      @c: @colors[@@color][color];
+      @l: @colors[@@color][light];
+
+      i.icon.duotone[class*="@{color}-"]::before,
+      i.icon.duotone[class*="-@{color}"]::after {
+        color: @c;
+      }
+
+      & when (@variationIconInverted) {
+        i.icon.inverted.duotone[class*="@{color}-"]::before,
+        i.icon.inverted.duotone[class*="-@{color}"]::after {
+          color: @l;
+        }
+      }
+    })
+  }
+}
+
 .loadUIOverrides();

src/themes/default/elements/icon.variables

@@ -41,6 +41,7 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
 @outlineFontName: 'outline-icons';
 @thinFontName: 'thin-icons';
 @brandFontName: 'brand-icons';
+@duotoneFontName: 'duotone-icons';
 
 @fonts: {
 @solid: {
@@ -2062,6 +2063,14 @@ ycombinator: \f23b;
 youtube_play: \f167;
 };
 
+@icon-duotone-map: {
+};
+@icon-duotone-secondary-map: {
+};
+@icon-duotone-aliases-map: {
+};
+@icon-duotone-secondary-aliases-map: {
+};
 
 /*--------------
    Definition
@@ -2117,3 +2126,9 @@ youtube_play: \f167;
 @big: 2em;
 @huge: 4em;
 @massive: 8em;
+
+/* Duotone specifics */
+@duotonePrimaryColor: inherit;
+@duotonePrimaryOpacity: 1;
+@duotoneSecondaryColor: inherit;
+@duotoneSecondaryOpacity: 0.4;

src/themes/default/globals/variation.variables

@@ -91,7 +91,8 @@
 @variationIconAliases: true;
 @variationIconOutline: true;
 @variationIconBrand: true;
-@variationIconThin: true; /* Font Awesome Pro only */
+@variationIconThin: false; /* Font Awesome Pro only */
+@variationIconDuotone: false; /* Font Awesome Pro only */
 @variationIconDisabled: true;
 @variationIconInverted: true;
 @variationIconLoading: true;