fix: elevation naming to make it logical (#179)

* fix: elevation naming to make it logical

Author: nmerget

source/_patterns/elevation/_examples.demonstration.scss

@@ -17,24 +17,12 @@
 	background-color: $db-colors-neutral-bg-1-enabled;
 }
 
-$list: "", $db-elevation-1, $db-elevation-2, $db-elevation-4, $db-elevation-8,
-	$db-elevation-12, $db-elevation-24;
+$list: "", $db-elevation-1, $db-elevation-2, $db-elevation-3, $db-elevation-4,
+	$db-elevation-5, $db-elevation-6;
 
 @mixin elevation() {
 	@for $i from 0 to length($list) {
 		$className: $i;
-		@if ($i==3) {
-			$className: 4;
-		}
-		@if ($i==4) {
-			$className: 8;
-		}
-		@if ($i==5) {
-			$className: 12;
-		}
-		@if ($i==6) {
-			$className: 24;
-		}
 		.DO-NOT-COPY-THIS-CLASS-elevation-#{$className} {
 			@extend %elevation-placeholder;
 

source/_patterns/elevation/examples.hbs

@@ -5,9 +5,9 @@
 		<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 class="DO-NOT-COPY-THIS-CLASS-elevation-5">Elevation-5</div>
+		<div class="DO-NOT-COPY-THIS-CLASS-elevation-6">Elevation-6</div>
 	</div>
 </main>

tokens/elevation.json

@@ -6,16 +6,16 @@
 		"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)"
 		},
-		"4": {
+		"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)"
 		},
-		"8": {
+		"4": {
 			"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": {
+		"5": {
 			"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": {
+		"6": {
 			"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)"
 		}
 	}