Merge pull request #474 from sylhare/font-awesome-sass-3

Fix deprecation warning for fontawesome
sylhare · Nov 26, 2024 · e36689f · e36689f
2 parents ea6badc + 4aed6b9
commit e36689f
Show file tree

Hide file tree

Showing 20 changed files with 873 additions and 831 deletions.
diff --git a/_sass/external/_font-awesome.scss b/_sass/external/_font-awesome.scss
@@ -2,11 +2,14 @@
  * Type-on-strap Font Awesome kit v6.7.1
  * Find the version and license of the included Font Awesome here: _sass/external/font-awesome/fontawesome.scss
  */
-$fa-inverse: var(--background);
 $fa-font-path: "../fonts/font-awesome" !default;
+$fa-inverse: var(--background);
 
-@import 'font-awesome/fontawesome';
-@import 'font-awesome/brands';
-@import 'font-awesome/regular';
-@import 'font-awesome/solid';
-@import 'font-awesome/v4-shims';
+@use 'font-awesome/fontawesome' with (
+  $fa-font-path: $fa-font-path,
+  $fa-inverse: $fa-inverse
+);
+@use 'font-awesome/brands';
+@use 'font-awesome/regular';
+@use 'font-awesome/solid';
+@use 'font-awesome/v4-shims';
diff --git a/_sass/external/font-awesome/_animated.scss b/_sass/external/font-awesome/_animated.scss
@@ -1,95 +1,97 @@
+@use "variables";
+
 // animating icons
 // --------------------------
 
-.#{$fa-css-prefix}-beat {
-  animation-name: #{$fa-css-prefix}-beat;
-  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
-  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, ease-in-out);
+.#{variables.$fa-css-prefix}-beat {
+  animation-name: #{variables.$fa-css-prefix}-beat;
+  animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, ease-in-out);
 }
 
-.#{$fa-css-prefix}-bounce {
-  animation-name: #{$fa-css-prefix}-bounce;
-  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
-  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));
+.#{variables.$fa-css-prefix}-bounce {
+  animation-name: #{variables.$fa-css-prefix}-bounce;
+  animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
 }
 
-.#{$fa-css-prefix}-fade {
-  animation-name: #{$fa-css-prefix}-fade;
-  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
-  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));
+.#{variables.$fa-css-prefix}-fade {
+  animation-name: #{variables.$fa-css-prefix}-fade;
+  animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
 }
 
-.#{$fa-css-prefix}-beat-fade {
-  animation-name: #{$fa-css-prefix}-beat-fade;
-  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
-  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));
+.#{variables.$fa-css-prefix}-beat-fade {
+  animation-name: #{variables.$fa-css-prefix}-beat-fade;
+  animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
 }
 
-.#{$fa-css-prefix}-flip {
-  animation-name: #{$fa-css-prefix}-flip;
-  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
-  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, ease-in-out);
+.#{variables.$fa-css-prefix}-flip {
+  animation-name: #{variables.$fa-css-prefix}-flip;
+  animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, ease-in-out);
 }
 
-.#{$fa-css-prefix}-shake {
-  animation-name: #{$fa-css-prefix}-shake;
-  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
-  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, linear);
+.#{variables.$fa-css-prefix}-shake {
+  animation-name: #{variables.$fa-css-prefix}-shake;
+  animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, linear);
 }
 
-.#{$fa-css-prefix}-spin {
-  animation-name: #{$fa-css-prefix}-spin;
-  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
-  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
+.#{variables.$fa-css-prefix}-spin {
+  animation-name: #{variables.$fa-css-prefix}-spin;
+  animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 2s);
+  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, linear);
 }
 
-.#{$fa-css-prefix}-spin-reverse {
-  --#{$fa-css-prefix}-animation-direction: reverse;
+.#{variables.$fa-css-prefix}-spin-reverse {
+  --#{variables.$fa-css-prefix}-animation-direction: reverse;
 }
 
