Migrate Font Awesome to modern @use syntax with wrapper files

Co-authored-by: santib <6373536+santib@users.noreply.github.com>

Author: Copilot

app/assets/stylesheets/_fontawesome_wrapper.scss

@@ -0,0 +1,17 @@
+// Wrapper to use Font Awesome with modern @use syntax
+// Configure variables before loading Font Awesome
+@use '@fortawesome/fontawesome-free/scss/variables' with (
+  $font-path: "."
+);
+
+// Load Font Awesome core modules
+@forward '@fortawesome/fontawesome-free/scss/core';
+@forward '@fortawesome/fontawesome-free/scss/sizing';
+@forward '@fortawesome/fontawesome-free/scss/widths';
+@forward '@fortawesome/fontawesome-free/scss/list';
+@forward '@fortawesome/fontawesome-free/scss/bordered';
+@forward '@fortawesome/fontawesome-free/scss/pulled';
+@forward '@fortawesome/fontawesome-free/scss/animated';
+@forward '@fortawesome/fontawesome-free/scss/rotated-flipped';
+@forward '@fortawesome/fontawesome-free/scss/stacked';
+@forward '@fortawesome/fontawesome-free/scss/icons';

app/assets/stylesheets/_solid_wrapper.scss

@@ -0,0 +1,2 @@
+// Wrapper to use Font Awesome Solid with modern @use syntax
+@forward '@fortawesome/fontawesome-free/scss/solid';

app/assets/stylesheets/active_admin.scss

@@ -1,3 +1,7 @@
+// Font Awesome with modern @use syntax (via wrapper files)
+@use 'fontawesome_wrapper';
+@use 'solid_wrapper';
+
 // Sass variable overrides must be declared before loading up Active Admin's styles.
 //
 // To view the variables that Active Admin provides, take a look at
@@ -6,12 +10,9 @@
 //
 // For example, to change the sidebar width:
 // $sidebar-width: 242px;
-$fa-font-path: ".";
 
 // Active Admin's got SASS!
 @import 'arctic_admin/src/scss/main';
-@import '@fortawesome/fontawesome-free/scss/fontawesome';
-@import '@fortawesome/fontawesome-free/scss/solid';
 
 // Overriding any non-variable Sass must be done after the fact.
 // For example, to change the default status-tag color:

package.json

@@ -19,6 +19,6 @@
   "scripts": {
     "build": "yarn build:js && yarn build:css",
     "build:js": "node esbuild.config.mjs",
-    "build:css": "sass ./app/assets/stylesheets:./app/assets/builds --no-source-map --load-path=node_modules --silence-deprecation=import --silence-deprecation=color-functions --silence-deprecation=global-builtin"
+    "build:css": "sass ./app/assets/stylesheets:./app/assets/builds --no-source-map --load-path=node_modules --quiet-deps --silence-deprecation=import"
   }
 }