From 32ea962ea3296eae50f36ff089b6a957edb4882f Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Mon, 4 Dec 2017 11:07:02 -0500 Subject: [PATCH] feat(icon-toggle): Use new mdc-states mixin for icon-toggle styles --- demos/icon-toggle.html | 83 +------------------ demos/icon-toggle.scss | 66 +++++++++++++++ packages/mdc-icon-toggle/mdc-icon-toggle.scss | 23 +---- 3 files changed, 73 insertions(+), 99 deletions(-) diff --git a/demos/icon-toggle.html b/demos/icon-toggle.html index 00186a62b81..dea426ce013 100644 --- a/demos/icon-toggle.html +++ b/demos/icon-toggle.html @@ -25,83 +25,6 @@ -
@@ -258,7 +181,7 @@

Additional Color Combinations

favorite_border -

Light icon on background

+
Light icon on background
@@ -272,7 +195,7 @@

Additional Color Combinations

favorite_border
-

Dark icon on background

+
Dark icon on background
@@ -286,7 +209,7 @@

Additional Color Combinations

favorite_border
-

Custom color on dark background

+
Custom color on dark background
diff --git a/demos/icon-toggle.scss b/demos/icon-toggle.scss index 3e7d154f6f9..654f66ec4a8 100644 --- 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 index 0f1f400d6a4..943a44486b3 100644 --- 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 {