diff --git a/package-lock.json b/package-lock.json
index 2b5fa509267..b96b150b41b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7149,7 +7149,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -7170,12 +7171,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -7190,17 +7193,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -7317,7 +7323,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -7329,6 +7336,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -7343,6 +7351,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -7350,12 +7359,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -7374,6 +7385,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -7454,7 +7466,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -7466,6 +7479,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -7551,7 +7565,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -7587,6 +7602,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -7606,6 +7622,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7649,12 +7666,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/packages/mdc-elevation/_mixins.scss b/packages/mdc-elevation/_mixins.scss
index fc600d8ee34..31333597139 100644
--- a/packages/mdc-elevation/_mixins.scss
+++ b/packages/mdc-elevation/_mixins.scss
@@ -25,6 +25,27 @@
 @import "@material/theme/variables";
 @import "./variables";
 
+@mixin mdc-elevation-core-styles($query: mdc-feature-all()) {
+  $feat-animation: mdc-feature-create-target($query, animation);
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @for $z-value from 0 through 24 {
+    .mdc-elevation--z#{$z-value} {
+      @include mdc-elevation($z-value, $query: $query);
+    }
+  }
+
+  .mdc-elevation-transition {
+    @include mdc-feature-targets($feat-animation) {
+      transition: mdc-elevation-transition-value();
+    }
+
+    @include mdc-feature-targets($feat-structure) {
+      will-change: $mdc-elevation-property;
+    }
+  }
+}
+
 // Applies the correct CSS rules to an element to give it the elevation specified by $z-value.
 // The $z-value must be between 0 and 24.
 // If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use
diff --git a/packages/mdc-elevation/mdc-elevation.scss b/packages/mdc-elevation/mdc-elevation.scss
index ed92bbf7771..fd3a3c9e167 100644
--- a/packages/mdc-elevation/mdc-elevation.scss
+++ b/packages/mdc-elevation/mdc-elevation.scss
@@ -21,14 +21,4 @@
 //
 
 @import "./mixins";
-
-@for $z-value from 0 through 24 {
-  .mdc-elevation--z#{$z-value} {
-    @include mdc-elevation($z-value);
-  }
-}
-
-.mdc-elevation-transition {
-  transition: mdc-elevation-transition-value();
-  will-change: $mdc-elevation-property;
-}
+@include mdc-elevation-core-styles;
diff --git a/packages/mdc-ripple/_mixins.scss b/packages/mdc-ripple/_mixins.scss
index 5ac7b53e7cd..79ba3b90fdf 100644
--- a/packages/mdc-ripple/_mixins.scss
+++ b/packages/mdc-ripple/_mixins.scss
@@ -20,6 +20,7 @@
 // THE SOFTWARE.
 //
 
+@import "@material/animation/functions";
 @import "@material/animation/variables";
 @import "@material/base/mixins";
 @import "@material/feature-targeting/functions";
@@ -29,6 +30,42 @@
 @import "./keyframes";
 @import "./variables";
 
