From 0f584694ccb4e4b8b3b95e93746438e23a598b43 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Wed, 28 Oct 2020 16:17:50 +0200
Subject: [PATCH] refactor(docs-infra): use Sass mixin to simplify the creation
 of deployment mode themes (#39470)

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 #39470
---
 aio/src/styles/2-modules/_deploy-theme.scss | 47 +--------------------
 aio/src/styles/_mixins.scss                 | 26 ++++++++++++
 2 files changed, 28 insertions(+), 45 deletions(-)

diff --git a/aio/src/styles/2-modules/_deploy-theme.scss b/aio/src/styles/2-modules/_deploy-theme.scss
index 3858b66ce7..8a09afb3f0 100644
--- a/aio/src/styles/2-modules/_deploy-theme.scss
+++ b/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);
 }
diff --git a/aio/src/styles/_mixins.scss b/aio/src/styles/_mixins.scss
index 4765f39bdf..1bfb279940 100644
--- a/aio/src/styles/_mixins.scss
+++ b/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;
+    }
+  }
+}