doc: colors documentation for dbux3

source/_patterns/colors/_colors.demonstration.scss

@@ -0,0 +1,5 @@
+.DO-NOT-COPY-THIS-CLASS-example-color-container {
+	width: 100%;
+	padding: 2rem;
+	background-color: green;
+}

source/_patterns/colors/_intro.demonstration.scss

@@ -0,0 +1,18 @@
+main {
+	figure {
+		margin: 0;
+		display: grid;
+		grid-auto-columns: 50% 50%;
+		grid: 1fr 1fr;
+		grid-gap: 1rem;
+		grid-auto-flow: column;
+	}
+
+	img {
+		width: 100%;
+		max-width: 100%;
+		border-radius: 0.875rem;
+		box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px,
+			rgb(60 64 67 / 15%) 0px 1px 3px 1px;
+	}
+}

source/_patterns/colors/intro.hbs

@@ -0,0 +1,29 @@
+<main class="rea-main">
+    <h1>Color System</h1>
+    <p>DB UX Design Guidelines 3.0 introduce a complete new set of color variables that follow some rules to work with.</p>
+    <p>Each accent color (primary, secondary, information, etc.) is provided in a group of four compatible colors of different tones for pairing, defining emphasis, and visual expression. </p>
+    <p>Accent colors primary, secondary, information, warning, error, critical and sucess are following the same pattern of a 4-color group. </p>
+
+    <h2>Color Scheme – Primary (Example)</h2>
+    <p>Each defined color has an interactive mode which means that colors for hover and pressed states are defined.</p>
+    <ul>
+        <li><b>Primary</b> – base key color</li>
+        <li><b>Primary Background-Light</b> – background color for current key color. Only used for backrounds.</li>
+        <li><b>Primary Background-Transparent</b> - Transparent or semi transparent backgrounds for current key color, e.g. used for form field backgrounds.</li>
+        <li><b>On Primary</b> – is applied to content (icons, text, etc.) that sits on top of primary</li>
+        <li><b>On Primary Background</b> – is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent).</li>
+        <li><b>On Primary Background Weak</b> – is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent) and is a variant to weaken content on primary backgrounds.
+        </li>
+    </ul>
+
+    <h3>Color Scheme Illustration</h3>
+    <figure class="color-scheme-illustration">
+        <img src='../../images/Primary.png' alt='Color Scheme Example'>
+        <img src='../../images/Primary-Background.png' alt='Color Scheme Example'>
+    </figure>
+
+    <h2>Neutral Color Scheme</h2>
+    <p>The neutral color palette exists of 6 color variants. In contrast to key colors like primary, neutral colors can only be used for backgrounds.</p>
+
+    <img src='../../images/neutral-palette.png' alt='Neutral Color Scheme'>
+</main>

source/_patterns/colors/intro.md

@@ -0,0 +1,6 @@
+---
+title: Intro
+order: -1
+---
+
+The defined color palette specifies colors in three dimensions: background, foreground (in most cases text) and specific states as :hover and :active.

source/_patterns/colors/usage.hbs

@@ -0,0 +1,14 @@
+
+<main>
+	<h3>
+The defined color palette specifies colors in three dimensions: background, foreground (in most cases text) and specific states as :hover and :active.
+</h3>
+
+<div class="DO-NOT-COPY-THIS-CLASS-example-color-container db-primary">
+
+	<a href="#">Link auf Hintergrund</a><br />
+	<p>Text auf Hintergrund</p>
+	<small class="db-weak">Weak Text</small>
+</div>
+
+</main>

source/_patterns/colors/usage.md

@@ -0,0 +1,3 @@
+---
+title: Usage
+---

source/css/db-ui-base.scss

@@ -33,6 +33,7 @@ h6 {
 @import "../_patterns/icons/icons.demonstration";
 @import "../_patterns/logo/examples.demonstration";
 @import "../_patterns/spacings/examples.demonstration";
+@import "../_patterns/colors/intro.demonstration";
 
 main {
 	padding: $db-spacing-1 $db-spacing-3;