diff --git a/packages/mdc-ripple/_variables.scss b/packages/mdc-ripple/_variables.scss index 74160408590..5dc2a21afbe 100644 --- a/packages/mdc-ripple/_variables.scss +++ b/packages/mdc-ripple/_variables.scss @@ -25,10 +25,15 @@ $mdc-ripple-fade-out-duration: 150ms !default; $mdc-ripple-translate-duration: 225ms !default; $mdc-states-wash-duration: 15ms !default; +// Notes on states: +// * focus takes precedence over hover (i.e. if an element is both focused and hovered, only focus value applies) +// * press state applies to a separate pseudo-element, so it has an additive effect on top of other states +// * selected/activated are applied additively to hover/focus via calculations at preprocessing time + $mdc-ripple-dark-ink-opacities: ( hover: .04, focus: .12, - press: .16, + press: .12, selected: .08, activated: .12 ) !default; @@ -36,7 +41,7 @@ $mdc-ripple-dark-ink-opacities: ( $mdc-ripple-light-ink-opacities: ( hover: .08, focus: .24, - press: .32, + press: .24, selected: .16, activated: .24 ) !default;