refactor(multiple): remove external ripple values

Reworks a few components that were getting the values for the ripples externally.

(cherry picked from commit 0de61f9)

Author: crisbeto

src/material/core/tokens/m2/mat/_fab-small.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -19,10 +17,6 @@ $prefix: (mat, fab-small);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of icons and text projected into a FAB.
@@ -38,13 +32,13 @@ $prefix: (mat, fab-small);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
     // Background color of the container when the FAB is disabled.

src/material/core/tokens/m2/mat/_fab.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -19,10 +17,6 @@ $prefix: (mat, fab);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of icons and text projected into a FAB.
@@ -38,13 +32,13 @@ $prefix: (mat, fab);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
     // Background color of the container when the FAB is disabled.

src/material/core/tokens/m2/mat/_filled-button.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -29,10 +27,6 @@ $prefix: (mat, filled-button);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -45,13 +39,13 @@ $prefix: (mat, filled-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

src/material/core/tokens/m2/mat/_icon-button.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -18,10 +16,6 @@ $prefix: (mat, icon-button);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -34,13 +28,13 @@ $prefix: (mat, icon-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

src/material/core/tokens/m2/mat/_outlined-button.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -28,10 +26,6 @@ $prefix: (mat, outlined-button);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -44,13 +38,13 @@ $prefix: (mat, outlined-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

src/material/core/tokens/m2/mat/_protected-button.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -29,10 +27,6 @@ $prefix: (mat, protected-button);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -45,13 +39,13 @@ $prefix: (mat, protected-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

src/material/core/tokens/m2/mat/_text-button.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -31,10 +29,6 @@ $prefix: (mat, text-button);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -47,13 +41,13 @@ $prefix: (mat, text-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

src/material/slide-toggle/slide-toggle.scss

@@ -1,10 +1,7 @@
-@use 'sass:map';
-@use '@material/animation' as mdc-animation;
 @use '@material/switch/switch' as mdc-switch;
 @use '@material/switch/switch-theme' as mdc-switch-theme;
-@use '@material/ripple' as mdc-ripple;
-@use '../core/style/layout-common';
 @use '@material/theme/custom-properties' as mdc-custom-properties;
+@use '../core/style/layout-common';
 @use '../core/tokens/m2/mat/switch' as tokens-mat-switch;
 @use '../core/tokens/m2/mdc/switch' as tokens-mdc-switch;
 @use '../core/tokens/token-utils';
@@ -86,14 +83,14 @@
   }
 
   .mdc-switch:hover #{mdc-switch.$ripple-target}::after {
-    opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);
-    transition: mdc-animation.enter(opacity, 75ms);
+    opacity: 0.04;
+    transition: 75ms opacity cubic-bezier(0, 0, 0.2, 1);
   }
 
   // Needs a little more specificity so the :hover styles don't override it.
   &.mat-mdc-slide-toggle-focused {
     .mdc-switch #{mdc-switch.$ripple-target}::after {
-      opacity: map.get(mdc-ripple.$dark-ink-opacities, focus);
+      opacity: 0.12;
     }
 
     // For slide-toggles render the focus indicator when we know
@@ -103,10 +100,8 @@
     }
   }
 
-  // We use an Angular Material ripple rather than an MDC ripple due to size concerns, so we need to
-  // style it appropriately.
   .mat-ripple-element {
-    opacity: map.get(mdc-ripple.$dark-ink-opacities, press);
+    opacity: 0.12;
   }
 
   // Slide-toggle components have to set `border-radius: 50%` in order to support density scaling