chore(website): update all scss files for @use imports

Author: mlaursen

.sass-lint.yml

@@ -1,5 +1,6 @@
 files:
   include: 'packages/*/src/**/*.scss'
+  ignore: 'packages/documentation/src/**/*'
 options:
   formatter: stylish
   merge-default-rules: false

…ckages/documentation/src/_variables.scss …kages/documentation/src/_everything.scsspackages/documentation/src/_variables.scss renamed to packages/documentation/src/_everything.scss packages/documentation/src/_variables.scss renamed to 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;

packages/documentation/src/_mixins.scss

@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-utils-phone-media {

packages/documentation/src/components/Blog/Post.module.scss

@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   color: $rmd-black-base;

packages/documentation/src/components/ColorsAndTheming/ColorPalette/Color.module.scss

@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   align-items: flex-start;

packages/documentation/src/components/ColorsAndTheming/ColorPalette/ColorPalette.module.scss

@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   @include rmd-elevation(6);

packages/documentation/src/components/ColorsAndTheming/ThemeBuilder/Preview.module.scss

@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .code {
   @include rmd-states-focus-shadow($css-modules: true);

packages/documentation/src/components/DemoSandbox/CodePreview.module.scss

@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .sheet {
   background-color: $rmd-sheet-dark-elevation-background-color;

packages/documentation/src/components/DemoSandbox/SandboxFileTree.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;