From 28feb7c2ff6be4b6b804a05b8bb8a0a882b3de46 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Mon, 7 Dec 2020 14:50:45 -0500
Subject: [PATCH] DEV: Add header colors to styleguide (#11421)

---
 .../templates/styleguide/atoms/03-colors.hbs  | 16 ++++++++++
 .../styleguide/assets/stylesheets/colors.scss | 31 +++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
index a153fccf822..b233a376192 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
@@ -68,3 +68,19 @@
     {{color-example color="love"}}
   </section>
 {{/styleguide-example}}
+
+{{#styleguide-example title="$header"}}
+  <section class="color-row">
+    {{color-example color="header_background"}}
+  </section>
+  <section class="color-row">
+    {{color-example color="header_primary"}}
+    {{color-example color="header_primary-very-high"}}
+    {{color-example color="header_primary-high"}}
+  </section>
+  <section class="color-row">
+    {{color-example color="header_primary-medium"}}
+    {{color-example color="header_primary-low-mid"}}
+    {{color-example color="header_primary-low"}}
+  </section>
+{{/styleguide-example}}
diff --git a/plugins/styleguide/assets/stylesheets/colors.scss b/plugins/styleguide/assets/stylesheets/colors.scss
index a59afb0904d..e1b4e28c498 100644
--- a/plugins/styleguide/assets/stylesheets/colors.scss
+++ b/plugins/styleguide/assets/stylesheets/colors.scss
@@ -86,4 +86,35 @@
   .love {
     background-color: var(--love, $love);
   }
+
+  .header_primary {
+    background-color: var(--header_primary, $header_primary);
+  }
+
+  .header_background {
+    background-color: var(--header_background, $header_background);
+  }
+
+  .header_primary-low {
+    background-color: var(--header_primary-low, $header_primary-low);
+  }
+
+  .header_primary-low-mid {
+    background-color: var(--header_primary-low-mid, $header_primary-low-mid);
+  }
+
+  .header_primary-medium {
+    background-color: var(--header_primary-medium, $header_primary-medium);
+  }
+
+  .header_primary-high {
+    background-color: var(--header_primary-high, $header_primary-high);
+  }
+
+  .header_primary-very-high {
+    background-color: var(
+      --header_primary-very-high,
+      $header_primary-very-high
+    );
+  }
 }