diff --git a/examples/create-react-app-typescript/src/_everything.scss b/examples/create-react-app-typescript/src/_everything.scss
index b270c82cec..39ecfe2e48 100644
--- a/examples/create-react-app-typescript/src/_everything.scss
+++ b/examples/create-react-app-typescript/src/_everything.scss
@@ -1,10 +1,10 @@
 @use '@react-md/theme/dist/color-palette' as *;
-@forward 'react-md' with (
-  // update these variables as needed for your app
-  $rmd-theme-primary: $rmd-purple-500,
-  $rmd-theme-secondary: $rmd-pink-a-200,
-  $rmd-theme-light: true,
-
-  $rmd-theme-dark-elevation: 'prefers-color-scheme',
-  $rmd-utils-auto-dense: false,
-);
+@forward 'react-md' with
+  (
+    // update these variables as needed for your app
+    $rmd-theme-primary: $rmd-purple-500,
+    $rmd-theme-secondary: $rmd-pink-a-200,
+    $rmd-theme-light: true,
+    $rmd-theme-dark-elevation: 'prefers-color-scheme',
+    $rmd-utils-auto-dense: false
+  );
diff --git a/examples/create-react-app/src/_everything.scss b/examples/create-react-app/src/_everything.scss
index b270c82cec..39ecfe2e48 100644
--- a/examples/create-react-app/src/_everything.scss
+++ b/examples/create-react-app/src/_everything.scss
@@ -1,10 +1,10 @@
 @use '@react-md/theme/dist/color-palette' as *;
-@forward 'react-md' with (
-  // update these variables as needed for your app
-  $rmd-theme-primary: $rmd-purple-500,
-  $rmd-theme-secondary: $rmd-pink-a-200,
-  $rmd-theme-light: true,
-
-  $rmd-theme-dark-elevation: 'prefers-color-scheme',
-  $rmd-utils-auto-dense: false,
-);
+@forward 'react-md' with
+  (
+    // update these variables as needed for your app
+    $rmd-theme-primary: $rmd-purple-500,
+    $rmd-theme-secondary: $rmd-pink-a-200,
+    $rmd-theme-light: true,
+    $rmd-theme-dark-elevation: 'prefers-color-scheme',
+    $rmd-utils-auto-dense: false
+  );
diff --git a/examples/gatsby-typescript/src/styles/_everything.scss b/examples/gatsby-typescript/src/styles/_everything.scss
index b270c82cec..bafb6f44b2 100644
--- a/examples/gatsby-typescript/src/styles/_everything.scss
+++ b/examples/gatsby-typescript/src/styles/_everything.scss
@@ -1,10 +1,10 @@
-@use '@react-md/theme/dist/color-palette' as *;
-@forward 'react-md' with (
-  // update these variables as needed for your app
-  $rmd-theme-primary: $rmd-purple-500,
-  $rmd-theme-secondary: $rmd-pink-a-200,
-  $rmd-theme-light: true,
-
-  $rmd-theme-dark-elevation: 'prefers-color-scheme',
-  $rmd-utils-auto-dense: false,
-);
+@use "@react-md/theme/dist/color-palette" as *;
+@forward "react-md" with
+  (
+    // update these variables as needed for your app
+    $rmd-theme-primary: $rmd-purple-500,
+    $rmd-theme-secondary: $rmd-pink-a-200,
+    $rmd-theme-light: true,
+    $rmd-theme-dark-elevation: "prefers-color-scheme",
+    $rmd-utils-auto-dense: false
+  );
diff --git a/examples/gatsby-typescript/src/styles/global.scss b/examples/gatsby-typescript/src/styles/global.scss
index 29cf02ecdc..bf513e0a36 100644
--- a/examples/gatsby-typescript/src/styles/global.scss
+++ b/examples/gatsby-typescript/src/styles/global.scss
@@ -1,4 +1,4 @@
-@use './everything' as *;
+@use "./everything" as *;
 
 // generate all react-md styles with the custom theme
 @include react-md-utils;
