fix(menu): Use on-surface color for graphic/meta content (#4520)

material-components · Mar 20, 2019 · 74b8d67 · 74b8d67
1 parent f46941c
commit 74b8d67
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/mdc-menu/_mixins.scss b/packages/mdc-menu/_mixins.scss
@@ -35,13 +35,18 @@
 
   // Customize the menu-surface and contained list to match the mdc-menu styles.
   .mdc-menu {
-    @include mdc-list-item-meta-ink-color(text-primary-on-background, $query);
-    @include mdc-list-item-graphic-ink-color(text-primary-on-background, $query);
+    @include mdc-list-item-meta-ink-color($mdc-menu-ink-color, $query);
+    @include mdc-list-item-graphic-ink-color($mdc-menu-ink-color, $query);
 
     @include mdc-feature-targets($feat-structure) {
       min-width: $mdc-menu-min-width;
     }
 
+    // Include mdc-list selector to ensure list-inside-menu overrides default list styles
+    .mdc-list {
+      @include mdc-list-item-primary-text-ink-color($mdc-menu-ink-color, $query);
+    }
+
     .mdc-list-divider {
       @include mdc-feature-targets($feat-structure) {
         margin: 8px 0;

diff --git a/packages/mdc-menu/_variables.scss b/packages/mdc-menu/_variables.scss
@@ -20,5 +20,10 @@
 // THE SOFTWARE.
 //
 
+@import "@material/theme/mixins";
+@import "@material/theme/variables";
+
+$mdc-menu-ink-color: rgba(mdc-theme-prop-value(on-surface), mdc-theme-text-emphasis(high)) !default;
+
 $mdc-menu-width-base: 56px !default;
 $mdc-menu-min-width: 2 * $mdc-menu-width-base !default;