doc: colors documentation for dbux3

source/_patterns/colors/_usage.demonstration.scss

@@ -0,0 +1,16 @@
+.DO-NOT-COPY-THIS-CLASS-example-color-container {
+	width: 100%;
+
+	label {
+		font-size: 0.75rem;
+		line-height: 2rem;
+	}
+
+	aside {
+		padding: 2rem;
+	}
+
+	+ .DO-NOT-COPY-THIS-CLASS-example-color-container {
+		margin-left: 1rem;
+	}
+}

source/_patterns/colors/examples.md

@@ -0,0 +1,3 @@
+---
+title: Color Tokens
+---

source/_patterns/colors/intro.hbs

@@ -0,0 +1,32 @@
+<main class="colors-documentation">
+    <section>
+        <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 six compatible colors of different tones for pairing, defining emphasis, and visual expression.</p>
+        <p>Background colors define their own foreground color by so named on-colors. For using the DB Design System with SCSS, we provide a wide range of SCSS placeholders and utility 
+            classes that automatically style e.g. text and links based on their current background color. For more information have a look at the usage section.</p>
+
+        <h2>Color Scheme – Primary (Example)</h2>
+        <p>The following example shows the available colors for the primary brand color. 
+            Each defined color has an interactive mode which means that colors for hover and pressed states are defined.</p>
+        <dl class="DO-NOT-COPY-THIS-CLASS-example-docs-listing">
+            <dt><b>Primary</b></dt><dd>base key color</dd>
+            <dt><b>On Primary</b></dt><dd>is applied to content (icons, text, etc.) that sits on top of primary</dd>
+            <dt><b>Primary Background-Light</b></dt><dd>background color for current key color. Only used for backrounds.</dd>
+            <dt><b>Primary Background Transparent</b></dt><dd>Transparent or semi transparent backgrounds for current key color, e.g. used for form field backgrounds.</dd>
+            <dt><b>On Primary Background</b></dt><dd>is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent).</dd>
+            <dt><b>On Primary Background Weak</b></dt><dd>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.</dd>
+        </dl>
+
+        <h3>Color Scheme Illustration</h3>
+        <figure class="color-scheme-illustration">
+            <img src='../../images/documentation/colors/primary.png' alt='Color Scheme Example' width="720" height="480">
+            <img src='../../images/documentation/colors/primary-background.png' alt='Color Scheme Example' width="720" height="480">
+        </figure>
+
+        <h2>Neutral Color Scheme</h2>
+        <p>The neutral color palette exists of six color variants plus two on-color variants (default and weak). In contrast to key colors like primary, neutral colors can only be used for backgrounds.</p>
+
+        <img src='../../images/documentation/colors/neutral-palette.png' alt='Neutral Color Scheme' width="2100" height="519">
+    </section>
+</main>

source/_patterns/colors/intro.json

@@ -0,0 +1,3 @@
+{
+	"bodyClass": "tpl-intro"
+}

source/_patterns/colors/intro.md

@@ -0,0 +1,4 @@
+---
+title: Intro
+order: -1
+---

source/_patterns/colors/usage.hbs

