Issue #3293184 by smustgrave: How to override USWDS variables?

starterkits/uswds_base_subtheme_sass/README.md

-This sub-theme requires compiling of the USWDS CSS and also the assets folder 
-for javascript.
+INTRODUCTION
+------------
+This sub-theme requires compiling of the USWDS CSS and also the assets folder for javascript.
+
+INSTALLATION
+------------
+
+This starterkit contains a very basic example of the gulpfile.js copied from https://github.com/uswds/uswds-compile
+
+Follow the setup instructions on https://github.com/uswds/uswds-compile#installation for setting up for your project.
+
+Copied from https://github.com/uswds/uswds-compile#usage-tips
+
+ * Use init only once. The init task is meant for initializing the design system on a project.
+Since it will overwrite project files (like settings files and the Sass entry point), use it sparingly and don't use it
+for updating the design system on a project, or at any point after you've customized your settings files.
+
+ * Update USWDS assets with copyAssets. Don't update assets with init, use the copyAssets task. This task updates static
+assets (like images, fonts, and compiled JavaScript) only and you don't risk clobbering your customizations.
+
+ * Compile only from a single Sass entry point. Define the location of this entry point with paths.dist.theme. If you
+have project Sass files outside the paths.dist.theme directory, load these files into your single entry point via
+@forward, @use, or @import. To include these project Sass files in your gulp watch task, set paths.src.projectSass
+to your project Sass directory. The Sass will still compile from the single entry point located in paths.dist.theme.
+
+ * Only check theme files and custom icons into version control. You should have a build process that copies static
+assets like images, fonts, and compiled JavaScript from the uswds package. This assures that these assets are
+up-to-date with whatever version of USWDS you're using. You only need to track your customizations
+(like settings, theme files, custom icons, and your gulpfile) in version control.
 

starterkits/uswds_base_subtheme_sass/css/uswds.css

-/**
- * This file will be overwritten when the USWDS source files
- * are compiled using the SASS CSS pre-processor.
- */

starterkits/uswds_base_subtheme_sass/gulpfile.js

@@ -22,4 +22,4 @@ uswds.paths.dist.theme = './sass';
  */
 
 exports.init = uswds.init;
-exports.compile = uswds.compile;
\ No newline at end of file
+exports.compile = uswds.compile;

starterkits/uswds_base_subtheme_sass/sass/_uswds-packages.scss

-/*! uswds @version */
-
-// Global
-// -------------------------------------
-@forward "../node_modules/@uswds/uswds/packages/uswds-global";
-
-// Helpers
-// -------------------------------------
-@forward "../node_modules/@uswds/uswds/packages/uswds-helpers";
-
-// Components
-// -------------------------------------
-@forward "../node_modules/@uswds/uswds/packages/uswds-typography";
-@forward "../node_modules/@uswds/uswds/packages/usa-accordion/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-alert/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-banner/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-breadcrumb/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-button-group/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-button/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-card/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-checklist/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-collection/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-embed-container/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-footer/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-form/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-graphic-list/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-header/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-hero/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-icon-list/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-icon/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-identifier/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-layout-docs/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-layout-grid/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-media-block/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-modal/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-nav/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-pagination/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-process-list/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-search/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-section/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-sidenav/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-site-alert/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-skipnav/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-step-indicator/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-summary-box/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-table/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-tag/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/usa-tooltip/src/styles";
-@forward "../node_modules/@uswds/uswds/packages/uswds-form-controls";
-
-// Utilities
-// -------------------------------------
-@forward "../node_modules/@uswds/uswds/packages/uswds-utilities/src/styles";
\ No newline at end of file

starterkits/uswds_base_subtheme_sass/sass/_uswds-theme.scss

-@use "uswds-core" with (
-$theme-image-path: "../node_modules/@uswds/uswds/dist/img",
-$theme-font-path: "../node_modules/@uswds/uswds/dist/fonts",
-$theme-show-compile-warnings: false,
-$theme-show-notifications: false,
-$theme-focus-color: "blue-50v",
-$theme-global-paragraph-styles: true,
-$theme-global-link-styles: true,
-$theme-global-content-styles: true,
-$theme-utility-breakpoints: (
-"card": false,
-"card-lg": true,
-"mobile": true,
-"mobile-lg": true,
-"tablet": true,
-"tablet-lg": true,
-"desktop": true,
-"desktop-lg": true,
-"widescreen": true
-),
-);
\ No newline at end of file

starterkits/uswds_base_subtheme_sass/sass/_variables.scss

-// Put any variable overrides here. For example:
-// $color-primary: #666;
-// $color-primary-darker: #444;
-// $color-primary-darkest: #222;

starterkits/uswds_base_subtheme_sass/sass/uswds.scss

-// Import overrides of USWDS variables.
-@import "_variables.scss";
-// Settings
-@import "_uswds-theme.scss";
-// USWDS Packages
-@import "_uswds-packages.scss";

starterkits/uswds_base_subtheme_sass/uswds_base_subtheme.libraries.yml

@@ -2,6 +2,7 @@ assets:
   version: VERSION
   css:
     theme:
-      css/uswds.css: {}
+      css/styles.css: {}
   js:
-    node_modules/@uswds/uswds/dist/js/uswds.js: {}
+    assets/uswds/js/uswds-init.min.js: {}
+    assets/uswds/js/uswds.min.js: {}