diff --git a/examples/gatsby/src/styles/_everything.scss b/examples/gatsby/src/styles/_everything.scss
index b270c82cec..bafb6f44b2 100644
--- a/examples/gatsby/src/styles/_everything.scss
+++ b/examples/gatsby/src/styles/_everything.scss
@@ -1,10 +1,10 @@
-@use '@react-md/theme/dist/color-palette' as *;
-@forward 'react-md' with (
-  // update these variables as needed for your app
-  $rmd-theme-primary: $rmd-purple-500,
-  $rmd-theme-secondary: $rmd-pink-a-200,
-  $rmd-theme-light: true,
-
-  $rmd-theme-dark-elevation: 'prefers-color-scheme',
-  $rmd-utils-auto-dense: false,
-);
+@use "@react-md/theme/dist/color-palette" as *;
+@forward "react-md" with
+  (
+    // update these variables as needed for your app
+    $rmd-theme-primary: $rmd-purple-500,
+    $rmd-theme-secondary: $rmd-pink-a-200,
+    $rmd-theme-light: true,
+    $rmd-theme-dark-elevation: "prefers-color-scheme",
+    $rmd-utils-auto-dense: false
+  );
diff --git a/examples/gatsby/src/styles/global.scss b/examples/gatsby/src/styles/global.scss
index 29cf02ecdc..bf513e0a36 100644
--- a/examples/gatsby/src/styles/global.scss
+++ b/examples/gatsby/src/styles/global.scss
@@ -1,4 +1,4 @@
-@use './everything' as *;
+@use "./everything" as *;
 
 // generate all react-md styles with the custom theme
 @include react-md-utils;
diff --git a/examples/nextjs-typescript/src/_everything.scss b/examples/nextjs-typescript/src/_everything.scss
index b270c82cec..39ecfe2e48 100644
--- a/examples/nextjs-typescript/src/_everything.scss
+++ b/examples/nextjs-typescript/src/_everything.scss
@@ -1,10 +1,10 @@
 @use '@react-md/theme/dist/color-palette' as *;
-@forward 'react-md' with (
-  // update these variables as needed for your app
-  $rmd-theme-primary: $rmd-purple-500,
-  $rmd-theme-secondary: $rmd-pink-a-200,
-  $rmd-theme-light: true,
-
-  $rmd-theme-dark-elevation: 'prefers-color-scheme',
-  $rmd-utils-auto-dense: false,
-);
+@forward 'react-md' with
+  (
+    // update these variables as needed for your app
+    $rmd-theme-primary: $rmd-purple-500,
+    $rmd-theme-secondary: $rmd-pink-a-200,
+    $rmd-theme-light: true,
+    $rmd-theme-dark-elevation: 'prefers-color-scheme',
+    $rmd-utils-auto-dense: false
+  );
diff --git a/examples/nextjs/src/_everything.scss b/examples/nextjs/src/_everything.scss
index b270c82cec..39ecfe2e48 100644
--- a/examples/nextjs/src/_everything.scss
+++ b/examples/nextjs/src/_everything.scss
@@ -1,10 +1,10 @@
 @use '@react-md/theme/dist/color-palette' as *;
-@forward 'react-md' with (
-  // update these variables as needed for your app
-  $rmd-theme-primary: $rmd-purple-500,
-  $rmd-theme-secondary: $rmd-pink-a-200,
-  $rmd-theme-light: true,
-
-  $rmd-theme-dark-elevation: 'prefers-color-scheme',
-  $rmd-utils-auto-dense: false,
-);
+@forward 'react-md' with
+  (
+    // update these variables as needed for your app
+    $rmd-theme-primary: $rmd-purple-500,
+    $rmd-theme-secondary: $rmd-pink-a-200,
+    $rmd-theme-light: true,
+    $rmd-theme-dark-elevation: 'prefers-color-scheme',
+    $rmd-utils-auto-dense: false
+  );
diff --git a/packages/documentation/src/_everything.scss b/packages/documentation/src/_everything.scss
index c96f2f77d5..83e1740084 100644
--- a/packages/documentation/src/_everything.scss
+++ b/packages/documentation/src/_everything.scss
@@ -1,9 +1,10 @@
 @use '@react-md/theme/dist/color-palette' as *;
