feat: enable the logo theming via CSS variables

mfranzke · mfranzke · commit c31e4936849b · 2022-08-01T10:10:22.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,9 @@ Regarding BREAKING CHANGES in between, please have a look into [the migration gu
 
 ## [Unreleased]
 
+### Changed
+
+-   Enable the logo theming via CSS variables
 ## [0.12.0] - 2022-05-04
 
 ### Changed
diff --git a/assets/images/db_logo.svg b/assets/images/db_logo.svg
@@ -1 +1,4 @@
-<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70"><style>.st0{fill:#f01414}.st1{fill:#fff}</style><title>db_em_rgb_100px</title><path class="st0" d="M90 0H10C4.5 0 0 4.5 0 10v50c0 5.5 4.5 10 10 10h80c5.5 0 10-4.5 10-10.1V10c0-5.5-4.5-10-10-10z"/><path class="st1" d="M92.7 59.9c.1 1.5-1.1 2.8-2.7 2.9H10c-1.5 0-2.7-1.3-2.7-2.8V10c-.1-1.5 1.1-2.8 2.6-2.9H90c1.5 0 2.7 1.3 2.7 2.8v50z"/><path class="st0" d="M30.6 57.9H13.8V12.1h16.8c11.9 0 18.4 7.4 18.4 22.7 0 13.2-4.5 23-18.4 23.1zm7.3-22.2c0-9.2-1-16.4-10.9-16.4h-2.2v31.2h3.9c5.8 0 9.2-4.7 9.2-14.8zM78 33.9c4.7-1.4 7.9-5.7 8-10.7 0-1-.2-11.2-13.1-11.2H53.8v45.8H70c4.3 0 17.7 0 17.7-12.9 0-3.1-1.4-9.2-9.7-11zM64.7 19.2h3.5c4.9 0 6.9 1.7 6.9 5.5 0 3-2.2 5.5-6 5.5h-4.3v-11zm4.5 31.3h-4.5V38.7h4.8c5.7 0 7.1 3.3 7.1 5.9 0 5.9-5.6 5.9-7.4 5.9z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 28" id="logo">
+	<rect x="2" y="2" width="36" height="24" fill="transparent" style="fill:transparent;fill: var(--db-logo-backgroundcolor, transparent)"></rect>
+	<path d="M27.2 7.53h-1.43v4.54h1.83c1.53.03 2.47-1.04 2.47-2.27 0-1.63-.96-2.32-2.87-2.27zm.6 7.8h-2.04v4.84h1.84c.7.01 3.07 0 3.07-2.37 0-1.01-.62-2.5-2.87-2.47zm-17.1-7.7h-.83v12.54h1.53c2.58.06 3.77-2.05 3.77-5.97 0-3.6-.41-6.74-4.47-6.57zm18.4-2.76c5.13.02 5.23 4.03 5.23 4.43a4.33 4.33 0 01-3.15 4.13v.14c3.26.79 3.75 3.14 3.75 4.43 0 4.76-4.68 5.02-6.71 5.03h-6.68V4.87h7.56zm-16.9 0c4.7.02 7.23 3.01 7.23 9.03 0 5.29-1.68 9.1-7.23 9.13H5.54V4.87h6.66zm23.7-1.94H4c-.63 0-1.04.5-1.06 1.05l-.01.12v19.7c0 .57.35 1.22.95 1.26l.12.01h31.9c.63 0 1.13-.6 1.16-1.14l.01-.13V4.1a1.2 1.2 0 00-1.17-1.17zm0-2.86c2.1 0 3.97 1.56 4.03 3.63v20.2a4 4 0 01-3.83 4.03H4A3.91 3.91 0 01.07 24.1V3.9A3.8 3.8 0 013.8.07h32.1z" fill="#f01414" style="fill:#f01414;fill: var(--db-logo-color, #f01414)"></path>
+</svg>
diff --git a/package-lock.json b/package-lock.json
diff --git a/source/_patterns/logo/_logo.demonstration.scss b/source/_patterns/logo/_logo.demonstration.scss
@@ -0,0 +1,42 @@
+.DO-NOT-COPY-THIS-CLASS-example-logo-list {
+	list-style: none;
+
+	padding-left: 0;
+
+	color: $db-color-cool-gray-700;
+
+	li {
+		display: inline-block;
+		box-sizing: border-box;
+
+		margin: 4px;
+		padding: 80px;
+		border-radius: 4px;
+
+		color: $db-color-cool-gray-700;
+
+		&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-cool-gray {
+			background-color: $db-color-cool-gray-100;
+		}
+		&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-red {
+			background-color: $db-color-red-500;
+
+			--db-logo-color: #{$db-color-white};
+		}
+		&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-image {
+			background-image: url(https://marketingportal.extranet.deutschebahn.com/sites/default/files/2021-12-13/Ausn01.png);
+			background-repeat: no-repeat;
+			background-size: cover;
+
+			display: block;
+
+			padding-top: 37px;
+			padding-left: 37px;
+
+			width: 600px;
+			height: 358px;
+
+			--db-logo-backgroundcolor: #{$db-color-white};
+		}
+	}
+}
diff --git a/source/_patterns/logo/logo.hbs b/source/_patterns/logo/logo.hbs
@@ -0,0 +1,9 @@
+<ul class="DO-NOT-COPY-THIS-CLASS-example-logo-list">
+	{{#each example-bgs }}
+		<li class="DO-NOT-COPY-THIS-CLASS-example-bg-variants-{{ variant }}">
+			<svg xmlns="http://www.w3.org/2000/svg" width="80" height="56" aria-hidden="true">
+				<use href="../../images/db_logo.svg#logo"></use>
+			</svg>
+		</li>
+	{{/each }}
+</ul>
diff --git a/source/_patterns/logo/logo.json b/source/_patterns/logo/logo.json
@@ -0,0 +1,16 @@
+{
+	"example-bgs": [
+		{
+			"variant": "regular"
+		},
+		{
+			"variant": "cool-gray"
+		},
+		{
+			"variant": "red"
+		},
+		{
+			"variant": "image"
+		}
+	]
+}
diff --git a/source/_patterns/logo/logo.md b/source/_patterns/logo/logo.md
@@ -0,0 +1,14 @@
+---
+title: Deutsche Bahn Logo
+---
+
+Please find a lot of more information regarding our logo and how to use it within the Marketingportal: <https://marketingportal.extranet.deutschebahn.com/de/logo-3>
+
+#### Adapt logos colors (background and fill)
+
+You could easily change the line-colors of the logo as well as the background color by defining different color values for both CSS variables:
+
+-   `--db-logo-color`
+-   `--db-logo-backgroundcolor`
+
+The fallback for an undefined `--db-logo-color` is our DB Red (`#f01414`), and `--db-logo-backgroundcolor` would fall back to `transparent`, which is the general background defined by brand.
diff --git a/source/css/db-ui-base.scss b/source/css/db-ui-base.scss
@@ -6,3 +6,4 @@
 } */
 
 @import "../_patterns/icons/icons.demonstration";
+@import "../_patterns/logo/logo.demonstration";
diff --git a/source/images/db_logo.svg b/source/images/db_logo.svg
@@ -1 +1,4 @@
-<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70"><style>.st0{fill:#f01414}.st1{fill:#fff}</style><title>db_em_rgb_100px</title><path class="st0" d="M90 0H10C4.5 0 0 4.5 0 10v50c0 5.5 4.5 10 10 10h80c5.5 0 10-4.5 10-10.1V10c0-5.5-4.5-10-10-10z"/><path class="st1" d="M92.7 59.9c.1 1.5-1.1 2.8-2.7 2.9H10c-1.5 0-2.7-1.3-2.7-2.8V10c-.1-1.5 1.1-2.8 2.6-2.9H90c1.5 0 2.7 1.3 2.7 2.8v50z"/><path class="st0" d="M30.6 57.9H13.8V12.1h16.8c11.9 0 18.4 7.4 18.4 22.7 0 13.2-4.5 23-18.4 23.1zm7.3-22.2c0-9.2-1-16.4-10.9-16.4h-2.2v31.2h3.9c5.8 0 9.2-4.7 9.2-14.8zM78 33.9c4.7-1.4 7.9-5.7 8-10.7 0-1-.2-11.2-13.1-11.2H53.8v45.8H70c4.3 0 17.7 0 17.7-12.9 0-3.1-1.4-9.2-9.7-11zM64.7 19.2h3.5c4.9 0 6.9 1.7 6.9 5.5 0 3-2.2 5.5-6 5.5h-4.3v-11zm4.5 31.3h-4.5V38.7h4.8c5.7 0 7.1 3.3 7.1 5.9 0 5.9-5.6 5.9-7.4 5.9z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 28" id="logo">
+	<rect x="2" y="2" width="36" height="24" fill="transparent" style="fill:transparent;fill: var(--db-logo-backgroundcolor, transparent)"></rect>
+	<path d="M27.2 7.53h-1.43v4.54h1.83c1.53.03 2.47-1.04 2.47-2.27 0-1.63-.96-2.32-2.87-2.27zm.6 7.8h-2.04v4.84h1.84c.7.01 3.07 0 3.07-2.37 0-1.01-.62-2.5-2.87-2.47zm-17.1-7.7h-.83v12.54h1.53c2.58.06 3.77-2.05 3.77-5.97 0-3.6-.41-6.74-4.47-6.57zm18.4-2.76c5.13.02 5.23 4.03 5.23 4.43a4.33 4.33 0 01-3.15 4.13v.14c3.26.79 3.75 3.14 3.75 4.43 0 4.76-4.68 5.02-6.71 5.03h-6.68V4.87h7.56zm-16.9 0c4.7.02 7.23 3.01 7.23 9.03 0 5.29-1.68 9.1-7.23 9.13H5.54V4.87h6.66zm23.7-1.94H4c-.63 0-1.04.5-1.06 1.05l-.01.12v19.7c0 .57.35 1.22.95 1.26l.12.01h31.9c.63 0 1.13-.6 1.16-1.14l.01-.13V4.1a1.2 1.2 0 00-1.17-1.17zm0-2.86c2.1 0 3.97 1.56 4.03 3.63v20.2a4 4 0 01-3.83 4.03H4A3.91 3.91 0 01.07 24.1V3.9A3.8 3.8 0 013.8.07h32.1z" fill="#f01414" style="fill:#f01414;fill: var(--db-logo-color, #f01414)"></path>
+</svg>

Original file line number	Diff line number	Diff line change
`@@ -6,3 +6,4 @@`
`6`	`6`	`} */`
`7`	`7`
`8`	`8`	`@import "../_patterns/icons/icons.demonstration";`
	`9`	`+@import "../_patterns/logo/logo.demonstration";`