feat(ripple): Expose mdc-states-opacity; fix press fallback (#2402)

packages/mdc-ripple/README.md

@@ -44,7 +44,7 @@ CSS Class | Description
 `mdc-ripple-surface--primary` | Sets the ripple color to the theme primary color
 `mdc-ripple-surface--accent` | Sets the ripple color to the theme secondary color
 
-### Sass Mixins
+### Sass APIs
 
 In order to fully style the ripple effect for different states (hover/focus/pressed), the following mixins must be included:
 
@@ -115,6 +115,12 @@ Mixin | Description
 
 > _NOTE_: `$has-nested-focusable-element` defaults to `false` but should be set to `true` if the component contains a focusable element (e.g. an input) inside the root element.
 
+#### Sass Functions
+
+Function | Description
+--- | ---
+`mdc-states-opacity($color, $state)` | Returns the appropriate default opacity to apply to the given color in the given state (hover, focus, press, selected, or activated)
+
 ### `MDCRipple`
 
 The `MDCRipple` JavaScript component allows for programmatic activation / deactivation of the ripple, for interdependent interaction between

packages/mdc-ripple/_functions.scss

@@ -0,0 +1,48 @@
+//
+// Copyright 2016 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "@material/theme/functions";
+@import "@material/theme/variables"; // for mdc-theme-prop-value
+@import "./variables";
+
+//
+// Public
+//
+
+@function mdc-states-opacity($color, $state) {
+  $opacity-map: mdc-states-opacities_($color);
+
+  @if not map-has-key($opacity-map, $state) {
+    @error "Invalid state: '#{$state}'. Choose one of: #{map-keys($opacity-map)}";
+  }
+
+  @return map-get($opacity-map, $state);
+}
+
+//
+// Private
+//
+
+@function mdc-states-opacities_($color) {
+  $color-value: mdc-theme-prop-value($color);
+  $opacity-map: if(
+    mdc-theme-tone($color-value) == "light",
+    $mdc-ripple-light-ink-opacities,
+    $mdc-ripple-dark-ink-opacities
+  );
+
+  @return $opacity-map;
+}

packages/mdc-ripple/_keyframes.scss

@@ -42,14 +42,14 @@
     }
 
     to {
-      opacity: var(--mdc-ripple-fg-opacity, map-get($mdc-ripple-dark-ink-opacities, "press"));
+      opacity: var(--mdc-ripple-fg-opacity, 0);
     }
   }
 
   @keyframes mdc-ripple-fg-opacity-out {
     from {
       animation-timing-function: linear;
-      opacity: var(--mdc-ripple-fg-opacity, map-get($mdc-ripple-dark-ink-opacities, "press"));
+      opacity: var(--mdc-ripple-fg-opacity, 0);
     }
 
     to {

packages/mdc-ripple/_mixins.scss

@@ -15,8 +15,8 @@
 //
 
 @import "@material/animation/variables";
-@import "@material/theme/functions";
 @import "@material/theme/mixins";
+@import "./functions";
 @import "./variables";
 
 @mixin mdc-ripple-surface() {
@@ -145,8 +145,7 @@
 // Simple mixin for activated states which automatically selects opacity values based on whether the ink color is
 // light or dark.
 @mixin mdc-states-activated($color, $has-nested-focusable-element: false) {
-  $opacity-map: mdc-states-opacities_($color);
-  $activated-opacity: map-get($opacity-map, "activated");
+  $activated-opacity: mdc-states-opacity($color, activated);
 
   &--activated {
     // Stylelint seems to think that '&' qualifies as a type selector here?
@@ -162,8 +161,7 @@
 // Simple mixin for selected states which automatically selects opacity values based on whether the ink color is
 // light or dark.
 @mixin mdc-states-selected($color, $has-nested-focusable-element: false) {
-  $opacity-map: mdc-states-opacities_($color);
-  $selected-opacity: map-get($opacity-map, "selected");
+  $selected-opacity: mdc-states-opacity($color, selected);
 
   &--selected {
     // stylelint-disable-next-line selector-max-type
@@ -219,26 +217,12 @@
   }
 }
 
-//
-// Private
-//
-
-@function mdc-states-opacities_($color) {
-  $color-value: mdc-theme-prop-value($color);
-  $opacity-map: if(
-    mdc-theme-tone($color-value) == "light",
-    $mdc-ripple-light-ink-opacities,
-    $mdc-ripple-dark-ink-opacities
-  );
-
-  @return $opacity-map;
-}
-
 @mixin mdc-states-interactions_($color, $has-nested-focusable-element, $opacity-modifier: 0) {
-  $opacity-map: mdc-states-opacities_($color);
-
   @include mdc-states-base-color($color);
-  @include mdc-states-hover-opacity(map-get($opacity-map, "hover") + $opacity-modifier);
-  @include mdc-states-focus-opacity(map-get($opacity-map, "focus") + $opacity-modifier, $has-nested-focusable-element);
-  @include mdc-states-press-opacity(map-get($opacity-map, "press") + $opacity-modifier);
+  @include mdc-states-hover-opacity(mdc-states-opacity($color, hover) + $opacity-modifier);
+  @include mdc-states-focus-opacity(
+    mdc-states-opacity($color, focus) + $opacity-modifier,
+    $has-nested-focusable-element
+  );
+  @include mdc-states-press-opacity(mdc-states-opacity($color, press) + $opacity-modifier);
 }