From b0d14d1766b10f147dbfa91e828f80852f21162e Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 4 Mar 2025 12:21:00 -0800
Subject: [PATCH] Migrate docs to Sass modules, comment out docs grid CSS

---
 site/src/components/DocsSidebar.astro   |  2 +-
 site/src/components/head/Scss.astro     |  6 +--
 site/src/components/head/ScssProd.astro |  4 +-
 site/src/scss/_ads.scss                 |  2 +-
 site/src/scss/_brand.scss               |  5 ++
 site/src/scss/_buttons.scss             |  7 ++-
 site/src/scss/_callouts.scss            |  4 ++
 site/src/scss/_colors.scss              |  7 +--
 site/src/scss/_component-examples.scss  | 64 ++++++++++++++-----------
 site/src/scss/_content.scss             | 11 +++--
 site/src/scss/_layout.scss              |  4 ++
 site/src/scss/_masthead.scss            | 10 ++--
 site/src/scss/_navbar.scss              | 19 ++++----
 site/src/scss/_search.scss              |  2 +
 site/src/scss/_sidebar.scss             |  9 ++--
 site/src/scss/_skippy.scss              |  3 ++
 site/src/scss/_syntax.scss              |  3 +-
 site/src/scss/_toc.scss                 |  6 +--
 site/src/scss/_variables.scss           | 62 +++++++++++++-----------
 site/src/scss/docs.scss                 | 26 +++++-----
 site/src/scss/docs_search.scss          |  4 +-
 21 files changed, 153 insertions(+), 107 deletions(-)

