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,4 +2,4 @@
    BASE STYLES
    ============================== */
 
-@import 'typography';
+@forward 'typography';

aio/src/styles/0-base/_typography.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 html {
   font-size: 62.5%;

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';

aio/src/styles/1-layouts/_not-found.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .nf-container {
     align-items: center;

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 {

aio/src/styles/1-layouts/_top-menu.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 // VARIABLES
 $showTopMenuWidth: 1048px;

aio/src/styles/1-layouts/content-layout/_content-layout.scss

@@ -1,3 +1,5 @@
+@use '../../mixins' as *;
+
 .sidenav-container {
   width: 100%;
   height: 100vh;

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;
+      }
+    }
+  }
+}

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);

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;
+    }
+  }
+
 }
-  
+

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;

aio/src/styles/2-modules/_alert.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .alert {
     padding: 16px;

aio/src/styles/2-modules/_api-list.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 /* API LIST STYLES */
 

aio/src/styles/2-modules/_api-pages.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .api-body {
   max-width: 1200px;

aio/src/styles/2-modules/_api-symbols.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 /* API SYMBOLS */
 

aio/src/styles/2-modules/_buttons.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 /* Button Styles */
 

aio/src/styles/2-modules/_callout.scss

@@ -1,4 +1,6 @@
 @use '../constants' as *;
+@use '../mixins' as *;
+@use './alert';
 
 .callout {
   @extend .alert;

aio/src/styles/2-modules/_card.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .card-container {
   display: flex;

aio/src/styles/2-modules/_code.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 code-example,
 code-tabs {

aio/src/styles/2-modules/_contributor.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 aio-contributor-list {
   .contributor-group {

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);

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

aio/src/styles/2-modules/_errors.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .error-list {
   display: grid;

aio/src/styles/2-modules/_features.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 // FEATURES MARKETING PAGE SPECIFIC STYLES
 

aio/src/styles/2-modules/_filetree.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .filetree {
   background: $white;

aio/src/styles/2-modules/_guides.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .reviewed {
   color: lighten($darkgray, 10);

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';

aio/src/styles/2-modules/_label.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .api-header label {
   border-radius: 4px;

aio/src/styles/2-modules/_notification.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 $notificationHeight: 56px;
 

aio/src/styles/2-modules/_presskit.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 .presskit-container {
   padding: 0 32px 32px 32px;

aio/src/styles/2-modules/_resources.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 aio-resource-list {
   .showcase {

aio/src/styles/2-modules/_search-results.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 aio-search-results {
   z-index: 10;

aio/src/styles/2-modules/_select-menu.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 /* SELECT MENU */
 

aio/src/styles/2-modules/_table.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 table {
   margin: 24px 0px;

aio/src/styles/2-modules/_toc.scss

@@ -1,4 +1,5 @@
 @use '../constants' as *;
+@use '../mixins' as *;
 
 $tocItemLineHeight: 24;
 $tocItemTopPadding: 9;

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) {

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;
   }
 }

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';