Merge pull request FortAwesome#206 from FortAwesome/v6.1.0-wip

Upgrade to Font Awesome Free 6.1.0

README.md

@@ -15,7 +15,7 @@ You can find more detailed information on these changes on our [Getting Started]
 In your Gemfile include:
 
 ```ruby
-gem 'font-awesome-sass', '~> 6.0.0'
+gem 'font-awesome-sass', '~> 6.1.0'
 ```
 
 And then execute:

assets/stylesheets/_font-awesome.scss

@@ -1,5 +1,5 @@
 /*!
- * Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 6.1.0 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2022 Fonticons, Inc.
  */
@@ -19,15 +19,6 @@
 @import "font-awesome/stacked";
 @import "font-awesome/icons";
 @import "font-awesome/screen-reader";
-
-@function fa-font-path($file) {
-  @if function-exists("font-path") {
-    @return font-path("font-awesome/#{$file}");
-  } @else {
-    @return "#{$fa-font-path}/#{$file}";
-  }
-}
-
-@import "solid";
-@import "regular";
-@import "brands";
+@import "font-awesome/solid";
+@import "font-awesome/regular";
+@import "font-awesome/brands";

assets/stylesheets/font-awesome/_animated.scss

@@ -16,7 +16,7 @@
   animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
   animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
   animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
 }
 
 .#{$fa-css-prefix}-fade {
@@ -25,7 +25,7 @@
   animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
   animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
   animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
 }
 
 .#{$fa-css-prefix}-beat-fade {
@@ -34,7 +34,7 @@
   animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
   animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
   animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
 }
 
 .#{$fa-css-prefix}-flip {
@@ -99,26 +99,60 @@
 }
 
 @keyframes #{$fa-css-prefix}-beat {
-  0%, 90% { transform: scale(1); }
-  45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); }
+  0%,
+  90% {
+    transform: scale(1);
+  }
+  45% {
+    transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25));
+  }
 }
 
 @keyframes #{$fa-css-prefix}-bounce {
-  0%   { transform: scale(1,1) translateY(0); }
-  10%  { transform: scale(var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
-  30%  { transform: scale(var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em)); }
-  50%  { transform: scale(var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
-  57%  { transform: scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em)); }
-  64%  { transform: scale(1,1) translateY(0); }
-  100% { transform: scale(1,1) translateY(0); }
+  0% {
+    transform: scale(1, 1) translateY(0);
+  }
+  10% {
+    transform: scale(
+        var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),
+        var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)
+      )
+      translateY(0);
+  }
+  30% {
+    transform: scale(
+        var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),
+        var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)
+      )
+      translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em));
+  }
+  50% {
+    transform: scale(
+        var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),
+        var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)
+      )
+      translateY(0);
+  }
+  57% {
+    transform: scale(1, 1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em));
+  }
+  64% {
+    transform: scale(1, 1) translateY(0);
+  }
+  100% {
+    transform: scale(1, 1) translateY(0);
+  }
 }
 
 @keyframes #{$fa-css-prefix}-fade {
-  50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); }
+  50% {
+    opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4);
+  }
 }
 
 @keyframes #{$fa-css-prefix}-beat-fade {
-  0%, 100% {
+  0%,
+  100% {
     opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
     transform: scale(1);
   }
@@ -130,24 +164,53 @@
 
 @keyframes #{$fa-css-prefix}-flip {
   50% {
-    transform: rotate3d(var(--#{$fa-css-prefix}-flip-x, 0), var(--#{$fa-css-prefix}-flip-y, 1), var(--#{$fa-css-prefix}-flip-z, 0), var(--#{$fa-css-prefix}-flip-angle, -180deg));
+    transform: rotate3d(
+      var(--#{$fa-css-prefix}-flip-x, 0),
+      var(--#{$fa-css-prefix}-flip-y, 1),
+      var(--#{$fa-css-prefix}-flip-z, 0),
+      var(--#{$fa-css-prefix}-flip-angle, -180deg)
+    );
   }
 }
 
 @keyframes #{$fa-css-prefix}-shake {
-  0% { transform: rotate(-15deg); }
-  4% { transform: rotate(15deg); }
-  8%, 24% { transform: rotate(-18deg); }
-  12%, 28% { transform: rotate(18deg); }
-  16% { transform: rotate(-22deg); }
-  20% { transform: rotate(22deg); }
-  32% { transform: rotate(-12deg); }
-  36% { transform: rotate(12deg); }
-  40%, 100% { transform: rotate(0deg); }
+  0% {
+    transform: rotate(-15deg);
+  }
+  4% {
+    transform: rotate(15deg);
+  }
+  8%,
+  24% {
+    transform: rotate(-18deg);
+  }
+  12%,
+  28% {
+    transform: rotate(18deg);
+  }
+  16% {
+    transform: rotate(-22deg);
+  }
+  20% {
+    transform: rotate(22deg);
+  }
+  32% {
+    transform: rotate(-12deg);
+  }
+  36% {
+    transform: rotate(12deg);
+  }
+  40%,
+  100% {
+    transform: rotate(0deg);
+  }
 }
 
 @keyframes #{$fa-css-prefix}-spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
-

assets/stylesheets/font-awesome/_bordered-pulled.scss

@@ -9,12 +9,12 @@
   padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
 }
 
-.#{$fa-css-prefix}-pull-left { 
+.#{$fa-css-prefix}-pull-left {
   float: left;
-  margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); 
+  margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
 }
 
-.#{$fa-css-prefix}-pull-right { 
+.#{$fa-css-prefix}-pull-right {
   float: right;
-  margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); 
+  margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
 }

