diff --git a/src/material-experimental/mdc-radio/_radio-theme.scss b/src/material-experimental/mdc-radio/_radio-theme.scss index b69642f2c6b9..934d3125f75c 100644 --- a/src/material-experimental/mdc-radio/_radio-theme.scss +++ b/src/material-experimental/mdc-radio/_radio-theme.scss @@ -15,8 +15,7 @@ selected-pressed-icon-color: $color-palette, )); - // TODO(crisbeto): this should be included by MDC's `theme-styles`, but it isn't currently. - @include mdc-radio-theme.focus-indicator-color($color-palette); + --mat-mdc-radio-checked-ripple-color: #{$color-palette}; } @mixin color($config-or-theme) { @@ -41,6 +40,8 @@ unselected-pressed-icon-color: $on-surface, )); + --mat-mdc-radio-ripple-color: #{mdc-theme-color.prop-value(on-surface)}; + &.mat-primary { @include _color-palette($primary); } diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss index 94e0f3424d01..4f3e381d8d93 100644 --- a/src/material-experimental/mdc-radio/radio.scss +++ b/src/material-experimental/mdc-radio/radio.scss @@ -3,6 +3,7 @@ @use '@material/radio/radio-theme' as mdc-radio-theme; @use '@material/form-field' as mdc-form-field; @use '@material/touch-target' as mdc-touch-target; +@use '@material/ripple' as mdc-ripple; @use '../mdc-helpers/mdc-helpers'; @use '../../cdk/a11y'; @use '../../material/core/style/layout-common'; @@ -33,9 +34,27 @@ unselected-pressed-state-layer-color: null, unselected-pressed-state-layer-opacity: null, ))); + + // TODO(crisbeto): this should be included by MDC's `theme-styles`, but it isn't currently. + @include mdc-radio-theme.focus-indicator-color( + var(--mat-mdc-radio-ripple-color, transparent)); + } + + // MDC's hover indication comes from their ripple which we don't use. + &:hover .mdc-radio__native-control:not([disabled]):not(:focus) { + & ~ .mdc-radio__background::before { + opacity: map.get(mdc-ripple.$dark-ink-opacities, hover); + transform: scale(1); + } } } + &.mat-mdc-radio-checked { + // TODO(crisbeto): this should be included by MDC's `theme-styles`, but it isn't currently. + @include mdc-radio-theme.focus-indicator-color( + var(--mat-mdc-radio-checked-ripple-color, transparent)); + } + // This is necessary because we do not depend on MDC's ripple, but have our own that should be // positioned correctly. This can be removed once we start using MDC's ripple implementation. .mat-radio-ripple { diff --git a/src/material-experimental/mdc-radio/radio.ts b/src/material-experimental/mdc-radio/radio.ts index 61e727a0009c..4fbbbc7e0023 100644 --- a/src/material-experimental/mdc-radio/radio.ts +++ b/src/material-experimental/mdc-radio/radio.ts @@ -90,6 +90,7 @@ export class MatRadioGroup extends _MatRadioGroupBase { '[class.mat-primary]': 'color === "primary"', '[class.mat-accent]': 'color === "accent"', '[class.mat-warn]': 'color === "warn"', + '[class.mat-mdc-radio-checked]': 'checked', '[class._mat-animation-noopable]': '_noopAnimations', // Needs to be removed since it causes some a11y issues (see #21266). '[attr.tabindex]': 'null',