diff --git a/site/src/components/DocsSidebar.astro b/site/src/components/DocsSidebar.astro
index 1282ed7026..fb207fb2e9 100644
--- a/site/src/components/DocsSidebar.astro
+++ b/site/src/components/DocsSidebar.astro
@@ -20,7 +20,7 @@ const sidebar = getData('sidebar')
                 {group.icon && (
                   <svg
                     class="bi me-2"
-                    style={group.icon_color && `color: var(--bs-${group.icon_color});`}
+                    style={group.icon_color && `color: light-dark(var(--bs-${group.icon_color}-500), var(--bs-${group.icon_color}-300));`}
                     aria-hidden="true"
                   >
                     <use xlink:href={`#${group.icon}`} />
diff --git a/site/src/components/head/Scss.astro b/site/src/components/head/Scss.astro
index bf6b60ea05..e385fec32e 100644
--- a/site/src/components/head/Scss.astro
+++ b/site/src/components/head/Scss.astro
@@ -2,7 +2,7 @@
 ---
 
 <style is:global lang="scss">
-  @import '../../../../scss/bootstrap.scss';
-  @import '../../scss/docs';
-  @import '../../scss/docs_search';
+  @use '../../../../scss/bootstrap' as *;
+  @use '../../scss/docs' as *;
+  @use '../../scss/docs_search' as *;
 </style>
diff --git a/site/src/components/head/ScssProd.astro b/site/src/components/head/ScssProd.astro
index fc10fe75ab..4a639403f3 100644
--- a/site/src/components/head/ScssProd.astro
+++ b/site/src/components/head/ScssProd.astro
@@ -2,6 +2,6 @@
 ---
 
 <style is:global lang="scss">
-  @import '../../scss/docs';
-  @import '../../scss/docs_search';
+  @use '../../scss/docs' as *;
+  @use '../../scss/docs_search' as *;
 </style>
diff --git a/site/src/scss/_ads.scss b/site/src/scss/_ads.scss
index 87a7a88995..df88fb3381 100644
--- a/site/src/scss/_ads.scss
+++ b/site/src/scss/_ads.scss
@@ -17,7 +17,7 @@
   @include font-size(.8125rem);
   line-height: 1.4;
   text-align: left;
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bs-bg-1);
 
   a {
     color: var(--bs-body-color);
diff --git a/site/src/scss/_brand.scss b/site/src/scss/_brand.scss
index 03fe2fe1ff..447602965f 100644
--- a/site/src/scss/_brand.scss
+++ b/site/src/scss/_brand.scss
@@ -1,3 +1,8 @@
+@use "../../../scss/config" as *;
+@use "../../../scss/colors" as *;
+@use "../../../scss/layout/breakpoints" as *;
+@use "variables" as *;
+
 //
 // Brand guidelines
 //
diff --git a/site/src/scss/_buttons.scss b/site/src/scss/_buttons.scss
index 8e4c3838d2..2708811848 100644
--- a/site/src/scss/_buttons.scss
+++ b/site/src/scss/_buttons.scss
@@ -1,3 +1,8 @@
+@use "sass:color";
+@use "../../../scss/config" as *;
+@use "../../../scss/colors" as *;
+@use "variables" as *;
+
 // Buttons
 //
 // Custom buttons for the docs.
@@ -32,7 +37,7 @@
 }
 
 .btn-bd-light {
-  --btn-custom-color: #{mix($bd-violet, $white, 75%)};
+  --btn-custom-color: #{color.mix($bd-violet, $white, 75%)};
 
   --bs-btn-color: var(--bs-gray-600);
   --bs-btn-border-color: var(--bs-border-color);
diff --git a/site/src/scss/_callouts.scss b/site/src/scss/_callouts.scss
index c3e5629a8e..b5a4cfba54 100644
--- a/site/src/scss/_callouts.scss
+++ b/site/src/scss/_callouts.scss
@@ -1,3 +1,7 @@
+@use "../../../scss/config" as *;
+@use "../../../scss/colors" as *;
+@use "variables" as *;
+
 //
 // Callouts
 //
diff --git a/site/src/scss/_colors.scss b/site/src/scss/_colors.scss
index 0b3313f10b..9dcd942f26 100644
--- a/site/src/scss/_colors.scss
+++ b/site/src/scss/_colors.scss
@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "sass:string";
 @use "../../../scss/config" as *;
 @use "../../../scss/colors" as *;
 @use "../../../scss/layout/breakpoints" as *;
@@ -25,9 +26,9 @@
       line-height: 1.35;
       white-space: pre;
       content:
-        str-slice($contrast-ratio, 1, 4) "\A"
-        str-slice($against-white, 1, 4) "\A"
-        str-slice($against-black, 1, 4);
+        string.slice($contrast-ratio, 1, 4) "\A"
+        string.slice($against-white, 1, 4) "\A"
+        string.slice($against-black, 1, 4);
       background-color: $value;
       background-image:
         linear-gradient(
diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index 177836fcd8..2cbe64e8cc 100644
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -1,3 +1,11 @@
+@use "../../../scss/config" as *;
+@use "../../../scss/variables" as *;
+@use "../../../scss/vendor/rfs" as *;
+@use "../../../scss/layout/breakpoints" as *;
+@use "../../../scss/mixins/clearfix" as *;
+@use "../../../scss/mixins/border-radius" as *;
+@use "variables" as *;
+
 //
 // Docs examples
 //
@@ -93,13 +101,13 @@
   .fixed-top,
   .sticky-top {
     position: static;
-    margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
+    margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding);
   }
 
   .fixed-bottom,
   .sticky-bottom {
     position: static;
-    margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)); // stylelint-disable-line function-disallowed-list
+    margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding));
 
   }
 
@@ -137,39 +145,39 @@
   border: 1px solid rgba(var(--bd-violet-rgb), .3);
 }
 
-// Grid mixins
-.example-container {
-  width: 800px;
-  @include make-container();
-}
+// // Grid mixins
+// .example-container {
+//   width: 800px;
+//   @include make-container();
+// }
 
-.example-row {
-  @include make-row();
-}
+// .example-row {
+//   @include make-row();
+// }
 
