From 2efc3037ed9d06aaa46b6cde62be4d29da838901 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 18 Feb 2025 13:57:33 -0800
Subject: [PATCH] Docs Sass modules

---
 site/src/scss/_brand.scss              |  1 +
 site/src/scss/_buttons.scss            |  1 +
 site/src/scss/_callouts.scss           |  1 +
 site/src/scss/_component-examples.scss |  1 +
 site/src/scss/_layout.scss             |  1 +
 site/src/scss/_skippy.scss             |  1 +
 site/src/scss/docs.scss                | 54 +++++++++++++-------------
 7 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/site/src/scss/_brand.scss b/site/src/scss/_brand.scss
index 07a5e5d406..de277cdafa 100644
--- a/site/src/scss/_brand.scss
+++ b/site/src/scss/_brand.scss
@@ -1,6 +1,7 @@
 @use "../../../scss/config" as *;
 @use "../../../scss/colors" as *;
 @use "../../../scss/layout/breakpoints" as *;
+@use "variables" as *;
 
 
 //
diff --git a/site/src/scss/_buttons.scss b/site/src/scss/_buttons.scss
index f16a201b04..9ce9277f68 100644
--- a/site/src/scss/_buttons.scss
+++ b/site/src/scss/_buttons.scss
@@ -1,5 +1,6 @@
 @use "../../../scss/config" as *;
 @use "../../../scss/colors" as *;
+@use "variables" as *;
 
 // Buttons
 //
diff --git a/site/src/scss/_callouts.scss b/site/src/scss/_callouts.scss
index 7ee8ca36fa..b5a4cfba54 100644
--- a/site/src/scss/_callouts.scss
+++ b/site/src/scss/_callouts.scss
@@ -1,5 +1,6 @@
 @use "../../../scss/config" as *;
 @use "../../../scss/colors" as *;
+@use "variables" as *;
 
 //
 // Callouts
diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index e3e99ddc0f..3dffd00fe7 100644
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -4,6 +4,7 @@
 @use "../../../scss/layout/breakpoints" as *;
 @use "../../../scss/mixins/clearfix" as *;
 @use "../../../scss/mixins/border-radius" as *;
+@use "variables" as *;
 
 //
 // Docs examples
diff --git a/site/src/scss/_layout.scss b/site/src/scss/_layout.scss
index 5c1ce60291..4bbbfbe0c0 100644
--- a/site/src/scss/_layout.scss
+++ b/site/src/scss/_layout.scss
@@ -1,5 +1,6 @@
 @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/_skippy.scss b/site/src/scss/_skippy.scss
index 56bd0e4486..de5cc5e7f3 100644
--- a/site/src/scss/_skippy.scss
+++ b/site/src/scss/_skippy.scss
@@ -1,4 +1,5 @@
 @use "../../../scss/colors" as *;
+@use "variables" as *;
 
 .skippy {
   background-color: $bd-purple;
diff --git a/site/src/scss/docs.scss b/site/src/scss/docs.scss
index 3c3beb6537..5c8f781ee4 100644
--- a/site/src/scss/docs.scss
+++ b/site/src/scss/docs.scss
@@ -23,39 +23,39 @@
 // Happy Bootstrapping!
 
 // Load Bootstrap variables and mixins
-// @import "../../../scss/config";
-// @import "../../../scss/colors";
-// @import "../../../scss/functions";
-// @import "../../../scss/mixins";
-// @import "../../../scss/variables";
-// @import "../../../scss/layout/breakpoints";
+// @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/layout/";
+// @use "../../../scss/layout/";
 
 // Load docs components
-@import "variables";
-@import "navbar";
-@import "masthead";
-@import "ads";
-@import "content";
-@import "skippy";
-@import "sidebar";
-@import "layout";
-@import "toc";
-@import "footer";
-@import "component-examples";
-@import "buttons";
-@import "callouts";
-@import "brand";
-@import "colors";
-@import "clipboard-js";
-@import "placeholder-img";
-@import "scrolling";
+@use "variables";
+@use "navbar";
+@use "masthead";
+@use "ads";
+@use "content";
+@use "skippy";
+@use "sidebar";
+@use "layout";
+@use "toc";
+@use "footer";
+@use "component-examples";
+@use "buttons";
+@use "callouts";
+@use "brand";
+@use "colors";
+@use "clipboard-js";
+@use "placeholder-img";
+@use "scrolling";
 
 // Load docs dependencies
-@import "syntax";
-@import "anchor";
+@use "syntax";
+@use "anchor";