add logos and colors of the "Edition CH" (#410)

* add logos and colors of the "Edition CH"

* make linter happy

---------

Co-authored-by: Joachim Praetorius <joachim.praetorius@innoq.com>
Co-authored-by: Sonja Scheungrab <sonja.scheungrab@innoq.com>

docs/02-Basics/02-colors.html

@@ -206,6 +206,55 @@ <h3>INNOQ Red</h3>
     </div>
 </div>
 
+<hr>
+
+<h2>Edition CH</h2>
+<!-- INNOQ CH Red colors -->
+<h3>INNOQ CH Red</h3>
+<div class="swatches">
+    <div class="swatch swatch-brand-ch-red">
+        <div class="swatch-color"></div>
+        <div class="swatch-text swatch-text--rgb"></div>
+    </div>
+    <div class="swatch swatch-brand-ch-red-75">
+        <div class="swatch-color"></div>
+        <div class="swatch-text swatch-text--rgb"></div>
+    </div>
+    <div class="swatch swatch-brand-ch-red-50">
+        <div class="swatch-color"></div>
+        <div class="swatch-text swatch-text--rgb"></div>
+    </div>
+</div>
+
+<!-- INNOQ CH Mud colors -->
+<h3>INNOQ CH Beige / Gray</h3>
+<div class="swatches">
+    <div class="swatch swatch-brand-ch-beige">
+        <div class="swatch-color"></div>
+        <div class="swatch-text swatch-text--rgb"></div>
+    </div>
+    <div class="swatch swatch-brand-ch-gray">
+        <div class="swatch-color"></div>
+        <div class="swatch-text swatch-text--rgb"></div>
+    </div>
+    <div class="swatch swatch-brand-ch-gray-75">
+        <div class="swatch-color"></div>
+        <div class="swatch-text swatch-text--rgb"></div>
+    </div>
+    <div class="swatch swatch-brand-ch-gray-50">
+        <div class="swatch-color"></div>
+        <div class="swatch-text swatch-text--rgb"></div>
+    </div>
+</div>
+
+<h3>INNOQ CH Black</h3>
+<div class="swatches">
+    <div class="swatch swatch-brand-ch-black">
+        <div class="swatch-color"></div>
+        <div class="swatch-text swatch-text--rgb"></div>
+    </div>
+</div>
+
 <script>
     document.querySelectorAll('.swatch-text--rgb').forEach(swatch => {
         let hex = window.getComputedStyle(swatch, ':after').getPropertyValue('content');

docs/02-Basics/03-logos.html

@@ -43,6 +43,34 @@ <h2>Edition 01</h2>
     <img class="logo" src="{{ path '/assets/logos/edition-01/svg/innoq-logo--redblue.svg' }}" />
 </div>
 
+<h2>Edition CH</h2>
+<div class="demo demo--centered">
+    <img class="demo--ch-logo" src="{{ path '/assets/logos/edition-ch/svg/innoq-logo-schweiz-grau-rot-auf-weiss.svg' }}" />
+</div>
+<div class="demo demo--centered">
+    <img class="demo--ch-logo" src="{{ path '/assets/logos/edition-ch/svg/innoq-logo-schweiz-rot-grau-auf-weiss.svg' }}" />
+</div>
+
+<h3 class="m-t-md">Boxed</h3>
+<div class="demo demo--centered">
+    <img class="demo--ch-logo" src="{{ path '/assets/logos/edition-ch/svg/innoq-logo-schweiz-rot.svg' }}" />
+</div>
+<div class="demo demo--centered">
+    <img class="demo--ch-logo" src="{{ path '/assets/logos/edition-ch/svg/innoq-logo-schweiz-rot-2.svg' }}" />
+</div>
+<div class="demo demo--centered">
+    <img class="demo--ch-logo" src="{{ path '/assets/logos/edition-ch/svg/innoq-logo-schweiz-rot-weiss-auf-grau.svg' }}" />
+</div>
+<div class="demo demo--centered">
+    <img class="demo--ch-logo" src="{{ path '/assets/logos/edition-ch/svg/innoq-logo-schweiz-dunkel.svg' }}" />
+</div>
+<div class="demo demo--centered">
+    <img class="demo--ch-logo" src="{{ path '/assets/logos/edition-ch/svg/innoq-logo-schweiz-grau-rot-auf-beige.svg' }}" />
+</div>
+<div class="demo demo--centered">
+    <img class="demo--ch-logo" src="{{ path '/assets/logos/edition-ch/svg/innoq-logo-schweiz-rot-grau-auf-beige.svg' }}" />
+</div>
+
 <h2>Monochrome</h2>
 <div class="demo demo--centered demo--black">
     <img class="logo" src="{{ path '/assets/logos/monochrome/svg/innoq-logo--white.svg' }}" />
@@ -53,4 +81,3 @@ <h2>Monochrome</h2>
 <div class="demo demo--centered">
     <img class="logo" src="{{ path '/assets/logos/monochrome/svg/innoq-logo--monochrome.svg' }}" />
 </div>
-

lib/styles/01-base/_colors.scss

@@ -108,6 +108,27 @@ $brand-grays: (
 // INNOQ White
 $brand-white: #fff;
 
+// INNOQ CH Colors
+$brand-ch-red: #c0442d;
+$brand-ch-red-75: #d15a44;
+$brand-ch-red-50: #f77a56;
+$brand-ch-black: #222327;
+$brand-ch-beige: #c2b9a8;
+$brand-ch-gray: #cdccc8;
+$brand-ch-gray-75: #dbddd7;
+$brand-ch-gray-50: #edeeeb;
+
+$brand-ch-colors: (
+  brand-ch-red: $brand-ch-red,
+  brand-ch-red-75: $brand-ch-red-75,
+  brand-ch-red-50: $brand-ch-red-50,
+  brand-ch-black: $brand-ch-black,
+  brand-ch-beige: $brand-ch-beige,
+  brand-ch-gray: $brand-ch-gray,
+  brand-ch-gray-75: $brand-ch-gray-75,
+  brand-ch-gray-50: $brand-ch-gray-50,
+);
+
 // All INNOQ colors
 $brand-colors: (
   $brand-blues,
@@ -116,7 +137,8 @@ $brand-colors: (
   $brand-yellows,
   $brand-petrols,
   $brand-apricots,
-  $brand-grays
+  $brand-grays,
+  $brand-ch-colors
 );
 
 //

lib/styles/03-styleguide/_hacks.scss

@@ -1,11 +1,6 @@
 .demo {
-  // display: flex;
   width: 100%;
 
-  > * {
-    margin: $spacer-md;
-  }
-
   &--inverted {
     background-color: $brand-secondary;
   }
@@ -30,6 +25,14 @@
   &--edition-01-blue {
     background-color: $brand-blue;
   }
+
+  &--ch-logo {
+    height: 131px;
+  }
+
+  > * {
+    margin: $spacer-md;
+  }
 }
 
 // Demo Class

lib/styles/03-styleguide/_styleguide.scss

@@ -55,3 +55,47 @@
     }
   }
 }
+
+.demo {
+  width: 100%;
+
+  &--inverted {
+    background-color: $brand-secondary;
+  }
+
+  &--accented {
+    background-color: $brand-interaction;
+  }
+
+  &--centered {
+    display: flex;
+    justify-content: center;
+  }
+
+  &--black {
+    background-color: $brand-gray;
+  }
+
+  &--edition-01-red {
+    background-color: $brand-red;
+  }
+
+  &--edition-01-blue {
+    background-color: $brand-blue;
+  }
+
+  &--ch-logo {
+    height: 131px;
+  }
+
+  > * {
+    margin: $spacer-md;
+  }
+}
+
+// Demo Class
+.grid-demo,
+.container-demo {
+  height: 20rem;
+  background: $brand-primary;
+}