diff --git a/src/material/checkbox/_checkbox-common.scss b/src/material/checkbox/_checkbox-common.scss index 20828a77e811..ea2b03748564 100644 --- a/src/material/checkbox/_checkbox-common.scss +++ b/src/material/checkbox/_checkbox-common.scss @@ -2,6 +2,7 @@ @use '@angular/cdk'; @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox; @use '../core/tokens/token-utils'; +@use '../core/style/vendor-prefixes'; $_path-length: 29.7833385; $_transition-duration: 90ms; @@ -64,6 +65,10 @@ $_fallback-size: 40px; .mdc-checkbox--disabled { cursor: default; pointer-events: none; + + @include cdk.high-contrast(active, off) { + opacity: 0.5; + } } .mdc-checkbox__background { @@ -82,6 +87,9 @@ $_fallback-size: 40px; transition: background-color $_transition-duration $_exit-curve, border-color $_transition-duration $_exit-curve; + // Force browser to show background-color when using the print function + @include vendor-prefixes.color-adjust(exact); + @include token-utils.use-tokens($prefix, $slots) { $layer-size: token-utils.get-token-variable(state-layer-size, $fallback: $_fallback-size); $offset: calc((#{$layer-size} - #{$_icon-size}) / 2); @@ -167,6 +175,10 @@ $_fallback-size: 40px; // Always apply the color since the element becomes `opacity: 0` // when unchecked. This makes the animation look better. @include token-utils.create-token-slot(color, selected-checkmark-color); + + @include cdk.high-contrast(active, off) { + color: CanvasText; + } } } @@ -175,6 +187,10 @@ $_fallback-size: 40px; &, &.mat-mdc-checkbox-disabled-interactive { .mdc-checkbox__checkmark { @include token-utils.create-token-slot(color, disabled-selected-checkmark-color); + + @include cdk.high-contrast(active, off) { + color: CanvasText; + } } } } diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss index e21fcfc69279..5126480836e4 100644 --- a/src/material/checkbox/checkbox.scss +++ b/src/material/checkbox/checkbox.scss @@ -1,6 +1,4 @@ -@use '@angular/cdk'; @use '../core/style/layout-common'; -@use '../core/style/vendor-prefixes'; @use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox; @use '../core/tokens/token-utils'; @use './checkbox-common'; @@ -17,11 +15,6 @@ // Disable the browser's tap highlight since we indicate state with the ripple instead. -webkit-tap-highlight-color: transparent; - .mdc-checkbox__background { - // Force browser to show background-color when using the print function - @include vendor-prefixes.color-adjust(exact); - } - // Clicking the label toggles the checkbox, but MDC does not include any styles that inform the // user of this. Therefore we add the pointer cursor on top of MDC's styles. label { @@ -69,17 +62,6 @@ display: none; } - @include cdk.high-contrast(active, off) { - &.mat-mdc-checkbox-disabled { - opacity: 0.5; - } - - .mdc-checkbox__checkmark { - --mdc-checkbox-selected-checkmark-color: CanvasText; - --mdc-checkbox-disabled-selected-checkmark-color: CanvasText; - } - } - // Apply base styles to the MDC ripple when not hovered, focused, or pressed. .mdc-checkbox__ripple { opacity: 0;