Fix SCSS Bootstrap warnings

- Upgrade Bootstrap from 5.2.0 to 5.3.8
- Modernize SCSS to use @use instead of @import
- Silence Bootstrap's internal Sass deprecation warnings in Vite config

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: bfirsh

.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm view:*)",
+      "Bash(ls:*)",
+      "Bash(npm run build:*)",
+      "Bash(npm test:*)"
+    ],
+    "deny": []
+  }
+}

package-lock.json

@@ -5,7 +5,7 @@
   "private": true,
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "5.2.0",
+    "bootstrap": "^5.3.8",
     "jsnes": "git+ssh://git@github.com/bfirsh/jsnes.git",
     "prop-types": "^15.8.1",
     "raven-js": "^3.27.2",

package.json

@@ -1,47 +1,21 @@
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-
-// Bootstrap customization, where we're supposed to
-$enable-rounded: false;
-$enable-print-styles: false;
-
-$body-bg: $black;
-$body-color: $gray-100;
-$link-color: $gray-100;
-$link-decoration: underline;
-$link-hover-color: $gray-500;
-$link-hover-decoration: underline;
-
-$theme-colors: map-merge(
-  $theme-colors,
-  (
-    primary: $white
-  )
+// Override Bootstrap variables before importing
+@use "bootstrap/scss/bootstrap" with (
+  $enable-rounded: false,
+  $body-bg: #000,
+  $body-color: #f8f9fa,
+  $link-color: #f8f9fa,
+  $link-decoration: underline,
+  $link-hover-color: #6c757d,
+  $link-hover-decoration: underline,
+  $list-group-bg: #000,
+  $list-group-border-color: #dee2e6,
+  $table-border-color: #212529,
+  $modal-content-bg: #000,
+  $modal-header-border-width: 0,
+  $modal-footer-border-width: 0,
+  $btn-close-color: #fff
 );
 
-$list-group-bg: $black;
-$list-group-border-color: $gray-300;
-
-$table-border-color: $gray-900;
-
-$modal-content-bg: $black;
-$modal-header-border-width: 0;
-$modal-footer-border-width: 0;
-
-$close-color: $white;
-$close-text-shadow: none;
-
-@import "bootstrap/scss/bootstrap";
-
-// Bootstrap customization, where we're not supposed to
-
-// Fix hover color being white
-@each $color, $value in $theme-colors {
-  .btn-outline-#{$color} {
-    @include button-outline-variant($value, $black);
-  }
-}
-
 html,
 body,
 #root {
@@ -123,3 +97,8 @@ img.controller-icon {
 h1 {
   font-size: 2.5rem;
 }
+
+// Fix hover color being white for outline buttons
+.btn-outline-primary {
+  --bs-btn-hover-bg: #000;
+}

src/index.scss

@@ -6,6 +6,18 @@ export default defineConfig({
   build: {
     outDir: "build",
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: [
+          "import",
+          "global-builtin",
+          "color-functions",
+          "if-function",
+        ],
+      },
+    },
+  },
   server: {
     port: 3000,
     open: true,