Angular Material Sass Mixins Approach

Here's a comprehensive set of Angular Material Sass mixins to customize your components:

@use '@angular/material' as mat;

// Progress Spinner
:root {
  @include mat.progress-spinner-overrides(
    (
      active-indicator-color: #00c2f3,
    )
  );
}

// Buttons
.mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-outlined-button, .mat-mdc-flat-button {
  @include mat.button-overrides(
    (
      container-color: #00c2f3,
      label-text-color: white,
      disabled-container-color: rgba(0, 0, 0, 0.12),
      disabled-label-text-color: rgba(0, 0, 0, 0.38),
    )
  );
}

// Cards
.mat-mdc-card {
  @include mat.card-overrides(
    (
      outlined-border-color: #00c2f3,
      outlined-border-width: 2px,
      container-color: #f5f8fa,
    )
  );
}

// Form fields
.mat-mdc-form-field {
  @include mat.form-field-overrides(
    (
      container-padding-horizontal: 10px,
      container-padding-vertical: 8px,
      line-height: 1.5,
    )
  );
  
  @include mat.form-field-outline-overrides(
    (
      color: #00c2f3,
      hover-thickness: 2px,
      focus-thickness: 3px,
    )
  );
}

// Tabs
.mat-mdc-tab-group {
  @include mat.tab-overrides(
    (
      header-label-text-font: 'Source Sans Pro, sans-serif',
      header-active-label-text-color: #00c2f3,
      header-active-focus-label-text-color: #00c2f3,
      header-active-hover-label-text-color: #00c2f3,
      header-active-indicator-color: #00c2f3,
      header-active-hover-indicator-color: #00c2f3,
      header-active-focus-indicator-color: #00c2f3,
    )
  );
}

// Select
.mat-mdc-select {
  @include mat.select-overrides(
    (
      container-color: white,
      arrow-color: #00c2f3,
      enabled-select-arrow-color: #00c2f3,
      panel-background-color: white,
      panel-border-color: #00c2f3,
      panel-border-width: 1px,
    )
  );
}

// Checkbox
.mat-mdc-checkbox {
  @include mat.checkbox-overrides(
    (
      selected-checkmark-color: white,
      selected-focus-icon-color: #00c2f3,
      selected-hover-icon-color: #00c2f3,
      selected-icon-color: #00c2f3,
    )
  );
}

// Radio button
.mat-mdc-radio-button {
  @include mat.radio-overrides(
    (
      selected-ripple-color: rgba(0, 194, 243, 0.2),
      selected-hover-icon-color: #00c2f3,
      selected-focus-icon-color: #00c2f3,
      selected-icon-color: #00c2f3,
    )
  );
}

// Slider
.mat-mdc-slider {
  @include mat.slider-overrides(
    (
      active-track-color: #00c2f3,
      inactive-track-color: rgba(0, 194, 243, 0.3),
      handle-color: #00c2f3,
      focus-handle-color: #00c2f3,
      hover-handle-color: #00c2f3,
    )
  );
}

// Progress bar
.mat-mdc-progress-bar {
  @include mat.progress-bar-overrides(
    (
      buffer-color: rgba(0, 194, 243, 0.3),
      fill-color: #00c2f3,
    )
  );
}

// Toggle Button
.mat-mdc-slide-toggle {
  @include mat.slide-toggle-overrides(
    (
      selected-handle-color: #00c2f3,
      selected-track-color: rgba(0, 194, 243, 0.5),
      selected-hover-state-layer-color: rgba(0, 194, 243, 0.1),
      selected-pressed-state-layer-color: rgba(0, 194, 243, 0.2),
      selected-focus-state-layer-color: rgba(0, 194, 243, 0.2),
    )
  );
}

// Dialog
.mat-mdc-dialog-container {
  @include mat.dialog-overrides(
    (
      container-color: white,
      with-actions-padding: 16px,
      shape-radius: 8px,
    )
  );
}

// Snackbar/Toast
.mat-mdc-snack-bar-container {
  @include mat.snack-bar-overrides(
    (
      container-color: #333333,
      label-text-color: white,
      action-button-color: #00c2f3,
    )
  );
}

// Datepicker
.mat-datepicker-content {
  @include mat.datepicker-overrides(
    (
      calendar-header-text-color: #00c2f3,
      calendar-body-selected-cell-content-color: white,
      calendar-body-selected-cell-background-color: #00c2f3,
      calendar-body-range-color: rgba(0, 194, 243, 0.2),
      calendar-body-in-range-color: rgba(0, 194, 243, 0.5),
    )
  );
}

// Tooltip
.mat-mdc-tooltip {
  @include mat.tooltip-overrides(
    (
      background-color: rgba(33, 33, 33, 0.9),
      text-color: white,
    )
  );
}

// Menu
.mat-mdc-menu-panel {
  @include mat.menu-overrides(
    (
      background-color: white,
      item-text-color: rgba(0, 0, 0, 0.87),
      item-hover-text-color: #00c2f3,
      item-hover-state-layer-color: rgba(0, 194, 243, 0.1),
    )
  );
}

// Autocomplete
.mat-mdc-autocomplete-panel {
  @include mat.autocomplete-overrides(
    (
      background-color: white,
      selected-option-color: rgba(0, 194, 243, 0.2),
      selected-option-text-color: #00c2f3,
    )
  );
}

// Table
.mat-mdc-table {
  @include mat.table-overrides(
    (
      background-color: transparent,
      header-row-background-color: #f5f8fa,
      row-hover-state-layer-color: rgba(0, 194, 243, 0.1),
      row-selected-state-layer-color: rgba(0, 194, 243, 0.2),
    )
  );
}

// Chips
.mat-mdc-chip {
  @include mat.chips-overrides(
    (
      container-height: 32px,
      with-avatar-container-height: 40px,
      with-trailing-icon-container-height: 40px,
      selected-container-color: #00c2f3,
      selected-text-color: white,
    )
  );
}

// List
.mat-mdc-list {
  @include mat.list-overrides(
    (
      subheader-text-color: rgba(0, 0, 0, 0.54),
      item-selected-state-layer-color: rgba(0, 194, 243, 0.2),
      item-selected-text-color: #00c2f3,
    )
  );
}

// Badge
.mat-badge {
  @include mat.badge-overrides(
    (
      background-color: #00c2f3,
      text-color: white,
    )
  );
}

// Icon
.mat-icon {
  @include mat.icon-overrides(
    (
      size: 24px,
      color: #00c2f3,
    )
  );
}

// Bottom Sheet
.mat-bottom-sheet-container {
  @include mat.bottom-sheet-overrides(
    (
      container-color: white,
      container-shape: 8px 8px 0 0,
    )
  );
}

// Paginator
.mat-mdc-paginator {
  @include mat.paginator-overrides(
    (
      container-color: transparent,
      selector-trigger-icon-color: #00c2f3,
      selector-popup-background-color: white,
    )
  );
}

How to Use These Mixins

1. Include these in your global styles file (e.g., styles.scss)
2. Uncomment the sections you need
3. Customize the values to match your brand colors and styles
4. Use more specific selectors if you only want to target specific instances

Combining Mixins with CSS Custom Properties

For best results, you can use a hybrid approach:

// Use mixins for complex components and typography
@include mat.button-overrides(...);

// Use CSS custom properties for simple color overrides
:root {
  --mdc-checkbox-selected-icon-color: #00c2f3;
}

This gives you the power of Sass mixins for complex overrides while using more performant CSS variables for simple color changes.

Note: Make sure you have @angular/material properly imported with @use at the top of your file for these mixins to work.