refactor(docs-infra): grab scss constants using scss use syntax instead of the...

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

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

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

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

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

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

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

+@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

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

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

+@use '../constants' as *;
+
 .alert {
     padding: 16px;
     margin: 24px 0px;

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

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

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

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

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

+@use '../constants' as *;
+
 /* API SYMBOLS */
 
 /* SYMBOL CLASS */

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

+@use '../constants' as *;
+
 /* Button Styles */
 
 button {

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

+@use '../constants' as *;
+
 .callout {
   @extend .alert;
   padding: 0px;

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

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

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

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

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

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

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

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

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

+@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

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

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

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

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

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

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

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