+@mixin mdc-ripple-core-styles($query: mdc-feature-all()) {
+  // postcss-bem-linter: define ripple-surface
+
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  .mdc-ripple-surface {
+    @include mdc-ripple-surface($query: $query);
+    @include mdc-states($query: $query);
+    @include mdc-ripple-radius-bounded($query: $query);
+
+    @include mdc-feature-targets($feat-structure) {
+      position: relative;
+      outline: none;
+      overflow: hidden;
+    }
+
+    &[data-mdc-ripple-is-unbounded] {
+      @include mdc-ripple-radius-unbounded($query: $query);
+
+      @include mdc-feature-targets($feat-structure) {
+        overflow: visible;
+      }
+    }
+
+    &--primary {
+      @include mdc-states(primary, $query: $query);
+    }
+
+    &--accent {
+      @include mdc-states(secondary, $query: $query);
+    }
+  }
+
+  // postcss-bem-linter: end
+}
+
 @mixin mdc-ripple-common($query: mdc-feature-all()) {
   $feat-animation: mdc-feature-create-target($query, animation);
   $feat-structure: mdc-feature-create-target($query, structure);
diff --git a/packages/mdc-ripple/mdc-ripple.scss b/packages/mdc-ripple/mdc-ripple.scss
index 6302b17ba12..03a7fad84d8 100644
--- a/packages/mdc-ripple/mdc-ripple.scss
+++ b/packages/mdc-ripple/mdc-ripple.scss
@@ -20,36 +20,6 @@
 // THE SOFTWARE.
 //
 
-@import "@material/animation/functions";
-@import "@material/theme/mixins";
-@import "./common";
 @import "./mixins";
-@import "./variables";
-
-// postcss-bem-linter: define ripple-surface
-
-.mdc-ripple-surface {
-  @include mdc-ripple-surface;
-  @include mdc-states;
-  @include mdc-ripple-radius-bounded;
-
-  position: relative;
-  outline: none;
-  overflow: hidden;
-
-  &[data-mdc-ripple-is-unbounded] {
-    @include mdc-ripple-radius-unbounded;
-
-    overflow: visible;
-  }
-
-  &--primary {
-    @include mdc-states(primary);
-  }
-
-  &--accent {
-    @include mdc-states(secondary);
-  }
-}
-
-// postcss-bem-linter: end
+@include mdc-ripple-common;
+@include mdc-ripple-core-styles;
diff --git a/packages/mdc-theme/_mixins.scss b/packages/mdc-theme/_mixins.scss
index 14a6d834fd1..98c42ff99b3 100644
--- a/packages/mdc-theme/_mixins.scss
+++ b/packages/mdc-theme/_mixins.scss
@@ -20,8 +20,47 @@
 // THE SOFTWARE.
 //
 
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "./variables";
 
+@mixin mdc-theme-core-styles($query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  :root {
+    @include mdc-feature-targets($feat-color) {
+      @each $style in map-keys($mdc-theme-property-values) {
+        --mdc-theme-#{$style}: #{map-get($mdc-theme-property-values, $style)};
+      }
+    }
+  }
+
+  @each $style in map-keys($mdc-theme-property-values) {
+    @if $style != "background" and $style != "surface" {
+      .mdc-theme--#{$style} {
+        @include mdc-feature-targets($feat-color) {
+          @include mdc-theme-prop(color, $style, true);
+        }
+      }
+    } @else {
+      .mdc-theme--#{$style} {
+        @include mdc-feature-targets($feat-color) {
+          @include mdc-theme-prop(background-color, $style);
+        }
+      }
+    }
+  }
+
+  // CSS rules for using primary and secondary (plus light/dark variants) as background colors.
+  @each $style in ("primary", "secondary") {
+    .mdc-theme--#{$style}-bg {
+      @include mdc-feature-targets($feat-color) {
+        @include mdc-theme-prop(background-color, $style, true);
+      }
+    }
+  }
+}
+
 // Applies the correct theme color style to the specified property.
 // $property is typically color or background-color, but can be any CSS property that accepts color values.
 // $style should be one of the map keys in $mdc-theme-property-values (_variables.scss), or a color value.
