From 1504bd2fb39f98f3a1fe11d627d09d7b5bd5e774 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Tue, 29 Oct 2024 16:21:04 -0400
Subject: [PATCH] implement custom uswds settings, increase container width
 from 'desktop' to 'widescreen'

---
 next.config.js                        |  4 +++-
 src/app/{globals.css => globals.scss} |  6 ++++--
 src/app/layout.tsx                    |  4 +---
 src/app/uswds-settings.scss           | 21 +++++++++++++++++++++
 4 files changed, 29 insertions(+), 6 deletions(-)
 rename src/app/{globals.css => globals.scss} (94%)
 create mode 100644 src/app/uswds-settings.scss

diff --git a/next.config.js b/next.config.js
index b53467a..8ee7474 100644
--- a/next.config.js
+++ b/next.config.js
@@ -14,7 +14,9 @@ const nextConfig = {
   basePath: '/dibbs-site',
   assetPrefix: '/dibbs-site',
   sassOptions: {
-    includePaths: [path.join(__dirname, 'styles')],
+    includePaths: [
+      path.join(__dirname, './', 'node_modules', '@uswds', 'uswds', 'packages'),
+    ],
   },
 };
 
diff --git a/src/app/globals.css b/src/app/globals.scss
similarity index 94%
rename from src/app/globals.css
rename to src/app/globals.scss
index c5f16b8..a3ac581 100644
--- a/src/app/globals.css
+++ b/src/app/globals.scss
@@ -1,8 +1,10 @@
+@forward "uswds-settings";
+@forward "uswds";
+
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import '@trussworks/react-uswds/lib/uswds.css';
-@import '@trussworks/react-uswds/lib/index.css';
 
 :root {
   --background: #ffffff;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6f50d2b..cd45059 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,10 +1,9 @@
 import type { Metadata } from 'next';
-import './globals.css';
-import Script from 'next/script';
 import Header from './components/Header';
 import Footer from './components/Footer';
 import USABanner from './components/UsaBanner';
 import { basePath } from './utils/constants';
+import './globals.scss';
 
 export const metadata: Metadata = {
   title: 'DIBBS Site',
@@ -27,7 +26,6 @@ export default function RootLayout({
           <main id="main-content">{children}</main>
           <Footer />
         </div>
-        <Script src="https://cdn.jsdelivr.net/npm/uswds@3.1.0/dist/js/uswds.min.js" />
       </body>
     </html>
   );
diff --git a/src/app/uswds-settings.scss b/src/app/uswds-settings.scss
new file mode 100644
index 0000000..23349fc
--- /dev/null
+++ b/src/app/uswds-settings.scss
@@ -0,0 +1,21 @@
+@use "uswds-core" with (
+    // General
+    $theme-show-compile-warnings: true,
+    $theme-show-notifications: false,
+    $theme-image-path: "../../../../../../dist/img",
+
+    // Color
+    // Component
+    $theme-hero-image: "../../../../dist/img/hero.jpg",
+    $theme-accordion-button-background-color: "blue-cool-60",
+
+    // Spacing
+    $theme-grid-container-max-width: "widescreen",
+    $theme-header-max-width: "widescreen",
+    
+    
+    // Typography
+    $theme-font-path: "../../../../../../dist/fonts",
+
+    // Utilities
+  );
\ No newline at end of file