refactor(material/checkbox): simplify structural styles

src/material/checkbox/_checkbox-theme.scss

@@ -1,4 +1,3 @@
-@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -16,7 +15,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-unthemable-tokens()
@@ -35,7 +37,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-color-tokens($theme)
+      );
       @include token-utils.create-token-values(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-color-tokens($theme)
@@ -44,11 +49,15 @@
 
     .mat-mdc-checkbox {
       &.mat-primary {
-        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
+        @include token-utils.create-token-values(
+          tokens-mdc-checkbox.$prefix,
+          tokens-mdc-checkbox.get-color-tokens($theme, primary));
       }
 
       &.mat-warn {
-        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
+        @include token-utils.create-token-values(
+          tokens-mdc-checkbox.$prefix,
+          tokens-mdc-checkbox.get-color-tokens($theme, warn));
       }
     }
   }
@@ -61,7 +70,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-typography-tokens($theme)
+      );
       @include token-utils.create-token-values(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-typography-tokens($theme)
@@ -79,7 +91,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-density-tokens($theme)
+      );
       @include token-utils.create-token-values(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-density-tokens($theme)
@@ -140,6 +155,6 @@
   // Don't pass $options here, since the mdc-checkbox doesn't support color options,
   // only the mdc-checkbox does.
   $mat-checkbox-tokens: token-utils.get-tokens-for($tokens, tokens-mat-checkbox.$prefix);
-  @include mdc-checkbox-theme.theme($mdc-checkbox-tokens);
+  @include token-utils.create-token-values(tokens-mdc-checkbox.$prefix, $mdc-checkbox-tokens);
   @include token-utils.create-token-values(tokens-mat-checkbox.$prefix, $mat-checkbox-tokens);
 }

src/material/checkbox/checkbox.scss

@@ -1,176 +1,15 @@
-@use 'sass:map';
 @use '@angular/cdk';
-@use '@material/checkbox/checkbox' as mdc-checkbox;
-@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
-@use '@material/touch-target' as mdc-touch-target;
-@use '@material/theme/custom-properties' as mdc-custom-properties;
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/layout-common';
 @use '../core/style/vendor-prefixes';
-@use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
 @use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox;
 @use '../core/tokens/token-utils';
+@use './checkbox-common';
 
