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

mlaursen · Aug 13, 2021 · 958f34f · 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   display: block;

diff --git a/...mponents/Demos/Form/SelectFields/CustomizingSelectOptions/WithOptionLeftAddon.module.scss b/...mponents/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/...es/documentation/src/components/Demos/Form/SelectionControls/CustomCheckboxes.module.scss b/...es/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   align-items: center;

diff --git a/...documentation/src/components/Demos/Menu/FixingOverflowIssues/InaccessibleMenu.module.scss b/...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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .container {
   align-items: center;

diff --git a/...s/documentation/src/components/Demos/Progress/WithSuspense/WithSuspenseAppBar.module.scss b/...s/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/...documentation/src/components/Demos/Progress/WithSuspense/WithSuspenseFallback.module.scss b/...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
@@ -1,4 +1,4 @@
-@import 'react-md/dist/everything';
+@use 'react-md' as *;
 
 .sheet {
   padding: $rmd-list-vertical-padding 0;