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

mlaursen · Aug 13, 2021 · 958f34f
1 parent 787bfb5
commit 958f34f
Show file tree

Hide file tree

Showing 108 changed files with 127 additions and 136 deletions.
diff --git 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 → packages/documentation/src/_everything.scss b/packages/documentation/src/_variables.scss → 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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