From b8d79f31693a9639efea4a8a9b8766c6e8d486b2 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 19 Jan 2019 16:32:09 +0100
Subject: [PATCH 1/6] feat(switch): add feature targeting for styles

Sets up style feature targeting for the switch component.
---
 packages/mdc-switch/_mixins.scss    | 218 ++++++++++++++++++++++++++++
 packages/mdc-switch/mdc-switch.scss | 117 +--------------
 2 files changed, 219 insertions(+), 116 deletions(-)

diff --git a/packages/mdc-switch/_mixins.scss b/packages/mdc-switch/_mixins.scss
index 8cecbd6a711..57f830fd9df 100644
--- a/packages/mdc-switch/_mixins.scss
+++ b/packages/mdc-switch/_mixins.scss
@@ -21,10 +21,89 @@
 //
 
 @import "@material/theme/mixins";
+@import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
+@import "@material/elevation/mixins";
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
+@import "./functions";
 @import "./variables";
 
+
+//
+// Public
+//
+@mixin mdc-switch($query: mdc-feature-all()) {
+  // postcss-bem-linter: define checkbox
+
+  $feat-animation: mdc-feature-create-target($query, animation);
+  $feat-color: mdc-feature-create-target($query, color);
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  .mdc-switch {
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-switch-base_;
+    }
+
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-switch-toggled-on-track-color($mdc-switch-baseline-theme-color);
+      @include mdc-switch-toggled-on-thumb-color($mdc-switch-baseline-theme-color);
+      @include mdc-switch-toggled-off-track-color($mdc-switch-toggled-off-track-color);
+      @include mdc-switch-toggled-off-thumb-color($mdc-switch-toggled-off-thumb-color);
+      @include mdc-switch-toggled-off-ripple-color($mdc-switch-toggled-off-ripple-color);
+    }
+  }
+
+  .mdc-switch__track {
+    @include mdc-switch__track_($query);
+  }
+
+  .mdc-switch__thumb-underlay {
+    @include mdc-switch__thumb-underlay_($query);
+  }
+
+  .mdc-switch__native-control {
+    @include mdc-switch__native-control_($query);
+  }
+
+  .mdc-switch__thumb {
+    @include mdc-switch__thumb_($query);
+  }
+
+  .mdc-switch--checked {
+    @include mdc-feature-targets($feat-structure) {
+      .mdc-switch__track {
+        @include mdc-switch__track-checked_;
+      }
+
+      .mdc-switch__thumb-underlay {
+        @include mdc-switch__thumb-underlay-checked_;
+      }
+
+      .mdc-switch__native-control {
+        @include mdc-switch__native-control-checked_;
+      }
+    }
+  }
+
+  .mdc-switch--disabled {
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-switch--disabled-base_;
+
+      .mdc-switch__thumb {
+        @include mdc-switch__thumb-disabled_;
+      }
+
+      .mdc-switch__native-control {
+        @include mdc-switch__native-control-disabled_
+      }
+    }
+  }
+
+  // postcss-bem-linter: end
+}
+
 @mixin mdc-switch-toggled-on-color($color) {
   @include mdc-switch-toggled-on-track-color($color);
   @include mdc-switch-toggled-on-thumb-color($color);
@@ -76,3 +155,142 @@
     @include mdc-states($color);
   }
 }
