angular material palette to CSS variables

@mixin paletteToCssVars($palette, $prefix) {
  @each $key, $value in $palette {
    @if #{$key} == 'contrast' {
      @include paletteToCssVars($value, $prefix + '-contrast');
    } @else {
      --#{$prefix}-#{$key}: #{$value};
    }
  }
}

:root {
  @include paletteToCssVars(mat.$red-palette, 'mat-red');
  @include paletteToCssVars(mat.$green-palette, 'mat-green');
  @include paletteToCssVars(mat.$indigo-palette, 'mat-indigo');
}

// result:
:root {
    --mat-red-50: #ffebee;
    --mat-red-100: #ffcdd2;
    --mat-red-200: #ef9a9a;
    --mat-red-300: #e57373;
    --mat-red-400: #ef5350;
    --mat-red-500: #f44336;
    --mat-red-600: #e53935;
    --mat-red-700: #d32f2f;
    --mat-red-800: #c62828;
    --mat-red-900: #b71c1c;
    --mat-red-A100: #ff8a80;
    --mat-red-A200: #ff5252;
    --mat-red-A400: #ff1744;
    --mat-red-A700: #d50000;
    --mat-red-contrast-50: rgba(0, 0, 0, 0.87);
    --mat-red-contrast-100: rgba(0, 0, 0, 0.87);
    --mat-red-contrast-200: rgba(0, 0, 0, 0.87);
    --mat-red-contrast-300: rgba(0, 0, 0, 0.87);
    --mat-red-contrast-400: rgba(0, 0, 0, 0.87);
    --mat-red-contrast-500: white;
    --mat-red-contrast-600: white;
    --mat-red-contrast-700: white;
    --mat-red-contrast-800: white;
    --mat-red-contrast-900: white;
    --mat-red-contrast-A100: rgba(0, 0, 0, 0.87);
    --mat-red-contrast-A200: white;
    --mat-red-contrast-A400: white;
    --mat-red-contrast-A700: white;
    --mat-green-50: #e8f5e9;
    --mat-green-100: #c8e6c9;
    --mat-green-200: #a5d6a7;
    --mat-green-300: #81c784;
    --mat-green-400: #66bb6a;
    --mat-green-500: #4caf50;
    --mat-green-600: #43a047;
    --mat-green-700: #388e3c;
    --mat-green-800: #2e7d32;
    --mat-green-900: #1b5e20;
    --mat-green-A100: #b9f6ca;
    --mat-green-A200: #69f0ae;
// etc.
}