feat(icon-toggle): Use new mdc-states mixin for icon-toggle styles (#…

…1685)
material-components · Dec 5, 2017 · 75eb1bc · 75eb1bc
1 parent 28b97a5
commit 75eb1bc
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 99 deletions.
diff --git a/demos/icon-toggle.html b/demos/icon-toggle.html
@@ -25,83 +25,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
-    <style>
-      .mdc-theme--dark {
-        background: #303030;
-      }
-
-      .mdc-theme--dark:not(.demo-color-combo) {
-        padding-bottom: 1rem;
-      }
-
-      #demo-color-combos {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-      }
-
-      .demo-wrapper {
-        margin-left: 1rem;
-      }
-
-      .example {
-        display: flex;
-        flex-flow: row wrap;
-        align-content: left;
-        justify-content: left;
-      }
-
-      .toggle-example {
-        min-width: 240px;
-        padding: 24px;
-        margin: 24px;
-      }
-
-      .example h2 {
-        font-size: 1.3em;
-        margin-bottom: 0.8em;
-        margin-top: 0.8em;
-      }
-
-      .demo-color-combo {
-        width: 250px;
-        padding: 1rem;
-        border-radius: 4px;
-        display: inline-flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        margin-right: 8px;
-      }
-
-      .demo-color-combo > p {
-        margin: 0;
-      }
-
-      #light-on-bg {
-        background-color: #3e82f7;
-      }
-      #light-on-bg .mdc-icon-toggle {
-        color: white;
-      }
-      #light-on-bg .mdc-icon-toggle.mdc-ripple-upgraded::before,
-      #light-on-bg .mdc-icon-toggle.mdc-ripple-upgraded::after {
-        background-color: rgba(255, 255, 255, .3);
-      }
-
-      #dark-on-bg {
-        background-color: #00bcd6;
-      }
-
-      #custom-on-dark .mdc-icon-toggle {
-        color: #de442c;
-      }
-      #custom-on-dark .mdc-icon-toggle.mdc-ripple-upgraded::before,
-      #custom-on-dark .mdc-icon-toggle.mdc-ripple-upgraded::after {
-        /* #de442c - opacity .16 */
-        background-color: rgba(222, 68, 44, .26);
-      }
-    </style>
   </head>
   <body class="mdc-typography">
     <header class="mdc-toolbar mdc-toolbar--fixed">
@@ -258,7 +181,7 @@ <h2>Additional Color Combinations</h2>
                   favorite_border
                 </i>
               </div>
-              <p class="mdc-theme--text-primary-on-primary">Light icon on background</p>
+              <div class="mdc-theme--text-primary-on-primary">Light icon on background</div>
             </div>
             <div id="dark-on-bg" class="demo-color-combo">
               <div class="mdc-theme--primary">
@@ -272,7 +195,7 @@ <h2>Additional Color Combinations</h2>
                   favorite_border
                 </i>
               </div>
-              <p>Dark icon on background</p>
+              <div>Dark icon on background</div>
             </div>
             <div id="custom-on-dark" class="demo-color-combo mdc-theme--dark">
               <div>
@@ -286,7 +209,7 @@ <h2>Additional Color Combinations</h2>
                   favorite_border
                 </i>
               </div>
-              <p class="mdc-theme--text-primary-on-dark">Custom color on dark background</p>
+              <div class="mdc-theme--text-primary-on-dark">Custom color on dark background</div>
             </div>
           </div>
         </div>

diff --git a/demos/icon-toggle.scss b/demos/icon-toggle.scss
@@ -16,3 +16,69 @@
 
 @import "./common";
 @import "../packages/mdc-icon-toggle/mdc-icon-toggle";
+@import "../packages/mdc-ripple/mixins";
+
+.mdc-theme--dark {
+  background: #303030;
+}
+
+.demo-wrapper {
+  margin-left: 1rem;
+}
+
+.example {
+  display: flex;
+  flex-flow: row wrap;
+  align-content: left;
+  justify-content: left;
+}
+
+.toggle-example {
+  min-width: 240px;
+  padding: 24px;
+  margin: 24px;
+}
+
+#demo-color-combos {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.demo-color-combo {
+  width: 250px;
+  padding: 1rem;
+  border-radius: 4px;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+}
+
+#light-on-bg {
+  background-color: #3e82f7;
+}
+#light-on-bg .mdc-icon-toggle {
+  color: white;
+  @include mdc-states-base-color(white);
+  @include mdc-states-hover-opacity(.1);
+  @include mdc-states-focus-opacity(.3);
+  @include mdc-states-press-opacity(.4);
+}
+
+#dark-on-bg {
+  background-color: #00bcd6;
+}
+#dark-on-bg .mdc-icon-toggle {
+  color: black;
+  @include mdc-states(black);
+}
+
+#custom-on-dark .mdc-icon-toggle {
+  color: #de442c;
+  @include mdc-states-base-color(#de442c);
+  @include mdc-states-hover-opacity(.09);
+  @include mdc-states-focus-opacity(.26);
+  @include mdc-states-press-opacity(.35);
+}
diff --git a/packages/mdc-icon-toggle/mdc-icon-toggle.scss b/packages/mdc-icon-toggle/mdc-icon-toggle.scss
@@ -23,26 +23,11 @@
 .mdc-icon-toggle {
   @include mdc-theme-prop(color, text-secondary-on-light);
   @include mdc-ripple-surface;
-  // NOTE: The spec denotes specific opacity values to use for different styles of icon buttons,
-  // either "light", "dark", or "color". Because ripples are made up of two distinct elements,
-  // we need to use an opacity value such that when two elements of the same color and opacity are
-  // layered on top of one another, they create the opacity specified in the spec.
-  // This is done by using the painter's compositing algorithm:
-  //
-  // alpha[desired] = alpha[a] + alpha[b](1 - alpha[a]).
-  //
-  // Because both alpha values are the same this reduces to:
-  //
-  // alpha[desired] = alpha[a] + alpha[a](1 - alpha[a]).
-  //
-  // We simply solve this quadratic equation for the nonnegative root between [0, 1].
-  // E.g. for black 12% opacity:
-  // https://www.wolframalpha.com/input/?i=x+%2B+x(1+-+x)+%3D+.12,+x+%3C%3D+1,+x+%3E%3D+0
-  @include mdc-ripple-color(black, .062);
   @include mdc-ripple-radius;
+  @include mdc-states(black);
 
   @include mdc-theme-dark(".mdc-icon-toggle", true) {
-    @include mdc-ripple-color(white, .16);
+    @include mdc-states(white);
   }
 
   display: flex;
@@ -75,12 +60,12 @@
 
 .mdc-icon-toggle--primary {
   @include mdc-theme-prop(color, primary);
-  @include mdc-ripple-color(primary, .14);
+  @include mdc-states(primary);
 }
 
 .mdc-icon-toggle--accent {
   @include mdc-theme-prop(color, secondary);
-  @include mdc-ripple-color(secondary, .14);
+  @include mdc-states(secondary);
 }
 
 .mdc-icon-toggle--disabled {