assets/stylesheets/_brands.scss → assets/stylesheets/font-awesome/_brands.scss

@@ -1,14 +1,14 @@
 /*!
- * Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 6.1.0 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2022 Fonticons, Inc.
  */
-@import "font-awesome/functions";
-@import "font-awesome/variables";
+@import "functions";
+@import "variables";
 
 :root,
 :host {
-  --#{ $fa-css-prefix }-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
+  --#{$fa-css-prefix}-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
 }
 
 @font-face {
@@ -21,13 +21,13 @@
 }
 
 .fab,
-.fa-brands {
+.#{$fa-css-prefix}-brands {
   font-family: "Font Awesome 6 Brands";
   font-weight: 400;
 }
 
 @each $name, $icon in $fa-brand-icons {
   .#{$fa-css-prefix}-#{$name}:before {
-    content: fa-content($icon);
+    content: unquote('"#{ $icon }"');
   }
 }

assets/stylesheets/font-awesome/_core.scss

@@ -2,23 +2,23 @@
 // -------------------------
 
 .#{$fa-css-prefix} {
-  font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');
+  font-family: var(--#{$fa-css-prefix}-style-family, "#{$fa-style-family}");
   font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
 }
 
 .#{$fa-css-prefix},
 .fas,
-.fa-solid,
+.#{$fa-css-prefix}-solid,
 .far,
-.fa-regular,
+.#{$fa-css-prefix}-regular,
 .fal,
-.fa-light,
+.#{$fa-css-prefix}-light,
 .fat,
-.fa-thin,
+.#{$fa-css-prefix}-thin,
 .fad,
-.fa-duotone,
+.#{$fa-css-prefix}-duotone,
 .fab,
-.fa-brands {
+.#{$fa-css-prefix}-brands {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: var(--#{$fa-css-prefix}-display, #{$fa-display});

assets/stylesheets/font-awesome/_functions.scss

@@ -1,7 +1,12 @@
 // functions
 // --------------------------
 
-// Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
+// fa-content: convenience function used to set content property
+@function fa-content($fa-var) {
+  @return unquote('"#{ $fa-var }"');
+}
+
+// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
 //
 // Licensed under: The MIT License (MIT)
 //
@@ -25,6 +30,7 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
+
 @function fa-divide($dividend, $divisor, $precision: 10) {
   $sign: if($dividend > 0 and $divisor > 0, 1, -1);
   $dividend: abs($dividend);
@@ -45,7 +51,16 @@
     $remainder: $remainder - $divisor;
   }
   @if $remainder > 0 and $precision > 0 {
-    $remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * .1;
+    $remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * 0.1;
   }
   @return ($quotient + $remainder) * $sign;
 }
+
+// fa-font-path: function used to set font path to webfont files
+@function fa-font-path($file) {
+  @if function-exists("font-path") {
+    @return font-path("font-awesome/#{$file}");
+  } @else {
+    @return "#{$fa-font-path}/#{$file}";
+  }
+}

assets/stylesheets/font-awesome/_icons.scss

@@ -5,5 +5,7 @@
 readers do not read off random characters that represent icons */
 
 @each $name, $icon in $fa-icons {
-  .#{$fa-css-prefix}-#{$name}::before { content: fa-content($icon); }
+  .#{$fa-css-prefix}-#{$name}::before {
+    content: unquote('"#{ $icon }"');
+  }
 }

assets/stylesheets/font-awesome/_list.scss

@@ -6,7 +6,9 @@
   margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin});
   padding-left: 0;
 
-  > li { position: relative; }
+  > li {
+    position: relative;
+  }
 }
 
 .#{$fa-css-prefix}-li {

assets/stylesheets/font-awesome/_mixins.scss

@@ -13,7 +13,7 @@
 }
 
 // sets relative font-sizing and alignment (in _sizing)
-@mixin fa-size ($font-size) {
+@mixin fa-size($font-size) {
   font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
   line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
   vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
@@ -49,7 +49,7 @@
   @extend .fa-solid;
 
   &::before {
-    content: unquote("\"#{ $fa-var }\"");
+    content: unquote('"#{ $fa-var }"');
   }
 }
 
@@ -58,7 +58,7 @@
   @extend .fa-regular;
 
   &::before {
-    content: unquote("\"#{ $fa-var }\"");
+    content: unquote('"#{ $fa-var }"');
   }
 }
 
@@ -67,7 +67,6 @@
   @extend .fa-brands;
 
   &::before {
-    content: unquote("\"#{ $fa-var }\"");
+    content: unquote('"#{ $fa-var }"');
   }
 }
-