+
+//
+// Private
+//
+
+// Structure
+@mixin mdc-switch-base_ {
+  display: inline-block;
+  position: relative;
+  outline: none;
+  user-select: none;
+}
+
+@mixin mdc-switch__track_($query: mdc-feature-all()) {
+  $feat-animation: mdc-feature-create-target($query, animation);
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    box-sizing: border-box;
+    width: $mdc-switch-track-width;
+    height: $mdc-switch-track-height;
+    border: 1px solid;
+    border-radius: $mdc-switch-track-height / 2;
+    opacity: .38;
+  }
+
+  @include mdc-feature-targets($feat-animation) {
+    transition:
+      mdc-switch-transition(opacity),
+      mdc-switch-transition(background-color),
+      mdc-switch-transition(border-color);
+  }
+}
+
+@mixin mdc-switch__thumb-underlay_($query: mdc-feature-all()) {
+  $feat-animation: mdc-feature-create-target($query, animation);
+  $feat-color: mdc-feature-create-target($query, color);
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-states($mdc-switch-baseline-theme-color, false, $query);
+
+  @include mdc-feature-targets($feat-structure) {
+    @include mdc-rtl-reflexive-position(left, $mdc-switch-tap-target-initial-position);
+    @include mdc-ripple-surface();
+    @include mdc-ripple-radius-unbounded;
+
+    display: flex;
+    position: absolute;
+    // Ensures the knob is centered on the track.
+    top: -(($mdc-switch-tap-target-size - $mdc-switch-track-height) / 2);
+    align-items: center;
+    justify-content: center;
+    width: $mdc-switch-tap-target-size;
+    height: $mdc-switch-tap-target-size;
+    transform: translateX(0);
+  }
+
+  @include mdc-feature-targets($feat-animation) {
+    transition:
+      mdc-switch-transition(transform),
+      mdc-switch-transition(background-color),
+      mdc-switch-transition(border-color);
+  }
+}
+
+@mixin mdc-switch__native-control_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    @include mdc-rtl-reflexive-position(left, 0);
+
+    position: absolute;
+    top: 0;
+    width: $mdc-switch-native-control-width;
+    height: $mdc-switch-tap-target-size;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+}
+
+@mixin mdc-switch__thumb_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    @include mdc-elevation(2);
+
+    box-sizing: border-box;
+    width: $mdc-switch-thumb-diameter;
+    height: $mdc-switch-thumb-diameter;
+    border: $mdc-switch-thumb-diameter / 2 solid;
+    border-radius: 50%;
+    // Allow events to go through to the native control, necessary for IE and Edge.
+    pointer-events: none;
+    z-index: 1;
+  }
+}
+
+
+// Checked state
+
+@mixin mdc-switch__track-checked_ {
+  opacity: .54;
+}
+
+@mixin mdc-switch__thumb-underlay-checked_ {
+  transform: translateX($mdc-switch-thumb-active-margin);
+
+  @include mdc-rtl {
+    transform: translateX(-($mdc-switch-thumb-active-margin));
+  }
+}
+
+@mixin mdc-switch__native-control-checked_ {
+  // Translate the native control the opposite direction so that the tap target stays the same.
+  transform: translateX(-($mdc-switch-thumb-active-margin));
+
+  @include mdc-rtl {
+    transform: translateX($mdc-switch-thumb-active-margin);
+  }
+}
+
+
+// Disabled state
+
+@mixin mdc-switch--disabled-base_ {
+  opacity: .38;
+  pointer-events: none;
+}
+
+@mixin mdc-switch__thumb-disabled_ {
+  border-width: 1px;  // In high contrast mode, only show outline of knob.
+}
+
+@mixin mdc-switch__native-control-disabled_ {
+  cursor: default;
+  pointer-events: none;
+}
diff --git a/packages/mdc-switch/mdc-switch.scss b/packages/mdc-switch/mdc-switch.scss
index d2e99dccaa4..9d23d9f2fe0 100644
--- a/packages/mdc-switch/mdc-switch.scss
+++ b/packages/mdc-switch/mdc-switch.scss
@@ -20,120 +20,5 @@
 // THE SOFTWARE.
 //
 
-@import "@material/elevation/mixins";
-@import "@material/rtl/mixins";
-@import "@material/ripple/common";
-@import "@material/ripple/mixins";
-@import "./functions";
 @import "./mixins";
-@import "./variables";
-
-.mdc-switch {
-  @include mdc-switch-toggled-on-track-color($mdc-switch-baseline-theme-color);
-  @include mdc-switch-toggled-on-thumb-color($mdc-switch-baseline-theme-color);
-  @include mdc-switch-toggled-off-track-color($mdc-switch-toggled-off-track-color);
-  @include mdc-switch-toggled-off-thumb-color($mdc-switch-toggled-off-thumb-color);
-  @include mdc-switch-toggled-off-ripple-color($mdc-switch-toggled-off-ripple-color);
-
-  display: inline-block;
-  position: relative;
-  outline: none;
-  user-select: none;
-}
-
-.mdc-switch__native-control {
-  @include mdc-rtl-reflexive-position(left, 0);
-
-  position: absolute;
-  top: 0;
-  width: $mdc-switch-native-control-width;
-  height: $mdc-switch-tap-target-size;
-  margin: 0;
-  opacity: 0;
-  cursor: pointer;
-  pointer-events: auto;
-}
-
-.mdc-switch__track {
-  box-sizing: border-box;
-  width: $mdc-switch-track-width;
-  height: $mdc-switch-track-height;
-  transition:
-    mdc-switch-transition(opacity),
-    mdc-switch-transition(background-color),
-    mdc-switch-transition(border-color);
-  border: 1px solid;
-  border-radius: $mdc-switch-track-height / 2;
-  opacity: .38;
-}
-
-.mdc-switch__thumb-underlay {
-  @include mdc-rtl-reflexive-position(left, $mdc-switch-tap-target-initial-position);
-  @include mdc-ripple-surface();
-  @include mdc-ripple-radius-unbounded;
-  @include mdc-states($mdc-switch-baseline-theme-color);
-
-  display: flex;
-  position: absolute;
-  // Ensures the knob is centered on the track.
-  top: -(($mdc-switch-tap-target-size - $mdc-switch-track-height) / 2);
-  align-items: center;
-  justify-content: center;
-  width: $mdc-switch-tap-target-size;
-  height: $mdc-switch-tap-target-size;
-  transform: translateX(0);
-  transition:
-    mdc-switch-transition(transform),
-    mdc-switch-transition(background-color),
-    mdc-switch-transition(border-color);
-}
-
-.mdc-switch__thumb {
-  @include mdc-elevation(2);
-
-  box-sizing: border-box;
-  width: $mdc-switch-thumb-diameter;
-  height: $mdc-switch-thumb-diameter;
-  border: $mdc-switch-thumb-diameter / 2 solid;
-  border-radius: 50%;
-  // Allow events to go through to the native control, necessary for IE and Edge.
-  pointer-events: none;
-  z-index: 1;
-}
-
-.mdc-switch--checked {
-  .mdc-switch__track {
-    opacity: .54;
-  }
-
-  .mdc-switch__thumb-underlay {
-    transform: translateX($mdc-switch-thumb-active-margin);
-
-    @include mdc-rtl {
-      transform: translateX(-($mdc-switch-thumb-active-margin));
-    }
-  }
-
-  // Translate the native control the opposite direction so that the tap target stays the same.
-  .mdc-switch__native-control {
-    transform: translateX(-($mdc-switch-thumb-active-margin));
-
-    @include mdc-rtl {
-      transform: translateX($mdc-switch-thumb-active-margin);
-    }
-  }
-}
-
-.mdc-switch--disabled {
-  opacity: .38;
-  pointer-events: none;
-
-  .mdc-switch__thumb {
-    border-width: 1px;  // In high contrast mode, only show outline of knob.
-  }
-
-  .mdc-switch__native-control {
-    cursor: default;
-    pointer-events: none;
-  }
-}
+@include mdc-switch;

From b937c42c6776183579ee610e6dfcc91de0c2b2d4 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 29 Jan 2019 17:16:52 +0100
Subject: [PATCH 2/6] refactor: address feedback

---
 packages/mdc-switch/_mixins.scss | 83 ++++++++++++++++++--------------
 test/scss/feature-targeting.scss |  5 ++
 2 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/packages/mdc-switch/_mixins.scss b/packages/mdc-switch/_mixins.scss
index 57f830fd9df..bc7c7784bd3 100644
--- a/packages/mdc-switch/_mixins.scss
+++ b/packages/mdc-switch/_mixins.scss
@@ -21,7 +21,6 @@
 //
 
 @import "@material/theme/mixins";
