app/assets/stylesheets/material_design/navigation.css in material_design-0.3.0 vs app/assets/stylesheets/material_design/navigation.css in material_design-0.4.0

@@ -6,14 +6,14 @@
   padding: 12px;
   flex-direction: column;
   align-items: flex-start;
   border-radius: 16px;
   @media (prefers-color-scheme: light) {
-    background: var(--md-sys-light-surface-container-low);
+    background: rgb(var(--md-sys-light-surface-container-low));
   }
   @media (prefers-color-scheme: dark) {
-    background: var(--md-sys-dark-surface-container-low);
+    background: rgb(var(--md-sys-dark-surface-container-low));
   }
   @media (max-width: 840px) {
     display: none;
   }
 }
@@ -25,10 +25,16 @@
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 10px;
   align-self: stretch;
+  @media (prefers-color-scheme: light) {
+    color: rgb(var(--md-sys-light-on-surface-variant));
+  }
+  @media (prefers-color-scheme: dark) {
+    color: rgb(var(--md-sys-dark-on-surface-variant));
+  }
 }
 
 .navigation-drawer__secion-header {
   display: flex;
   padding: 18px 16px;
@@ -46,22 +52,22 @@
   border-radius: 100px;
 }
 
 .navigation-drawer__nav_item:hover {
   @media (prefers-color-scheme: light) {
-    background: var(--md-sys-light-secondary-container);
+    background: rgb(var(--md-sys-light-secondary-container));
   }
   @media (prefers-color-scheme: dark) {
-    background: var(--md-sys-dark-secondary-container);
+    background: rgb(var(--md-sys-dark-secondary-container));
   }
 }
 
 .navigation-drawer__nav_item.active {
   @media (prefers-color-scheme: light) {
-    background: var(--md-sys-light-secondary-container);
+    background: rgb(var(--md-sys-light-secondary-container));
   }
   @media (prefers-color-scheme: dark) {
-    background: var(--md-sys-dark-secondary-container);
+    background: rgb(var(--md-sys-dark-secondary-container));
   }
 }
 
 .navigation-drawer__state-layer {
   display: flex;