material_components_web-sass 0.23.0 → 0.24.0

data/vendor/assets/stylesheets/@material/icon-toggle/mdc-icon-toggle.scss

@@ -22,7 +22,7 @@
 
 .mdc-icon-toggle {
   @include mdc-theme-prop(color, text-secondary-on-light);
-  @include mdc-ripple-base;
+  @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
@@ -38,12 +38,11 @@
   // 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-bg((pseudo: "::before", opacity: .062));
-  @include mdc-ripple-fg((pseudo: "::after", opacity: .062));
+  @include mdc-ripple-color(black, .062);
+  @include mdc-ripple-radius;
 
   @include mdc-theme-dark(".mdc-icon-toggle", true) {
-    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
-    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
+    @include mdc-ripple-color(white, .16);
   }
 
   display: flex;
@@ -76,14 +75,12 @@
 
 .mdc-icon-toggle--primary {
   @include mdc-theme-prop(color, primary);
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
+  @include mdc-ripple-color(primary, .14);
 }
 
 .mdc-icon-toggle--accent {
   @include mdc-theme-prop(color, secondary);
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: secondary, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: secondary, opacity: .14));
+  @include mdc-ripple-color(secondary, .14);
 }
 
 .mdc-icon-toggle--disabled {

data/vendor/assets/stylesheets/@material/layout-grid/_mixins.scss

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import "./variables";
+
 // returns the lower grid boundary or null if the smallest grid is selected
 @function mdc-layout-grid-breakpoint-min($size) {
   @if not map-has-key($mdc-layout-grid-columns, $size) {

data/vendor/assets/stylesheets/@material/list/mdc-list.scss

@@ -154,9 +154,9 @@ a.mdc-list-item {
 // stylelint-enable selector-max-type,selector-no-qualifying-type
 
 .mdc-list-item.mdc-ripple-upgraded {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before"));
-  @include mdc-ripple-fg((pseudo: "::after"));
+  @include mdc-ripple-surface;
+  @include mdc-ripple-color;
+  @include mdc-ripple-radius;
   @include mdc-rtl-reflexive-position(left, $mdc-list-side-padding * -1);
 
   position: relative;
@@ -171,8 +171,7 @@ a.mdc-list-item {
   }
 
   @include mdc-theme-dark(".mdc-list") {
-    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .12));
-    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .12));
+    @include mdc-ripple-color(white, .12);
   }
 }
 

data/vendor/assets/stylesheets/@material/radio/_functions.scss

@@ -0,0 +1,26 @@
+//
+// 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/animation/functions";
+@import "./variables";
+
+@function mdc-radio-enter($name) {
+  @return mdc-animation-enter($name, $mdc-radio-transition-duration);
+}
+
+@function mdc-radio-exit($name) {
+  @return mdc-animation-exit-temporary($name, $mdc-radio-transition-duration);
+}

data/vendor/assets/stylesheets/@material/radio/_mixins.scss