-@import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 @import "@material/elevation/mixins";
@@ -35,12 +34,14 @@
 // Public
 //
 @mixin mdc-switch($query: mdc-feature-all()) {
-  // postcss-bem-linter: define checkbox
+  // postcss-bem-linter: define switch
 
   $feat-animation: mdc-feature-create-target($query, animation);
   $feat-color: mdc-feature-create-target($query, color);
   $feat-structure: mdc-feature-create-target($query, structure);
 
+  @include mdc-ripple-common($query);
+
   .mdc-switch {
     @include mdc-feature-targets($feat-structure) {
       @include mdc-switch-base_;
@@ -51,7 +52,14 @@
       @include mdc-switch-toggled-on-thumb-color($mdc-switch-baseline-theme-color);
       @include mdc-switch-toggled-off-track-color($mdc-switch-toggled-off-track-color);
       @include mdc-switch-toggled-off-thumb-color($mdc-switch-toggled-off-thumb-color);
-      @include mdc-switch-toggled-off-ripple-color($mdc-switch-toggled-off-ripple-color);
+    }
+
+    @include mdc-switch-toggled-off-ripple-color($mdc-switch-toggled-off-ripple-color, $query);
+  }
+
+  .mdc-switch__native-control {
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-switch__native-control_;
     }
   }
 
@@ -63,10 +71,6 @@
     @include mdc-switch__thumb-underlay_($query);
   }
 
-  .mdc-switch__native-control {
-    @include mdc-switch__native-control_($query);
-  }
-
   .mdc-switch__thumb {
     @include mdc-switch__thumb_($query);
   }
@@ -104,16 +108,26 @@
   // postcss-bem-linter: end
 }
 
-@mixin mdc-switch-toggled-on-color($color) {
-  @include mdc-switch-toggled-on-track-color($color);
-  @include mdc-switch-toggled-on-thumb-color($color);
-  @include mdc-switch-toggled-on-ripple-color($color);
+@mixin mdc-switch-toggled-on-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  @include mdc-feature-targets($feat-color) {
+    @include mdc-switch-toggled-on-track-color($color);
+    @include mdc-switch-toggled-on-thumb-color($color);
+  }
+
+  @include mdc-switch-toggled-on-ripple-color($color, $query);
 }
 
-@mixin mdc-switch-toggled-off-color($color) {
-  @include mdc-switch-toggled-off-track-color($color);
-  @include mdc-switch-toggled-off-thumb-color($color);
-  @include mdc-switch-toggled-off-ripple-color($color);
+@mixin mdc-switch-toggled-off-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  @include mdc-feature-targets($feat-color) {
+    @include mdc-switch-toggled-off-track-color($color);
+    @include mdc-switch-toggled-off-thumb-color($color);
+  }
+
+  @include mdc-switch-toggled-off-ripple-color($color, $query);
 }
 
 @mixin mdc-switch-toggled-on-track-color($color) {
@@ -130,9 +144,9 @@
   }
 }
 
-@mixin mdc-switch-toggled-on-ripple-color($color) {
+@mixin mdc-switch-toggled-on-ripple-color($color, $query: mdc-feature-all()) {
   &.mdc-switch--checked .mdc-switch__thumb-underlay {
-    @include mdc-states($color);
+    @include mdc-states($color, false, $query);
   }
 }
 
@@ -150,9 +164,9 @@
   }
 }
 
-@mixin mdc-switch-toggled-off-ripple-color($color) {
+@mixin mdc-switch-toggled-off-ripple-color($color, $query: mdc-feature-all()) {
   &:not(.mdc-switch--checked) .mdc-switch__thumb-underlay {
-    @include mdc-states($color);
+    @include mdc-states($color, false, $query);
   }
 }
 
@@ -194,11 +208,11 @@
   $feat-color: mdc-feature-create-target($query, color);
   $feat-structure: mdc-feature-create-target($query, structure);
 
+  @include mdc-ripple-surface($query);
   @include mdc-states($mdc-switch-baseline-theme-color, false, $query);
 
   @include mdc-feature-targets($feat-structure) {
     @include mdc-rtl-reflexive-position(left, $mdc-switch-tap-target-initial-position);
-    @include mdc-ripple-surface();
     @include mdc-ripple-radius-unbounded;
 
     display: flex;
@@ -220,29 +234,28 @@
   }
 }
 