-@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
-  // Add the checkbox static styles.
-  @include mdc-checkbox.static-styles();
-
-  $mdc-checkbox-slots: tokens-mdc-checkbox.get-token-slots();
-
-  .mdc-checkbox {
-    // Add the slots for MDC checkbox.
-    @include mdc-checkbox-theme.theme-styles(
-      map.merge(
-        $mdc-checkbox-slots,
-        (
-          // Angular Material focuses the native input. rather than the element MDC expects,
-          // so we create this slot ourselves.
-          selected-focus-icon-color: null,
-          unselected-focus-icon-color: null,
-          // MDC expects `.mdc-checkbox__ripple::before` to be the state layer, but we use
-          // `.mdc-checkbox__ripple` instead, so we emit the state layer slots ourselves.
-          unselected-hover-state-layer-opacity: null,
-          unselected-hover-state-layer-color: null,
-          unselected-focus-state-layer-opacity: null,
-          unselected-focus-state-layer-color: null,
-          unselected-pressed-state-layer-opacity: null,
-          unselected-pressed-state-layer-color: null,
-          selected-hover-state-layer-opacity: null,
-          selected-hover-state-layer-color: null,
-          selected-focus-state-layer-opacity: null,
-          selected-focus-state-layer-color: null,
-          selected-pressed-state-layer-opacity: null,
-          selected-pressed-state-layer-color: null
-        )
-      )
-    );
-
-    @include token-utils.use-tokens(tokens-mdc-checkbox.$prefix, $mdc-checkbox-slots) {
-      // MDC expects focus on .mdc-checkbox, but we focus the native element instead, so we need to
-      // emit a our own slot for the focus styles.
-      .mdc-checkbox__native-control:enabled:focus {
-        // Extra `:focus` included to achieve higher specificity than MDC's `:hover` style.
-        &:focus:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
-          @include token-utils.create-token-slot(border-color, unselected-focus-icon-color);
-        }
-
-        &:checked,
-        &:indeterminate {
-          & ~ .mdc-checkbox__background {
-            @include token-utils.create-token-slot(border-color, selected-focus-icon-color);
-            @include token-utils.create-token-slot(background-color, selected-focus-icon-color);
-          }
-        }
-      }
-
-      // MDC expects `.mdc-checkbox__ripple::before` to be the state layer, but we use
-      // `.mdc-checkbox__ripple` instead, so we emit the state layer slots ourselves.
-      &:hover {
-        .mdc-checkbox__ripple {
-          @include token-utils.create-token-slot(opacity, unselected-hover-state-layer-opacity);
-          @include token-utils.create-token-slot(
-            background-color,
-            unselected-hover-state-layer-color
-          );
-        }
-
-        .mat-mdc-checkbox-ripple .mat-ripple-element {
-          @include token-utils.create-token-slot(
-            background-color,
-            unselected-hover-state-layer-color
-          );
-        }
-      }
-
-      .mdc-checkbox__native-control:focus {
-        & ~ .mdc-checkbox__ripple {
-          @include token-utils.create-token-slot(opacity, unselected-focus-state-layer-opacity);
-          @include token-utils.create-token-slot(
-            background-color,
-            unselected-focus-state-layer-color
-          );
-        }
-
-        & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
-          @include token-utils.create-token-slot(
-            background-color,
-            unselected-focus-state-layer-color
-          );
-        }
-      }
-
-      &:active .mdc-checkbox__native-control {
-        & ~ .mdc-checkbox__ripple {
-          @include token-utils.create-token-slot(opacity, unselected-pressed-state-layer-opacity);
-          @include token-utils.create-token-slot(
-            background-color,
-            unselected-pressed-state-layer-color
-          );
-        }
-
-        & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
-          @include token-utils.create-token-slot(
-            background-color,
-            unselected-pressed-state-layer-color
-          );
-        }
-      }
-
-      &:hover .mdc-checkbox__native-control:checked {
-        & ~ .mdc-checkbox__ripple {
-          @include token-utils.create-token-slot(opacity, selected-hover-state-layer-opacity);
-          @include token-utils.create-token-slot(
-            background-color,
-            selected-hover-state-layer-color
-          );
-        }
-
-        & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
-          @include token-utils.create-token-slot(
-            background-color,
-            selected-hover-state-layer-color
-          );
-        }
-      }
-
-      .mdc-checkbox__native-control:focus:checked {
-        & ~ .mdc-checkbox__ripple {
-          @include token-utils.create-token-slot(opacity, selected-focus-state-layer-opacity);
-          @include token-utils.create-token-slot(
-            background-color,
-            selected-focus-state-layer-color
-          );
-        }
-
-        & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
-          @include token-utils.create-token-slot(
-            background-color,
-            selected-focus-state-layer-color
-          );
-        }
-      }
-
-      &:active .mdc-checkbox__native-control:checked {
-        & ~ .mdc-checkbox__ripple {
-          @include token-utils.create-token-slot(opacity, selected-pressed-state-layer-opacity);
-          @include token-utils.create-token-slot(
-            background-color,
-            selected-pressed-state-layer-color
-          );
-        }
-
-        & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
-          @include token-utils.create-token-slot(
-            background-color,
-            selected-pressed-state-layer-color
-          );
-        }
-      }
-    }
-  }
-}
+@include checkbox-common.checkbox-structure(true);
 
 .mat-mdc-checkbox {
+  @include checkbox-common.checkbox-noop-animations;
+
   // The host node defaults to `display: inline`, we have to change it in order for margins to work.
   display: inline-block;
   // Avoids issues in some CSS grid layouts (see #25153).
@@ -183,15 +22,6 @@
     @include vendor-prefixes.color-adjust(exact);
   }
 
