Fix SASS import to @use

Author: camd

ui/css/bootstrap-custom.scss

@@ -1,78 +1,71 @@
 // Treeherder Bootstrap 5 Customization
 // This file sets global variables before Bootstrap is imported
+// Using @use instead of deprecated @import (Dart Sass 3.0 compatibility)
 
-// Typography - Use browser default 16px to match production
-$font-size-root: null; // Use browser default 16px root font size
-$font-size-base: 1rem; // 16px (match production)
-$font-size-sm: 0.875rem; // 14px
-$font-size-lg: 1.25rem; // 20px
+// Forward our customizations to Bootstrap using @use with configuration
+@use 'sass:map';
 
-// Font family - Match production
-$font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+// Bootstrap 5 customization via @use ... with ()
+@use '~bootstrap/scss/bootstrap' with (
+  // Typography - Use browser default 16px to match production
+  $font-size-root: null,
+  $font-size-base: 1rem,
+  $font-size-sm: 0.875rem,
+  $font-size-lg: 1.25rem,
 
-// Line heights
-$line-height-base: 1.42857143; // Match previous Treeherder line height (19.88px at 14px font)
+  // Font family - Match production
+  $font-family-sans-serif: ('Helvetica Neue', Helvetica, Arial, sans-serif),
 
-// Spacing scale - maintain existing spacing
-$spacer: 1rem;
-$spacers: (
-  0: 0,
-  1: $spacer * 0.25,
-  // 0.25rem = 4px
-  2: $spacer * 0.5,
-  // 0.5rem = 8px
-  3: $spacer * 0.75,
-  // 0.75rem = 12px
-  4: $spacer,
-  // 1rem = 16px
-  5: $spacer * 1.5,
-  // 1.5rem = 24px
-  6: $spacer * 7.5,
-  // 7.5rem = 120px
-);
-
-// Buttons - maintain original sizing
-$btn-padding-y: 0.375rem;
-$btn-padding-x: 0.75rem;
-$btn-font-size: $font-size-base;
-$btn-line-height: 1.5;
-
-$btn-padding-y-sm: 0.25rem;
-$btn-padding-x-sm: 0.5rem;
-$btn-font-size-sm: $font-size-sm; // 12px
+  // Line heights
+  $line-height-base: 1.42857143,
 
-$btn-padding-y-lg: 0.5rem;
-$btn-padding-x-lg: 1rem;
-$btn-font-size-lg: $font-size-lg; // 16px
+  // Spacing scale - maintain existing spacing
+  $spacer: 1rem,
+  $spacers: (
+    0: 0,
+    1: 0.25rem,
+    2: 0.5rem,
+    3: 0.75rem,
+    4: 1rem,
+    5: 1.5rem,
+    6: 7.5rem,
+  ),
 
-// Form controls
-$input-padding-y: 0.375rem;
-$input-padding-x: 0.75rem;
-$input-font-size: $font-size-base;
-$input-line-height: 1.5;
+  // Buttons - maintain original sizing
+  $btn-padding-y: 0.375rem,
+  $btn-padding-x: 0.75rem,
+  $btn-font-size: 1rem,
+  $btn-line-height: 1.5,
+  $btn-padding-y-sm: 0.25rem,
+  $btn-padding-x-sm: 0.5rem,
+  $btn-font-size-sm: 0.875rem,
+  $btn-padding-y-lg: 0.5rem,
+  $btn-padding-x-lg: 1rem,
+  $btn-font-size-lg: 1.25rem,
 
-$input-padding-y-sm: 0.25rem;
-$input-padding-x-sm: 0.5rem;
-$input-font-size-sm: $font-size-sm; // 12px
+  // Form controls
+  $input-padding-y: 0.375rem,
+  $input-padding-x: 0.75rem,
+  $input-font-size: 1rem,
+  $input-line-height: 1.5,
+  $input-padding-y-sm: 0.25rem,
+  $input-padding-x-sm: 0.5rem,
+  $input-font-size-sm: 0.875rem,
 
-// Links
-$link-color: #337ab7; // Treeherder link color from treeherder-base.css
-$link-decoration: none;
-$link-hover-decoration: none;
+  // Links
+  $link-color: #337ab7,
+  $link-decoration: none,
+  $link-hover-decoration: none,
 
-// Navbar
-$navbar-dark-color: rgba(255, 255, 255, 0.75);
-$navbar-dark-hover-color: rgba(255, 255, 255, 0.9);
-$navbar-dark-active-color: #fff;
-$navbar-padding-y: 0;
-$navbar-padding-x: 0;
+  // Navbar
+  $navbar-dark-color: rgba(255, 255, 255, 0.75),
+  $navbar-dark-hover-color: rgba(255, 255, 255, 0.9),
+  $navbar-dark-active-color: #fff,
+  $navbar-padding-y: 0,
+  $navbar-padding-x: 0,
 
-// Dropdowns
-$dropdown-font-size: $font-size-base;
-$dropdown-item-padding-y: 0.5rem;
-$dropdown-item-padding-x: 1rem;
-
-// Import Bootstrap 5 with customizations
-// Using @use would require restructuring the entire import
-// For now, suppress the deprecation warning via sass-loader options
-@import '~bootstrap/scss/bootstrap';
+  // Dropdowns
+  $dropdown-font-size: 1rem,
+  $dropdown-item-padding-y: 0.5rem,
+  $dropdown-item-padding-x: 1rem
+);