implement custom uswds settings, increase container width from 'deskt…

…op' to 'widescreen'

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'),
+    ],
   },
 };
 

src/app/globals.css → 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;

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/[email protected]/dist/js/uswds.min.js" />
       </body>
     </html>
   );

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
+  );