@@ -0,0 +1,45 @@
+//
+// 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/variables";
+@import "./variables";
+
+@mixin mdc-radio-unchecked-stroke-color($color) {
+  // stylelint-disable-next-line selector-max-specificity
+  .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
+    @include mdc-theme-prop(border-color, $color);
+  }
+}
+
+@mixin mdc-radio-checked-stroke-color($color) {
+  // stylelint-disable-next-line selector-max-specificity
+  .mdc-radio__native-control:enabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
+    @include mdc-theme-prop(border-color, $color);
+  }
+}
+
+@mixin mdc-radio-ink-color($color) {
+  // stylelint-disable-next-line selector-max-specificity
+  .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-radio-focus-indicator-color($color) {
+  .mdc-radio__background::before {
+    @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
+  }
+}

data/vendor/assets/stylesheets/@material/radio/_variables.scss

@@ -0,0 +1,23 @@
+//
+// 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.
+//
+
+$mdc-radio-touch-area: 40px;
+$mdc-radio-ui-size: 20px;
+$mdc-radio-ui-pct: percentage($mdc-radio-ui-size / $mdc-radio-touch-area);
+$mdc-radio-transition-duration: 120ms;
+$mdc-radio-ripple-opacity: .14;
+$mdc-radio-ripple-radius: 50%;
+$mdc-radio-baseline-theme-color: secondary;

data/vendor/assets/stylesheets/@material/radio/mdc-radio.scss

@@ -17,25 +17,24 @@
 @import "@material/animation/functions";
 @import "@material/ripple/mixins";
 @import "@material/theme/mixins";
-
-$mdc-radio-touch-area: 40px;
-$mdc-radio-ui-size: 20px;
-$mdc-radio-ui-pct: percentage($mdc-radio-ui-size / $mdc-radio-touch-area);
-$mdc-radio-transition-duration: 120ms;
-
-@function mdc-radio-enter($name) {
-  @return mdc-animation-enter($name, $mdc-radio-transition-duration);
-}
-
-@function mdc-radio-exit($name) {
-  @return mdc-animation-exit-temporary($name, $mdc-radio-transition-duration);
-}
+@import "./functions";
+@import "./mixins";
+@import "./variables";
 
 // postcss-bem-linter: define radio
 .mdc-radio {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
+  @include mdc-radio-unchecked-stroke-color(text-secondary-on-light);
+
+  @include mdc-theme-dark {
+    @include mdc-radio-unchecked-stroke-color(text-secondary-on-dark);
+  }
+
+  @include mdc-radio-checked-stroke-color($mdc-radio-baseline-theme-color);
+  @include mdc-radio-ink-color($mdc-radio-baseline-theme-color);
+  @include mdc-radio-focus-indicator-color($mdc-radio-baseline-theme-color);
+  @include mdc-ripple-surface;
+  @include mdc-ripple-color($mdc-radio-baseline-theme-color, $mdc-radio-ripple-opacity);
+  @include mdc-ripple-radius($mdc-radio-ripple-radius);
 
   display: inline-block;
   position: relative;
@@ -47,14 +46,6 @@ $mdc-radio-transition-duration: 120ms;
   cursor: pointer;
   will-change: opacity, transform, border-color, background-color, color;
 
-  &::before,
-  &::after {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
   // stylelint-disable plugin/selector-bem-pattern
   &.mdc-ripple-upgraded {
     .mdc-radio__background::before {
@@ -73,8 +64,6 @@ $mdc-radio-transition-duration: 120ms;
     height: $mdc-radio-ui-pct;
 
     &::before {
-      @include mdc-theme-prop(background-color, primary, $edgeOptOut: true);
-
       position: absolute;
       top: 0;
       left: 0;
@@ -90,12 +79,6 @@ $mdc-radio-transition-duration: 120ms;
   }
 
   &__outer-circle {
-    @include mdc-theme-prop(border-color, text-secondary-on-light);
-
-    @include mdc-theme-dark(".mdc-radio") {
-      @include mdc-theme-prop(border-color, text-secondary-on-dark);
-    }
-
     position: absolute;
     top: 0;
     left: 0;
@@ -109,12 +92,6 @@ $mdc-radio-transition-duration: 120ms;
   }
 
   &__inner-circle {
-    @include mdc-theme-prop(background-color, text-secondary-on-light);
-
-    @include mdc-theme-dark(".mdc-radio") {
-      @include mdc-theme-prop(background-color, text-secondary-on-dark);
-    }
-
     position: absolute;
     top: 0;
     left: 0;
@@ -162,13 +139,7 @@ $mdc-radio-transition-duration: 120ms;
 
 .mdc-radio__native-control:checked {
   + .mdc-radio__background {
-    .mdc-radio__outer-circle {
-      @include mdc-theme-prop(border-color, primary);
-    }
-
     .mdc-radio__inner-circle {
-      @include mdc-theme-prop(background-color, primary);
-
       transform: scale(.5);
       transition: mdc-radio-enter(transform), mdc-radio-enter(background-color);
     }

data/vendor/assets/stylesheets/@material/ripple/_keyframes.scss

@@ -14,43 +14,45 @@
 // limitations under the License.
 //
 
-/** MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them. */
+// MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them.
 
 @import "@material/animation/variables";
 
-@keyframes mdc-ripple-fg-radius-in {
-  from {
-    animation-timing-function: $mdc-animation-standard-curve-timing-function;
-    // NOTE: For these keyframes, we do not need custom property fallbacks because they are only
-    // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure
-    // that custom properties are supported within the browser before adding this class, we can
-    // safely use them without a fallback.
-    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
+@mixin mdc-ripple-keyframes_ {
+  @keyframes mdc-ripple-fg-radius-in {
+    from {
+      animation-timing-function: $mdc-animation-standard-curve-timing-function;
+      // NOTE: For these keyframes, we do not need custom property fallbacks because they are only
+      // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure
+      // that custom properties are supported within the browser before adding this class, we can
+      // safely use them without a fallback.
+      transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
+    }
+
+    to {
+      transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+    }
   }
 
-  to {
-    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-  }
-}
-
-@keyframes mdc-ripple-fg-opacity-in {
-  from {
-    animation-timing-function: linear;
-    opacity: 0;
-  }
+  @keyframes mdc-ripple-fg-opacity-in {
+    from {
+      animation-timing-function: linear;
+      opacity: 0;
+    }
 
-  to {
-    opacity: 1;
+    to {
+      opacity: 1;
+    }
   }
-}
 
-@keyframes mdc-ripple-fg-opacity-out {
-  from {
-    animation-timing-function: linear;
-    opacity: 1;
-  }
+  @keyframes mdc-ripple-fg-opacity-out {
+    from {
+      animation-timing-function: linear;
+      opacity: 1;
+    }
 
-  to {
-    opacity: 0;
+    to {
+      opacity: 0;
+    }
   }
 }

data/vendor/assets/stylesheets/@material/ripple/_mixins.scss

@@ -18,19 +18,34 @@
 @import "@material/theme/variables";
 @import "./keyframes";
 
-@function mdc-ripple-default-config_() {
-  @return (
-    pseudo: null,
-    radius: 100%,
-    base-color: black,
-    opacity: .06,
-    theme-style: null
-  );
+// Ensure that styles needed by any component using MDC Ripple are emitted, but only once.
+// (Every component using MDC Ripple imports these mixins, but doesn't necessarily import mdc-ripple.scss.)
+
+// This variable is not intended to be overridden externally; it uses !default to avoid being reset
+// every time this file is imported.
+$mdc-ripple-common-styles-emitted_: false !default;
+
+@if not $mdc-ripple-common-styles-emitted_ {
+  $mdc-ripple-common-styles-emitted_: true;
+
+  @include mdc-ripple-keyframes_;
+
+  // Styles used to detect buggy behavior of CSS custom properties in Edge.
+  // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
+  // This is included in _mixins.scss rather than mdc-ripple.scss so that it will be
+  // present for other components which rely on ripple as well as mdc-ripple itself.
+  .mdc-ripple-surface--test-edge-var-bug {
+    --mdc-ripple-surface-test-edge-var: 1px solid #000;
+
+    visibility: hidden;
+
+    &::before {
+      border: var(--mdc-ripple-surface-test-edge-var);
+    }
+  }
 }
 
-@mixin mdc-ripple-base() {
-  --mdc-ripple-surface-width: 0;
-  --mdc-ripple-surface-height: 0;
+@mixin mdc-ripple-surface() {
   --mdc-ripple-fg-size: 0;
   --mdc-ripple-left: 0;
   --mdc-ripple-top: 0;
@@ -41,6 +56,28 @@
   will-change: transform, opacity;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
+  &::before,
+  &::after {
+    position: absolute;
+    transition: opacity 250ms linear;
+    border-radius: 50%;
+    pointer-events: none;
+    content: "";
+  }
+}
+
+@mixin mdc-ripple-color($color: black, $opacity: .06) {
+  // Opacity styles are here (rather than in mdc-ripple-surface) to ensure that opacity is re-initialized for
+  // cases where this mixin is used to override another inherited use of itself,
+  // without needing to re-include mdc-ripple-surface.
+  &::before,
+  &::after {
+    @include mdc-ripple-color_($color, $opacity);
+
+    opacity: 0;
+  }
+
+  // Note: when :active is applied, :focus is already applied, which will effectively double the effect.
   &:not(.mdc-ripple-upgraded) {
     &:hover::before,
     &:focus::before,
@@ -49,209 +86,93 @@
       opacity: .6;
     }
   }
-}
-
-@mixin mdc-ripple-color_($config) {
-  $base-color: map-get($config, base-color);
-  $opacity: map-get($config, opacity);
-  $theme-style: map-get($config, theme-style);
-
-  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
-  @if ($theme-style) {
-    $theme-value: map-get($mdc-theme-property-values, $theme-style);
-
-    /* @alternate */
-    $css-var: $theme-value;
-    $css-var: var(--mdc-theme-#{$theme-style}, $theme-value);
-
-    background-color: rgba($theme-value, $opacity);
 
-    // See: https://drafts.csswg.org/css-color/#modifying-colors
-    // While this is currently unsupported as of now, it will begin to work by default as browsers
-    // begin to implement the CSS 4 color spec.
-    @supports (background-color: color(green a(10%))) {
-      background-color: color(#{$css-var} a(#{percentage($opacity)}));
-    }
-  } @else {
-    background-color: rgba($base-color, $opacity);
+  &.mdc-ripple-upgraded--background-focused::before {
+    opacity: .99999;
   }
 
-  // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
-}
-
-@mixin mdc-ripple-bg-base_($config) {
-  $radius: map-get($config, radius);
-
-  @include mdc-ripple-color_($config);
+  &.mdc-ripple-upgraded--background-active-fill::before {
+    transition-duration: 120ms;
+    opacity: 1;
+  }
 
-  position: absolute;
-  top: calc(50% - #{$radius});
-  left: calc(50% - #{$radius});
-  width: $radius * 2;
-  height: $radius * 2;
-  transition: opacity 250ms linear;
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
-}
+  // Foreground ripple styles
 
-@mixin mdc-ripple-bg($config: ()) {
-  $config: map-merge(mdc-ripple-default-config_(), $config);
-  $pseudo: map-get($config, pseudo);
-  $radius: map-get($config, radius);
+  &.mdc-ripple-upgraded::after {
+    opacity: 0;
+  }
 
-  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
-  @if ($pseudo) {
-    &#{$pseudo} {
-      @include mdc-ripple-bg-base_($config);
+  &.mdc-ripple-upgraded--foreground-activation::after {
+    animation: 300ms mdc-ripple-fg-radius-in forwards, 83ms mdc-ripple-fg-opacity-in forwards;
+  }
 
-      content: "";
-    }
-  } @else {
-    @include mdc-ripple-bg-base_($config);
+  &.mdc-ripple-upgraded--foreground-deactivation::after {
+    animation: 83ms mdc-ripple-fg-opacity-out;
+    // Retain transform from mdc-ripple-fg-radius-in activation
+    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
   }
-  // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
+}
 
-  &.mdc-ripple-upgraded#{$pseudo} {
+@mixin mdc-ripple-radius($radius: 100%) {
+  &::before,
+  &::after {
     top: calc(50% - #{$radius});
     left: calc(50% - #{$radius});
     width: $radius * 2;
     height: $radius * 2;
-
-    /* @alternate */
-    transform: scale(0);
-    transform: scale(var(--mdc-ripple-fg-scale, 0));
   }
 
-  &.mdc-ripple-upgraded--background-focused#{$pseudo} {
-    opacity: .99999;
-  }
+  // Background ripple styles
 
-  &.mdc-ripple-upgraded--background-active-fill#{$pseudo} {
-    transition-duration: 120ms;
-    opacity: 1;
+  &.mdc-ripple-upgraded::before {
+    top: calc(50% - #{$radius});
+    left: calc(50% - #{$radius});
+    width: $radius * 2;
+    height: $radius * 2;
+    transform: scale(var(--mdc-ripple-fg-scale, 0));
   }
 
-  &.mdc-ripple-upgraded--unbounded#{$pseudo} {
-    /* @alternate */
-    top: calc(50% - #{$radius / 2});
+  &.mdc-ripple-upgraded--unbounded::before {
     top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));
-
-    /* @alternate */
-    left: calc(50% - #{$radius / 2});
     left: var(--mdc-ripple-left, calc(50% - #{$radius / 2}));
-
-    /* @alternate */
-    width: $radius;
     width: var(--mdc-ripple-fg-size, $radius);
-
-    /* @alternate */
-    height: $radius;
     height: var(--mdc-ripple-fg-size, $radius);
-
-    /* @alternate */
-    transform: scale(0);
     transform: scale(var(--mdc-ripple-fg-scale, 0));
   }
-}
-
-@mixin mdc-ripple-fg-base_($config) {
-  $radius: map-get($config, radius);
-
-  @include mdc-ripple-color_($config);
-
-  position: absolute;
-  top: calc(50% - #{$radius});
-  left: calc(50% - #{$radius});
-  width: $radius * 2;
-  height: $radius * 2;
-  transition: opacity 250ms linear;
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
-}
-
-@mixin mdc-ripple-fg($config: ()) {
-  $config: map-merge(mdc-ripple-default-config_(), $config);
-  $pseudo: map-get($config, pseudo);
-  $radius: map-get($config, radius);
-
-  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
-  @if ($pseudo) {
-    &#{$pseudo} {
-      @include mdc-ripple-fg-base_($config);
-
-      content: "";
-    }
-  } @else {
-    @include mdc-ripple-fg-base_($config);
-  }
-  // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
-
-  &.mdc-ripple-upgraded {
-    &#{$pseudo} {
-      top: 0;
-      left: 0;
-
-      /* @alternate */
-      width: $radius;
-      width: var(--mdc-ripple-fg-size, $radius);
-
-      /* @alternate */
-      height: $radius;
-      height: var(--mdc-ripple-fg-size, $radius);
-      transform: scale(0);
-      transform-origin: center center;
-      opacity: 0;
-    }
-  }
 
-  &:not(.mdc-ripple-upgraded--unbounded)#{$pseudo} {
-    transform-origin: center center;
-  }
-
-  &.mdc-ripple-upgraded--unbounded#{$pseudo} {
-    /* @alternate */
+  // Foreground ripple styles
+  &.mdc-ripple-upgraded::after {
     top: 0;
-    top: var(--mdc-ripple-top, 0);
-
-    /* @alternate */
     left: 0;
-    left: var(--mdc-ripple-left, 0);
-
-    /* @alternate */
-    width: $radius;
     width: var(--mdc-ripple-fg-size, $radius);
-
-    /* @alternate */
-    height: $radius;
     height: var(--mdc-ripple-fg-size, $radius);
     transform: scale(0);
     transform-origin: center center;
   }
 
-  &.mdc-ripple-upgraded--foreground-activation#{$pseudo} {
-    animation: 300ms mdc-ripple-fg-radius-in forwards, 83ms mdc-ripple-fg-opacity-in forwards;
-  }
-
-  &.mdc-ripple-upgraded--foreground-deactivation#{$pseudo} {
-    animation: 83ms mdc-ripple-fg-opacity-out;
-    // Retain transform from mdc-ripple-fg-radius-in activation
-    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+  &.mdc-ripple-upgraded--unbounded::after {
+    top: var(--mdc-ripple-top, 0);
+    left: var(--mdc-ripple-left, 0);
   }
 }
 
-// Styles used to detect buggy behavior of CSS custom properties in Edge.
-// See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
-// This is included in _mixins.scss rather than mdc-ripple.scss so that it will be
-// present for other components which rely on ripple as well as mdc-ripple itself.
-
-.mdc-ripple-surface--test-edge-var-bug {
-  --mdc-ripple-surface-test-edge-var: 1px solid #000;
+@mixin mdc-ripple-color_($color, $opacity) {
+  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
+  @if type-of($color) == "color" {
+    background-color: rgba($color, $opacity);
+  } @else {
+    // Assume $color is a theme property name
+    $theme-value: map-get($mdc-theme-property-values, $color);
+    $css-var: var(--mdc-theme-#{$color}, $theme-value);
 
-  visibility: hidden;
+    background-color: rgba($theme-value, $opacity);
 
-  &::before {
-    border: var(--mdc-ripple-surface-test-edge-var);
+    // See: https://drafts.csswg.org/css-color/#modifying-colors
+    // While this is currently unsupported as of now, it will begin to work by default as browsers
+    // begin to implement the CSS 4 color spec.
+    @supports (background-color: color(green a(10%))) {
+      background-color: color(#{$css-var} a(#{percentage($opacity)}));
+    }
   }
+  // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
 }