refactor(docs-infra): grab scss constants using scss use syntax instead of the global imports (#41129)

move away from using global constants in scss files because @import will be deprecated soon

PR Close #41129

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

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

aio/src/styles/1-layouts/_layout-global.scss

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 html, body {
   height: 100%;
 }

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 .nf-container {
     align-items: center;
     padding: 32px;

aio/src/styles/1-layouts/_sidenav.scss

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 // Disable sidenav animations for the initial render.
 .starting.mat-drawer-transition .mat-drawer-content {
   transition: none;

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

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

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 .alert {
     padding: 16px;
     margin: 24px 0px;

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 /* API LIST STYLES */
 
 aio-api-list {

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

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

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 /* API SYMBOLS */
 
 /* SYMBOL CLASS */

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 /* Button Styles */
 
 button {

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 .callout {
   @extend .alert;
   padding: 0px;

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

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

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 code-example,
 code-tabs {
   clear: both;

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 aio-contributor-list {
   .contributor-group {
     display: flex;

aio/src/styles/2-modules/_deploy-theme.scss

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 aio-shell.mode-archive {
   @include deploy-theme($blue-grey-900, $blue-grey-400);
 }

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 /*
  * General styling to make detail/summary tags look a bit more material
  * To get the best out of it you should structure your usage like this:

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

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

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 // FEATURES MARKETING PAGE SPECIFIC STYLES
 
 .feature-section {

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 .filetree {
   background: $white;
   border: 4px solid $lightgray;

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 .reviewed {
   color: lighten($darkgray, 10);
   @include font-size(13);

aio/src/styles/2-modules/_heading-anchors.scss

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 .sidenav-content {
   h1, h2, h3, h4, h5, h6 {
 

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 hr {
     border: none;
     background: $lightgray;

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 .content {
   img {
 

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

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

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 $notificationHeight: 56px;
 
 // we need to override some of the toolbar styling

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

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

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 aio-resource-list {
   .showcase {
     transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);

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

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

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 /* SELECT MENU */
 
 aio-select {

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

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 table {
   margin: 24px 0px;
   box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);

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

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

aio/src/styles/_mixins.scss

@@ -1,3 +1,5 @@
+@use './constants';
+
 // REM Font Adjustments
 @mixin font-size($sizeValue) {
   font-size: ($sizeValue) + px;
@@ -46,14 +48,14 @@
 @mixin card($height, $width) {
   height: $height;
   width: $width;
-  background-color: $white;
+  background-color: constants.$white;
   border-radius: 4px;
-  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);
   box-sizing: border-box;
   transition: box-shadow .5s;
 
   &:hover {
-    box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
+    box-shadow: 0 8px 8px rgba(constants.$black, 0.24), 0 0 8px rgba(constants.$black, 0.12);
     text-decoration: none;
   }
 }

aio/src/styles/_print.scss

@@ -1,3 +1,5 @@
+@use './constants' as *;
+
 @media print {
 
     // General Adjustments

aio/src/styles/main.scss

@@ -1,8 +1,5 @@
 // import global themes
-@import './ng-io-theme';
+@use './ng-io-theme';
-
-// import global variables
-@import './constants';
 
 // import global mixins
 @import './mixins';