refactor(docs-infra): use Sass mixin to simplify the creation of deployment mode themes (#39478)

Different deployment modes (such as `archive` and `next`) are identified
by the different colors used in prominent elements of the page, such as
the topbar and the footer.

Previously, the necessary styles for creating such a deployment mode
"theme" were duplicated for each mode.

This commit simplifies the creation/modification of a deployment mode
theme by introducing a Sass mixin that generates the necessary styles
(when provided with necessary theme colors).

PR Close #39478

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

@@ -1,50 +1,7 @@
-
 aio-shell.mode-archive {
-
-  .mat-toolbar.mat-primary, footer {
-    background: linear-gradient(145deg,#263238,#78909C);
-  }
-
-  .vertical-menu-item {
-    &.selected, &:hover {
-      color: #263238;
-    }
-  }
-
-  .toc-inner ul.toc-list li.active a {
-    color: #263238;
-
-    &:before {
-      background-color: #263238;
-    }
-  }
-
-  .toc-inner ul.toc-list li:hover a {
-    color: #263238;
-  }
+  @include deployTheme(#263238, #78909C);
 }
 
 aio-shell.mode-next {
-
-  .mat-toolbar.mat-primary, footer {
-    background: linear-gradient(145deg,#DD0031,#C3002F);
-  }
-
-  .vertical-menu-item {
-    &.selected, &:hover {
-      color: #DD0031;
-    }
-  }
-
-  .toc-inner ul.toc-list li.active a {
-    color: #DD0031;
-
-    &:before {
-      background-color: #DD0031;
-    }
-  }
-
-  .toc-inner ul.toc-list li:hover a {
-    color: #DD0031;
-  }
+  @include deployTheme(#DD0031, #C3002F);
 }

aio/src/styles/_mixins.scss

@@ -99,3 +99,29 @@
     text-decoration: none;
   }
 }
+
+@mixin deployTheme($mainColor, $gradientTargetColor) {
+  .mat-toolbar.mat-primary, footer {
+    background: linear-gradient(145deg, $mainColor, $gradientTargetColor);
+  }
+
+  .vertical-menu-item {
+    &.selected, &:hover {
+      color: $mainColor;
+    }
+  }
+
+  .toc-inner ul.toc-list li {
+    &.active a {
+      color: $mainColor;
+
+      &:before {
+        background-color: $mainColor;
+      }
+    }
+
+    &:hover a {
+      color: $mainColor;
+    }
+  }
+}