feat: Add FontAwesome 6.4.0

src/styles/fontawesome/_animated.less

@@ -0,0 +1,152 @@
+// 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)';
+}
+
+.@{fa-css-prefix}-bounce {
+  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, 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))';
+}
+
+.@{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))';
+}
+
+.@{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)';
+}
+
+.@{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, ease-in-out)';
+}
+
+.@{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)';
+}
+
+.@{fa-css-prefix}-spin-reverse {
+  --@{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));';
+}
+
+// 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 {
+    animation-delay: -1ms;
+    animation-duration: 1ms;
+    animation-iteration-count: 1;
+    transition-delay: 0s;
+    transition-duration: 0s;
+  }
+}
+
+@keyframes ~'@{fa-css-prefix}-beat' {
+  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); }
+}
+
+@keyframes ~'@{fa-css-prefix}-fade' {
+  50% { opacity: ~'var(--@{fa-css-prefix}-fade-opacity, 0.4)'; }
+}
+
+@keyframes ~'@{fa-css-prefix}-beat-fade' {
+  0%, 100% {
+    opacity: ~'var(--@{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))';
+  }
+}
+
+@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))';
+  }
+}
+
+@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); }
+}
+
+@keyframes ~'@{fa-css-prefix}-spin' {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

src/styles/fontawesome/_bordered-pulled.less

@@ -0,0 +1,20 @@
+// 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})';
+}
+
+.@{fa-css-prefix}-pull-left { 
+  float: left;
+  margin-right: ~'var(--@{fa-css-prefix}-pull-margin, @{fa-pull-margin})'; 
+}
+
+.@{fa-css-prefix}-pull-right { 
+  float: right;
+  margin-left: ~'var(--@{fa-css-prefix}-pull-margin, @{fa-pull-margin})'; 
+}

src/styles/fontawesome/_core.less

@@ -0,0 +1,38 @@
+// 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})';
+}
+
+.@{fa-css-prefix},
+.fas,
+.@{fa-css-prefix}-solid,
+.fass,
+.@{fa-css-prefix}-sharp,
+.far,
+.@{fa-css-prefix}-regular,
+.fab,
+.@{fa-css-prefix}-brands {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: ~'var(--@{fa-css-prefix}-display, @{fa-display})';
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+}
+
+.fas,
+.@{fa-css-prefix}-classic,
+.@{fa-css-prefix}-solid,
+.far,
+.@{fa-css-prefix}-regular {
+  font-family: 'Font Awesome 6 Free';
+}
+
+.fab,
+.@{fa-css-prefix}-brands {
+  font-family: 'Font Awesome 6 Brands';
+}
+

src/styles/fontawesome/_fixed-width.less

@@ -0,0 +1,7 @@
+// fixed-width icons
+// -------------------------
+
+.@{fa-css-prefix}-fw {
+  text-align: center;
+  width: @fa-fw-width;
+}

src/styles/fontawesome/_icons.less

@@ -0,0 +1,9 @@
+// specific icon class definition
+// -------------------------
+
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+   readers do not read off random characters that represent icons */
+
+each(.fa-icons(), {
+  .@{fa-css-prefix}-@{key}::before { content: @value; }
+});

src/styles/fontawesome/_list.less

@@ -0,0 +1,18 @@
+// icons in a list
+// -------------------------
+
+.@{fa-css-prefix}-ul {
+  list-style-type: none;
+  margin-left: ~'var(--@{fa-css-prefix}-li-margin, @{fa-li-margin})';
+  padding-left: 0;
+
+  > li { position: relative; }
+}
+
+.@{fa-css-prefix}-li {
+  left: calc(~'var(--@{fa-css-prefix}-li-width, @{fa-li-width})' * -1);
+  position: absolute;
+  text-align: center;
+  width: ~'var(--@{fa-css-prefix}-li-width, @{fa-li-width})';
+  line-height: inherit;
+}

src/styles/fontawesome/_mixins.less

@@ -0,0 +1,78 @@
+// mixins
+// --------------------------
+
+// base rendering for an icon
+.fa-icon() {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+}
+
+// sets relative font-sizing and alignment (in _sizing)
+.fa-size(@font-size) {
+  font-size: (@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: (1 / @font-size) * 1em; // sets the line-height of the icon back to that of it's parent
+  vertical-align: ((6 / @font-size) - (3 / 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
+}
+
+// only display content to screen readers
+// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+.fa-sr-only() {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+// use in conjunction with .sr-only to only display content when it's focused
+.fa-sr-only-focusable() {
+  &:not(:focus) {
+    .fa-sr-only();
+  }
+}
+
+// sets a specific icon family to use alongside style + icon mixins
+.fa-family-classic() {
+  font-family: 'Font Awesome 6 Free';
+}
+
+// convenience mixins for declaring pseudo-elements by CSS variable,
+// including all style-specific font properties, and both the ::before
+// and ::after elements in the duotone case.
+.fa-icon-solid(@fa-var) {
+  .fa-icon;
+  .fa-solid;
+
+  &::before {
+    content: @fa-var;
+  }
+}
+
+.fa-icon-regular(@fa-var) {
+  .fa-icon;
+  .fa-regular;
+
+  &::before {
+    content: @fa-var;
+  }
+}
+
+.fa-icon-brands(@fa-var) {
+  .fa-icon;
+  .fa-brands;
+
+  &::before {
+    content: @fa-var;
+  }
+}
+

src/styles/fontawesome/_rotated-flipped.less

@@ -0,0 +1,31 @@
+// rotating + flipping icons
+// -------------------------
+
+.@{fa-css-prefix}-rotate-90 {
+  transform: rotate(90deg);
+}
+
+.@{fa-css-prefix}-rotate-180 {
+  transform: rotate(180deg);
+}
+
+.@{fa-css-prefix}-rotate-270 {
+  transform: rotate(270deg);
+}
+
+.@{fa-css-prefix}-flip-horizontal {
+  transform: scale(-1, 1);
+}
+
+.@{fa-css-prefix}-flip-vertical {
+  transform: scale(1, -1);
+}
+
+.@{fa-css-prefix}-flip-both,
+.@{fa-css-prefix}-flip-horizontal.@{fa-css-prefix}-flip-vertical { 
+  transform: scale(-1, -1);
+}
+
+.@{fa-css-prefix}-rotate-by {
+  transform: rotate(~'var(--@{fa-css-prefix}-rotate-angle, none)');
+}

src/styles/fontawesome/_screen-reader.less

@@ -0,0 +1,14 @@
+// screen-reader utilities
+// -------------------------
+
+// only display content to screen readers
+.sr-only,
+.@{fa-css-prefix}-sr-only {
+  .fa-sr-only();
+}
+
+// use in conjunction with .sr-only to only display content when it's focused
+.sr-only-focusable,
+.@{fa-css-prefix}-sr-only-focusable {
+  .fa-sr-only-focusable();
+}