From d42902907409d35f6dbdc5932d51ac032a2fa6ed Mon Sep 17 00:00:00 2001
From: AleksanderBodurri <alex.bodurri@mail.utoronto.ca>
Date: Mon, 8 Mar 2021 20:03:30 -0500
Subject: [PATCH] refactor(docs-infra): grab scss mixins with scss use syntax
 instead of global imports (#41129)

move away from global mixins because @import is going to be deprecated

PR Close #41129
---
 aio/src/styles/0-base/_index.scss             |  2 +-
 aio/src/styles/0-base/_typography.scss        |  1 +
 aio/src/styles/1-layouts/_index.scss          | 16 ++--
 aio/src/styles/1-layouts/_not-found.scss      |  1 +
 aio/src/styles/1-layouts/_sidenav.scss        |  1 +
 aio/src/styles/1-layouts/_top-menu.scss       |  1 +
 .../{ => content-layout}/_content-layout.scss |  2 +
 .../{ => doc-viewer}/_doc-viewer.scss         |  0
 .../1-layouts/footer/_footer-theming.scss     | 26 +++++++
 .../1-layouts/{ => footer}/_footer.scss       |  9 +--
 .../_marketing-layout-theme.scss              | 76 ++++++++++++++++---
 .../marketing-layout/_marketing-layout.scss   | 28 +------
 aio/src/styles/2-modules/_alert.scss          |  1 +
 aio/src/styles/2-modules/_api-list.scss       |  1 +
 aio/src/styles/2-modules/_api-pages.scss      |  1 +
 aio/src/styles/2-modules/_api-symbols.scss    |  1 +
 aio/src/styles/2-modules/_buttons.scss        |  1 +
 aio/src/styles/2-modules/_callout.scss        |  2 +
 aio/src/styles/2-modules/_card.scss           |  1 +
 aio/src/styles/2-modules/_code.scss           |  1 +
 aio/src/styles/2-modules/_contributor.scss    |  1 +
 aio/src/styles/2-modules/_deploy-theme.scss   |  1 +
 aio/src/styles/2-modules/_details.scss        |  1 +
 aio/src/styles/2-modules/_errors.scss         |  1 +
 aio/src/styles/2-modules/_features.scss       |  1 +
 aio/src/styles/2-modules/_filetree.scss       |  1 +
 aio/src/styles/2-modules/_guides.scss         |  1 +
 aio/src/styles/2-modules/_index.scss          | 59 +++++++-------
 aio/src/styles/2-modules/_label.scss          |  1 +
 aio/src/styles/2-modules/_notification.scss   |  1 +
 aio/src/styles/2-modules/_presskit.scss       |  1 +
 aio/src/styles/2-modules/_resources.scss      |  1 +
 aio/src/styles/2-modules/_search-results.scss |  1 +
 aio/src/styles/2-modules/_select-menu.scss    |  1 +
 aio/src/styles/2-modules/_table.scss          |  1 +
 aio/src/styles/2-modules/_toc.scss            |  1 +
 aio/src/styles/_app-theme.scss                |  1 -
 aio/src/styles/_mixins.scss                   |  8 +-
 aio/src/styles/main.scss                      | 12 +--
 39 files changed, 175 insertions(+), 92 deletions(-)
 rename aio/src/styles/1-layouts/{ => content-layout}/_content-layout.scss (96%)
 rename aio/src/styles/1-layouts/{ => doc-viewer}/_doc-viewer.scss (100%)
 create mode 100644 aio/src/styles/1-layouts/footer/_footer-theming.scss
 rename aio/src/styles/1-layouts/{ => footer}/_footer.scss (93%)

diff --git a/aio/src/styles/0-base/_index.scss b/aio/src/styles/0-base/_index.scss
index 73cc3d42e6..a9a80362ac 100644
--- a/aio/src/styles/0-base/_index.scss
+++ b/aio/src/styles/0-base/_index.scss
@@ -2,4 +2,4 @@
    BASE STYLES
    ============================== */
 
-@import 'typography';
\ No newline at end of file
+@forward 'typography';
\ No newline at end of file
diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index b0547fb4dd..84143afd71 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 html {
   font-size: 62.5%;
diff --git a/aio/src/styles/1-layouts/_index.scss b/aio/src/styles/1-layouts/_index.scss
index 271bf3b12b..8f57fd4eb3 100644
--- a/aio/src/styles/1-layouts/_index.scss
+++ b/aio/src/styles/1-layouts/_index.scss
@@ -2,11 +2,11 @@
    LAYOUT STYLES
    ============================== */
 
-@import 'content-layout/content-layout';
-@import 'doc-viewer/doc-viewer';
-@import 'footer/footer';
-@import 'layout-global';
-@import 'marketing-layout/marketing-layout';
-@import 'not-found';
-@import 'sidenav';
-@import 'top-menu';
+@forward 'content-layout/content-layout';
+@forward 'doc-viewer/doc-viewer';
+@forward 'footer/footer';
+@forward 'layout-global';
+@forward 'marketing-layout/marketing-layout';
+@forward 'not-found';
+@forward 'sidenav';
+@forward 'top-menu';
diff --git a/aio/src/styles/1-layouts/_not-found.scss b/aio/src/styles/1-layouts/_not-found.scss
index 39f62159eb..7e442e1831 100644
--- a/aio/src/styles/1-layouts/_not-found.scss
+++ b/aio/src/styles/1-layouts/_not-found.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .nf-container {
     align-items: center;
diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index f0b06ff1c6..68fe957d47 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 // Disable sidenav animations for the initial render.
 .starting.mat-drawer-transition .mat-drawer-content {
diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
index 71fdcfe4b4..68a46e2a7e 100644
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 // VARIABLES
 $showTopMenuWidth: 1048px;
diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/content-layout/_content-layout.scss
similarity index 96%
rename from aio/src/styles/1-layouts/_content-layout.scss
rename to aio/src/styles/1-layouts/content-layout/_content-layout.scss
index b64103fa32..7381ace844 100644
--- a/aio/src/styles/1-layouts/_content-layout.scss
+++ b/aio/src/styles/1-layouts/content-layout/_content-layout.scss
@@ -1,3 +1,5 @@
+@use '../../mixins' as *;
+
 .sidenav-container {
   width: 100%;
   height: 100vh;
diff --git a/aio/src/styles/1-layouts/_doc-viewer.scss b/aio/src/styles/1-layouts/doc-viewer/_doc-viewer.scss
similarity index 100%
rename from aio/src/styles/1-layouts/_doc-viewer.scss
rename to aio/src/styles/1-layouts/doc-viewer/_doc-viewer.scss
diff --git a/aio/src/styles/1-layouts/footer/_footer-theming.scss b/aio/src/styles/1-layouts/footer/_footer-theming.scss
new file mode 100644
index 0000000000..e7519fa1b3
--- /dev/null
+++ b/aio/src/styles/1-layouts/footer/_footer-theming.scss
@@ -0,0 +1,26 @@
+@use '../../constants' as *;
+
+@mixin footer-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  footer {
+    background-color: $blue;
+  
+    aio-footer {  
+      & > * {
+        color: $white;
+      }
+  
+      a {
+        color: $white;
+      }
+  
+      h3 {
+        color: $white;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_footer.scss b/aio/src/styles/1-layouts/footer/_footer.scss
similarity index 93%
rename from aio/src/styles/1-layouts/_footer.scss
rename to aio/src/styles/1-layouts/footer/_footer.scss
index 642ef54e65..a73b925a98 100644
--- a/aio/src/styles/1-layouts/_footer.scss
+++ b/aio/src/styles/1-layouts/footer/_footer.scss
@@ -1,10 +1,12 @@
+@use '../../constants';
+@use '../../mixins' as *;
+
 footer {
   position: relative;
   @include line-height(24);
   flex: 1;
   padding: 48px;
   z-index: 0;
-  background-color: $blue;
   font-weight: 300;
 
   aio-footer {
@@ -12,7 +14,6 @@ footer {
     z-index: 0;
 
     & > * {
-      color: $white;
       max-width: 50em;
     }
 
@@ -22,7 +23,6 @@ footer {
     }
 
     a {
-      color: $white;
       text-decoration: none;
       z-index: 20;
       position: relative;
@@ -37,7 +37,7 @@ footer {
 
       &:focus {
         // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
-        outline: 1px solid rgba($white, 0.8);
+        outline: 1px solid rgba(constants.$white, 0.8);
         outline-offset: 2px;
       }
     }
@@ -47,7 +47,6 @@ footer {
       text-transform: uppercase;
       font-weight: 400;
       margin: 8px 0 12px;
-      color: $white;
 
       @media (max-width: 600px) {
         @include font-size(14);
diff --git a/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss b/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss
index d03b375167..f31b19bada 100644
--- a/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss
+++ b/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss
@@ -1,13 +1,69 @@
-@mixin marketing-layout-theme($theme) {
-    $primary: map-get($theme, primary);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
-    $is-dark-theme: map-get($theme, is-dark);  
+@use '../../constants' as *;
 
-    .background-sky {
-        background-color: mat-color($primary, default);
-        background: linear-gradient(145deg, mat-color($primary, 900), mat-color($primary, 400));
-        color: mat-color($foreground, text);
+@mixin marketing-layout-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .background-sky {
+    background-color: mat-color($primary, default);
+    background: linear-gradient(145deg, mat-color($primary, 900), mat-color($primary, 400));
+    color: mat-color($foreground, text);
+  }
+
+  section#intro {
+    color: $white;
+  }
+
+  .announcement-bar {
+    background-color: $white;
+  
+    .button {
+      color: $white;
+      background-color: $blue;
+  
+      &:hover {
+        color: rgba($white, 0.7);
       }
+    }
+  }
+
+  .home-row .card {    
+    .card-text-container {  
+      p {
+        color: if($is-dark-theme, $offwhite, $darkgray);
+      }
+    }
+  
+    &:hover {
+      h2 {
+        color: $blue;
+      }
+    }
+  }
+
+  .button.hero-cta {
+    background-color: if($is-dark-theme, $darkgray, $white);
+  }
+
+  .cta-bar {
+    .hero-cta {
+      color: if($is-dark-theme, lighten($blue, 10), $blue);
+    }
+  }
+
+  .text-headline {
+    color: if($is-dark-theme, lighten($blue, 10), $blue);
+  }
+
+  .marketing-banner {
+    background-color: if($is-dark-theme, $blue, lighten($blue, 10));
+
+    .banner-headline {
+      color: $white;
+    }
+  }
+
 }
-  
\ No newline at end of file
+
diff --git a/aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss b/aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss
index 0c05e49f18..8c9a82bbbc 100644
--- a/aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss
+++ b/aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss
@@ -1,3 +1,6 @@
+@use '../../constants' as *;
+@use '../../mixins' as *;
+
 .hero {
   display: flex;
   flex-direction: column;
@@ -42,7 +45,6 @@ section#intro {
   height: 480px;
   margin: 0 auto -32px;
   padding: 48px 0 0;
-  color: $white;
 
   @media (max-width: 780px) {
     flex-direction: column;
@@ -108,7 +110,6 @@ section#intro {
       margin-bottom: 8px;
       max-width: none;
       padding: 0;
-      filter: drop-shadow(0 2px 2px rgba($black, 0.24));
 
       @media (max-width: 780px) {
         width: 250px;
@@ -127,7 +128,6 @@ section#intro {
   max-width: 50vw;
   margin: 0 auto;
   padding: 16px;
-  background-color: $white;
   border-radius: 4px;
   box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
   box-sizing: border-box;
@@ -155,16 +155,10 @@ section#intro {
     height: 40px;
     min-width: 160px;
     @include font-size(16);
-    color: $white;
-    background-color: $blue;
     border-radius: 48px;
     box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
     box-sizing: border-box;
     cursor: pointer;
-
-    &:hover {
-      color: rgba($white, 0.7);
-    }
   }
 
   .material-icons {
@@ -226,18 +220,10 @@ section#intro {
 
     p {
       text-align: left;
-      color: $darkgray;
       margin: 0;
       padding: 8px 0;
     }
   }
-
-
-  &:hover {
-    h2 {
-      color: $blue;
-    }
-  }
 }
 
 .button.hero-cta {
@@ -245,7 +231,6 @@ section#intro {
   @include font-size(18);
   font-weight: 600;
   @include line-height(40);
-  background-color: $white;
   border-radius: 48px;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
   box-sizing: border-box;
@@ -281,16 +266,11 @@ section#intro {
     background: none;
     box-shadow: none;
   }
-
-  .hero-cta {
-    color: $blue;
-  }
 }
 
 .text-headline {
   @include font-size(20);
   font-weight: 500;
-  color: $blue;
   margin-top: 10px;
   text-transform: uppercase;
 }
@@ -365,7 +345,6 @@ div[layout=row]{
 }
 
 .marketing-banner {
-  background-color: lighten($blue, 10);
   margin-top: 64px;
   padding: 32px;
 
@@ -378,7 +357,6 @@ div[layout=row]{
     text-transform: uppercase;
     @include font-size(24);
     font-weight: 300;
-    color: $white;
     margin: 0;
     -webkit-margin-before: 0;
     -webkit-margin-after: 0;
diff --git a/aio/src/styles/2-modules/_alert.scss b/aio/src/styles/2-modules/_alert.scss
index 45ccbc4210..3f5ed1799d 100644
--- a/aio/src/styles/2-modules/_alert.scss
+++ b/aio/src/styles/2-modules/_alert.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .alert {
     padding: 16px;
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index acf35d8934..e1f572e674 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 /* API LIST STYLES */
 
diff --git a/aio/src/styles/2-modules/_api-pages.scss b/aio/src/styles/2-modules/_api-pages.scss
index 95b16e6c33..a55c36b348 100644
--- a/aio/src/styles/2-modules/_api-pages.scss
+++ b/aio/src/styles/2-modules/_api-pages.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .api-body {
   max-width: 1200px;
diff --git a/aio/src/styles/2-modules/_api-symbols.scss b/aio/src/styles/2-modules/_api-symbols.scss
index 54a6632f79..895550f8c6 100644
--- a/aio/src/styles/2-modules/_api-symbols.scss
+++ b/aio/src/styles/2-modules/_api-symbols.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 /* API SYMBOLS */
 
diff --git a/aio/src/styles/2-modules/_buttons.scss b/aio/src/styles/2-modules/_buttons.scss
index c12e0f09b2..cad1b1cbd2 100644
--- a/aio/src/styles/2-modules/_buttons.scss
+++ b/aio/src/styles/2-modules/_buttons.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 /* Button Styles */
 
diff --git a/aio/src/styles/2-modules/_callout.scss b/aio/src/styles/2-modules/_callout.scss
index f2e54f70cc..a48358a78a 100644
--- a/aio/src/styles/2-modules/_callout.scss
+++ b/aio/src/styles/2-modules/_callout.scss
@@ -1,4 +1,6 @@
 @use '../constants' as *;
+@use '../mixins' as *;
+@use './alert';
 
 .callout {
   @extend .alert;
diff --git a/aio/src/styles/2-modules/_card.scss b/aio/src/styles/2-modules/_card.scss
index 8e69a88984..fc6db9a64b 100644
--- a/aio/src/styles/2-modules/_card.scss
+++ b/aio/src/styles/2-modules/_card.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .card-container {
   display: flex;
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index 1eba520c73..1383f3b1c5 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 code-example,
 code-tabs {
diff --git a/aio/src/styles/2-modules/_contributor.scss b/aio/src/styles/2-modules/_contributor.scss
index ccb42608e2..3ee617f689 100644
--- a/aio/src/styles/2-modules/_contributor.scss
+++ b/aio/src/styles/2-modules/_contributor.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 aio-contributor-list {
   .contributor-group {
diff --git a/aio/src/styles/2-modules/_deploy-theme.scss b/aio/src/styles/2-modules/_deploy-theme.scss
index 442df2ab89..ba4a85c2b2 100644
--- a/aio/src/styles/2-modules/_deploy-theme.scss
+++ b/aio/src/styles/2-modules/_deploy-theme.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 aio-shell.mode-archive {
   @include deploy-theme($blue-grey-900, $blue-grey-400);
diff --git a/aio/src/styles/2-modules/_details.scss b/aio/src/styles/2-modules/_details.scss
index 9239b843f9..6d182a1a7d 100644
--- a/aio/src/styles/2-modules/_details.scss
+++ b/aio/src/styles/2-modules/_details.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 /*
  * General styling to make detail/summary tags look a bit more material
diff --git a/aio/src/styles/2-modules/_errors.scss b/aio/src/styles/2-modules/_errors.scss
index fc918100e7..dd937d4f6a 100644
--- a/aio/src/styles/2-modules/_errors.scss
+++ b/aio/src/styles/2-modules/_errors.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .error-list {
   display: grid;
diff --git a/aio/src/styles/2-modules/_features.scss b/aio/src/styles/2-modules/_features.scss
index 23ede47d9c..aa13fb2b83 100644
--- a/aio/src/styles/2-modules/_features.scss
+++ b/aio/src/styles/2-modules/_features.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 // FEATURES MARKETING PAGE SPECIFIC STYLES
 
diff --git a/aio/src/styles/2-modules/_filetree.scss b/aio/src/styles/2-modules/_filetree.scss
index 8b2abbb1e9..32e1fcde9c 100644
--- a/aio/src/styles/2-modules/_filetree.scss
+++ b/aio/src/styles/2-modules/_filetree.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .filetree {
   background: $white;
diff --git a/aio/src/styles/2-modules/_guides.scss b/aio/src/styles/2-modules/_guides.scss
index c0895055d9..e4ff04ade6 100644
--- a/aio/src/styles/2-modules/_guides.scss
+++ b/aio/src/styles/2-modules/_guides.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .reviewed {
   color: lighten($darkgray, 10);
diff --git a/aio/src/styles/2-modules/_index.scss b/aio/src/styles/2-modules/_index.scss
index 145612e8aa..151f05c098 100644
--- a/aio/src/styles/2-modules/_index.scss
+++ b/aio/src/styles/2-modules/_index.scss
@@ -2,33 +2,32 @@
    MODULE STYLES
    ============================== */
 
-   @import 'alert';
-   @import 'api-list';
-   @import 'api-pages';
-   @import 'api-symbols';
-   @import 'buttons';
-   @import 'callout';
-   @import 'card';
-   @import 'cli-pages';
-   @import 'code';
-   @import 'contribute';
-   @import 'contributor';
-   @import 'deploy-theme';
-   @import 'details';
-   @import 'errors';
-   @import 'features';
-   @import 'filetree';
-   @import 'guides';
-   @import 'heading-anchors';
-   @import 'hr';
-   @import 'images';
-   @import 'label';
-   @import 'notification';
-   @import 'progress-bar';
-   @import 'presskit';
-   @import 'resources';
-   @import 'roadmap';
-   @import 'search-results';
-   @import 'select-menu';
-   @import 'table';
-   @import 'toc';
+   @forward 'alert';
+   @forward 'api-list';
+   @forward 'api-pages';
+   @forward 'api-symbols';
+   @forward 'buttons';
+   @forward 'callout';
+   @forward 'card';
+   @forward 'cli-pages';
+   @forward 'code';
+   @forward 'contribute';
+   @forward 'contributor';
+   @forward 'deploy-theme';
+   @forward 'details';
+   @forward 'errors';
+   @forward 'features';
+   @forward 'filetree';
+   @forward 'guides';
+   @forward 'heading-anchors';
+   @forward 'hr';
+   @forward 'images';
+   @forward 'label';
+   @forward 'notification';
+   @forward 'progress-bar';
+   @forward 'presskit';
+   @forward 'resources';
+   @forward 'search-results';
+   @forward 'select-menu';
+   @forward 'table';
+   @forward 'toc';
diff --git a/aio/src/styles/2-modules/_label.scss b/aio/src/styles/2-modules/_label.scss
index e9d55721f6..ce3195172f 100644
--- a/aio/src/styles/2-modules/_label.scss
+++ b/aio/src/styles/2-modules/_label.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .api-header label {
   border-radius: 4px;
diff --git a/aio/src/styles/2-modules/_notification.scss b/aio/src/styles/2-modules/_notification.scss
index be4bc7d543..46c7296c27 100644
--- a/aio/src/styles/2-modules/_notification.scss
+++ b/aio/src/styles/2-modules/_notification.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 $notificationHeight: 56px;
 
diff --git a/aio/src/styles/2-modules/_presskit.scss b/aio/src/styles/2-modules/_presskit.scss
index 4a6853cb7f..8aa79605c5 100644
--- a/aio/src/styles/2-modules/_presskit.scss
+++ b/aio/src/styles/2-modules/_presskit.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .presskit-container {
   padding: 0 32px 32px 32px;
diff --git a/aio/src/styles/2-modules/_resources.scss b/aio/src/styles/2-modules/_resources.scss
index 3dc009c0db..cde185ea51 100644
--- a/aio/src/styles/2-modules/_resources.scss
+++ b/aio/src/styles/2-modules/_resources.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 aio-resource-list {
   .showcase {
diff --git a/aio/src/styles/2-modules/_search-results.scss b/aio/src/styles/2-modules/_search-results.scss
index 93b0174561..957425bac8 100644
--- a/aio/src/styles/2-modules/_search-results.scss
+++ b/aio/src/styles/2-modules/_search-results.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 aio-search-results {
   z-index: 10;
diff --git a/aio/src/styles/2-modules/_select-menu.scss b/aio/src/styles/2-modules/_select-menu.scss
index 169f1fe2b5..ab9b8e1030 100644
--- a/aio/src/styles/2-modules/_select-menu.scss
+++ b/aio/src/styles/2-modules/_select-menu.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 /* SELECT MENU */
 
diff --git a/aio/src/styles/2-modules/_table.scss b/aio/src/styles/2-modules/_table.scss
index ea9bcc9925..8d3041514d 100644
--- a/aio/src/styles/2-modules/_table.scss
+++ b/aio/src/styles/2-modules/_table.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 table {
   margin: 24px 0px;
diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss
index edb20e0942..cd4d38026c 100644
--- a/aio/src/styles/2-modules/_toc.scss
+++ b/aio/src/styles/2-modules/_toc.scss
@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 $tocItemLineHeight: 24;
 $tocItemTopPadding: 9;
diff --git a/aio/src/styles/_app-theme.scss b/aio/src/styles/_app-theme.scss
index db6bfcc331..9453008a6e 100644
--- a/aio/src/styles/_app-theme.scss
+++ b/aio/src/styles/_app-theme.scss
@@ -1,5 +1,4 @@
 @import '~@angular/material/theming';
-
 @import '1-layouts/marketing-layout/marketing-layout-theme';
 
 @mixin app-theme($theme) {
diff --git a/aio/src/styles/_mixins.scss b/aio/src/styles/_mixins.scss
index 737acfcbc0..9dc5bbdc84 100644
--- a/aio/src/styles/_mixins.scss
+++ b/aio/src/styles/_mixins.scss
@@ -1,4 +1,4 @@
-@use './constants';
+@use './constants' as *;
 
 // REM Font Adjustments
 @mixin font-size($sizeValue) {
@@ -48,14 +48,14 @@
 @mixin card($height, $width) {
   height: $height;
   width: $width;
-  background-color: constants.$white;
+  background-color: $white;
   border-radius: 4px;
-  box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
   box-sizing: border-box;
   transition: box-shadow .5s;
 
   &:hover {
-    box-shadow: 0 8px 8px rgba(constants.$black, 0.24), 0 0 8px rgba(constants.$black, 0.12);
+    box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
     text-decoration: none;
   }
 }
diff --git a/aio/src/styles/main.scss b/aio/src/styles/main.scss
index b7c73b7268..5a8df08636 100755
--- a/aio/src/styles/main.scss
+++ b/aio/src/styles/main.scss
@@ -1,13 +1,9 @@
-// import global themes
-@use './ng-io-theme';
-
-// import global mixins
-@import './mixins';
+@use './ng-io-theme.scss';
 
 // import directories
-@import './0-base';
-@import './1-layouts';
-@import './2-modules';
+@use './0-base' as base;
+@use './1-layouts' as layouts;
+@use './2-modules' as modules;
 
 // import print styles
 @import './print';