Update Sass to modern syntax

css/_uswds-theme-custom-styles.scss

@@ -1,13 +1,9 @@
-@use "sass:math";
-
-@import "mixins";
+@forward "custom-styles";
 
-@import "custom-styles/site-header";
-@import "custom-styles/card-policy";
-@import "custom-styles/highlight";
-@import "custom-styles/copy-code-btn";
-@import "custom-styles/graphic-list";
-@import "custom-styles/posts";
+@use "sass:math";
+@use "mixins" as *;
+@use "uswds-core" as *;
+@use "settings/variables" as *;
 
 // ========================================
 // CUSTOM PROJECT SASS
@@ -20,13 +16,6 @@
 // 3. Custom page styles
 // ----------------------------------------
 
-// TODO: move to uswds once finished
-$theme-site-cols-split: "tablet";
-$theme-site-cols-show: "desktop";
-$theme-grid-gap-default: "md";
-
-$site-measure: 5;
-
 .usa-grid-container {
   @include usa-grid-container;
 }
@@ -112,10 +101,10 @@ abbr[title="required"] {
   $site-banner-icon-color: "blue-40v";
   $site-banner-action-color: "gray-20";
   @include typeset($site-banner-font-family);
+  background-color: color("ink");
   @include at-media("tablet") {
     font-size: font-size($site-banner-font-family, "3xs");
   }
-  background-color: color("ink");
 
   .usa-accordion {
     @include typeset($site-banner-font-family);
@@ -316,10 +305,10 @@ abbr[title="required"] {
 // Styleguide Content -------- //
 
 .styleguide-content {
-  @include add-responsive-site-margins;
   margin-bottom: units(6);
   max-width: units($theme-grid-container-max-width);
   position: relative;
+  @include add-responsive-site-margins;
 
   header {
     > h1 {
@@ -453,7 +442,6 @@ abbr[title="required"] {
 }
 
 .site-subheading {
-  @include typeset-h6;
   @include u-font("lang", "3xs");
   color: color("black-transparent-60");
   letter-spacing: letter-spacing(1);
@@ -1865,8 +1853,8 @@ li {
 
 .utility-name {
   &.usa-grid-col {
-    @include grid-cols(null, "fill");
     max-width: 100%;
+    @include grid-cols(null, "fill");
   }
 }
 

css/custom-styles/_card-policy.scss

@@ -1,3 +1,5 @@
+@use "uswds-core" as *;
+
 .card-policy {
   @include u-margin-y(2);
   @include u-maxw("full");

css/custom-styles/_copy-code-btn.scss

@@ -1,3 +1,5 @@
+@use "uswds-core" as *;
+
 .copy-code {
   display: flex;
   flex-direction: row;

css/custom-styles/_graphic-list.scss

@@ -1,3 +1,5 @@
+@use "uswds-core" as *;
+
 .site-graphic-list {
   .usa-icon {
     @include u-square(3);

css/custom-styles/_highlight.scss

@@ -1,3 +1,5 @@
+@use "uswds-core" as *;
+
 .text-highlight {
   @include u-padding-y("1px");
   @include u-padding-x("05");

css/custom-styles/_index.scss

@@ -0,0 +1,6 @@
+@forward "card-policy";
+@forward "copy-code-btn";
+@forward "graphic-list";
+@forward "highlight";
+@forward "posts";
+@forward "site-header";

css/custom-styles/_posts.scss

@@ -1,3 +1,6 @@
+@use "uswds-core" as *;
+@use "../settings/variables" as *;
+
 .post-preview {
   @include u-border-top("1px", "gray-30");
   @include u-margin-y(3);

css/custom-styles/_site-header.scss

@@ -6,6 +6,10 @@
 // Shared styles
 // ==========================================================================
 
+@use "uswds-core" as *;
+@use "../settings/variables" as *;
+@use "../mixins" as *;
+
 $site-navbar-height: 10;
 $site-secondary-nav-input-height: 38px;
 $site-inner-nav-height: 6;
@@ -45,7 +49,7 @@ $site-inner-nav-height: 6;
     }
 
     a {
-      color: color($site-ink);
+      color: color("ink");
     }
 
     &__text {
@@ -198,15 +202,15 @@ $site-inner-nav-height: 6;
     }
 
     &:hover {
-      @include add-bar(0.5, $site-primary-vivid, "bottom", 0, 2, 0);
       color: color($site-primary-vivid);
+      @include add-bar(0.5, $site-primary-vivid, "bottom", 0, 2, 0);
     }
   }
 
   .usa-current {
-    @include add-bar(0.5, $site-primary-vivid, "bottom", 0, 2, 0);
     color: color($site-ink);
     font-weight: fw("bold");
+    @include add-bar(0.5, $site-primary-vivid, "bottom", 0, 2, 0);
 
     &:hover {
       color: color($site-ink);

css/mixins/_buttons.scss

@@ -1,3 +1,6 @@
+@use "uswds-core" as *;
+@use "../settings/variables" as *;
+
 @mixin inner-border($width, $color) {
   box-shadow: inset 0 0 0 units($width) color($color);
 }

css/mixins/_grid.scss

@@ -1,3 +1,6 @@
+@use "uswds-core" as *;
+@use "../settings/variables" as *;
+
 @mixin grid-cols($default, $split: null, $full: null) {
   @if $default {
     @include grid-col($default);
@@ -28,6 +31,6 @@
 }
 
 @mixin usa-grid-col {
-  @include grid-cols("auto", 6);
   width: 100%;
+  @include grid-cols("auto", 6);
 }

css/mixins/_index.scss

@@ -1,3 +1,3 @@
-@import "buttons";
-@import "grid";
-@import "typography";
+@forward "buttons";
+@forward "grid";
+@forward "typography";

css/mixins/_typography.scss

@@ -1,3 +1,5 @@
+@use "uswds-core" as *;
+
 @mixin font-lead-alt {
   font-size: font-size("lang", "xs");
   font-weight: font-weight("normal");

css/settings/_uswds-site-theme.scss

@@ -0,0 +1,140 @@
+@use "variables" as *;
+@use "uswds-core" with (
+  $theme-show-notifications: false,
+  $theme-layout-grid-use-important: true,
+  $theme-color-base-family: "gray",
+  $theme-color-base-lighter: "gray-10",
+  $theme-color-base-light: "gray-30",
+  $theme-color-base: "gray-50",
+  $theme-color-base-dark: "gray-60",
+  $theme-color-base-darker: "gray-80",
+  $theme-banner-max-width: "widescreen",
+  $theme-card-border-radius: "md",
+  $theme-header-logo-text-width: 50%,
+  $theme-header-max-width: "widescreen",
+  $theme-identifier-font-family: "lang",
+  $theme-identifier-max-width: "widescreen",
+  $theme-in-page-nav-background-color: $site-background-color,
+  $theme-in-page-nav-top: 6,
+  $theme-in-page-nav-margin-left: 0,
+  $theme-grid-container-max-width: "widescreen",
+  $theme-root-font-size: 16px,
+  $theme-global-link-styles: true,
+  $theme-font-type-lang: "public-sans",
+  $theme-type-scale-lg: 8,
+  $theme-type-scale-xl: 11,
+  $theme-font-weight-thin: 200,
+  $theme-font-weight-medium: 500,
+  $theme-font-weight-semibold: 600,
+  $theme-font-weight-heavy: 800,
+  $theme-generate-all-weights: true,
+  $theme-style-body-element: true,
+  $theme-text-measure: 3,
+  $theme-text-measure-wide: 4,
+  $theme-lead-measure: 5,
+  $utilities-use-important: true,
+  $theme-utility-breakpoints: (
+    "desktop-lg": true,
+  ),
+  $background-color-settings: (
+    hover: true,
+  ),
+  $border-settings: (
+    responsive: true,
+  ),
+  $border-radius-settings: (
+    hover: false,
+  ),
+  $border-style-settings: (
+    responsive: false,
+  ),
+  $max-width-settings: (
+    responsive: true,
+  ),
+  $whitespace-settings: (
+    responsive: true,
+  ),
+  $background-color-palettes: (
+    "palette-color-system",
+    "palette-color-state",
+  ),
+  $background-color-manual-values: (
+    "default-base-lightest": "#f0f0f0",
+    "default-base-lighter": "#dcdee0",
+    "default-base-light": "#a9aeb1",
+    "default-base": "#71767a",
+    "default-base-dark": "#565c65",
+    "default-base-darker": "#3d4551",
+    "default-base-darkest": "#1b1b1b",
+    "default-ink": "#1b1b1b",
+    "default-primary-lighter": "#d9e8f6",
+    "default-primary-light": "#73b3e7",
+    "default-primary": "#005ea2",
+    "default-primary-vivid": "#0050d8",
+    "default-primary-dark": "#1a4480",
+    "default-primary-darker": "#162e51",
+    "default-secondary-lighter": "#f8dfe2",
+    "default-secondary-light": "#f2938c",
+    "default-secondary": "#d83933",
+    "default-secondary-vivid": "#e41d3d",
+    "default-secondary-dark": "#b51d09",
+    "default-secondary-darker": "#8b1303",
+    "default-accent-warm-lighter": "#f2e4d4",
+    "default-accent-warm-light": "#ffbc78",
+    "default-accent-warm": "#fa9441",
+    "default-accent-warm-dark": "#c05600",
+    "default-accent-warm-darker": "#775540",
+    "default-accent-cool-lighter": "#e1f3f8",
+    "default-accent-cool-light": "#97d4ea",
+    "default-accent-cool": "#00bde3",
+    "default-accent-cool-dark": "#28a0cb",
+    "default-accent-cool-darker": "#07648d",
+    "default-emergency": "#9c3d10",
+    "default-emergency-dark": "#332d29",
+  ),
+  $color-palettes: (
+    "palette-color-system",
+  ),
+  $color-manual-values: (
+    "default-base-lightest": "#f0f0f0",
+    "default-base-lighter": "#dcdee0",
+    "default-base-light": "#a9aeb1",
+    "default-base": "#71767a",
+    "default-base-dark": "#565c65",
+    "default-base-darker": "#3d4551",
+    "default-base-darkest": "#1b1b1b",
+    "default-ink": "#1b1b1b",
+    "default-primary-lighter": "#d9e8f6",
+    "default-primary-light": "#73b3e7",
+    "default-primary": "#005ea2",
+    "default-primary-vivid": "#0050d8",
+    "default-primary-dark": "#1a4480",
+    "default-primary-darker": "#162e51",
+    "default-secondary-lighter": "#f8dfe2",
+    "default-secondary-light": "#f2938c",
+    "default-secondary": "#d83933",
+    "default-secondary-vivid": "#e41d3d",
+    "default-secondary-dark": "#b51d09",
+    "default-secondary-darker": "#8b1303",
+    "default-accent-warm-lighter": "#f2e4d4",
+    "default-accent-warm-light": "#ffbc78",
+    "default-accent-warm": "#fa9441",
+    "default-accent-warm-dark": "#c05600",
+    "default-accent-warm-darker": "#775540",
+    "default-accent-cool-lighter": "#e1f3f8",
+    "default-accent-cool-light": "#97d4ea",
+    "default-accent-cool": "#00bde3",
+    "default-accent-cool-dark": "#28a0cb",
+    "default-accent-cool-darker": "#07648d",
+    "default-emergency": "#9c3d10",
+    "default-emergency-dark": "#332d29",
+  ),
+  $font-weight-palettes: (
+    "palette-font-weight-default",
+    "palette-font-weight-system",
+  ),
+  $min-width-palettes: (
+    "palette-min-width-default",
+    "palette-units-percentage",
+  )
+);

css/settings/_variables.scss

@@ -34,3 +34,9 @@ $site-ink: "black-transparent-80";
 $site-border-width: 2px;
 $site-base-transparent-light: "black-transparent-10";
 $site-background-color: "gray-1";
+
+$theme-site-cols-split: "tablet";
+$theme-site-cols-show: "desktop";
+$theme-grid-gap-default: "md";
+
+$site-measure: 5;

css/uswds-components.scss

@@ -1,9 +1,2 @@
-@import "./settings/variables";
-@import "./settings/uswds-theme-general";
-@import "./settings/uswds-theme-typography";
-@import "./settings/uswds-theme-spacing";
-@import "./settings/uswds-theme-color";
-@import "./settings/uswds-theme-utilities";
-@import "./settings/uswds-theme-components";
-
-@import "uswds/packages/uswds";
+@forward "settings/uswds-site-theme";
+@forward "uswds/packages/uswds";

css/uswds-custom.scss

@@ -1,12 +1,2 @@
-// Imports
-@import "./settings/variables";
-@import "./settings/uswds-theme-general";
-@import "./settings/uswds-theme-typography";
-@import "./settings/uswds-theme-spacing";
-@import "./settings/uswds-theme-color";
-@import "./settings/uswds-theme-utilities";
-
-// Tools
-// -------------------------------------
-@import "uswds/packages/uswds-core";
-@import "uswds-theme-custom-styles";
+@forward "settings/uswds-site-theme";
+@forward "uswds-theme-custom-styles";

css/uswds-fonts.scss

@@ -1,8 +1,2 @@
-@import "./settings/variables";
-@import "./settings/uswds-theme-general";
-@import "./settings/uswds-theme-typography";
-@import "./settings/uswds-theme-spacing";
-@import "./settings/uswds-theme-color";
-@import "./settings/uswds-theme-utilities";
-
-@import "uswds/packages/uswds-fonts";
+@forward "settings/uswds-site-theme";
+@forward "uswds/packages/uswds-fonts";

css/uswds-next.scss

@@ -1,14 +1,5 @@
-// Imports
-@import "./settings/variables";
-@import "./settings/uswds-theme-general";
-@import "./settings/uswds-theme-typography";
-@import "./settings/uswds-theme-spacing";
-@import "./settings/uswds-theme-color";
-@import "./settings/uswds-theme-utilities";
-
-// Tools
-// -------------------------------------
-@import "uswds/packages/uswds-core";
+@forward "settings/uswds-site-theme";
+@use "uswds-core" as *;
 
 $pink-20v: #f8a897;
 $pink-50v: #bc5843;