-.example-content-main {
-  @include make-col-ready();
+// .example-content-main {
+//   @include make-col-ready();
 
-  @include media-breakpoint-up(sm) {
-    @include make-col(6);
-  }
+//   @include media-breakpoint-up(sm) {
+//     @include make-col(6);
+//   }
 
-  @include media-breakpoint-up(lg) {
-    @include make-col(8);
-  }
-}
+//   @include media-breakpoint-up(lg) {
+//     @include make-col(8);
+//   }
+// }
 
-.example-content-secondary {
-  @include make-col-ready();
+// .example-content-secondary {
+//   @include make-col-ready();
 
-  @include media-breakpoint-up(sm) {
-    @include make-col(6);
-  }
+//   @include media-breakpoint-up(sm) {
+//     @include make-col(6);
+//   }
 
-  @include media-breakpoint-up(lg) {
-    @include make-col(4);
-  }
-}
+//   @include media-breakpoint-up(lg) {
+//     @include make-col(4);
+//   }
+// }
 
 // Ratio helpers
 .bd-example-ratios {
diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss
index be0f9e8586..828319a449 100644
--- a/site/src/scss/_content.scss
+++ b/site/src/scss/_content.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "../../../scss/colors" as *;
 @use "../../../scss/variables" as *;
 @use "../../../scss/vendor/rfs" as *;
@@ -117,8 +118,8 @@
 }
 
 .bd-subtitle {
-  @include font-size(1.5rem);
   font-weight: 300;
+  @include font-size(1.5rem);
 }
 
 .bi {
@@ -154,16 +155,16 @@
   --bs-tertiary-bg: #{$blue-600};
 
   .dropdown-menu {
-    --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
+    --bs-dropdown-bg: #{color.mix($blue-500, $blue-600)};
     --bs-dropdown-link-active-bg: #{$blue-700};
   }
 
   .btn-secondary {
-    --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
+    --bs-btn-bg: #{color.mix($gray-600, $blue-400)};
     --bs-btn-border-color: #{rgba($white, .25)};
-    --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
+    --bs-btn-hover-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -5%)}; // stylelint-disable-line scss/at-function-named-arguments
     --bs-btn-hover-border-color: #{rgba($white, .25)};
-    --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
+    --bs-btn-active-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -10%)}; // stylelint-disable-line scss/at-function-named-arguments
     --bs-btn-active-border-color: #{rgba($white, .5)};
     --bs-btn-focus-border-color: #{rgba($white, .5)};
     --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
diff --git a/site/src/scss/_layout.scss b/site/src/scss/_layout.scss
index d0482d9b71..4bbbfbe0c0 100644
--- a/site/src/scss/_layout.scss
+++ b/site/src/scss/_layout.scss
@@ -1,3 +1,7 @@
+@use "../../../scss/config" as *;
+@use "../../../scss/layout/breakpoints" as *;
+@use "variables" as *;
+
 .bd-gutter {
   --bs-gutter-x: #{$bd-gutter-x};
 }
diff --git a/site/src/scss/_masthead.scss b/site/src/scss/_masthead.scss
index 2856983a25..0ad312f77d 100644
--- a/site/src/scss/_masthead.scss
+++ b/site/src/scss/_masthead.scss
@@ -11,11 +11,11 @@
   --bd-pink-rgb: #{to-rgb($pink)};
   padding: 3rem 0;
   // stylelint-disable
