Skip to content

Commit cd4b85d

Browse files
crisbetocrisbeto
committed
refactor(multiple): remove external ripple values
Reworks a few components that were getting the values for the ripples externally. (cherry picked from commit 0de61f9)
1 parent 8b16803 commit cd4b85d

File tree

8 files changed

+26
-73
lines changed

8 files changed

+26
-73
lines changed

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@use 'sass:map';
21
@use 'sass:meta';
3-
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
42
@use '../../token-utils';
53
@use '../../../theming/theming';
64
@use '../../../theming/inspection';
@@ -19,10 +17,6 @@ $prefix: (mat, fab-small);
1917
// Tokens that can be configured through Angular Material's color theming API.
2018
@function get-color-tokens($theme) {
2119
$is-dark: inspection.get-theme-type($theme) == dark;
22-
$ripple-opacities: if($is-dark,
23-
mdc-ripple-theme.$light-ink-opacities,
24-
mdc-ripple-theme.$dark-ink-opacities
25-
);
2620

2721
@return (
2822
// Color of icons and text projected into a FAB.
@@ -38,13 +32,13 @@ $prefix: (mat, fab-small);
3832
ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
3933

4034
// Opacity of the ripple when the button is hovered.
41-
hover-state-layer-opacity: map.get($ripple-opacities, hover),
35+
hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
4236

4337
// Opacity of the ripple when the button is focused.
44-
focus-state-layer-opacity: map.get($ripple-opacities, focus),
38+
focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
4539

4640
// Opacity of the ripple when the button is pressed.
47-
pressed-state-layer-opacity: map.get($ripple-opacities, press),
41+
pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
4842

4943
// MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
5044
// Background color of the container when the FAB is disabled.

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@use 'sass:map';
21
@use 'sass:meta';
3-
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
42
@use '../../token-utils';
53
@use '../../../theming/theming';
64
@use '../../../theming/inspection';
@@ -19,10 +17,6 @@ $prefix: (mat, fab);
1917
// Tokens that can be configured through Angular Material's color theming API.
2018
@function get-color-tokens($theme) {
2119
$is-dark: inspection.get-theme-type($theme) == dark;
22-
$ripple-opacities: if($is-dark,
23-
mdc-ripple-theme.$light-ink-opacities,
24-
mdc-ripple-theme.$dark-ink-opacities
25-
);
2620

2721
@return (
2822
// Color of icons and text projected into a FAB.
@@ -38,13 +32,13 @@ $prefix: (mat, fab);
3832
ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
3933

4034
// Opacity of the ripple when the button is hovered.
41-
hover-state-layer-opacity: map.get($ripple-opacities, hover),
35+
hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
4236

4337
// Opacity of the ripple when the button is focused.
44-
focus-state-layer-opacity: map.get($ripple-opacities, focus),
38+
focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
4539

4640
// Opacity of the ripple when the button is pressed.
47-
pressed-state-layer-opacity: map.get($ripple-opacities, press),
41+
pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
4842

4943
// MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
5044
// Background color of the container when the FAB is disabled.

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@use 'sass:map';
21
@use 'sass:meta';
3-
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
42
@use '../../token-utils';
53
@use '../../../theming/theming';
64
@use '../../../theming/inspection';
@@ -29,10 +27,6 @@ $prefix: (mat, filled-button);
2927
// Tokens that can be configured through Angular Material's color theming API.
3028
@function get-color-tokens($theme) {
3129
$is-dark: inspection.get-theme-type($theme) == dark;
32-
$ripple-opacities: if($is-dark,
33-
mdc-ripple-theme.$light-ink-opacities,
34-
mdc-ripple-theme.$dark-ink-opacities
35-
);
3630

3731
@return (
3832
// Color of the element that shows the hover, focus and pressed states.
@@ -45,13 +39,13 @@ $prefix: (mat, filled-button);
4539
ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
4640

4741
// Opacity of the ripple when the button is hovered.
48-
hover-state-layer-opacity: map.get($ripple-opacities, hover),
42+
hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
4943

5044
// Opacity of the ripple when the button is focused.
51-
focus-state-layer-opacity: map.get($ripple-opacities, focus),
45+
focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
5246

5347
// Opacity of the ripple when the button is pressed.
54-
pressed-state-layer-opacity: map.get($ripple-opacities, press),
48+
pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
5549
);
5650
}
5751

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@use 'sass:map';
21
@use 'sass:meta';
3-
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
42
@use '../../token-utils';
53
@use '../../../theming/theming';
64
@use '../../../theming/inspection';
@@ -18,10 +16,6 @@ $prefix: (mat, icon-button);
1816
// Tokens that can be configured through Angular Material's color theming API.
1917
@function get-color-tokens($theme) {
2018
$is-dark: inspection.get-theme-type($theme) == dark;
21-
$ripple-opacities: if($is-dark,
22-
mdc-ripple-theme.$light-ink-opacities,
23-
mdc-ripple-theme.$dark-ink-opacities
24-
);
2519

2620
@return (
2721
// Color of the element that shows the hover, focus and pressed states.
@@ -34,13 +28,13 @@ $prefix: (mat, icon-button);
3428
ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
3529

3630
// Opacity of the ripple when the button is hovered.
37-
hover-state-layer-opacity: map.get($ripple-opacities, hover),
31+
hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
3832

3933
// Opacity of the ripple when the button is focused.
40-
focus-state-layer-opacity: map.get($ripple-opacities, focus),
34+
focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
4135

4236
// Opacity of the ripple when the button is pressed.
43-
pressed-state-layer-opacity: map.get($ripple-opacities, press),
37+
pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
4438
);
4539
}
4640

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@use 'sass:map';
21
@use 'sass:meta';
3-
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
42
@use '../../token-utils';
53
@use '../../../theming/theming';
64
@use '../../../theming/inspection';
@@ -28,10 +26,6 @@ $prefix: (mat, outlined-button);
2826
// Tokens that can be configured through Angular Material's color theming API.
2927
@function get-color-tokens($theme) {
3028
$is-dark: inspection.get-theme-type($theme) == dark;
31-
$ripple-opacities: if($is-dark,
32-
mdc-ripple-theme.$light-ink-opacities,
33-
mdc-ripple-theme.$dark-ink-opacities
34-
);
3529

3630
@return (
3731
// Color of the element that shows the hover, focus and pressed states.
@@ -44,13 +38,13 @@ $prefix: (mat, outlined-button);
4438
ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
4539

4640
// Opacity of the ripple when the button is hovered.
47-
hover-state-layer-opacity: map.get($ripple-opacities, hover),
41+
hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
4842

4943
// Opacity of the ripple when the button is focused.
50-
focus-state-layer-opacity: map.get($ripple-opacities, focus),
44+
focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
5145

5246
// Opacity of the ripple when the button is pressed.
53-
pressed-state-layer-opacity: map.get($ripple-opacities, press),
47+
pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
5448
);
5549
}
5650

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@use 'sass:map';
21
@use 'sass:meta';
3-
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
42
@use '../../token-utils';
53
@use '../../../theming/theming';
64
@use '../../../theming/inspection';
@@ -29,10 +27,6 @@ $prefix: (mat, protected-button);
2927
// Tokens that can be configured through Angular Material's color theming API.
3028
@function get-color-tokens($theme) {
3129
$is-dark: inspection.get-theme-type($theme) == dark;
32-
$ripple-opacities: if($is-dark,
33-
mdc-ripple-theme.$light-ink-opacities,
34-
mdc-ripple-theme.$dark-ink-opacities
35-
);
3630

3731
@return (
3832
// Color of the element that shows the hover, focus and pressed states.
@@ -45,13 +39,13 @@ $prefix: (mat, protected-button);
4539
ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
4640

4741
// Opacity of the ripple when the button is hovered.
48-
hover-state-layer-opacity: map.get($ripple-opacities, hover),
42+
hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
4943

5044
// Opacity of the ripple when the button is focused.
51-
focus-state-layer-opacity: map.get($ripple-opacities, focus),
45+
focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
5246

5347
// Opacity of the ripple when the button is pressed.
54-
pressed-state-layer-opacity: map.get($ripple-opacities, press),
48+
pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
5549
);
5650
}
5751

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@use 'sass:map';
21
@use 'sass:meta';
3-
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
42
@use '../../token-utils';
53
@use '../../../theming/theming';
64
@use '../../../theming/inspection';
@@ -31,10 +29,6 @@ $prefix: (mat, text-button);
3129
// Tokens that can be configured through Angular Material's color theming API.
3230
@function get-color-tokens($theme) {
3331
$is-dark: inspection.get-theme-type($theme) == dark;
34-
$ripple-opacities: if($is-dark,
35-
mdc-ripple-theme.$light-ink-opacities,
36-
mdc-ripple-theme.$dark-ink-opacities
37-
);
3832

3933
@return (
4034
// Color of the element that shows the hover, focus and pressed states.
@@ -47,13 +41,13 @@ $prefix: (mat, text-button);
4741
ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
4842

4943
// Opacity of the ripple when the button is hovered.
50-
hover-state-layer-opacity: map.get($ripple-opacities, hover),
44+
hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
5145

5246
// Opacity of the ripple when the button is focused.
53-
focus-state-layer-opacity: map.get($ripple-opacities, focus),
47+
focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
5448

5549
// Opacity of the ripple when the button is pressed.
56-
pressed-state-layer-opacity: map.get($ripple-opacities, press),
50+
pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
5751
);
5852
}
5953

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
@use 'sass:map';
2-
@use '@material/animation' as mdc-animation;
31
@use '@material/switch/switch' as mdc-switch;
42
@use '@material/switch/switch-theme' as mdc-switch-theme;
5-
@use '@material/ripple' as mdc-ripple;
6-
@use '../core/style/layout-common';
73
@use '@material/theme/custom-properties' as mdc-custom-properties;
4+
@use '../core/style/layout-common';
85
@use '../core/tokens/m2/mat/switch' as tokens-mat-switch;
96
@use '../core/tokens/m2/mdc/switch' as tokens-mdc-switch;
107
@use '../core/tokens/token-utils';
@@ -86,14 +83,14 @@
8683
}
8784

8885
.mdc-switch:hover #{mdc-switch.$ripple-target}::after {
89-
opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);
90-
transition: mdc-animation.enter(opacity, 75ms);
86+
opacity: 0.04;
87+
transition: 75ms opacity cubic-bezier(0, 0, 0.2, 1);
9188
}
9289

9390
// Needs a little more specificity so the :hover styles don't override it.
9491
&.mat-mdc-slide-toggle-focused {
9592
.mdc-switch #{mdc-switch.$ripple-target}::after {
96-
opacity: map.get(mdc-ripple.$dark-ink-opacities, focus);
93+
opacity: 0.12;
9794
}
9895

9996
// For slide-toggles render the focus indicator when we know
@@ -103,10 +100,8 @@
103100
}
104101
}
105102

106-
// We use an Angular Material ripple rather than an MDC ripple due to size concerns, so we need to
107-
// style it appropriately.
108103
.mat-ripple-element {
109-
opacity: map.get(mdc-ripple.$dark-ink-opacities, press);
104+
opacity: 0.12;
110105
}
111106

112107
// Slide-toggle components have to set `border-radius: 50%` in order to support density scaling

0 commit comments

Comments
 (0)