From a7ee8a80b8827a3b064ee80850331d0a87182236 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Tue, 24 May 2022 15:58:32 +0000 Subject: [PATCH] fix(multiple): fix focus and hover styles for mdc-checkbox and mdc-radio (#24930) * fix(multiple): fix focus and hover styles for mdc-checkbox and mdc-radio * fix(multiple): address feedback (cherry picked from commit 5f5f9d6560dd4627eacff4b2afb60920e0d8a56f) --- .../mdc-checkbox/_checkbox-private.scss | 13 ++++++++++--- .../mdc-checkbox/_checkbox-theme.scss | 6 +++--- .../mdc-checkbox/checkbox.scss | 10 ++++++++++ .../mdc-list/_list-option-theme.scss | 4 ++-- src/material-experimental/mdc-list/_list-theme.scss | 6 +++--- .../mdc-radio/_radio-theme.scss | 10 ++++++++-- src/material-experimental/mdc-radio/radio.scss | 8 ++++++++ 7 files changed, 44 insertions(+), 13 deletions(-) diff --git a/src/material-experimental/mdc-checkbox/_checkbox-private.scss b/src/material-experimental/mdc-checkbox/_checkbox-private.scss index 0a46f6a2a62c..bef1373bf9cb 100644 --- a/src/material-experimental/mdc-checkbox/_checkbox-private.scss +++ b/src/material-experimental/mdc-checkbox/_checkbox-private.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use 'sass:color'; +@use '@angular/material' as mat; @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme; @use '@material/theme/theme-color' as mdc-theme-color; @@ -22,10 +23,16 @@ $private-checkbox-theme-config: map.merge(mdc-checkbox-theme.$light-theme, ( // Mixin that includes the checkbox theme styles with a given palette. // By default, the MDC checkbox always uses the `secondary` palette. -@mixin private-checkbox-styles-with-color($color, $mdc-color) { +@mixin private-checkbox-styles-with-color($color-config, $color, $mdc-color) { + $is-dark: map-get($color-config, is-dark); $on-surface: mdc-theme-color.prop-value(on-surface); $border-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$border-color)); $disabled-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$disabled-color)); + $active-border-color: if( + $is-dark, + mat.get-color-from-palette(mat.$gray-palette, 200), + mat.get-color-from-palette(mat.$gray-palette, 900) + ); @include mdc-checkbox-theme.theme(( selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdc-color}), @@ -34,8 +41,8 @@ $private-checkbox-theme-config: map.merge(mdc-checkbox-theme.$light-theme, ( selected-hover-icon-color: $color, selected-icon-color: $color, selected-pressed-icon-color: $color, - unselected-focus-icon-color: $color, - unselected-hover-icon-color: $color, + unselected-focus-icon-color: $active-border-color, + unselected-hover-icon-color: $active-border-color, disabled-selected-icon-color: $disabled-color, disabled-unselected-icon-color: $disabled-color, diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss index d520043ca765..aad94e98dd52 100644 --- a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss +++ b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss @@ -52,17 +52,17 @@ // class for accent and warn style, and applying the appropriate overrides below. Since we // don't use MDC's ripple, we also need to set the color for our replacement ripple. &.mat-primary { - @include checkbox-private.private-checkbox-styles-with-color($primary, primary); + @include checkbox-private.private-checkbox-styles-with-color($config, $primary, primary); @include _selected-ripple-colors($primary, primary); } &.mat-accent { - @include checkbox-private.private-checkbox-styles-with-color($accent, secondary); + @include checkbox-private.private-checkbox-styles-with-color($config, $accent, secondary); @include _selected-ripple-colors($accent, secondary); } &.mat-warn { - @include checkbox-private.private-checkbox-styles-with-color($warn, error); + @include checkbox-private.private-checkbox-styles-with-color($config, $warn, error); @include _selected-ripple-colors($warn, error); } } diff --git a/src/material-experimental/mdc-checkbox/checkbox.scss b/src/material-experimental/mdc-checkbox/checkbox.scss index f5c263ba5a69..eb5cf8e82bbf 100644 --- a/src/material-experimental/mdc-checkbox/checkbox.scss +++ b/src/material-experimental/mdc-checkbox/checkbox.scss @@ -90,6 +90,16 @@ display: none; } + // We don't inherit the border focus style from MDC since we don't use their ripple. + // Instead we need to replicate it here. + .mdc-checkbox__native-control { + &:focus:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true]) { + & ~ .mdc-checkbox__background { + border-color: var(--mdc-checkbox-unselected-focus-icon-color, black); + } + } + } + @include _ripple-base-styles(); } diff --git a/src/material-experimental/mdc-list/_list-option-theme.scss b/src/material-experimental/mdc-list/_list-option-theme.scss index 7a6ccdcee09f..5faeb2372468 100644 --- a/src/material-experimental/mdc-list/_list-option-theme.scss +++ b/src/material-experimental/mdc-list/_list-option-theme.scss @@ -6,9 +6,9 @@ // Mixin that overrides the selected item and checkbox colors for list options. By // default, the MDC list uses the `primary` color for list items. The MDC checkbox // inside list options by default uses the `primary` color too. -@mixin private-list-option-color-override($color, $mdc-color) { +@mixin private-list-option-color-override($color-config, $color, $mdc-color) { & .mdc-list-item__start, & .mdc-list-item__end { - @include checkbox-private.private-checkbox-styles-with-color($color, $mdc-color); + @include checkbox-private.private-checkbox-styles-with-color($color-config, $color, $mdc-color); } } diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/src/material-experimental/mdc-list/_list-theme.scss index 9b662c6f1c3d..97d9950fba52 100644 --- a/src/material-experimental/mdc-list/_list-theme.scss +++ b/src/material-experimental/mdc-list/_list-theme.scss @@ -21,13 +21,13 @@ @include mdc-list.without-ripple($query: mdc-helpers.$mat-theme-styles-query); .mat-mdc-list-option { - @include list-option-theme.private-list-option-color-override($primary, primary); + @include list-option-theme.private-list-option-color-override($config, $primary, primary); } .mat-mdc-list-option.mat-accent { - @include list-option-theme.private-list-option-color-override($accent, secondary); + @include list-option-theme.private-list-option-color-override($config, $accent, secondary); } .mat-mdc-list-option.mat-warn { - @include list-option-theme.private-list-option-color-override($warn, error); + @include list-option-theme.private-list-option-color-override($config, $warn, error); } } } diff --git a/src/material-experimental/mdc-radio/_radio-theme.scss b/src/material-experimental/mdc-radio/_radio-theme.scss index 934d3125f75c..fe2a98e9f2fe 100644 --- a/src/material-experimental/mdc-radio/_radio-theme.scss +++ b/src/material-experimental/mdc-radio/_radio-theme.scss @@ -26,6 +26,12 @@ @include mdc-helpers.mat-using-mdc-theme($config) { $on-surface: rgba(mdc-theme-color.$on-surface, 0.54); + $is-dark: map-get($config, is-dark); + $active-border-color: if( + $is-dark, + mat.get-color-from-palette(mat.$gray-palette, 200), + mat.get-color-from-palette(mat.$gray-palette, 900) + ); .mat-mdc-radio-button { @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query); @@ -34,8 +40,8 @@ // MDC applies a separate opacity to disabled buttons. disabled-selected-icon-color: mdc-theme-color.$on-surface, disabled-unselected-icon-color: mdc-theme-color.$on-surface, - unselected-focus-icon-color: $on-surface, - unselected-hover-icon-color: $on-surface, + unselected-focus-icon-color: $active-border-color, + unselected-hover-icon-color: $active-border-color, unselected-icon-color: $on-surface, unselected-pressed-icon-color: $on-surface, )); diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss index 4f3e381d8d93..96a98e11104a 100644 --- a/src/material-experimental/mdc-radio/radio.scss +++ b/src/material-experimental/mdc-radio/radio.scss @@ -75,6 +75,14 @@ transition: none !important; } } + + // We don't inherit the border focus style from MDC since we don't use their ripple. + // Instead we need to replicate it here. + .mdc-radio .mdc-radio__native-control:focus:enabled:not(:checked) { + & ~ .mdc-radio__background .mdc-radio__outer-circle { + border-color: var(--mdc-radio-unselected-focus-icon-color, black); + } + } } // Element used to provide a larger tap target for users on touch devices.