feat: add elevation as foundation variables (#154)

* feat: add elevation as foundation variables

Author: nmerget

source/_patterns/elevation/_examples.demonstration.scss

@@ -0,0 +1,45 @@
+@use "../../../build/scss/variables" as *;
+@use "../../../build/scss/variables.global" as *;
+
+%elevation-placeholder {
+	width: 15rem;
+	height: $db-sizing-lg;
+	padding: $db-spacing-responsive-sm $db-spacing-responsive-md;
+	border-radius: 8px;
+	background-color: $db-colors-neutral-bg-0-enabled;
+}
+
+.DO-NOT-COPY-THIS-CLASS-elevation-background {
+	display: flex;
+	flex-wrap: wrap;
+	gap: $db-spacing-responsive-md;
+	padding: $db-spacing-fixed-md;
+	background-color: $db-colors-neutral-bg-1-enabled;
+}
+
+$list: "", $db-elevation-1, $db-elevation-2, $db-elevation-3, $db-elevation-4,
+	$db-elevation-8, $db-elevation-12, $db-elevation-24;
+
+@mixin elevation() {
+	@for $i from 0 to length($list) {
+		$className: $i;
+		@if ($i==5) {
+			$className: 8;
+		}
+		@if ($i==6) {
+			$className: 12;
+		}
+		@if ($i==7) {
+			$className: 24;
+		}
+		.DO-NOT-COPY-THIS-CLASS-elevation-#{$className} {
+			@extend %elevation-placeholder;
+
+			@if ($i != 0) {
+				box-shadow: nth($list, $i + 1);
+			}
+		}
+	}
+}
+
+@include elevation();

source/_patterns/elevation/examples.hbs

@@ -0,0 +1,14 @@
+<main >
+	<h1>Elevation Examples</h1>
+
+	<div class="DO-NOT-COPY-THIS-CLASS-elevation-background">
+		<div class="DO-NOT-COPY-THIS-CLASS-elevation-0">Elevation-0</div>
+		<div class="DO-NOT-COPY-THIS-CLASS-elevation-1">Elevation-1</div>
+		<div class="DO-NOT-COPY-THIS-CLASS-elevation-2">Elevation-2</div>
+		<div class="DO-NOT-COPY-THIS-CLASS-elevation-3">Elevation-3</div>
+		<div class="DO-NOT-COPY-THIS-CLASS-elevation-4">Elevation-4</div>
+		<div class="DO-NOT-COPY-THIS-CLASS-elevation-8">Elevation-8</div>
+		<div class="DO-NOT-COPY-THIS-CLASS-elevation-12">Elevation-12</div>
+		<div class="DO-NOT-COPY-THIS-CLASS-elevation-24">Elevation-24</div>
+	</div>
+</main>

source/_patterns/elevation/intro.hbs

@@ -0,0 +1,6 @@
+<main>
+	<h1>Elevation Intro</h1>
+	<p>
+		Please find a lot of more information regarding our spacings and how to use it within the <a target="_blank" rel="nofollow" href="https://marketingportal.extranet.deutschebahn.com/de/brandguide/layout">Marketingportal</a>
+	</p>
+</main>

source/_patterns/elevation/intro.md

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

source/css/documentation.scss

@@ -20,6 +20,7 @@ textarea {
 @import "../_patterns/icons/icons.demonstration";
 @import "../_patterns/logo/examples.demonstration";
 @import "../_patterns/spacings/examples.demonstration";
+@import "../_patterns/elevation/examples.demonstration";
 
 main {
 	padding: $db-spacing-fixed-normal-xs $db-spacing-fixed-normal-l;

tokens/elevation.json

@@ -0,0 +1,25 @@
+{
+	"elevation": {
+		"1": {
+			"value": "0 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.14)"
+		},
+		"2": {
+			"value": "0 0 1px -1px rgba(0, 0, 0, 0.2), 0 0 4px 1px rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)"
+		},
+		"3": {
+			"value": "0 0 2px -1px rgba(0, 0, 0, 0.2), 0 0 8px 1px rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.14)"
+		},
+		"4": {
+			"value": "0 0 2px -1px  rgba(0, 0, 0, 0.2), 0 0 8px 1px rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.14)"
+		},
+		"8": {
+			"value": "0 0 4px -3px rgba(0, 0, 0, 0.2), 0 0 16px 3px rgba(0, 0, 0, 0.12), 0 0 8px 1px rgba(0, 0, 0, 0.14)"
+		},
+		"12": {
+			"value": "0 0 6px -4px rgba(0, 0, 0, 0.2), 0 0 24px 4px rgba(0, 0, 0, 0.12), 0 0 12px 2px rgba(0, 0, 0, 0.14)"
+		},
+		"24": {
+			"value": "0 0 12px -8px rgba(0, 0, 0, 0.2), 0 0 48px 8px rgba(0, 0, 0, 0.12), 0 0 24px 3px rgba(0, 0, 0, 0.14)"
+		}
+	}
+}