Customize Angular Material Components using mixins to fit my UI

Question

We (my team) recently upgraded our Angular to Version 15, and we have had many problems due to MDC- changes.

My work is to upgrade our components library to be MDC based. I noticed all the mixins Angular Material exposes and I wish to use them for many reasons.

The problem is, I can't manage it and I would like some advice. I've read many articles but nothing really helped me.

Here is my theme

@use "../../../../node_modules/@angular/material" as mat;
@use "../../../../node_modules/@material/checkbox/checkbox-theme";
@import "./_variables";
@import "@angular/material/theming";


$components-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$components-primary: mat.define-palette($primary-palette, 700, 300, 900);
$components-warn: mat.define-palette(mat.$red-palette);

$components-typography: mat.define-typography-config();

$components-theme: mat.define-light-theme(
  (
    color: (
      primary: $components-primary,
      accent: $components-accent,
      warn: $components-warn,
    ),
    typography: $components-typography,
    density: 0,
  )
);

@include mat.core();
@include mat.all-component-themes($components-theme);
@include mat.ripple-theme($components-theme);

The mixin I'm trying to execute

$theme: (
  unselected-icon-color: $border_main_color,
  selected-icon-color: $border_main_color,
  selected-hover-icon-color: $border_main_color,
  unselected-hover-icon-color: $border_main_color,
  state-layer-size: 15px,
);

mat-checkbox.mat-mdc-checkbox {
  @include checkbox-theme.theme($theme);
  @include checkbox-theme.touch-target(15px, 15px);

  .mdc-form-field {
    letter-spacing: $letter_spacing_normal;
  }

  .mdc-checkbox {
    margin-right: 8px;
  }
}

The css code I'm trying to replace

mat-checkbox {

  &.mat-mdc-checkbox {
    .mdc-form-field {
      letter-spacing: $letter_spacing_normal;
    }

    .mdc-checkbox {
      transform: translateX(-1px);
      padding: 0;
      margin-right: 8px;
      height: var(--mdc-checkbox-state-layer-size);
      width: var(--mdc-checkbox-state-layer-size);
      flex: 0 0 15px;
      border-color: var(--custom-border-color);

      .mdc-checkbox__background,
      .mdc-checkbox__native-control {
        top: 0px;
        left: 0px;
        height: var(--mdc-checkbox-state-layer-size);
        width: var(--mdc-checkbox-state-layer-size);
      }

      .mat-mdc-checkbox-touch-target {
        width: var(--mdc-checkbox-state-layer-size);
        height: var(--mdc-checkbox-state-layer-size);
      }

      .mdc-checkbox__background {
        box-shadow: inset 0 0 0 3px white;
      }

      .mat-mdc-checkbox-ripple.mat-ripple {
        width: 40px;
        height: 40px;
        transform: translate(-30%, -30%);
      }

      .mdc-checkbox__native-control:not([disabled]) {
        &:focus ~ .mdc-checkbox__ripple {
          opacity: 0;
        }

        &:hover ~ .mdc-checkbox__ripple {
          opacity: 0.4;
          background-color: var(--custom-main-color);
        }
      }
    }

I know that every property wouldn't be transformed using Material mixins but some can because it has worked for my sncakbar component. But here, for the checkbox it doesn't and I didn't know why.

The code you see is all in a global file.

My goal is to use the Angular Material checkbox theme and mixins exposed by the lib to override the CSS to fit my UI.

I'm new to Angular Material Theme as well as Sass mixins, use, forward and more but have read many things recently.