-@forward 'react-md' with (
-  $rmd-theme-primary: $rmd-teal-500,
-  $rmd-theme-secondary: $rmd-pink-a-200,
-  $rmd-utils-auto-dense: true,
-);
+@forward 'react-md' with
+  (
+    $rmd-theme-primary: $rmd-teal-500,
+    $rmd-theme-secondary: $rmd-pink-a-200,
+    $rmd-utils-auto-dense: true
+  );
 
 $solarized-base-03: #002b36;
 $solarized-base-02: #073642;
diff --git a/packages/documentation/src/components/ColorsAndTheming/OverridingDefaults.md b/packages/documentation/src/components/ColorsAndTheming/OverridingDefaults.md
index a3f9b6021d..8dfcf59e87 100644
--- a/packages/documentation/src/components/ColorsAndTheming/OverridingDefaults.md
+++ b/packages/documentation/src/components/ColorsAndTheming/OverridingDefaults.md
@@ -34,28 +34,26 @@ First, create or update `src/_everything.scss`:
 
 ```scss
 @use "@react-md/theme/dist/color-palette" as *;
-@forward "react-md" with (
-  $rmd-theme-light: false,
-  // I am bad at colors and chose 2 random ones from https://flatuicolors.com/palette/defo
-  // probably looks terrible so wouldn't recommend copying this example
-  $rmd-theme-primary: #3498db,
-  $rmd-theme-secondary: #d35400,
-
-  // make buttons bigger
-  $rmd-button-text-horizontal-padding: 1.5rem,
-  $rmd-button-text-border-radius: 0.25rem,
-  $rmd-button-text-height: 3rem,
-
-  // add more padding to the base list
-  $rmd-list-vertical-padding: 1rem,
-  $rmd-list-dense-vertical-padding: 0.75rem,
-
-  // make each list item a bit more dense
-  $rmd-list-item-height: 2.5rem,
-  $rmd-list-item-dense-height: 2rem,
-  $rmd-list-item-medium-height: 3rem,
-  $rmd-list-item-dense-medium-height: 2.75rem,
-);
+@forward "react-md" with
+  (
+    $rmd-theme-light: false,
+    // I am bad at colors and chose 2 random ones from https://flatuicolors.com/palette/defo
+    // probably looks terrible so wouldn't recommend copying this example
+    $rmd-theme-primary: #3498db,
+    $rmd-theme-secondary: #d35400,
+    // make buttons bigger
+    $rmd-button-text-horizontal-padding: 1.5rem,
+    $rmd-button-text-border-radius: 0.25rem,
+    $rmd-button-text-height: 3rem,
+    // add more padding to the base list
+    $rmd-list-vertical-padding: 1rem,
+    $rmd-list-dense-vertical-padding: 0.75rem,
+    // make each list item a bit more dense
+    $rmd-list-item-height: 2.5rem,
+    $rmd-list-item-dense-height: 2rem,
+    $rmd-list-item-medium-height: 3rem,
+    $rmd-list-item-dense-medium-height: 2.75rem
+  );
 ```
 
 Finally, update the root styles to import the react-md packages and generate the
