feat(elevation): add initial implementation of the elevation

components/elevation/_mixins.scss

@@ -0,0 +1,14 @@
+@import "@material/elevation/mixins";
+@import "./variables";
+
+@mixin mk-elevation($z-value) {
+  @if type-of($z-value) != number or not unitless($z-value) {
+    @error "$z-value must be a unitless number";
+  }
+
+  @if $z-value < 0 or $z-value > 24 {
+    @error "$z-value must be between 0 and 24";
+  }
+
+  #{$mdc-elevation-property}: #{"#{map-get($mdc-elevation-umbra-map, $z-value)} #{$mk-elevation-umbra-color}"}, #{"#{map-get($mdc-elevation-penumbra-map, $z-value)} #{$mk-elevation-penumbra-color}"}, #{map-get($mdc-elevation-ambient-map, $z-value)} $mk-elevation-ambient-color;
+}

components/elevation/_variables.scss

@@ -0,0 +1,5 @@
+@import "../theme/variables";
+
+$mk-elevation-umbra-color: rgba($mk-theme-black, .2) !default;
+$mk-elevation-penumbra-color: rgba($mk-theme-black, .14) !default;
+$mk-elevation-ambient-color: rgba($mk-theme-black, .12) !default;

components/elevation/elevation.scss

@@ -0,0 +1,8 @@
+@import "@material/elevation/mdc-elevation";
+@import "./mixins";
+
+@for $z-value from 0 through 24 {
+  .mdc-elevation--z#{$z-value} {
+    @include mk-elevation($z-value);
+  }
+}

material-kit.scss

@@ -3,3 +3,4 @@
 @import "./components/checkbox/checkbox";
 @import "./components/dialog/dialog";
 @import "./components/drawer/drawer";
+@import "./components/elevation/elevation";