diff --git a/styles/v3/layouts/items/untyped/v2.scss b/styles/v3/layouts/items/untyped/v2.scss
index d94bf49..5a5a767 100644
--- a/styles/v3/layouts/items/untyped/v2.scss
+++ b/styles/v3/layouts/items/untyped/v2.scss
@@ -5,7 +5,7 @@
 	--gap: 8px;
 
 	.nav-bar {
-		@include material.elevate(8);
+		@include material.elevate(8, $base: var(--surface));
 		position: absolute;
 		bottom: 0;
 		left: 0;
diff --git a/styles/v3/mixins/_material.scss b/styles/v3/mixins/_material.scss
index a869640..cdfd203 100644
--- a/styles/v3/mixins/_material.scss
+++ b/styles/v3/mixins/_material.scss
@@ -1,12 +1,31 @@
-@mixin elevate($height) {
-	background-color: var(--elevation-#{$height}dp-bg);
+@use "sass:map";
+
+$elevations: (
+	0: 0%,
+	1: 5%,
+	2: 7%,
+	3: 8%,
+	4: 9%,
+	6: 11%,
+	8: 12%,
+	12: 14%,
+	16: 15%,
+	24: 16%,
+);
+
+@mixin elevate($height, $base: transparent) {
+	background-color: color-mix(
+		in lab,
+		#{$base},
+		white map.get($elevations, $height)
+	);
 	-webkit-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
 	-moz-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
 	box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
 }
 
-@mixin undo {
-	background-color: transparent;
+@mixin undo($base: transparent) {
+	background-color: #{$base};
 	-webkit-box-shadow: none;
 	-moz-box-shadow: none;
 	box-shadow: none;