-@mixin mdc-switch__native-control_($query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  @include mdc-feature-targets($feat-structure) {
-    @include mdc-rtl-reflexive-position(left, 0);
-
-    position: absolute;
-    top: 0;
-    width: $mdc-switch-native-control-width;
-    height: $mdc-switch-tap-target-size;
-    margin: 0;
-    opacity: 0;
-    cursor: pointer;
-    pointer-events: auto;
-  }
+@mixin mdc-switch__native-control_ {
+  @include mdc-rtl-reflexive-position(left, 0);
+
+  position: absolute;
+  top: 0;
+  width: $mdc-switch-native-control-width;
+  height: $mdc-switch-tap-target-size;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  pointer-events: auto;
 }
 
 @mixin mdc-switch__thumb_($query: mdc-feature-all()) {
   $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-color: mdc-feature-create-target($query, color);
 
   @include mdc-feature-targets($feat-structure) {
     @include mdc-elevation(2);
+  }
 
+  @include mdc-feature-targets($feat-structure) {
     box-sizing: border-box;
     width: $mdc-switch-thumb-diameter;
     height: $mdc-switch-thumb-diameter;
diff --git a/test/scss/feature-targeting.scss b/test/scss/feature-targeting.scss
index ec602d85bde..2bf02541866 100644
--- a/test/scss/feature-targeting.scss
+++ b/test/scss/feature-targeting.scss
@@ -6,6 +6,7 @@
 @import "@material/radio/mixins";
 @import "@material/ripple/mixins";
 @import "@material/typography/mixins";
+@import "@material/switch/mixins";
 
 .mdc-test {
   // Button
@@ -53,4 +54,8 @@
   @include mdc-typography-overflow-ellipsis($query: mdc-feature-any());
   @include mdc-typography-baseline-top(0, $query: mdc-feature-any());
   @include mdc-typography-baseline-bottom(0, $query: mdc-feature-any());
+
+  // Switch
+  @include mdc-switch-toggled-on-color(on-surface, $query: mdc-feature-any());
+  @include mdc-switch-toggled-off-color(on-surface, $query: mdc-feature-any());
 }

From 5f6ad5f60f9cc71bb09b9c71f83605f1fcb7a8fc Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Thu, 31 Jan 2019 22:44:07 +0100
Subject: [PATCH 3/6] refactor: apply latest style API changes

---
 packages/mdc-switch/_mixins.scss | 76 ++++++++++++++++----------------
 test/scss/feature-targeting.scss |  6 +++
 2 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/packages/mdc-switch/_mixins.scss b/packages/mdc-switch/_mixins.scss
index bc7c7784bd3..aae8a196cb4 100644
--- a/packages/mdc-switch/_mixins.scss
+++ b/packages/mdc-switch/_mixins.scss
@@ -37,7 +37,6 @@
   // postcss-bem-linter: define switch
 
   $feat-animation: mdc-feature-create-target($query, animation);
-  $feat-color: mdc-feature-create-target($query, color);
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-ripple-common($query);
@@ -47,13 +46,10 @@
       @include mdc-switch-base_;
     }
 
-    @include mdc-feature-targets($feat-color) {
-      @include mdc-switch-toggled-on-track-color($mdc-switch-baseline-theme-color);
-      @include mdc-switch-toggled-on-thumb-color($mdc-switch-baseline-theme-color);
-      @include mdc-switch-toggled-off-track-color($mdc-switch-toggled-off-track-color);
-      @include mdc-switch-toggled-off-thumb-color($mdc-switch-toggled-off-thumb-color);
-    }
-
+    @include mdc-switch-toggled-on-track-color($mdc-switch-baseline-theme-color, $query);
+    @include mdc-switch-toggled-on-thumb-color($mdc-switch-baseline-theme-color, $query);
+    @include mdc-switch-toggled-off-track-color($mdc-switch-toggled-off-track-color, $query);
+    @include mdc-switch-toggled-off-thumb-color($mdc-switch-toggled-off-thumb-color, $query);
     @include mdc-switch-toggled-off-ripple-color($mdc-switch-toggled-off-ripple-color, $query);
   }
 
@@ -109,38 +105,36 @@
 }
 
 @mixin mdc-switch-toggled-on-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