-.#{$fa-css-prefix}-pulse,
-.#{$fa-css-prefix}-spin-pulse {
-  animation-name: #{$fa-css-prefix}-spin;
-  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, steps(8));
+.#{variables.$fa-css-prefix}-pulse,
+.#{variables.$fa-css-prefix}-spin-pulse {
+  animation-name: #{variables.$fa-css-prefix}-spin;
+  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, steps(8));
 }
 
 // if agent or operating system prefers reduced motion, disable animations
 // see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
 // see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
 @media (prefers-reduced-motion: reduce) {
-  .#{$fa-css-prefix}-beat,
-  .#{$fa-css-prefix}-bounce,
-  .#{$fa-css-prefix}-fade,
-  .#{$fa-css-prefix}-beat-fade,
-  .#{$fa-css-prefix}-flip,
-  .#{$fa-css-prefix}-pulse,
-  .#{$fa-css-prefix}-shake,
-  .#{$fa-css-prefix}-spin,
-  .#{$fa-css-prefix}-spin-pulse {
+  .#{variables.$fa-css-prefix}-beat,
+  .#{variables.$fa-css-prefix}-bounce,
+  .#{variables.$fa-css-prefix}-fade,
+  .#{variables.$fa-css-prefix}-beat-fade,
+  .#{variables.$fa-css-prefix}-flip,
+  .#{variables.$fa-css-prefix}-pulse,
+  .#{variables.$fa-css-prefix}-shake,
+  .#{variables.$fa-css-prefix}-spin,
+  .#{variables.$fa-css-prefix}-spin-pulse {
     animation-delay: -1ms;
     animation-duration: 1ms;
     animation-iteration-count: 1;
@@ -98,43 +100,43 @@
   }
 }
 
-@keyframes #{$fa-css-prefix}-beat {
+@keyframes #{variables.$fa-css-prefix}-beat {
   0%, 90% { transform: scale(1); }