diff --git a/packages/documentation/src/components/Demos/Form/TextFields/TextFieldTypes.module.scss b/packages/documentation/src/components/Demos/Form/TextFields/TextFieldTypes.module.scss
index 82c49f77b6..21ecc93727 100644
--- a/packages/documentation/src/components/Demos/Form/TextFields/TextFieldTypes.module.scss
+++ b/packages/documentation/src/components/Demos/Form/TextFields/TextFieldTypes.module.scss
@@ -1,7 +1,8 @@
-@use 'react-md' as * with (
-  $rmd-utils-desktop-min-width: 92em,
-  $rmd-utils-large-desktop-min-width: 120em,
-);
+@use 'react-md' as * with
+  (
+    $rmd-utils-desktop-min-width: 92em,
+    $rmd-utils-large-desktop-min-width: 120em
+  );
 
 .container {
   @include rmd-grid(
diff --git a/packages/documentation/src/components/Demos/Theme/SimpleExample.module.scss b/packages/documentation/src/components/Demos/Theme/SimpleExample.module.scss
index 76f8c2c9fb..f3380e70cb 100644
--- a/packages/documentation/src/components/Demos/Theme/SimpleExample.module.scss
+++ b/packages/documentation/src/components/Demos/Theme/SimpleExample.module.scss
@@ -1,9 +1,10 @@
 // sass-lint:disable class-name-format
 @use '@react-md/theme/dist/color-palette' as color;
-@use 'react-md' as * with (
-  $rmd-theme-primary: color.$rmd-teal-500,
-  $rmd-theme-secondary: color.$rmd-pink-a-200,
-);
+@use 'react-md' as * with
+  (
+    $rmd-theme-primary: color.$rmd-teal-500,
+    $rmd-theme-secondary: color.$rmd-pink-a-200
+  );
 
 .container {
   @include rmd-theme-update-var(background, $rmd-white-base);
diff --git a/packages/documentation/src/guides/customizing-your-theme.md b/packages/documentation/src/guides/customizing-your-theme.md
index 2583fb08b1..f5aab4c460 100644
--- a/packages/documentation/src/guides/customizing-your-theme.md
+++ b/packages/documentation/src/guides/customizing-your-theme.md
@@ -24,10 +24,11 @@ everything from `react-md` with the overrides required for your app.
 
 ```scss
 @use "@react-md/theme/dist/color-palette" as *;
-@forward "react-md" with (
-  $rmd-theme-primary: $rmd-teal-500,
-  $rmd-theme-secondary: $rmd-deep-orange-a-400,
-);
+@forward "react-md" with
+  (
+    $rmd-theme-primary: $rmd-teal-500,
+    $rmd-theme-secondary: $rmd-deep-orange-a-400
+  );
 ```
 
 `src/index.scss`
@@ -53,11 +54,12 @@ app.
 
 ```scss
 @use "@react-md/theme/dist/color-palette" as *;
-@forward "react-md" with (
-  $rmd-theme-light: false,
-  $rmd-theme-primary: $rmd-teal-500,
-  $rmd-theme-secondary: $rmd-deep-orange-a-400,
-);
+@forward "react-md" with
+  (
+    $rmd-theme-light: false,
+    $rmd-theme-primary: $rmd-teal-500,
+    $rmd-theme-secondary: $rmd-deep-orange-a-400
+  );
 ```
 
 `src/index.scss`
diff --git a/packages/media/src/_mixins.scss b/packages/media/src/_mixins.scss
index 10dfb81cab..b4f05fe5cd 100644
--- a/packages/media/src/_mixins.scss
+++ b/packages/media/src/_mixins.scss
@@ -2,7 +2,7 @@
 /// @group media
 ////
 
-@use "sass:math";
+@use 'sass:math';
 
 @import '~@react-md/theme/dist/mixins';
 @import '~@react-md/utils/dist/functions';
diff --git a/packages/media/src/_variables.scss b/packages/media/src/_variables.scss
index b5e33925b6..5471f1dd9a 100644
--- a/packages/media/src/_variables.scss
+++ b/packages/media/src/_variables.scss
@@ -2,7 +2,7 @@
 /// @group media
 ////
 
-@use "sass:math";
+@use 'sass:math';
 
 @import '~@react-md/theme/dist/color-palette';
 
diff --git a/packages/theme/src/_color-a11y.scss b/packages/theme/src/_color-a11y.scss
index cc40976d4f..dc3fab0c8c 100644
--- a/packages/theme/src/_color-a11y.scss
+++ b/packages/theme/src/_color-a11y.scss
@@ -2,7 +2,7 @@
 /// @group theme
 ////
 
-@use "sass:math";
+@use 'sass:math';
 
 @import './color-palette';
 
diff --git a/packages/typography/src/_variables.scss b/packages/typography/src/_variables.scss
index 7dce7eb006..c158f93dee 100644
--- a/packages/typography/src/_variables.scss
+++ b/packages/typography/src/_variables.scss
@@ -2,7 +2,7 @@
 /// @group typography
 ////
 
-@use "sass:math";
+@use 'sass:math';
 
 /// Gets the global variable value for a provided typography style name. This
 /// assumes that the global variable exists already.