@@ -0,0 +1,93 @@
+<main>
+	<section>
+		<h1>Colors Usage</h1>
+		<p>
+		The defined color palette specifies colors in three dimensions: background, foreground (e.g. text, icons) and specific states as :hover and :active. 
+		For each key color (primary, secondary, etc.) and each background color including neutral color palette DB UI Base provides SCSS utility classes and 
+		placeholders to ensure correct use of defined color combinations.
+		</p>
+
+		<db-tab-bar>
+		<db-tab label="SCSS" name="tab-bar" active>
+			<h2>With placeholders</h2>
+			<pre>
+<code class="language-scss">/* ./index.scss */
+@import "@db-ui-base/build/scss/variables";
+@import "@db-ui-base/build/scss/color-placeholder";
+
+// placeholder defines background-color and color according to current key color
+.background-element-information {
+  @extend %db-bg-information;
+}
+
+// interactive mode enables :hover and :active states
+.background-element-information--interactive {
+  @extend %db-bg-information-ia;
+}
+
+// background light
+.background-element-information-light {
+  @extend %db-bg-information-light;
+}
+
+// background semi transparent
+.background-element-information-transparent-semi {
+  @extend %db-bg-information-transparent-semi;
+}
+
+// accent color (primary, success, etc.) for text only
+p {
+  @extend %db-text-success;
+}
+
+// custom interactive text elements (a elements are interactive by default)
+// ineractivity can also be reached via [data-variant="ia"]
+p.copy-text--interactive {
+  @extend %db-text-warning--ia;
+}
+</code>
+			</pre>
+
+			<h2>With utility classes</h2>
+			<p>Applies all </p>
+			<pre>
+<code class="language-scss">/* ./index.scss */
+@import "@db-ui-base/build/scss/variables";
+@import "@db-ui-base/build/scss/color-placeholder";
+@import "@db-ui-base/build/scss/color-classes";
+</code>
+			</pre>
+
+			<div class="db-bg-neutral-0" style="display: flex;">
+				<div class="DO-NOT-COPY-THIS-CLASS-example-color-container">
+					<label class="db-weak">.db-bg-information</label>
+					<aside class="db-bg-information">
+						<small>Background with key color information and correct text color</small><br>
+						<small><a href="#">Example Link</a></small>
+					</aside>
+				</div>
+				<div class="DO-NOT-COPY-THIS-CLASS-example-color-container">
+					<label class="db-weak">.db-bg-information data-variant="ia"</label>
+					<aside class="db-bg-information" data-variant="ia">
+						<small>Interactive background with key color information and correct text color and
+						:hover and :active states.</small>
+					</aside>
+				</div>
+				<div class="DO-NOT-COPY-THIS-CLASS-example-color-container">
+					<label class="db-weak">.db-bg-information-light</label>
+					<aside class="db-bg-information-light">
+						<small>On light background</small><br>
+						<small class="db-weak">Weak Text for light backgrounds with class="db-weak"</small>
+					</aside>
+
+				</div>
+				<div class="DO-NOT-COPY-THIS-CLASS-example-color-container">
+					<label class="db-weak">.db-bg-information-transparent-semi-ia</label>
+					<aside class="db-bg-information-transparent-semi" data-variant="ia">
+						<small>Semi transparent background with key color information and correct text color</small>
+					</aside>					
+				</div>
+			</div>
+		</db-tab>		
+	</section>
+</main>

source/_patterns/colors/usage.md

@@ -0,0 +1,8 @@
+---
+title: Usage
+---
+
+## Accessibility
+
+SVGs are often conveyed inconsistently to assistive technologies. The component’s accessibility is also highly contextual.
+For optimal user experience, use the aria-description prop to let assistive technology users know the purpose of the loading spinner.

source/css/db-ui-base.scss

@@ -1,6 +1,7 @@
 @import "../../build/scss/variables";
 @import "../../build/scss/font-faces";
 @import "../../build/scss/typography-classes";
+@import "../../build/scss/typography-placeholder";
 @import "../../build/scss/color-placeholder";
 @import "../../build/scss/color-classes";
 
@@ -14,6 +15,8 @@ optgroup,
 select,
 textarea {
 	font-family: $db-font-family-sans;
+
+	@extend %db-typo-body-md;
 }
 
 strong,
@@ -33,6 +36,7 @@ h6 {
 @import "../_patterns/icons/icons.demonstration";
 @import "../_patterns/logo/examples.demonstration";
 @import "../_patterns/spacings/examples.demonstration";
+@import "../_patterns/colors/usage.demonstration";
 
 main {
 	padding: $db-spacing-1 $db-spacing-3;

source/css/pattern-scaffolding.css

@@ -252,3 +252,32 @@
 		max-width: 20rem;
 	}
 }
+
+/**
+*  Colors Documentation
+**/
+
+main.colors-documentation h2 {
+	margin-top: 3rem;
+}
+
+main.colors-documentation h3 {
+	margin-top: 2rem;
+}
+
+main.colors-documentation figure {
+	margin: 0;
+	display: grid;
+	grid-auto-columns: 50% 50%;
+	grid: 1fr 1fr;
+	grid-gap: 1rem;
+	grid-auto-flow: column;
+}
+
+main.colors-documentation img {
+	height: auto;
+	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;
+}