diff --git a/sass/components/_badges.scss b/sass/components/_badges.scss
index d96fbf00d6..0d177cd0fd 100644
--- a/sass/components/_badges.scss
+++ b/sass/components/_badges.scss
@@ -37,7 +37,7 @@ span.badge {
 
 // Special cases
 
-nav ul a span.badge {
+.navbar ul a span.badge {
   display: inline-block;
   float: none;
   margin-left: 4px;
diff --git a/sass/components/_navbar.scss b/sass/components/_navbar.scss
index 1cc3e5672f..6448aa0cc1 100644
--- a/sass/components/_navbar.scss
+++ b/sass/components/_navbar.scss
@@ -1,10 +1,9 @@
-// TODO: Make better wrapper class like .navbar
 :root {
   --navbar-height: 64px;
   --navbar-height-mobile: 56px;
 }
 
-nav {
+.navbar {
   &.nav-extended {
     height: auto;
 
@@ -139,11 +138,11 @@ nav {
         cursor: pointer;
 
         &.active {
-          background-color: var(--md-ref-palette-primary80);
+          background-color: var(--md-sys-color-primary-container-dark);
         }
 
         &:hover:not(.active) {
-          background-color: var(--md-ref-palette-primary70);
+          background-color: var(--md-sys-color-on-primary-dark);
         }
 
         &.btn, &.btn-large, &.btn-flat, &.btn-floating {
@@ -211,7 +210,7 @@ nav {
   height: var(--navbar-height-mobile);
   z-index: 997;
 
-  nav {
+  .navbar {
     position: fixed;
     right: 0;
   }
@@ -221,7 +220,7 @@ nav {
   nav.nav-extended .nav-wrapper {
     min-height: var(--navbar-height-mobile);
   }
-  nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
+  .nav, .navbar .nav-wrapper i, nav a.sidenav-trigger, .navbar a.sidenav-trigger i {
     height: var(--navbar-height);
     line-height: var(--navbar-height)
   }
diff --git a/sass/components/colors.module.scss b/sass/components/colors.module.scss
deleted file mode 100644
index 34a9bf3265..0000000000
--- a/sass/components/colors.module.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-.primary { background-color: var(--md-sys-color-primary); }
-.primary-text { color: var(--md-sys-color-primary); }
-.on-primary { background-color: var(--md-sys-color-on-primary); }
-.on-primary-text { color: var(--md-sys-color-on-primary); }
-.primary-container { background-color: var(--md-sys-color-primary-container); }
-.primary-container-text { color: var(--md-sys-color-primary-container); }
-.on-primary-container { background-color: var(--md-sys-color-on-primary-container); }
-.on-primary-container-text { color: var(--md-sys-color-on-primary-container); }
-
-.secondary { background-color: var(--md-sys-color-secondary); }
-.secondary-text { color: var(--md-sys-color-secondary); }
-.on-secondary { background-color: var(--md-sys-color-on-secondary); }
-.on-secondary-text { color: var(--md-sys-color-on-secondary); }
-.secondary-container { background-color: var(--md-sys-color-secondary-container); }
-.secondary-container-text { color: var(--md-sys-color-secondary-container); }
-.on-secondary-container { background-color: var(--md-sys-color-on-secondary-container); }
-.on-secondary-container-text { color: var(--md-sys-color-on-secondary-container); }
-
-.tertiary { background-color: var(--md-sys-color-tertiary); }
-.tertiary-text { color: var(--md-sys-color-tertiary); }
-.on-tertiary { background-color: var(--md-sys-color-on-tertiary); }
-.on-tertiary-text { color: var(--md-sys-color-on-tertiary); }
-.tertiary-container { background-color: var(--md-sys-color-tertiary-container); }
-.tertiary-container-text { color: var(--md-sys-color-tertiary-container); }
-.on-tertiary-container { background-color: var(--md-sys-color-on-tertiary-container); }
-.on-tertiary-container-text { color: var(--md-sys-color-on-tertiary-container); }
-
-.error { background-color: var(--md-sys-color-error); }
-.error-text { color: var(--md-sys-color-error); }
-.on-error { background-color: var(--md-sys-color-on-error); }
-.on-error-text { color: var(--md-sys-color-on-error); }
-.error-container { background-color: var(--md-sys-color-error-container); }
-.error-container-text { color: var(--md-sys-color-error-container); }
-.on-error-container { background-color: var(--md-sys-color-on-error-container); }
-.on-error-container-text { color: var(--md-sys-color-on-error-container); }
-
-.background { background-color: var(--md-sys-color-background); }
-.background-text { color: var(--md-sys-color-background); }
-.on-background { background-color: var(--md-sys-color-on-background); }
-.on-background-text { color: var(--md-sys-color-on-background); }
-
-.surface { background-color: var(--md-sys-color-surface); }
-.surface-text { color: var(--md-sys-color-surface); }
-.on-surface { background-color: var(--md-sys-color-on-surface); }
-.on-surface-text { color: var(--md-sys-color-on-surface); }
-
-.surface-variant { background-color: var(--md-sys-color-surface-variant); }
-.surface-variant-text { color: var(--md-sys-color-surface-variant); }
-.on-surface-variant { background-color: var(--md-sys-color-on-surface-variant); }
-.on-surface-variant-text { color: var(--md-sys-color-on-surface-variant); }
-
-.outline { background-color: var(--md-sys-color-outline); }
-.outline-text { color: var(--md-sys-color-outline); }
-
-.inverse-on-surface { background-color: var(--md-sys-color-inverse-on-surface); }
-.inverse-on-surface-text { color: var(--md-sys-color-inverse-on-surface); }
-
-.inverse-surface { background-color: var(--md-sys-color-inverse-surface); }
-.inverse-surface-text { color: var(--md-sys-color-inverse-surface); }
-
-.inverse-primary { background-color: var(--md-sys-color-inverse-primary); }
-.inverse-primary-text { color: var(--md-sys-color-inverse-primary); }
-
-.shadow { background-color: var(--md-sys-color-shadow); }
-.shadow-text { color: var(--md-sys-color-shadow); }
-
-.surface-tint { background-color: var(--md-sys-color-surface-tint); }
-.surface-tint-text { color: var(--md-sys-color-surface-tint); }
-
-.outline-variant { background-color: var(--md-sys-color-outline-variant); }
-.outline-variant-text { color: var(--md-sys-color-outline-variant); }
-
-.scrim { background-color: var(--md-sys-color-scrim); }
-.scrim-text { color: var(--md-sys-color-scrim); }
diff --git a/wallaby.js b/wallaby.js
new file mode 100644
index 0000000000..996e290268
--- /dev/null
+++ b/wallaby.js
@@ -0,0 +1,18 @@
+module.exports = function () {
+  return {
+    files: [
+      'src/**/*.ts',
+    ],
+
+    tests: [
+      'spec/tests/**/*.js',
+    ],
+
+    env: {
+      type: 'node',
+      runner: 'npx jasmine-browser-runner runSpecs',
+    },
+
+    testFramework: 'jasmine',
+  };
+};