@@ -47,7 +86,7 @@
       @if $edgeOptOut {
         // stylelint-disable max-nesting-depth
         @at-root {
-          @supports not (-ms-ime-align:auto) {
+          @supports not (-ms-ime-align: auto) {
             // stylelint-disable scss/selector-no-redundant-nesting-selector
             & {
               /* @alternate */
@@ -67,7 +106,7 @@
       @if $edgeOptOut {
         // stylelint-disable max-nesting-depth
         @at-root {
-          @supports not (-ms-ime-align:auto) {
+          @supports not (-ms-ime-align: auto) {
             // stylelint-disable scss/selector-no-redundant-nesting-selector
             & {
               /* @alternate */
diff --git a/packages/mdc-theme/mdc-theme.scss b/packages/mdc-theme/mdc-theme.scss
index 7658a0ed4f2..1a816d7e544 100644
--- a/packages/mdc-theme/mdc-theme.scss
+++ b/packages/mdc-theme/mdc-theme.scss
@@ -21,28 +21,4 @@
 //
 
 @import "./mixins";
-
-:root {
-  @each $style in map-keys($mdc-theme-property-values) {
-    --mdc-theme-#{$style}: #{map-get($mdc-theme-property-values, $style)};
-  }
-}
-
-@each $style in map-keys($mdc-theme-property-values) {
-  @if $style != "background" and $style != "surface" {
-    .mdc-theme--#{$style} {
-      @include mdc-theme-prop(color, $style, true);
-    }
-  } @else {
-    .mdc-theme--#{$style} {
-      @include mdc-theme-prop(background-color, $style);
-    }
-  }
-}
-
-// CSS rules for using primary and secondary (plus light/dark variants) as background colors.
-@each $style in ("primary", "secondary") {
-  .mdc-theme--#{$style}-bg {
-    @include mdc-theme-prop(background-color, $style, true);
-  }
-}
+@include mdc-theme-core-styles;
diff --git a/packages/mdc-theme/package.json b/packages/mdc-theme/package.json
index 75a0b33d75b..d05e1571e4a 100644
--- a/packages/mdc-theme/package.json
+++ b/packages/mdc-theme/package.json
@@ -11,5 +11,8 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/material-components/material-components-web.git"
+  },
+  "dependencies": {
+    "@material/feature-targeting": "^0.44.0"
   }
 }
diff --git a/packages/mdc-typography/_mixins.scss b/packages/mdc-typography/_mixins.scss
index e31715b616a..5c2a282f906 100644
--- a/packages/mdc-typography/_mixins.scss
+++ b/packages/mdc-typography/_mixins.scss
@@ -24,6 +24,18 @@
 @import "@material/feature-targeting/mixins";
 @import "./variables";
 
+@mixin mdc-typography-core-styles($query: mdc-feature-all()) {
+  .mdc-typography {
+    @include mdc-typography-base($query: $query);
+  }
+
+  @each $style in map-keys($mdc-typography-styles) {
+    .mdc-typography--#{$style} {
+      @include mdc-typography($style, $query: $query);
+    }
+  }
+}
+
 @mixin mdc-typography-base($query: mdc-feature-all()) {
   $feat-typography: mdc-feature-create-target($query, typography);
 
diff --git a/packages/mdc-typography/mdc-typography.scss b/packages/mdc-typography/mdc-typography.scss
index 79adf90c7d5..d9b2891aa2e 100644
--- a/packages/mdc-typography/mdc-typography.scss
+++ b/packages/mdc-typography/mdc-typography.scss
@@ -20,15 +20,5 @@
 // THE SOFTWARE.
 //
 
-@import "./variables";
 @import "./mixins";
-
-.mdc-typography {
-  @include mdc-typography-base;
-}
-
-@each $style in map-keys($mdc-typography-styles) {
-  .mdc-typography--#{$style} {
-    @include mdc-typography($style);
-  }
-}
+@include mdc-typography-core-styles;
diff --git a/test/scss/feature-targeting.scss b/test/scss/feature-targeting.scss
index 24447b5a378..d19c1961f7d 100644
--- a/test/scss/feature-targeting.scss
+++ b/test/scss/feature-targeting.scss
@@ -10,6 +10,7 @@
 @import "@material/ripple/mixins";
 @import "@material/shape/mixins";
 @import "@material/switch/mixins";
+@import "@material/theme/mixins";
 @import "@material/typography/mixins";
 
 .mdc-test {
@@ -38,6 +39,7 @@
   @include mdc-checkbox-focus-indicator-color(red, $query: mdc-feature-any());
 
   // Elevation
+  @include mdc-elevation-core-styles($query: mdc-feature-any());
   @include mdc-elevation(0, $query: mdc-feature-any());
 
   // List
@@ -69,6 +71,7 @@
   @include mdc-radio-focus-indicator-color(red, $query: mdc-feature-any());
 
   // Ripple
+  @include mdc-ripple-core-styles($query: mdc-feature-any());
   @include mdc-ripple-common($query: mdc-feature-any());
   @include mdc-ripple-surface($query: mdc-feature-any());
   @include mdc-states-base-color(red, $query: mdc-feature-any());
@@ -95,7 +98,11 @@
   @include mdc-switch-toggled-off-track-color(on-surface, $query: mdc-feature-any());
   @include mdc-switch-toggled-off-thumb-color(on-surface, $query: mdc-feature-any());
 
+  // Theme
+  @include mdc-theme-core-styles($query: mdc-feature-any());
+
   // Typography
+  @include mdc-typography-core-styles($query: mdc-feature-any());
   @include mdc-typography-base($query: mdc-feature-any());
   @include mdc-typography(button, $query: mdc-feature-any());
   @include mdc-typography-overflow-ellipsis($query: mdc-feature-any());