diff --git a/.sass-lint.yml b/.sass-lint.yml
index 3410f41144..ba1184d56f 100644
--- a/.sass-lint.yml
+++ b/.sass-lint.yml
@@ -1,5 +1,6 @@
 files:
   include: 'packages/*/src/**/*.scss'
+  ignore: 'packages/documentation/src/**/*'
 options:
   formatter: stylish
   merge-default-rules: false
diff --git a/packages/documentation/src/_variables.scss b/packages/documentation/src/_everything.scss
similarity index 70%
rename from packages/documentation/src/_variables.scss
rename to packages/documentation/src/_everything.scss
index ce0f4a34d7..c96f2f77d5 100644
--- a/packages/documentation/src/_variables.scss
+++ b/packages/documentation/src/_everything.scss
@@ -1,8 +1,9 @@
-@import '@react-md/theme/dist/color-palette';
-
-$rmd-theme-primary: $rmd-teal-500;
-$rmd-theme-secondary: $rmd-pink-a-200;
-$rmd-utils-auto-dense: true;
+@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,
+);
 
 $solarized-base-03: #002b36;
 $solarized-base-02: #073642;
diff --git a/packages/documentation/src/_mixins.scss b/packages/documentation/src/_mixins.scss
deleted file mode 100644
index 13866ea580..0000000000
--- a/packages/documentation/src/_mixins.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './variables';
-@import 'react-md/dist/everything';
diff --git a/packages/documentation/src/components/Blog/Post.module.scss b/packages/documentation/src/components/Blog/Post.module.scss
index 2f3131ca27..c0100badd1 100644
--- a/packages/documentation/src/components/Blog/Post.module.scss
+++ b/packages/documentation/src/components/Blog/Post.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-utils-phone-media {
diff --git a/packages/documentation/src/components/ColorsAndTheming/ColorPalette/Color.module.scss b/packages/documentation/src/components/ColorsAndTheming/ColorPalette/Color.module.scss
index 1c286c124e..96482ae70d 100644
--- a/packages/documentation/src/components/ColorsAndTheming/ColorPalette/Color.module.scss
+++ b/packages/documentation/src/components/ColorsAndTheming/ColorPalette/Color.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   color: $rmd-black-base;
diff --git a/packages/documentation/src/components/ColorsAndTheming/ColorPalette/ColorPalette.module.scss b/packages/documentation/src/components/ColorsAndTheming/ColorPalette/ColorPalette.module.scss
index e6cd04d3b4..0dbaf17bfd 100644
--- a/packages/documentation/src/components/ColorsAndTheming/ColorPalette/ColorPalette.module.scss
+++ b/packages/documentation/src/components/ColorsAndTheming/ColorPalette/ColorPalette.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   align-items: flex-start;
diff --git a/packages/documentation/src/components/ColorsAndTheming/ThemeBuilder/Preview.module.scss b/packages/documentation/src/components/ColorsAndTheming/ThemeBuilder/Preview.module.scss
index de56c9b1ae..dafbbe8a14 100644
--- a/packages/documentation/src/components/ColorsAndTheming/ThemeBuilder/Preview.module.scss
+++ b/packages/documentation/src/components/ColorsAndTheming/ThemeBuilder/Preview.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-elevation(6);
diff --git a/packages/documentation/src/components/DemoSandbox/CodePreview.module.scss b/packages/documentation/src/components/DemoSandbox/CodePreview.module.scss
index c00a0a5778..64eb0ccb32 100644
--- a/packages/documentation/src/components/DemoSandbox/CodePreview.module.scss
+++ b/packages/documentation/src/components/DemoSandbox/CodePreview.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .code {
   @include rmd-states-focus-shadow($css-modules: true);
diff --git a/packages/documentation/src/components/DemoSandbox/SandboxFileTree.module.scss b/packages/documentation/src/components/DemoSandbox/SandboxFileTree.module.scss
index b04a2effc9..f31ad01bb9 100644
--- a/packages/documentation/src/components/DemoSandbox/SandboxFileTree.module.scss
+++ b/packages/documentation/src/components/DemoSandbox/SandboxFileTree.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .sheet {
   background-color: $rmd-sheet-dark-elevation-background-color;
diff --git a/packages/documentation/src/components/DemoSandbox/SandboxList.module.scss b/packages/documentation/src/components/DemoSandbox/SandboxList.module.scss
index 28bf98ca25..9f0ad32cfb 100644
--- a/packages/documentation/src/components/DemoSandbox/SandboxList.module.scss
+++ b/packages/documentation/src/components/DemoSandbox/SandboxList.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 $card-margin: 0.5rem;
 $doubled-card-margin: $card-margin * 2;
diff --git a/packages/documentation/src/components/DemoSandbox/SandboxModal.module.scss b/packages/documentation/src/components/DemoSandbox/SandboxModal.module.scss
index d13325fec4..dcd2e9c4fd 100644
--- a/packages/documentation/src/components/DemoSandbox/SandboxModal.module.scss
+++ b/packages/documentation/src/components/DemoSandbox/SandboxModal.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .dialog {
   @include rmd-app-bar-theme-update-var(prominent-dense-height, 5rem);
diff --git a/packages/documentation/src/components/DemoSandbox/SandboxNavigation.module.scss b/packages/documentation/src/components/DemoSandbox/SandboxNavigation.module.scss
index 2896a1d27e..4d5820f70b 100644
--- a/packages/documentation/src/components/DemoSandbox/SandboxNavigation.module.scss
+++ b/packages/documentation/src/components/DemoSandbox/SandboxNavigation.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .header {
   align-items: flex-start;
diff --git a/packages/documentation/src/components/Demos/Alert/UpdatingMessagePriority.module.scss b/packages/documentation/src/components/Demos/Alert/UpdatingMessagePriority.module.scss
index 681c45f463..042a2a5fa8 100644
--- a/packages/documentation/src/components/Demos/Alert/UpdatingMessagePriority.module.scss
+++ b/packages/documentation/src/components/Demos/Alert/UpdatingMessagePriority.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .output {
   @include rmd-elevation(4);
diff --git a/packages/documentation/src/components/Demos/AppBar/AnimatingAppBar.module.scss b/packages/documentation/src/components/Demos/AppBar/AnimatingAppBar.module.scss
index 115fc08dcf..10fd07c0ad 100644
--- a/packages/documentation/src/components/Demos/AppBar/AnimatingAppBar.module.scss
+++ b/packages/documentation/src/components/Demos/AppBar/AnimatingAppBar.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-elevation(6);
diff --git a/packages/documentation/src/components/Demos/AppBar/AutoDense.module.scss b/packages/documentation/src/components/Demos/AppBar/AutoDense.module.scss
index 613701510b..63c738af6b 100644
--- a/packages/documentation/src/components/Demos/AppBar/AutoDense.module.scss
+++ b/packages/documentation/src/components/Demos/AppBar/AutoDense.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-utils-desktop-media {
diff --git a/packages/documentation/src/components/Demos/AppBar/FixedWithOffset.module.scss b/packages/documentation/src/components/Demos/AppBar/FixedWithOffset.module.scss
index 0be61523cb..91a661a348 100644
--- a/packages/documentation/src/components/Demos/AppBar/FixedWithOffset.module.scss
+++ b/packages/documentation/src/components/Demos/AppBar/FixedWithOffset.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-elevation(6);
diff --git a/packages/documentation/src/components/Demos/AppBar/index.module.scss b/packages/documentation/src/components/Demos/AppBar/index.module.scss
index 5b0a4f799c..b5684d0ac3 100644
--- a/packages/documentation/src/components/Demos/AppBar/index.module.scss
+++ b/packages/documentation/src/components/Demos/AppBar/index.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-app-bar-theme-update-var(height, $rmd-app-bar-height);
diff --git a/packages/documentation/src/components/Demos/AutoComplete/HighlightMatches.module.scss b/packages/documentation/src/components/Demos/AutoComplete/HighlightMatches.module.scss
index c69f99b148..0e97b28157 100644
--- a/packages/documentation/src/components/Demos/AutoComplete/HighlightMatches.module.scss
+++ b/packages/documentation/src/components/Demos/AutoComplete/HighlightMatches.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 // all the importants are really just required to override the useFixedPositioning styles
 // that aren't configurable right now that have to be changed for the hacky phone "emulation"
diff --git a/packages/documentation/src/components/Demos/Avatar/ColorExamples.module.scss b/packages/documentation/src/components/Demos/Avatar/ColorExamples.module.scss
index cbd99775d0..e4c6cfa0be 100644
--- a/packages/documentation/src/components/Demos/Avatar/ColorExamples.module.scss
+++ b/packages/documentation/src/components/Demos/Avatar/ColorExamples.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .list {
   @include rmd-elevation(4);
diff --git a/packages/documentation/src/components/Demos/Badge/CustomizingBadges.module.scss b/packages/documentation/src/components/Demos/Badge/CustomizingBadges.module.scss
index fb4978947f..ce0fe6a4fe 100644
--- a/packages/documentation/src/components/Demos/Badge/CustomizingBadges.module.scss
+++ b/packages/documentation/src/components/Demos/Badge/CustomizingBadges.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-badge-theme-update-var(
diff --git a/packages/documentation/src/components/Demos/Button/CustomButtonTheme.module.scss b/packages/documentation/src/components/Demos/Button/CustomButtonTheme.module.scss
index fccc4a5e04..8937c2e9d9 100644
--- a/packages/documentation/src/components/Demos/Button/CustomButtonTheme.module.scss
+++ b/packages/documentation/src/components/Demos/Button/CustomButtonTheme.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-button-theme-update-var(outline-width, 4px);
diff --git a/packages/documentation/src/components/Demos/Chip/ActionChips/ActionChip.module.scss b/packages/documentation/src/components/Demos/Chip/ActionChips/ActionChip.module.scss
index b101c2c083..e76f0190b1 100644
--- a/packages/documentation/src/components/Demos/Chip/ActionChips/ActionChip.module.scss
+++ b/packages/documentation/src/components/Demos/Chip/ActionChips/ActionChip.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .chip {
   margin: 0.25rem;
diff --git a/packages/documentation/src/components/Demos/Chip/ActionChips/ActionChips.module.scss b/packages/documentation/src/components/Demos/Chip/ActionChips/ActionChips.module.scss
index d37d2abb64..4df5f2555b 100644
--- a/packages/documentation/src/components/Demos/Chip/ActionChips/ActionChips.module.scss
+++ b/packages/documentation/src/components/Demos/Chip/ActionChips/ActionChips.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 $blind-height: 1.5rem;
 $blind-margin: 2px;
diff --git a/packages/documentation/src/components/Demos/Chip/ActionChips/Blind.module.scss b/packages/documentation/src/components/Demos/Chip/ActionChips/Blind.module.scss
index 94515bc1ae..4e419d401b 100644
--- a/packages/documentation/src/components/Demos/Chip/ActionChips/Blind.module.scss
+++ b/packages/documentation/src/components/Demos/Chip/ActionChips/Blind.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 $blind-height: 1.5rem;
 $blind-margin: 2px;
diff --git a/packages/documentation/src/components/Demos/Chip/ActionChips/Blinds.module.scss b/packages/documentation/src/components/Demos/Chip/ActionChips/Blinds.module.scss
index 6c0582ea53..370398bb20 100644
--- a/packages/documentation/src/components/Demos/Chip/ActionChips/Blinds.module.scss
+++ b/packages/documentation/src/components/Demos/Chip/ActionChips/Blinds.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .blinds {
   @include rmd-transition(deceleration);
diff --git a/packages/documentation/src/components/Demos/Chip/ChoiceChips.module.scss b/packages/documentation/src/components/Demos/Chip/ChoiceChips.module.scss
index 2b1338898d..d54e031b9b 100644
--- a/packages/documentation/src/components/Demos/Chip/ChoiceChips.module.scss
+++ b/packages/documentation/src/components/Demos/Chip/ChoiceChips.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-utils-block-centered;
diff --git a/packages/documentation/src/components/Demos/Chip/FilterChips.module.scss b/packages/documentation/src/components/Demos/Chip/FilterChips.module.scss
index 32b465338b..820e7318a1 100644
--- a/packages/documentation/src/components/Demos/Chip/FilterChips.module.scss
+++ b/packages/documentation/src/components/Demos/Chip/FilterChips.module.scss
@@ -1,5 +1,3 @@
-@import 'react-md/dist/everything';
-
 .container {
   display: flex;
   flex-wrap: wrap;
diff --git a/packages/documentation/src/components/Demos/Chip/InputChips/To.module.scss b/packages/documentation/src/components/Demos/Chip/InputChips/To.module.scss
index 6a5d408497..0e419fa58f 100644
--- a/packages/documentation/src/components/Demos/Chip/InputChips/To.module.scss
+++ b/packages/documentation/src/components/Demos/Chip/InputChips/To.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 $spacing: 0.5rem;
 $padding: 1rem;
diff --git a/packages/documentation/src/components/Demos/Demo.module.scss b/packages/documentation/src/components/Demos/Demo.module.scss
index 3aeca450c9..743a6f554b 100644
--- a/packages/documentation/src/components/Demos/Demo.module.scss
+++ b/packages/documentation/src/components/Demos/Demo.module.scss
@@ -1,5 +1,5 @@
 // sass-lint:disable class-name-format
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .preview {
   @include rmd-elevation(2);
diff --git a/packages/documentation/src/components/Demos/DemoContainer.module.scss b/packages/documentation/src/components/Demos/DemoContainer.module.scss
index 26dbc91911..2e87171127 100644
--- a/packages/documentation/src/components/Demos/DemoContainer.module.scss
+++ b/packages/documentation/src/components/Demos/DemoContainer.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 // duplicated from TableOfContents.scss
 $toc-width: 15rem;
diff --git a/packages/documentation/src/components/Demos/DemoDescription.module.scss b/packages/documentation/src/components/Demos/DemoDescription.module.scss
index 797a3a3869..13693c1dc8 100644
--- a/packages/documentation/src/components/Demos/DemoDescription.module.scss
+++ b/packages/documentation/src/components/Demos/DemoDescription.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-typography(subtitle-1);
diff --git a/packages/documentation/src/components/Demos/Dialog/AlertDialogsAndModals.module.scss b/packages/documentation/src/components/Demos/Dialog/AlertDialogsAndModals.module.scss
index 85c3ec511d..5289993526 100644
--- a/packages/documentation/src/components/Demos/Dialog/AlertDialogsAndModals.module.scss
+++ b/packages/documentation/src/components/Demos/Dialog/AlertDialogsAndModals.module.scss
@@ -1,5 +1,3 @@
-@import 'react-md/dist/everything';
-
 .textarea {
   height: 15rem;
 }
diff --git a/packages/documentation/src/components/Demos/Dialog/FullPageExample.module.scss b/packages/documentation/src/components/Demos/Dialog/FullPageExample.module.scss
index 42f71ae70e..b6be9550e1 100644
--- a/packages/documentation/src/components/Demos/Dialog/FullPageExample.module.scss
+++ b/packages/documentation/src/components/Demos/Dialog/FullPageExample.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .button {
   @include rmd-utils-keyboard-only(true) {
diff --git a/packages/documentation/src/components/Demos/Dialog/NestedDialogs.module.scss b/packages/documentation/src/components/Demos/Dialog/NestedDialogs.module.scss
index 5f4684779e..cac20a5d02 100644
--- a/packages/documentation/src/components/Demos/Dialog/NestedDialogs.module.scss
+++ b/packages/documentation/src/components/Demos/Dialog/NestedDialogs.module.scss
@@ -1,5 +1,3 @@
-@import 'react-md/dist/everything';
-
 .content {
   align-items: center;
   display: flex;
diff --git a/packages/documentation/src/components/Demos/Dialog/SimpleListExample.module.scss b/packages/documentation/src/components/Demos/Dialog/SimpleListExample.module.scss
index 801976a7cb..68ca3fd601 100644
--- a/packages/documentation/src/components/Demos/Dialog/SimpleListExample.module.scss
+++ b/packages/documentation/src/components/Demos/Dialog/SimpleListExample.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .list {
   @include rmd-list-theme-update-var(
diff --git a/packages/documentation/src/components/Demos/Divider/Container.module.scss b/packages/documentation/src/components/Demos/Divider/Container.module.scss
index 5be4f0c6ad..1ad1140745 100644
--- a/packages/documentation/src/components/Demos/Divider/Container.module.scss
+++ b/packages/documentation/src/components/Demos/Divider/Container.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-utils-optional-css-modules('.rmd-list', true, false) {
diff --git a/packages/documentation/src/components/Demos/Divider/VerticalDividers.module.scss b/packages/documentation/src/components/Demos/Divider/VerticalDividers.module.scss
index 0a7dd4bf2d..c7301df3d8 100644
--- a/packages/documentation/src/components/Demos/Divider/VerticalDividers.module.scss
+++ b/packages/documentation/src/components/Demos/Divider/VerticalDividers.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .logo {
   @include rmd-utils-rtl-auto(margin-left, $rmd-app-bar-lr-margin, 0);
diff --git a/packages/documentation/src/components/Demos/Elevation/AllElevations.module.scss b/packages/documentation/src/components/Demos/Elevation/AllElevations.module.scss
index b94a60f73c..61d9f3efb2 100644
--- a/packages/documentation/src/components/Demos/Elevation/AllElevations.module.scss
+++ b/packages/documentation/src/components/Demos/Elevation/AllElevations.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-list-unstyled;
diff --git a/packages/documentation/src/components/Demos/Elevation/AnimatingElevation.module.scss b/packages/documentation/src/components/Demos/Elevation/AnimatingElevation.module.scss
index 079a5f99b3..b9aa571df5 100644
--- a/packages/documentation/src/components/Demos/Elevation/AnimatingElevation.module.scss
+++ b/packages/documentation/src/components/Demos/Elevation/AnimatingElevation.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .example {
   @include rmd-theme(color, on-surface);
diff --git a/packages/documentation/src/components/Demos/Form/FileInputs/Preview.module.scss b/packages/documentation/src/components/Demos/Form/FileInputs/Preview.module.scss
index ce9f10674d..93d0fc996f 100644
--- a/packages/documentation/src/components/Demos/Form/FileInputs/Preview.module.scss
+++ b/packages/documentation/src/components/Demos/Form/FileInputs/Preview.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .responsive {
   max-height: 100%;
diff --git a/packages/documentation/src/components/Demos/Form/FileInputs/PreviewFile.module.scss b/packages/documentation/src/components/Demos/Form/FileInputs/PreviewFile.module.scss
index c4d79e4472..90905036fb 100644
--- a/packages/documentation/src/components/Demos/Form/FileInputs/PreviewFile.module.scss
+++ b/packages/documentation/src/components/Demos/Form/FileInputs/PreviewFile.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   display: flex;
diff --git a/packages/documentation/src/components/Demos/Form/FileInputs/ServerUploadExample.module.scss b/packages/documentation/src/components/Demos/Form/FileInputs/ServerUploadExample.module.scss
index 27d17cc848..189918fa79 100644
--- a/packages/documentation/src/components/Demos/Form/FileInputs/ServerUploadExample.module.scss
+++ b/packages/documentation/src/components/Demos/Form/FileInputs/ServerUploadExample.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   display: block;
diff --git a/packages/documentation/src/components/Demos/Form/SelectFields/CustomizingSelectOptions/WithOptionLeftAddon.module.scss b/packages/documentation/src/components/Demos/Form/SelectFields/CustomizingSelectOptions/WithOptionLeftAddon.module.scss
index 9c263f7c07..d2b485c9b8 100644
--- a/packages/documentation/src/components/Demos/Form/SelectFields/CustomizingSelectOptions/WithOptionLeftAddon.module.scss
+++ b/packages/documentation/src/components/Demos/Form/SelectFields/CustomizingSelectOptions/WithOptionLeftAddon.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .label {
   @include rmd-avatar-theme-update-var(size, 1.5rem);
diff --git a/packages/documentation/src/components/Demos/Form/SelectionControls/CustomCheckboxes.module.scss b/packages/documentation/src/components/Demos/Form/SelectionControls/CustomCheckboxes.module.scss
index b898d04e26..38ffa2c24e 100644
--- a/packages/documentation/src/components/Demos/Form/SelectionControls/CustomCheckboxes.module.scss
+++ b/packages/documentation/src/components/Demos/Form/SelectionControls/CustomCheckboxes.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .small {
   @include rmd-button-theme-update-var(icon-size, 2rem);
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 b674332b3b..82c49f77b6 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,7 @@
-$rmd-utils-desktop-min-width: 92em;
-$rmd-utils-large-desktop-min-width: 120em;
-
-@import 'react-md/dist/everything';
+@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/Form/Validation/ExampleForm.module.scss b/packages/documentation/src/components/Demos/Form/Validation/ExampleForm.module.scss
index adb2147f2b..9361e095df 100644
--- a/packages/documentation/src/components/Demos/Form/Validation/ExampleForm.module.scss
+++ b/packages/documentation/src/components/Demos/Form/Validation/ExampleForm.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .form {
   align-items: center;
diff --git a/packages/documentation/src/components/Demos/Icon/IconSpacing.module.scss b/packages/documentation/src/components/Demos/Icon/IconSpacing.module.scss
index fe57de8d56..c1d13a9601 100644
--- a/packages/documentation/src/components/Demos/Icon/IconSpacing.module.scss
+++ b/packages/documentation/src/components/Demos/Icon/IconSpacing.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .button {
   margin: 1rem;
diff --git a/packages/documentation/src/components/Demos/Link/WithButtonStyles.module.scss b/packages/documentation/src/components/Demos/Link/WithButtonStyles.module.scss
index 599e7c2909..9e77500e3a 100644
--- a/packages/documentation/src/components/Demos/Link/WithButtonStyles.module.scss
+++ b/packages/documentation/src/components/Demos/Link/WithButtonStyles.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .link {
   @include rmd-button-theme(color);
diff --git a/packages/documentation/src/components/Demos/List/Container.module.scss b/packages/documentation/src/components/Demos/List/Container.module.scss
index eb818ef5d4..b5aee2b2c0 100644
--- a/packages/documentation/src/components/Demos/List/Container.module.scss
+++ b/packages/documentation/src/components/Demos/List/Container.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-utils-optional-css-modules('.rmd-list', true, false) {
diff --git a/packages/documentation/src/components/Demos/List/NonInteractable.module.scss b/packages/documentation/src/components/Demos/List/NonInteractable.module.scss
index c915950fee..f377ef04ef 100644
--- a/packages/documentation/src/components/Demos/List/NonInteractable.module.scss
+++ b/packages/documentation/src/components/Demos/List/NonInteractable.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 // since the `SimpleListItem` component has `display: flex`, the
 // default list item numbering and styles are no longer applied.
diff --git a/packages/documentation/src/components/Demos/List/TwoLineExamples.module.scss b/packages/documentation/src/components/Demos/List/TwoLineExamples.module.scss
index 903284e57f..d01e7cf96b 100644
--- a/packages/documentation/src/components/Demos/List/TwoLineExamples.module.scss
+++ b/packages/documentation/src/components/Demos/List/TwoLineExamples.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 $start-shadow: none;
 $end-shadow: 0 0 2px $rmd-blue-300;
diff --git a/packages/documentation/src/components/Demos/MaterialIcons/AllIcons.module.scss b/packages/documentation/src/components/Demos/MaterialIcons/AllIcons.module.scss
index 5ad6257bbe..aa9719e3bf 100644
--- a/packages/documentation/src/components/Demos/MaterialIcons/AllIcons.module.scss
+++ b/packages/documentation/src/components/Demos/MaterialIcons/AllIcons.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   align-items: center;
diff --git a/packages/documentation/src/components/Demos/Menu/FixingOverflowIssues/InaccessibleMenu.module.scss b/packages/documentation/src/components/Demos/Menu/FixingOverflowIssues/InaccessibleMenu.module.scss
index 579fdd160d..0a1f061504 100644
--- a/packages/documentation/src/components/Demos/Menu/FixingOverflowIssues/InaccessibleMenu.module.scss
+++ b/packages/documentation/src/components/Demos/Menu/FixingOverflowIssues/InaccessibleMenu.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   display: inline-block;
diff --git a/packages/documentation/src/components/Demos/Menu/MenuPositioning.module.scss b/packages/documentation/src/components/Demos/Menu/MenuPositioning.module.scss
index dc1daf7912..516afb39ae 100644
--- a/packages/documentation/src/components/Demos/Menu/MenuPositioning.module.scss
+++ b/packages/documentation/src/components/Demos/Menu/MenuPositioning.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   display: flex;
diff --git a/packages/documentation/src/components/Demos/Menu/SimpleContextMenu/RowWithMenu.module.scss b/packages/documentation/src/components/Demos/Menu/SimpleContextMenu/RowWithMenu.module.scss
index 3901a5239a..620cadbb92 100644
--- a/packages/documentation/src/components/Demos/Menu/SimpleContextMenu/RowWithMenu.module.scss
+++ b/packages/documentation/src/components/Demos/Menu/SimpleContextMenu/RowWithMenu.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .row {
   @include rmd-utils-hide-focus-outline;
diff --git a/packages/documentation/src/components/Demos/Overlay/CustomTheme.module.scss b/packages/documentation/src/components/Demos/Overlay/CustomTheme.module.scss
index 6620ac5d5e..6b2530f6b4 100644
--- a/packages/documentation/src/components/Demos/Overlay/CustomTheme.module.scss
+++ b/packages/documentation/src/components/Demos/Overlay/CustomTheme.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .overlay {
   @include rmd-overlay-theme-update-var(
diff --git a/packages/documentation/src/components/Demos/Overlay/FixingOverflowIssues.module.scss b/packages/documentation/src/components/Demos/Overlay/FixingOverflowIssues.module.scss
index a28b1ebaa3..2e6317b8c8 100644
--- a/packages/documentation/src/components/Demos/Overlay/FixingOverflowIssues.module.scss
+++ b/packages/documentation/src/components/Demos/Overlay/FixingOverflowIssues.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-utils-scroll;
diff --git a/packages/documentation/src/components/Demos/Portal/CustomPortalContainer.module.scss b/packages/documentation/src/components/Demos/Portal/CustomPortalContainer.module.scss
index 5f2a42f9d1..4dbd8a94c3 100644
--- a/packages/documentation/src/components/Demos/Portal/CustomPortalContainer.module.scss
+++ b/packages/documentation/src/components/Demos/Portal/CustomPortalContainer.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-elevation(4);
diff --git a/packages/documentation/src/components/Demos/Portal/SimpleExample.module.scss b/packages/documentation/src/components/Demos/Portal/SimpleExample.module.scss
index f9e1d410e5..955dcd5869 100644
--- a/packages/documentation/src/components/Demos/Portal/SimpleExample.module.scss
+++ b/packages/documentation/src/components/Demos/Portal/SimpleExample.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-utils-scroll;
diff --git a/packages/documentation/src/components/Demos/Progress/AsyncButton.module.scss b/packages/documentation/src/components/Demos/Progress/AsyncButton.module.scss
index b57a203b6a..3d791d6afd 100644
--- a/packages/documentation/src/components/Demos/Progress/AsyncButton.module.scss
+++ b/packages/documentation/src/components/Demos/Progress/AsyncButton.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .button {
   @include rmd-progress-theme-update-var(
diff --git a/packages/documentation/src/components/Demos/Progress/SimpleDeterminateExamples.module.scss b/packages/documentation/src/components/Demos/Progress/SimpleDeterminateExamples.module.scss
index f776a35694..0ac98dddc2 100644
--- a/packages/documentation/src/components/Demos/Progress/SimpleDeterminateExamples.module.scss
+++ b/packages/documentation/src/components/Demos/Progress/SimpleDeterminateExamples.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   align-items: center;
diff --git a/packages/documentation/src/components/Demos/Progress/WithSuspense/WithSuspenseAppBar.module.scss b/packages/documentation/src/components/Demos/Progress/WithSuspense/WithSuspenseAppBar.module.scss
index 377ba52a1a..4e50648076 100644
--- a/packages/documentation/src/components/Demos/Progress/WithSuspense/WithSuspenseAppBar.module.scss
+++ b/packages/documentation/src/components/Demos/Progress/WithSuspense/WithSuspenseAppBar.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 $size: 2rem;
 
diff --git a/packages/documentation/src/components/Demos/Progress/WithSuspense/WithSuspenseFallback.module.scss b/packages/documentation/src/components/Demos/Progress/WithSuspense/WithSuspenseFallback.module.scss
index 168bfda0e8..076baa0d5d 100644
--- a/packages/documentation/src/components/Demos/Progress/WithSuspense/WithSuspenseFallback.module.scss
+++ b/packages/documentation/src/components/Demos/Progress/WithSuspense/WithSuspenseFallback.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-utils-absolute-centered;
diff --git a/packages/documentation/src/components/Demos/Sheet/MobileActionSheet.module.scss b/packages/documentation/src/components/Demos/Sheet/MobileActionSheet.module.scss
index 740c71cfde..c0da3594ec 100644
--- a/packages/documentation/src/components/Demos/Sheet/MobileActionSheet.module.scss
+++ b/packages/documentation/src/components/Demos/Sheet/MobileActionSheet.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .sheet {
   padding: $rmd-list-vertical-padding 0;
diff --git a/packages/documentation/src/components/Demos/States/CustomComponent.module.scss b/packages/documentation/src/components/Demos/States/CustomComponent.module.scss
index c0b2498770..3860c631e0 100644
--- a/packages/documentation/src/components/Demos/States/CustomComponent.module.scss
+++ b/packages/documentation/src/components/Demos/States/CustomComponent.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .button {
   @include rmd-button-unstyled(true);
diff --git a/packages/documentation/src/components/Demos/States/CustomInteractions.module.scss b/packages/documentation/src/components/Demos/States/CustomInteractions.module.scss
index 881ce1adad..443daf773f 100644
--- a/packages/documentation/src/components/Demos/States/CustomInteractions.module.scss
+++ b/packages/documentation/src/components/Demos/States/CustomInteractions.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .button {
   @include rmd-elevation-transition(
diff --git a/packages/documentation/src/components/Demos/Table/StickyColumnsPart2.module.scss b/packages/documentation/src/components/Demos/Table/StickyColumnsPart2.module.scss
index 55992ab573..3702007d65 100644
--- a/packages/documentation/src/components/Demos/Table/StickyColumnsPart2.module.scss
+++ b/packages/documentation/src/components/Demos/Table/StickyColumnsPart2.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-table-theme-update-var(
diff --git a/packages/documentation/src/components/Demos/Table/StickyColumnsPart4.module.scss b/packages/documentation/src/components/Demos/Table/StickyColumnsPart4.module.scss
index 4d14da8218..b4fbc46601 100644
--- a/packages/documentation/src/components/Demos/Table/StickyColumnsPart4.module.scss
+++ b/packages/documentation/src/components/Demos/Table/StickyColumnsPart4.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   max-height: 25rem;
diff --git a/packages/documentation/src/components/Demos/Tabs/ConfigurableTabs/ConfigurableTabs.module.scss b/packages/documentation/src/components/Demos/Tabs/ConfigurableTabs/ConfigurableTabs.module.scss
index ea1800f7d4..a2981a3d0b 100644
--- a/packages/documentation/src/components/Demos/Tabs/ConfigurableTabs/ConfigurableTabs.module.scss
+++ b/packages/documentation/src/components/Demos/Tabs/ConfigurableTabs/ConfigurableTabs.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-utils-tablet-media {
diff --git a/packages/documentation/src/components/Demos/Theme/SimpleExample.module.scss b/packages/documentation/src/components/Demos/Theme/SimpleExample.module.scss
index 5c861b8027..e513dfa806 100644
--- a/packages/documentation/src/components/Demos/Theme/SimpleExample.module.scss
+++ b/packages/documentation/src/components/Demos/Theme/SimpleExample.module.scss
@@ -1,8 +1,9 @@
 // sass-lint:disable class-name-format
-@import 'react-md/dist/everything';
-
-$rmd-theme-primary: $rmd-teal-500;
-$rmd-theme-secondary: $rmd-pink-a-200;
+@use '@react-md/theme/dist/color-palette' as *;
+@use 'react-md' as * with (
+  $rmd-theme-primary: $rmd-teal-500,
+  $rmd-theme-secondary: $rmd-pink-a-200,
+);
 
 .container {
   @include rmd-theme-update-var(background, $rmd-white-base);
diff --git a/packages/documentation/src/components/Demos/Tooltip/LargeTooltips.module.scss b/packages/documentation/src/components/Demos/Tooltip/LargeTooltips.module.scss
index 0e490cd1b3..0f0ae25a43 100644
--- a/packages/documentation/src/components/Demos/Tooltip/LargeTooltips.module.scss
+++ b/packages/documentation/src/components/Demos/Tooltip/LargeTooltips.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .link {
   @include rmd-typography-text-overflow-ellipsis;
diff --git a/packages/documentation/src/components/Demos/Transition/ConfigurableCollapseExample.module.scss b/packages/documentation/src/components/Demos/Transition/ConfigurableCollapseExample.module.scss
index d378f9fd9c..7482772d43 100644
--- a/packages/documentation/src/components/Demos/Transition/ConfigurableCollapseExample.module.scss
+++ b/packages/documentation/src/components/Demos/Transition/ConfigurableCollapseExample.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .submit {
   @include rmd-utils-rtl-auto(margin-right, 1rem);
diff --git a/packages/documentation/src/components/Demos/Transition/Container.module.scss b/packages/documentation/src/components/Demos/Transition/Container.module.scss
index 711f085cf3..31d68305d9 100644
--- a/packages/documentation/src/components/Demos/Transition/Container.module.scss
+++ b/packages/documentation/src/components/Demos/Transition/Container.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-utils-scroll;
diff --git a/packages/documentation/src/components/Demos/Transition/FixedPositioningExample.module.scss b/packages/documentation/src/components/Demos/Transition/FixedPositioningExample.module.scss
index c9227fbcc8..77b275ec44 100644
--- a/packages/documentation/src/components/Demos/Transition/FixedPositioningExample.module.scss
+++ b/packages/documentation/src/components/Demos/Transition/FixedPositioningExample.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .form {
   display: flex;
diff --git a/packages/documentation/src/components/Demos/Transition/ScaleTransitionExample.module.scss b/packages/documentation/src/components/Demos/Transition/ScaleTransitionExample.module.scss
index a5db562d62..925796a4a1 100644
--- a/packages/documentation/src/components/Demos/Transition/ScaleTransitionExample.module.scss
+++ b/packages/documentation/src/components/Demos/Transition/ScaleTransitionExample.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   position: relative;
diff --git a/packages/documentation/src/components/Demos/Transition/UseCSSTransition.module.scss b/packages/documentation/src/components/Demos/Transition/UseCSSTransition.module.scss
index 5aef57ede6..25c940b407 100644
--- a/packages/documentation/src/components/Demos/Transition/UseCSSTransition.module.scss
+++ b/packages/documentation/src/components/Demos/Transition/UseCSSTransition.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 // just to make it really visible...
 $duration: 5s;
diff --git a/packages/documentation/src/components/Demos/Tree/CustomizingTreeItems.module.scss b/packages/documentation/src/components/Demos/Tree/CustomizingTreeItems.module.scss
index 86793808f4..17ad1414ad 100644
--- a/packages/documentation/src/components/Demos/Tree/CustomizingTreeItems.module.scss
+++ b/packages/documentation/src/components/Demos/Tree/CustomizingTreeItems.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .tree {
   // want to decrease the padding-left for each tree item for a more
diff --git a/packages/documentation/src/components/Demos/Utils/Grid.module.scss b/packages/documentation/src/components/Demos/Utils/Grid.module.scss
index 99bbf6e30b..2521055368 100644
--- a/packages/documentation/src/components/Demos/Utils/Grid.module.scss
+++ b/packages/documentation/src/components/Demos/Utils/Grid.module.scss
@@ -1,5 +1,5 @@
 // sass-lint:disable class-name-format
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .grid {
   background-color: $rmd-theme-light-background;
diff --git a/packages/documentation/src/components/Demos/Utils/MediaQueryComponents.module.scss b/packages/documentation/src/components/Demos/Utils/MediaQueryComponents.module.scss
index eb4f286ee6..7d8895d286 100644
--- a/packages/documentation/src/components/Demos/Utils/MediaQueryComponents.module.scss
+++ b/packages/documentation/src/components/Demos/Utils/MediaQueryComponents.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-utils-phone-media {
diff --git a/packages/documentation/src/components/Demos/Utils/ResizeObserverExample.module.scss b/packages/documentation/src/components/Demos/Utils/ResizeObserverExample.module.scss
index cc8bc0e44c..0566558dc5 100644
--- a/packages/documentation/src/components/Demos/Utils/ResizeObserverExample.module.scss
+++ b/packages/documentation/src/components/Demos/Utils/ResizeObserverExample.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-elevation(4);
diff --git a/packages/documentation/src/components/Demos/Utils/SimpleGridList.module.scss b/packages/documentation/src/components/Demos/Utils/SimpleGridList.module.scss
index 1452679255..0becfe15dc 100644
--- a/packages/documentation/src/components/Demos/Utils/SimpleGridList.module.scss
+++ b/packages/documentation/src/components/Demos/Utils/SimpleGridList.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   margin-top: 1rem;
diff --git a/packages/documentation/src/components/GithubLink/GithubLink.module.scss b/packages/documentation/src/components/GithubLink/GithubLink.module.scss
index 18b5be25fc..c29cb78cb8 100644
--- a/packages/documentation/src/components/GithubLink/GithubLink.module.scss
+++ b/packages/documentation/src/components/GithubLink/GithubLink.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .link {
   @include rmd-theme(color, text-icon-on-background);
diff --git a/packages/documentation/src/components/Home/Banner.module.scss b/packages/documentation/src/components/Home/Banner.module.scss
index 682b94ce68..f28752de62 100644
--- a/packages/documentation/src/components/Home/Banner.module.scss
+++ b/packages/documentation/src/components/Home/Banner.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .banner {
   @include rmd-theme(background-color, primary);
diff --git a/packages/documentation/src/components/Home/Goals.module.scss b/packages/documentation/src/components/Home/Goals.module.scss
index 7396434de7..e72d6aad0e 100644
--- a/packages/documentation/src/components/Home/Goals.module.scss
+++ b/packages/documentation/src/components/Home/Goals.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .goals {
   @media (min-width: 37.5625rem) {
diff --git a/packages/documentation/src/components/Home/JumpStartCard.module.scss b/packages/documentation/src/components/Home/JumpStartCard.module.scss
index 5b7f0bf551..28db2cc8be 100644
--- a/packages/documentation/src/components/Home/JumpStartCard.module.scss
+++ b/packages/documentation/src/components/Home/JumpStartCard.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .card {
   @include rmd-utils-tablet-media {
diff --git a/packages/documentation/src/components/Home/LibraryInfo/LibraryInfo.module.scss b/packages/documentation/src/components/Home/LibraryInfo/LibraryInfo.module.scss
index 5390cee67b..e78fd9a26c 100644
--- a/packages/documentation/src/components/Home/LibraryInfo/LibraryInfo.module.scss
+++ b/packages/documentation/src/components/Home/LibraryInfo/LibraryInfo.module.scss
@@ -1,5 +1,7 @@
 // sass-lint:disable class-name-format
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
+
+$app-bar-height: rmd-app-bar-theme-var(height);
 
 .container {
   @include rmd-table-theme-update-var(cell-v-padding, 1rem);
@@ -9,22 +11,19 @@
 }
 
 .header {
-  @include rmd-table-theme-update-var(
-    sticky-header,
-    rmd-app-bar-theme-var(height)
-  );
+  @include rmd-table-theme-update-var(sticky-header, $app-bar-height);
 }
 
 .leftHeader {
   @include rmd-table-theme-update-var(
     sticky-header,
-    calc(#{rmd-app-bar-theme-var(height)} + #{$rmd-table-header-cell-height})
+    calc(#{$app-bar-height} + #{$rmd-table-header-cell-height})
   );
 }
 
 .mobileHeader {
   @include rmd-table-theme-update-var(
     sticky-header,
-    calc(#{rmd-app-bar-theme-var(height)} + #{$rmd-table-cell-height})
+    calc(#{$app-bar-height} + #{$rmd-table-cell-height})
   );
 }
diff --git a/packages/documentation/src/components/Home/LibraryInfo/TableCellList.module.scss b/packages/documentation/src/components/Home/LibraryInfo/TableCellList.module.scss
index 28f264520b..02abe1c9b5 100644
--- a/packages/documentation/src/components/Home/LibraryInfo/TableCellList.module.scss
+++ b/packages/documentation/src/components/Home/LibraryInfo/TableCellList.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .list {
   @include rmd-utils-rtl-auto(padding-left, 1rem);
diff --git a/packages/documentation/src/components/Home/Logo.module.scss b/packages/documentation/src/components/Home/Logo.module.scss
index d0fa8b43ac..b7ac23432b 100644
--- a/packages/documentation/src/components/Home/Logo.module.scss
+++ b/packages/documentation/src/components/Home/Logo.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .primary {
   @include rmd-theme(fill, primary);
diff --git a/packages/documentation/src/components/Layout/Search.module.scss b/packages/documentation/src/components/Layout/Search.module.scss
index bd6b05b4b2..518140792e 100644
--- a/packages/documentation/src/components/Layout/Search.module.scss
+++ b/packages/documentation/src/components/Layout/Search.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-utils-rtl-auto(margin-left, auto);
diff --git a/packages/documentation/src/components/Layout/SearchType.module.scss b/packages/documentation/src/components/Layout/SearchType.module.scss
index 3b4f2290da..588813b6a1 100644
--- a/packages/documentation/src/components/Layout/SearchType.module.scss
+++ b/packages/documentation/src/components/Layout/SearchType.module.scss
@@ -1,16 +1,15 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .type {
   &::after {
+    $horizontal-padding: rmd-list-theme-var(item-horizontal-padding);
+    $media-size: rmd-list-theme-var(media-size);
+
     @include rmd-divider-theme(background-color);
     @include rmd-divider-theme(width, size);
     @include rmd-utils-rtl-auto(
       left,
-      calc(
-        #{rmd-list-theme-var(item-horizontal-padding)} + #{rmd-list-theme-var(
-            media-size
-          )}
-      )
+      calc(#{$horizontal-padding} + #{$media-size})
     );
 
     bottom: 10%;
diff --git a/packages/documentation/src/components/Layout/ToggleTheme.module.scss b/packages/documentation/src/components/Layout/ToggleTheme.module.scss
index f51ea2d327..42f79c4155 100644
--- a/packages/documentation/src/components/Layout/ToggleTheme.module.scss
+++ b/packages/documentation/src/components/Layout/ToggleTheme.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .on {
   @include rmd-utils-mouse-only(true) {
diff --git a/packages/documentation/src/components/Markdown/Markdown.module.scss b/packages/documentation/src/components/Markdown/Markdown.module.scss
index a1f320a7bf..c011b475b3 100644
--- a/packages/documentation/src/components/Markdown/Markdown.module.scss
+++ b/packages/documentation/src/components/Markdown/Markdown.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .p,
 .list {
diff --git a/packages/documentation/src/components/NotFoundPage/NotFoundPage.module.scss b/packages/documentation/src/components/NotFoundPage/NotFoundPage.module.scss
index d7981ac83f..53a0b0b7f6 100644
--- a/packages/documentation/src/components/NotFoundPage/NotFoundPage.module.scss
+++ b/packages/documentation/src/components/NotFoundPage/NotFoundPage.module.scss
@@ -1,5 +1,4 @@
-@import '../../variables';
-@import 'react-md/dist/everything';
+@use '../../everything';
 
 .container {
   background-color: rmd-theme-get-swatch($rmd-theme-primary, 800);
diff --git a/packages/documentation/src/components/NotFoundPage/NotFoundSVG.module.scss b/packages/documentation/src/components/NotFoundPage/NotFoundSVG.module.scss
index b9a2cedf58..f43d662c70 100644
--- a/packages/documentation/src/components/NotFoundPage/NotFoundSVG.module.scss
+++ b/packages/documentation/src/components/NotFoundPage/NotFoundSVG.module.scss
@@ -1,16 +1,15 @@
-@import '../../variables';
-@import 'react-md/dist/everything';
+@use '../../everything';
 
 .oval {
   @include rmd-theme(fill, secondary);
 }
 
 .circle1 {
-  fill: rmd-theme-get-swatch($rmd-theme-primary, 700);
+  fill: rmd-theme-get-swatch(variables.$primary-color, 700);
 }
 
 .circle2 {
-  fill: rmd-theme-get-swatch($rmd-theme-primary, 600);
+  fill: rmd-theme-get-swatch(variables.$primary-color, 600);
 }
 
 .circle3 {
diff --git a/packages/documentation/src/components/PackageSassDoc/ExpandableCode.module.scss b/packages/documentation/src/components/PackageSassDoc/ExpandableCode.module.scss
index b346a2282f..6f92a6a815 100644
--- a/packages/documentation/src/components/PackageSassDoc/ExpandableCode.module.scss
+++ b/packages/documentation/src/components/PackageSassDoc/ExpandableCode.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-elevation(8);
diff --git a/packages/documentation/src/components/PackageSassDoc/Find.module.scss b/packages/documentation/src/components/PackageSassDoc/Find.module.scss
index cb509d0dc7..6af0919f7a 100644
--- a/packages/documentation/src/components/PackageSassDoc/Find.module.scss
+++ b/packages/documentation/src/components/PackageSassDoc/Find.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .dialog {
   $distance: $rmd-button-floating-margin + $rmd-button-icon-size + 1rem;
diff --git a/packages/documentation/src/components/PackageSassDoc/PackageSassDoc.module.scss b/packages/documentation/src/components/PackageSassDoc/PackageSassDoc.module.scss
index adfbee7a3d..114f0808d6 100644
--- a/packages/documentation/src/components/PackageSassDoc/PackageSassDoc.module.scss
+++ b/packages/documentation/src/components/PackageSassDoc/PackageSassDoc.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 $mobile-padding: 2rem;
 $desktop-padding: 4rem;
diff --git a/packages/documentation/src/components/PackageSassDoc/Parameters.module.scss b/packages/documentation/src/components/PackageSassDoc/Parameters.module.scss
index 8981c47af4..000b31ff34 100644
--- a/packages/documentation/src/components/PackageSassDoc/Parameters.module.scss
+++ b/packages/documentation/src/components/PackageSassDoc/Parameters.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .caption {
   @include rmd-typography(headline-6);
diff --git a/packages/documentation/src/components/PackageSassDoc/ReferenceLinkSection.module.scss b/packages/documentation/src/components/PackageSassDoc/ReferenceLinkSection.module.scss
index ecc14c53f0..74574225c2 100644
--- a/packages/documentation/src/components/PackageSassDoc/ReferenceLinkSection.module.scss
+++ b/packages/documentation/src/components/PackageSassDoc/ReferenceLinkSection.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   align-items: center;
diff --git a/packages/documentation/src/components/Phone/Phone.module.scss b/packages/documentation/src/components/Phone/Phone.module.scss
index 0278aed0f0..d43c16fdff 100644
--- a/packages/documentation/src/components/Phone/Phone.module.scss
+++ b/packages/documentation/src/components/Phone/Phone.module.scss
@@ -1,5 +1,5 @@
 // sass-lint:disable class-name-format
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 $phone-height: 35.5rem;
 $phone-width: 20rem;
diff --git a/packages/documentation/src/components/Phone/PhoneAppBar.module.scss b/packages/documentation/src/components/Phone/PhoneAppBar.module.scss
index 290e018151..bf4d09cf39 100644
--- a/packages/documentation/src/components/Phone/PhoneAppBar.module.scss
+++ b/packages/documentation/src/components/Phone/PhoneAppBar.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   flex-wrap: wrap;
diff --git a/packages/documentation/src/components/Phone/StatusBar.module.scss b/packages/documentation/src/components/Phone/StatusBar.module.scss
index 85baedead0..d3bb15bf84 100644
--- a/packages/documentation/src/components/Phone/StatusBar.module.scss
+++ b/packages/documentation/src/components/Phone/StatusBar.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-app-bar-theme-update-var(dense-height, rmd-icon-theme-var(size));
diff --git a/packages/documentation/src/components/TableOfContents/List.module.scss b/packages/documentation/src/components/TableOfContents/List.module.scss
index 7a5609f38a..e26ff7b036 100644
--- a/packages/documentation/src/components/TableOfContents/List.module.scss
+++ b/packages/documentation/src/components/TableOfContents/List.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .list {
   margin: 0;
diff --git a/packages/documentation/src/components/TableOfContents/TableOfContents.module.scss b/packages/documentation/src/components/TableOfContents/TableOfContents.module.scss
index dac52d2076..0ad4486f83 100644
--- a/packages/documentation/src/components/TableOfContents/TableOfContents.module.scss
+++ b/packages/documentation/src/components/TableOfContents/TableOfContents.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 $page-margin: 1rem;
 $toc-width: 15rem;
diff --git a/packages/documentation/src/components/TableOfContents/Toggle.module.scss b/packages/documentation/src/components/TableOfContents/Toggle.module.scss
index 31958412b9..b4d5475268 100644
--- a/packages/documentation/src/components/TableOfContents/Toggle.module.scss
+++ b/packages/documentation/src/components/TableOfContents/Toggle.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 $page-margin: 1rem;
 $button-size: 2rem;
diff --git a/packages/documentation/src/components/Theme/styles.module.scss b/packages/documentation/src/components/Theme/styles.module.scss
index 4a2df41501..33098be4fe 100644
--- a/packages/documentation/src/components/Theme/styles.module.scss
+++ b/packages/documentation/src/components/Theme/styles.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 @mixin transition {
   @include rmd-transition(standard);
diff --git a/packages/documentation/src/icons/ReactSVGIcon.module.scss b/packages/documentation/src/icons/ReactSVGIcon.module.scss
index 7dba82899a..f92ed5ce80 100644
--- a/packages/documentation/src/icons/ReactSVGIcon.module.scss
+++ b/packages/documentation/src/icons/ReactSVGIcon.module.scss
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 // have to do some hacks since the logo is badly formatted with a lot of extra whitespace
 // around the icon
diff --git a/packages/documentation/src/pages/app.scss b/packages/documentation/src/pages/app.scss
index 4a240b1b6b..2810f53fb2 100644
--- a/packages/documentation/src/pages/app.scss
+++ b/packages/documentation/src/pages/app.scss
@@ -1,4 +1,4 @@
-@import '../mixins';
+@use '../everything' as *;
 
 @include react-md-utils;