feat(lint): adjust templates to match linted FUI code (#215)

This PR reflects the changes of fomantic/Fomantic-UI#2610

Author: lubber-de

src/templates/icon.variables.liquid

@@ -5,7 +5,7 @@
 
 /*******************************
 
-Fomantic-UI integration of FontAwesome :
+Fomantic-UI integration of FontAwesome:
 
 // class names are separated
 i.icon.angle-left  =>  i.icon.angle.left
@@ -31,9 +31,9 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
              Icon
 *******************************/
 
-/*--------------
+/* --------------
    Font Files
----------------*/
+--------------- */
 
 /* Solid Icons */
 @importIcons: true;
@@ -45,158 +45,155 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
 
 @fonts: {
 {% if icons.solid.icons.length > 0 -%}
-  @solid: {
-    font-family: @fontName;
-    src: url("@{fontPath}/@{fontName}.woff2") format('woff2')
-    if(@supportIE, e(',') url("@{fontPath}/@{fontName}.woff") format('woff'));
-    font-style     : normal;
-    font-weight    : @normal;
-    font-display   : block;
-    font-variant   : normal;
-    text-decoration: inherit;
-    text-transform : none;
-  };
+    @solid: {
+        font-family: @fontName;
+        src: url('@{fontPath}/@{fontName}.woff2') format('woff2')
+            if(@supportIE, e(',') url('@{fontPath}/@{fontName}.woff') format('woff'));
+        font-style: normal;
+        font-weight: @normal;
+        font-display: block;
+        font-variant: normal;
+        text-decoration: inherit;
+        text-transform: none;
+    };
 {%- endif %}
 {% if icons.outline.icons.length > 0 -%}
-  @outline: {
-    font-family: @outlineFontName;
-    src: url("@{fontPath}/@{outlineFontName}.woff2") format('woff2')
-    if(@supportIE, e(',') url("@{fontPath}/@{outlineFontName}.woff") format('woff'));
-    font-style     : normal;
-    font-weight    : @normal;
-    font-display   : block;
-    font-variant   : normal;
-    text-decoration: inherit;
-    text-transform : none;
-  };
+    @outline: {
+        font-family: @outlineFontName;
+        src: url('@{fontPath}/@{outlineFontName}.woff2') format('woff2')
+            if(@supportIE, e(',') url('@{fontPath}/@{outlineFontName}.woff') format('woff'));
+        font-style: normal;
+        font-weight: @normal;
+        font-display: block;
+        font-variant: normal;
+        text-decoration: inherit;
+        text-transform: none;
+    };
 {%- endif %}
 {% if icons.thin.icons.length > 0 -%}
-  @thin: {
-    font-family: @thinFontName;
-    src: url("@{fontPath}/@{thinFontName}.woff2") format('woff2')
-    if(@supportIE, e(',') url("@{fontPath}/@{thinFontName}.woff") format('woff'));
-    font-style     : normal;
-    font-weight    : @normal;
-    font-display   : block;
-    font-variant   : normal;
-    text-decoration: inherit;
-    text-transform : none;
-  };
+    @thin: {
+        font-family: @thinFontName;
+        src: url('@{fontPath}/@{thinFontName}.woff2') format('woff2')
+            if(@supportIE, e(',') url('@{fontPath}/@{thinFontName}.woff') format('woff'));
+        font-style: normal;
+        font-weight: @normal;
+        font-display: block;
+        font-variant: normal;
+        text-decoration: inherit;
+        text-transform: none;
+    };
 {%- endif %}
 {% if icons.brand.icons.length > 0 -%}
-  @brand: {
-    font-family: @brandFontName;
-    src: url("@{fontPath}/@{brandFontName}.woff2") format('woff2')
-    if(@supportIE, e(',') url("@{fontPath}/@{brandFontName}.woff") format('woff'));
-    font-style     : normal;
-    font-weight    : @normal;
-    font-display   : block;
-    font-variant   : normal;
-    text-decoration: inherit;
-    text-transform : none;
-  };
+    @brand: {
+        font-family: @brandFontName;
+        src: url('@{fontPath}/@{brandFontName}.woff2') format('woff2')
+            if(@supportIE, e(',') url('@{fontPath}/@{brandFontName}.woff') format('woff'));
+        font-style: normal;
+        font-weight: @normal;
+        font-display: block;
+        font-variant: normal;
+        text-decoration: inherit;
+        text-transform: none;
+    };
 {%- endif %}
 {% if icons.duotone.icons.length > 0 -%}
-  @duotone: {
-  font-family: @duotoneFontName;
-  src: url("@{fontPath}/@{duotoneFontName}.woff2") format('woff2')
-  if(@supportIE, e(',') url("@{fontPath}/@{duotoneFontName}.woff") format('woff'));
-  font-style     : normal;
-  font-weight    : @normal;
-  font-display   : block;
-  font-variant   : normal;
-  text-decoration: inherit;
-  text-transform : none;
-  };
+    @duotone: {
+        font-family: @duotoneFontName;
+        src: url('@{fontPath}/@{duotoneFontName}.woff2') format('woff2')
+            if(@supportIE, e(',') url('@{fontPath}/@{duotoneFontName}.woff') format('woff'));
+        font-style: normal;
+        font-weight: @normal;
+        font-display: block;
+        font-variant: normal;
+        text-decoration: inherit;
+        text-transform: none;
+    };
 {%- endif %}
-
 };
 
-
 // Underscores in map keys will be replaced by dots to separate classnames at compile time
 
-/* Deprecated *In/Out Naming Conflict) */
+/* Deprecated (In/Out Naming Conflict) */
 @icon-deprecated-map: {
-  linkedin_in:\f0e1;
-  zoom_in: \f00e;
-  zoom_out: \f010;
-  sign_in: \f2f6;
-  in_cart: \f218;
-  log_out: \f2f5;
-  sign_out: \f2f5;
+    linkedin_in: '\f0e1';
+    zoom_in: '\f00e';
+    zoom_out: '\f010';
+    sign_in: '\f2f6';
+    in_cart: '\f218';
+    log_out: '\f2f5';
+    sign_out: '\f2f5';
 };
 
 /* Icons */
 @icon-map: {
 {% for icon in icons.solid.icons -%}
-  {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
+    {{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
 {% endfor -%}
 };
 
 @icon-aliases-map: {
 {% for icon in icons.solid.aliases -%}
-  {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
+    {{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
 {% endfor -%}
 };
 
 @icon-outline-map: {
 {% for icon in icons.outline.icons -%}
-  {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
+    {{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
 {% endfor -%}
 };
 @icon-outline-aliases-map: {
 {% for icon in icons.outline.aliases -%}
-  {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
+    {{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
 {% endfor -%}
 };
 
 @icon-thin-map: {
 {% for icon in icons.thin.icons -%}
-  {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
+    {{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
 {% endfor -%}
 };
 @icon-thin-aliases-map: {
 {% for icon in icons.thin.aliases -%}
-  {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
+    {{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
 {% endfor -%}
 };
 
 @icon-brand-map: {
 {% for icon in icons.brand.icons -%}
-  {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
+    {{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
 {% endfor -%}
 };
 @icon-brand-aliases-map: {
 {% for icon in icons.brand.aliases -%}
-  {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
+    {{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
 {% endfor -%}
 };
 
 @icon-duotone-map: {
 {% for icon in icons.duotone.icons -%}
-  {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
+    {{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
 {% endfor -%}
 };
 @icon-duotone-secondary-map: {
 {% for icon in icons.duotone.icons -%}
-  {{ icon.className | replace: ".", "_" }}: {{ icon.secondaryUnicode }};
+    {{ icon.className | replace: ".", "_" }}: '{{ icon.secondaryUnicode }}';
 {% endfor -%}
 };
 @icon-duotone-aliases-map: {
 {% for icon in icons.duotone.aliases -%}
-  {{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
+    {{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
 {% endfor -%}
 };
 @icon-duotone-secondary-aliases-map: {
 {% for icon in icons.duotone.aliases -%}
-  {{ icon.className | replace: ".", "_" }}: {{ icon.secondaryUnicode }};
+    {{ icon.className | replace: ".", "_" }}: '{{ icon.secondaryUnicode }}';
 {% endfor -%}
 };
 
-
-/*--------------
+/* --------------
    Definition
----------------*/
+--------------- */
 
 /* Icon Variables */
 @opacity: 1;
@@ -205,7 +202,6 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
 @distanceFromText: 0.25rem;
 @lineHeight: 1;
 
-
 /* Variations */
 @linkOpacity: 0.8;
 @linkDuration: 0.3s;
@@ -225,16 +221,16 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
 @cornerIconSize: 0.45em;
 @cornerIconStroke: 1px;
 @cornerIconShadow:
-  -@cornerIconStroke -@cornerIconStroke 0 @white,
-   @cornerIconStroke -@cornerIconStroke 0 @white,
-  -@cornerIconStroke  @cornerIconStroke 0 @white,
-   @cornerIconStroke  @cornerIconStroke 0 @white
+    -@cornerIconStroke -@cornerIconStroke 0 @white,
+    @cornerIconStroke -@cornerIconStroke 0 @white,
+    -@cornerIconStroke  @cornerIconStroke 0 @white,
+    @cornerIconStroke  @cornerIconStroke 0 @white
 ;
 @cornerIconInvertedShadow:
-  -@cornerIconStroke -@cornerIconStroke 0 @black,
-   @cornerIconStroke -@cornerIconStroke 0 @black,
-  -@cornerIconStroke  @cornerIconStroke 0 @black,
-   @cornerIconStroke  @cornerIconStroke 0 @black
+    -@cornerIconStroke -@cornerIconStroke 0 @black,
+    @cornerIconStroke -@cornerIconStroke 0 @black,
+    -@cornerIconStroke  @cornerIconStroke 0 @black,
+    @cornerIconStroke  @cornerIconStroke 0 @black
 ;
 
 @cornerOffset: 0;
@@ -248,3 +244,9 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
 @big: 2em;
 @huge: 4em;
 @massive: 8em;
+
+/* Duotone specifics */
+@duotonePrimaryColor: inherit;
+@duotonePrimaryOpacity: 1;
+@duotoneSecondaryColor: inherit;
+@duotoneSecondaryOpacity: 0.4;