-  // Angular Material supports disabling all animations when NoopAnimationsModule is imported.
-  &._mat-animation-noopable {
-    *,
-    *::before {
-      transition: none !important;
-      animation: none !important;
-    }
-  }
-
   // 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 {
@@ -269,10 +99,12 @@
 
 // Element used to provide a larger tap target for users on touch devices.
 .mat-mdc-checkbox-touch-target {
-  @include mdc-touch-target.touch-target(
-    $set-width: true,
-    $query: mdc-helpers.$mdc-base-styles-query
-  );
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 48px;
+  width: 48px;
+  transform: translate(-50%, -50%);
 
   @include token-utils.use-tokens(
     tokens-mat-checkbox.$prefix,

src/material/core/tokens/m2/mdc/_checkbox.scss

@@ -35,6 +35,9 @@ $prefix: (mdc, checkbox);
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
+    selected-pressed-icon-color: null,
+    unselected-pressed-icon-color: null,
+
     // MDC currently doesn't output a slot for these tokens.
     disabled-selected-icon-opacity: null,
     disabled-unselected-icon-opacity: null,
@@ -79,16 +82,12 @@ $prefix: (mdc, checkbox);
     selected-hover-icon-color: $palette-selected,
     // The color of the checkbox fill when the checkbox is selected.
     selected-icon-color: $palette-selected,
-    // The color of the checkbox fill when the checkbox is selected an pressed.
-    selected-pressed-icon-color: $palette-selected,
     // The color of the checkbox border when the checkbox is unselected and focused.
     unselected-focus-icon-color: $active-border-color,
     // The color of the checkbox border when the checkbox is unselected and hovered.
     unselected-hover-icon-color: $active-border-color,
     // The color of the checkbox border when the checkbox is unselected.
     unselected-icon-color: $border-color,
-    // The color of the checkbox border when the checkbox is unselected and pressed.
-    unselected-pressed-icon-color: $border-color,
     // The color of the ripple when the checkbox is selected and focused.
     selected-focus-state-layer-color: $palette-default,
     // The color of the ripple when the checkbox is selected and hovered.

src/material/list/BUILD.bazel

@@ -71,6 +71,7 @@ sass_binary(
         ":list_scss_lib",
         "//:mdc_sass_lib",
         "//src/cdk:sass_lib",
+        "//src/material/checkbox:checkbox_scss_lib",
         "//src/material/core:core_scss_lib",
     ],
 )

src/material/list/_list-item-hcm-indicator.scss

@@ -6,25 +6,25 @@
 // its background color. Since that doesn't work in HCM, this mixin provides an alternative by
 // rendering a circle.
 @mixin private-high-contrast-list-item-indicator() {
-    @include cdk.high-contrast(active, off) {
-        &::after {
-            $size: 10px;
-            content: '';
-            position: absolute;
-            top: 50%;
-            right: mdc-list-variables.$side-padding;
-            transform: translateY(-50%);
-            width: $size;
-            height: 0;
-            border-bottom: solid $size;
-            border-radius: $size;
-        }
+  @include cdk.high-contrast(active, off) {
+    &::after {
+      $size: 10px;
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: mdc-list-variables.$side-padding;
+      transform: translateY(-50%);
+      width: $size;
+      height: 0;
+      border-bottom: solid $size;
+      border-radius: $size;
+    }
 
-        [dir='rtl'] {
-            &::after {
-                right: auto;
-                left: mdc-list-variables.$side-padding;
-            }
-        }
+    [dir='rtl'] {
+      &::after {
+        right: auto;
+        left: mdc-list-variables.$side-padding;
+      }
     }
+  }
 }

src/material/list/_list-theme.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '@material/list/evolution-mixins';
-@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '@material/list/list-theme' as mdc-list-theme;
 
@@ -63,13 +62,16 @@
     }
 
     .mat-mdc-list-option {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, primary));
     }
     .mat-mdc-list-option.mat-accent {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, accent));
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, accent));
     }
     .mat-mdc-list-option.mat-warn {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, warn));
     }
 
     // There is no token for activated color on nav list.