Skip to content

Commit

Permalink
feat(checkbox): Support state-layer-color theming for GM2 checkboxes
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 575022043
  • Loading branch information
material-web-copybara authored and copybara-github committed Oct 19, 2023
1 parent 0ad1283 commit 9cec940
Showing 1 changed file with 25 additions and 4 deletions.
29 changes: 25 additions & 4 deletions packages/mdc-checkbox/_checkbox-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,10 @@ $forced-colors-theme: (
}

@include ripple-color(
$color: map.get($theme, unselected-hover-state-layer-color),
$color-map: (
hover: map.get($theme, unselected-hover-state-layer-color),
press: map.get($theme, unselected-pressed-state-layer-color),
),
$opacity-map: (
hover: map.get($theme, unselected-hover-state-layer-opacity),
focus: map.get($theme, unselected-focus-state-layer-opacity),
Expand Down Expand Up @@ -633,16 +636,30 @@ $light-theme-deprecated: (

/// Sets ripple color when checkbox is not in checked state.
@mixin ripple-color(
$color,
$color: null,
$color-map: null,
$opacity-map: null,
$query: feature-targeting.all()
) {
@if $color == null {
// deprecated approach - always use 'hover' color.
$color: map.get($color-map, hover);
}

@include ripple-theme.states(
$color: $color,
$opacity-map: $opacity-map,
$query: $query,
$ripple-target: $ripple-target
);

@if $color-map {
@include ripple-theme.states-colors(
$color-map: $color-map,
$query: $query,
$ripple-target: $ripple-target
);
}
}

/// Sets focus indicator color when checkbox is in checked state.
Expand Down Expand Up @@ -703,7 +720,9 @@ $light-theme-deprecated: (
/// @access private
///
@mixin if-unmarked-enabled_ {
.mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate='true'])
.mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not(
[data-indeterminate='true']
)
~ {
@content;
}
Expand All @@ -718,7 +737,9 @@ $light-theme-deprecated: (
// Note: we must use `[disabled]` instead of `:disabled` below because Edge does not always recalculate the style
// property when the `:disabled` pseudo-class is followed by a sibling combinator. See:
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231/
.mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate='true'])
.mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not(
[data-indeterminate='true']
)
~ {
@content;
}
Expand Down

0 comments on commit 9cec940

Please sign in to comment.