-
-  @include mdc-feature-targets($feat-color) {
-    @include mdc-switch-toggled-on-track-color($color);
-    @include mdc-switch-toggled-on-thumb-color($color);
-  }
-
+  @include mdc-switch-toggled-on-track-color($color, $query);
+  @include mdc-switch-toggled-on-thumb-color($color, $query);
   @include mdc-switch-toggled-on-ripple-color($color, $query);
 }
 
 @mixin mdc-switch-toggled-off-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
-
-  @include mdc-feature-targets($feat-color) {
-    @include mdc-switch-toggled-off-track-color($color);
-    @include mdc-switch-toggled-off-thumb-color($color);
-  }
-
+  @include mdc-switch-toggled-off-track-color($color, $query);
+  @include mdc-switch-toggled-off-thumb-color($color, $query);
   @include mdc-switch-toggled-off-ripple-color($color, $query);
 }
 
-@mixin mdc-switch-toggled-on-track-color($color) {
+@mixin mdc-switch-toggled-on-track-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   &.mdc-switch--checked .mdc-switch__track {
-    @include mdc-theme-prop(background-color, $color);
-    @include mdc-theme-prop(border-color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(background-color, $color);
+      @include mdc-theme-prop(border-color, $color);
+    }
   }
 }
 
-@mixin mdc-switch-toggled-on-thumb-color($color) {
+@mixin mdc-switch-toggled-on-thumb-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   &.mdc-switch--checked .mdc-switch__thumb {
-    @include mdc-theme-prop(background-color, $color);
-    @include mdc-theme-prop(border-color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(background-color, $color);
+      @include mdc-theme-prop(border-color, $color);
+    }
   }
 }
 
@@ -150,17 +144,25 @@
   }
 }
 
-@mixin mdc-switch-toggled-off-track-color($color) {
+@mixin mdc-switch-toggled-off-track-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   &:not(.mdc-switch--checked) .mdc-switch__track {
-    @include mdc-theme-prop(background-color, $color);
-    @include mdc-theme-prop(border-color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(background-color, $color);
+      @include mdc-theme-prop(border-color, $color);
+    }
   }
 }
 
-@mixin mdc-switch-toggled-off-thumb-color($color) {
+@mixin mdc-switch-toggled-off-thumb-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   &:not(.mdc-switch--checked) .mdc-switch__thumb {
-    @include mdc-theme-prop(background-color, $color);
-    @include mdc-theme-prop(border-color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(background-color, $color);
+      @include mdc-theme-prop(border-color, $color);
+    }
   }
 }
 
@@ -210,10 +212,10 @@
 
   @include mdc-ripple-surface($query);
   @include mdc-states($mdc-switch-baseline-theme-color, false, $query);
+  @include mdc-ripple-radius-unbounded(100%, $query);
 
   @include mdc-feature-targets($feat-structure) {
     @include mdc-rtl-reflexive-position(left, $mdc-switch-tap-target-initial-position);
-    @include mdc-ripple-radius-unbounded;
 
     display: flex;
     position: absolute;
@@ -251,9 +253,7 @@
   $feat-structure: mdc-feature-create-target($query, structure);
   $feat-color: mdc-feature-create-target($query, color);
 
-  @include mdc-feature-targets($feat-structure) {
-    @include mdc-elevation(2);
-  }
+  @include mdc-elevation($z-value: 2, $query: $query);
 
   @include mdc-feature-targets($feat-structure) {
     box-sizing: border-box;
diff --git a/test/scss/feature-targeting.scss b/test/scss/feature-targeting.scss
index 2bf02541866..dd55a7d20f1 100644
--- a/test/scss/feature-targeting.scss
+++ b/test/scss/feature-targeting.scss
@@ -58,4 +58,10 @@
   // Switch
   @include mdc-switch-toggled-on-color(on-surface, $query: mdc-feature-any());
   @include mdc-switch-toggled-off-color(on-surface, $query: mdc-feature-any());
+  @include mdc-switch-toggled-on-ripple-color(on-surface, $query: mdc-feature-any());
+  @include mdc-switch-toggled-off-ripple-color(on-surface, $query: mdc-feature-any());
+  @include mdc-switch-toggled-on-track-color(on-surface, $query: mdc-feature-any());
+  @include mdc-switch-toggled-on-thumb-color(on-surface, $query: mdc-feature-any());
+  @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());
 }