-  background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), .01), rgba(var(--bs-body-bg-rgb), 1) 85%),
-                    radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), .5), transparent 50%),
-                    radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), .5), transparent 50%),
-                    radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), .5), transparent 50%),
-                    radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), .5), transparent 50%);
+  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), var(--bs-body-bg) 85%),
+                    radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-blue-500) 50%, transparent), transparent 50%),
+                    radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent) 50%, transparent), transparent 50%),
+                    radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet) 50%, transparent), transparent 50%),
+                    radial-gradient(ellipse at center left, color-mix(in srgb, var(--bs-pink-500) 50%, transparent), transparent 50%);
   // stylelint-enable
 
   h1 {
diff --git a/site/src/scss/_navbar.scss b/site/src/scss/_navbar.scss
index e168e109ca..44478c3044 100644
--- a/site/src/scss/_navbar.scss
+++ b/site/src/scss/_navbar.scss
@@ -1,9 +1,9 @@
+@use "../../../scss/config" as *;
 @use "../../../scss/colors" as *;
-// @use "../../../scss/variables" as *;
+@use "../../../scss/functions" as *;
+@use "../../../scss/mixins" as *;
+@use "../../../scss/variables" as *;
 @use "../../../scss/layout/breakpoints" as *;
-@use "../../../scss/mixins/border-radius" as *;
-@use "../../../scss/mixins/color-mode" as *;
-@use "../../../scss/mixins/transition" as *;
 @use "../../../scss/vendor/rfs" as *;
 
 .bd-navbar {
@@ -21,7 +21,8 @@
     z-index: -1;
     display: block;
     content: "";
-    background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+    background-image: linear-gradient(var(--bd-violet), color-mix(in srgb, var(--bd-violet), transparent 5%));
+    // background-image: linear-gradient(color-mix(in srgb, var(--bs-gray-900), $black 10%), color-mix(in srgb, var(--bs-gray-900), $black 15%));
   }
 
   .bd-navbar-toggle {
@@ -85,7 +86,7 @@
     border-left: 0;
 
     @include media-breakpoint-down(lg) {
-      box-shadow: var(--bs-box-shadow-lg);
+      box-shadow: var(--#{$prefix}box-shadow-lg);
     }
   }
 
@@ -99,12 +100,12 @@
     --bs-dropdown-min-width: 12rem;
     --bs-dropdown-padding-x: .25rem;
     --bs-dropdown-padding-y: .25rem;
-    --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
-    --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
+    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
+    --bs-dropdown-link-active-bg: var(--bd-violet);
     @include rfs(.875rem, --bs-dropdown-font-size);
     @include font-size(.875rem);
     @include border-radius(.5rem);
-    box-shadow: $dropdown-box-shadow;
+    box-shadow: var(--#{$prefix}dropdown-box-shadow);
 
     li + li {
       margin-top: .125rem;
diff --git a/site/src/scss/_search.scss b/site/src/scss/_search.scss
index 97abe7ff6d..0e4769ed9e 100644
--- a/site/src/scss/_search.scss
+++ b/site/src/scss/_search.scss
@@ -1,3 +1,5 @@
+@use "variables" as *;
+@use "../../../scss/colors" as *;
 @use "../../../scss/layout/breakpoints" as *;
 @use "../../../scss/mixins/color-mode" as *;
 @use "../../../scss/mixins/border-radius" as *;
diff --git a/site/src/scss/_sidebar.scss b/site/src/scss/_sidebar.scss
index 3f4051477b..10e750f32b 100644
--- a/site/src/scss/_sidebar.scss
+++ b/site/src/scss/_sidebar.scss
@@ -9,7 +9,7 @@
     // Override collapse behaviors
     // stylelint-disable-next-line declaration-no-important
     display: block !important;
-    height: subtract(100vh, 6rem);
+    height: calc(100vh - 6rem);
     // Prevent focus styles to be cut off:
     padding-left: .25rem;
     margin-left: -.25rem;
@@ -29,9 +29,9 @@
 }
 
 .bd-links-nav {
-  @include media-breakpoint-down(lg) {
-    font-size: .875rem;
-  }
+  // @include media-breakpoint-down(lg) {
+  //   font-size: .875rem;
+  // }
 
   @include media-breakpoint-between(xs, lg) {
     column-count: 2;
@@ -51,6 +51,7 @@
   padding: .1875rem .5rem;
   margin-top: .125rem;
   margin-left: 1.125rem;
+  font-size: .875rem;
   color: var(--bs-body-color);
   text-decoration: if($link-decoration == none, null, none);
 
diff --git a/site/src/scss/_skippy.scss b/site/src/scss/_skippy.scss
index ea82c625b9..de5cc5e7f3 100644
--- a/site/src/scss/_skippy.scss
+++ b/site/src/scss/_skippy.scss
@@ -1,3 +1,6 @@
+@use "../../../scss/colors" as *;
+@use "variables" as *;
+
 .skippy {
   background-color: $bd-purple;
 
diff --git a/site/src/scss/_syntax.scss b/site/src/scss/_syntax.scss
index 11649d0c79..8a3476f46a 100644
--- a/site/src/scss/_syntax.scss
+++ b/site/src/scss/_syntax.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "../../../scss/colors" as *;
 @use "../../../scss/variables" as *;
 @use "../../../scss/mixins/color-mode" as *;
@@ -12,7 +13,7 @@
   --base05: #333;
   --base06: #fff;
   --base07: #{$teal-700}; // #9a6700
-  --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
+  --base08: #{color.mix($red-500, $red-600, 50%)}; // #bc4c00
   --base09: #{$cyan-700}; // #087990
   --base0A: #{$purple-500}; // #795da3
   --base0B: #{$blue-700}; // #183691
diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss
index 79777cb5ec..1ddc51e997 100644
--- a/site/src/scss/_toc.scss
+++ b/site/src/scss/_toc.scss
@@ -5,7 +5,6 @@
 // stylelint-disable selector-max-type, selector-no-qualifying-type
 
 .bd-toc {
-  font-size: .875rem;
   container-type: inline-size;
 
   @include media-breakpoint-up(lg) {
@@ -13,12 +12,13 @@
     top: 5rem;
     right: 0;
     z-index: 2;
-    height: subtract(100vh, 7rem);
+    height: calc(100vh - 7rem);
     overflow-y: auto;
   }
 
   nav {
-    @include font-size(.875rem);
+    font-size: .875rem;
+    // @include font-size(.875rem);
 
     ul {
       padding-left: 0;
diff --git a/site/src/scss/_variables.scss b/site/src/scss/_variables.scss
index 0930d0dcfb..f30e6f8987 100644
--- a/site/src/scss/_variables.scss
+++ b/site/src/scss/_variables.scss
@@ -1,35 +1,43 @@
+@use "sass:color";
+@use "../../../scss/config" as *;
+@use "../../../scss/colors" as *;
+@use "../../../scss/functions" as *;
+@use "../../../scss/mixins/color-mode" as *;
+
 // Local docs variables
 $bd-purple:        #4c0bce;
-$bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
-$bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
+$bd-violet:        color.adjust(color.adjust($bd-purple, $saturation: 5%), $lightness: 15%); // stylelint-disable-line scss/at-function-named-arguments
+$bd-purple-light:  color.adjust(color.adjust($bd-purple, $saturation: 5%), $lightness: 45%); // stylelint-disable-line scss/at-function-named-arguments
 $bd-accent:        #ffe484;
 
 $bd-gutter-x: 3rem;
 $bd-callout-variants: info, warning, danger !default;
 
-:root,
-[data-bs-theme="light"] {
-  --bd-purple: #{$bd-purple};
-  --bd-violet: #{$bd-violet};
-  --bd-accent: #{$bd-accent};
-  --bd-violet-rgb: #{to-rgb($bd-violet)};
-  --bd-accent-rgb: #{to-rgb($bd-accent)};
-  --bd-pink-rgb: #{to-rgb($pink-500)};
-  --bd-teal-rgb: #{to-rgb($teal-500)};
-  --bd-violet-bg: var(--bd-violet);
-  --bd-toc-color: var(--bd-violet);
-  --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
-  --bd-callout-link: #{to-rgb($blue-600)};
-  --bd-callout-code-color: #{$pink-600};
-  --bd-pre-bg: var(--bs-tertiary-bg);
-}
+@layer custom {
+  :root {
+    --bd-purple: #{$bd-purple};
+    --bd-violet: #{$bd-violet};
+    --bd-accent: #{$bd-accent};
+    // --bd-violet-rgb: #{to-rgb($bd-violet)};
+    // --bd-accent-rgb: #{to-rgb($bd-accent)};
+    // --bd-pink-rgb: #{to-rgb($pink-500)};
+    // --bd-teal-rgb: #{to-rgb($teal-500)};
+    --bd-violet-bg: var(--bd-violet);
+    --bd-toc-color: light-dark(var(--bd-violet), var(--bs-indigo-300));
+    --bd-sidebar-link-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
+    --bd-callout-link: #{$blue-600};
+    --bd-callout-code-color: light-dark(var(--bs-pink-600), var(--bs-pink-300));
+    --bd-pre-bg: light-dark(var(--bs-gray-100), color-mix(in srgb, var(--bs-gray-900), var(--bs-black) 25%));
+    --bd-swatch-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1));
+  }
 
-// @include color-mode(dark, true) {
-//   --bd-violet: #{mix($bd-violet, $white, 75%)};
-//   --bd-violet-bg: #{$bd-violet};
-//   --bd-toc-color: var(--#{$prefix}emphasis-color);
-//   --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
-//   --bd-callout-link: #{to-rgb($blue-300)};
-//   --bd-callout-code-color: #{$pink-300};
-//   --bd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
-// }
+  // @include color-mode(dark, true) {
+  //   --bd-violet: #{mix($bd-violet, $white, 75%)};
+  //   --bd-violet-bg: #{$bd-violet};
+  //   --bd-toc-color: var(--#{$prefix}emphasis-color);
+  //   --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
+  //   --bd-callout-link: #{to-rgb($blue-300)};
+  //   --bd-callout-code-color: #{$pink-300};
+  //   --bd-pre-bg: #{color.adjust($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
+  // }
+}
diff --git a/site/src/scss/docs.scss b/site/src/scss/docs.scss
index ff98569d17..1789b83669 100644
--- a/site/src/scss/docs.scss
+++ b/site/src/scss/docs.scss
@@ -1,5 +1,4 @@
-/*!
- * Bootstrap Docs (https://getbootstrap.com/)
+/* Bootstrap Docs (https://getbootstrap.com/)
  * Copyright 2011-2025 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
@@ -23,15 +22,18 @@
 // Happy Bootstrapping!
 
 // Load Bootstrap variables and mixins
-@import "../../../scss/functions";
-@import "../../../scss/variables";
-@import "../../../scss/mixins";
+// @use "../../../scss/config";
+// @use "../../../scss/colors";
+// @use "../../../scss/functions";
+// @use "../../../scss/mixins";
+// @use "../../../scss/variables";
+// @use "../../../scss/layout/breakpoints";
 
-// fusv-disable
-$enable-grid-classes: false;
-$enable-cssgrid: true;
-// fusv-enable
-@import "../../../scss/grid";
+// // fusv-disable
+// $enable-grid-classes: false;
+// $enable-cssgrid: true;
+// // fusv-enable
+// @use "../../../scss/layout/";
 
 // Load docs components
 // @use "variables";
@@ -54,5 +56,5 @@ $enable-cssgrid: true;
 @use "scrolling";
 
 // Load docs dependencies
-@import "syntax";
-@import "anchor";
+@use "syntax";
+@use "anchor";
diff --git a/site/src/scss/docs_search.scss b/site/src/scss/docs_search.scss
index f1e7151d6c..4af922030c 100644
--- a/site/src/scss/docs_search.scss
+++ b/site/src/scss/docs_search.scss
@@ -5,5 +5,5 @@
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-@use "@docsearch/css/dist/style";
-@use "search";
+@import "@docsearch/css/dist/style";
+@import "search";