-  45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); }
+  45% { transform: scale(var(--#{variables.$fa-css-prefix}-beat-scale, 1.25)); }
 }
 
-@keyframes #{$fa-css-prefix}-bounce {
+@keyframes #{variables.$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)); }
+  10%  { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{variables.$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
+  30%  { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{variables.$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{variables.$fa-css-prefix}-bounce-height, -0.5em)); }
+  50%  { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{variables.$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
+  57%  { transform: scale(1,1) translateY(var(--#{variables.$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); }
+@keyframes #{variables.$fa-css-prefix}-fade {
+  50% { opacity: var(--#{variables.$fa-css-prefix}-fade-opacity, 0.4); }
 }
 
-@keyframes #{$fa-css-prefix}-beat-fade {
+@keyframes #{variables.$fa-css-prefix}-beat-fade {
   0%, 100% {
-    opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
+    opacity: var(--#{variables.$fa-css-prefix}-beat-fade-opacity, 0.4);
     transform: scale(1);
   }
   50% {
     opacity: 1;
-    transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
+    transform: scale(var(--#{variables.$fa-css-prefix}-beat-fade-scale, 1.125));
   }
 }
 
-@keyframes #{$fa-css-prefix}-flip {
+@keyframes #{variables.$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(--#{variables.$fa-css-prefix}-flip-x, 0), var(--#{variables.$fa-css-prefix}-flip-y, 1), var(--#{variables.$fa-css-prefix}-flip-z, 0), var(--#{variables.$fa-css-prefix}-flip-angle, -180deg));
   }
 }
 
-@keyframes #{$fa-css-prefix}-shake {
+@keyframes #{variables.$fa-css-prefix}-shake {
   0% { transform: rotate(-15deg); }
   4% { transform: rotate(15deg); }
   8%, 24% { transform: rotate(-18deg); }
@@ -146,7 +148,7 @@
   40%, 100% { transform: rotate(0deg); }
 }
 
-@keyframes #{$fa-css-prefix}-spin {
+@keyframes #{variables.$fa-css-prefix}-spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
diff --git a/_sass/external/font-awesome/_bordered-pulled.scss b/_sass/external/font-awesome/_bordered-pulled.scss
@@ -1,20 +1,22 @@
+@use "variables";
+
 // bordered + pulled icons
 // -------------------------
 
-.#{$fa-css-prefix}-border {
-  border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
-  border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
-  border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
-  border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
-  padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
+.#{variables.$fa-css-prefix}-border {
+  border-color: var(--#{variables.$fa-css-prefix}-border-color, #{variables.$fa-border-color});
+  border-radius: var(--#{variables.$fa-css-prefix}-border-radius, #{variables.$fa-border-radius});
+  border-style: var(--#{variables.$fa-css-prefix}-border-style, #{variables.$fa-border-style});
+  border-width: var(--#{variables.$fa-css-prefix}-border-width, #{variables.$fa-border-width});
+  padding: var(--#{variables.$fa-css-prefix}-border-padding, #{variables.$fa-border-padding});
 }
 
-.#{$fa-css-prefix}-pull-left {
+.#{variables.$fa-css-prefix}-pull-left {
   float: left;
-  margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); 
+  margin-right: var(--#{variables.$fa-css-prefix}-pull-margin, #{variables.$fa-pull-margin}); 
 }
 
-.#{$fa-css-prefix}-pull-right {
+.#{variables.$fa-css-prefix}-pull-right {
   float: right;
-  margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); 
+  margin-left: var(--#{variables.$fa-css-prefix}-pull-margin, #{variables.$fa-pull-margin}); 
 }
diff --git a/_sass/external/font-awesome/_core.scss b/_sass/external/font-awesome/_core.scss
@@ -1,21 +1,24 @@
+@use "mixins";
+@use "variables";
+
 // base icon class definition
 // -------------------------
 
-.#{$fa-css-prefix} {
-  font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');
-  font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
+.#{variables.$fa-css-prefix} {
+  font-family: var(--#{variables.$fa-css-prefix}-style-family, '#{variables.$fa-style-family}');
+  font-weight: var(--#{variables.$fa-css-prefix}-style, #{variables.$fa-style});
 }
 
 .fas,
 .far,
 .fab,
-.#{$fa-css-prefix}-solid,
-.#{$fa-css-prefix}-regular,
-.#{$fa-css-prefix}-brands,
-.#{$fa-css-prefix} {
+.#{variables.$fa-css-prefix}-solid,
+.#{variables.$fa-css-prefix}-regular,
+.#{variables.$fa-css-prefix}-brands,
+.#{variables.$fa-css-prefix} {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  display: var(--#{$fa-css-prefix}-display, #{$fa-display});
+  display: var(--#{variables.$fa-css-prefix}-display, #{variables.$fa-display});
   font-style: normal;
   font-variant: normal;
   line-height: 1;
@@ -25,25 +28,25 @@
 .fas::before,
 .far::before,
 .fab::before,
-.#{$fa-css-prefix}-solid::before,
-.#{$fa-css-prefix}-regular::before,
-.#{$fa-css-prefix}-brands::before,
+.#{variables.$fa-css-prefix}-solid::before,
+.#{variables.$fa-css-prefix}-regular::before,
+.#{variables.$fa-css-prefix}-brands::before,
 .fa::before {
-  content: var(#{$fa-icon-property});
+  content: var(#{variables.$fa-icon-property});
 }
 
-.#{$fa-css-prefix}-classic,
+.#{variables.$fa-css-prefix}-classic,
 .fas,
-.#{$fa-css-prefix}-solid,
+.#{variables.$fa-css-prefix}-solid,
 .far,
-.#{$fa-css-prefix}-regular {
+.#{variables.$fa-css-prefix}-regular {
   font-family: 'Font Awesome 6 Free';
 }
-.#{$fa-css-prefix}-brands,
+.#{variables.$fa-css-prefix}-brands,
 .fab {
   font-family: 'Font Awesome 6 Brands';
 }
 
 %fa-icon {
-  @include fa-icon;
+  @include mixins.fa-icon;
 }
diff --git a/_sass/external/font-awesome/_fixed-width.scss b/_sass/external/font-awesome/_fixed-width.scss
@@ -1,7 +1,9 @@
+@use "variables";
+
 // fixed-width icons
 // -------------------------
 
-.#{$fa-css-prefix}-fw {
+.#{variables.$fa-css-prefix}-fw {
   text-align: center;
-  width: $fa-fw-width;
+  width: variables.$fa-fw-width;
 }
diff --git a/_sass/external/font-awesome/_functions.scss b/_sass/external/font-awesome/_functions.scss
@@ -1,9 +1,11 @@
+@use "sass:math";
+@use "sass:string";
 // functions
 // --------------------------
 
 // fa-content: convenience function used to set content property
 @function fa-content($fa-var) {
-  @return unquote("\"#{ $fa-var }\"");
+  @return string.unquote("\"#{ $fa-var }\"");
 }
 
 // fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
@@ -33,8 +35,8 @@
 
 @function fa-divide($dividend, $divisor, $precision: 10) {
   $sign: if($dividend > 0 and $divisor > 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
+  $dividend: math.abs($dividend);
+  $divisor: math.abs($divisor);
   $quotient: 0;
   $remainder: $dividend;
   @if $dividend == 0 {