From 92d05f92bc3818c770c4b86d1a60f15bcf036bd7 Mon Sep 17 00:00:00 2001
From: "Kenneth G. Franqueiro" <kfranqueiro@users.noreply.github.com>
Date: Fri, 1 Feb 2019 13:40:43 -0500
Subject: [PATCH 4/6] WIP Fix lint

---
 packages/mdc-switch/_mixins.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/mdc-switch/_mixins.scss b/packages/mdc-switch/_mixins.scss
index aae8a196cb4..79905e3e89f 100644
--- a/packages/mdc-switch/_mixins.scss
+++ b/packages/mdc-switch/_mixins.scss
@@ -29,10 +29,10 @@
 @import "./functions";
 @import "./variables";
 
-
 //
 // Public
 //
+
 @mixin mdc-switch($query: mdc-feature-all()) {
   // postcss-bem-linter: define switch
 
@@ -96,7 +96,7 @@
       }
 
       .mdc-switch__native-control {
-        @include mdc-switch__native-control-disabled_
+        @include mdc-switch__native-control-disabled_;
       }
     }
   }
@@ -267,7 +267,6 @@
   }
 }
 
-
 // Checked state
 
 @mixin mdc-switch__track-checked_ {
@@ -291,7 +290,6 @@
   }
 }
 
-
 // Disabled state
 
 @mixin mdc-switch--disabled-base_ {

From ef3944375cae4fcb887ce6b7643fda7f08ef0bf7 Mon Sep 17 00:00:00 2001
From: "Kenneth G. Franqueiro" <kfranqueiro@users.noreply.github.com>
Date: Fri, 1 Feb 2019 13:41:25 -0500
Subject: [PATCH 5/6] WIP Add baseline switch mixin to test

---
 test/scss/feature-targeting.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/scss/feature-targeting.scss b/test/scss/feature-targeting.scss
index dd55a7d20f1..4709fe6f453 100644
--- a/test/scss/feature-targeting.scss
+++ b/test/scss/feature-targeting.scss
@@ -56,6 +56,7 @@
   @include mdc-typography-baseline-bottom(0, $query: mdc-feature-any());
 
   // Switch
+  @include mdc-switch($query: mdc-feature-any());
   @include mdc-switch-toggled-on-color(on-surface, $query: mdc-feature-any());
   @include mdc-switch-toggled-off-color(on-surface, $query: mdc-feature-any());
   @include mdc-switch-toggled-on-ripple-color(on-surface, $query: mdc-feature-any());

From ebb33ba7608b536bda5448b1a16cd09c07d54c8e Mon Sep 17 00:00:00 2001
From: "Kenneth G. Franqueiro" <kfranqueiro@users.noreply.github.com>
Date: Fri, 1 Feb 2019 13:42:48 -0500
Subject: [PATCH 6/6] WIP Move radius-unbounded above states

---
 packages/mdc-switch/_mixins.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mdc-switch/_mixins.scss b/packages/mdc-switch/_mixins.scss
index 79905e3e89f..e1833c0b936 100644
--- a/packages/mdc-switch/_mixins.scss
+++ b/packages/mdc-switch/_mixins.scss
@@ -211,8 +211,8 @@
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-ripple-surface($query);
-  @include mdc-states($mdc-switch-baseline-theme-color, false, $query);
   @include mdc-ripple-radius-unbounded(100%, $query);
+  @include mdc-states($mdc-switch-baseline-theme-color, false, $query);
 
   @include mdc-feature-targets($feat-structure) {
     @include mdc-rtl-reflexive-position(left, $mdc-switch-tap-target-initial-position);