Skip to content

Instantly share code, notes, and snippets.

@shprink
Created February 17, 2023 12:40
Show Gist options
  • Save shprink/3afa9de385db826ba10b2426eb94d7bd to your computer and use it in GitHub Desktop.
Save shprink/3afa9de385db826ba10b2426eb94d7bd to your computer and use it in GitHub Desktop.
@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.
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment