Package Exports
- @mat-color/sass
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mat-color/sass) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@mat-color/sass
Wherewith are you creating a material palette for an Angular Material project? Usual it doing with online tools or apps.
A custom material palette is a big sass map, and makes it manually is a tricky thing. It looks like this:
$primary: mat-palette(
(
50: #fffee6,
100: #fefbbf,
200: #fcf893,
300: #faf464,
400: #f6ef39,
500: #fff500,
600: #ffe100,
700: #ffc800,
800: #ffae00,
900: #ff8100,
contrast: (
50: rgba(0, 0, 0, 0.87),
100: rgba(0, 0, 0, 0.87),
200: rgba(0, 0, 0, 0.87),
300: rgba(0, 0, 0, 0.87),
400: rgba(0, 0, 0, 0.87),
500: rgba(0, 0, 0, 0.87),
600: rgba(0, 0, 0, 0.87),
700: rgba(0, 0, 0, 0.87),
800: rgba(0, 0, 0, 0.87),
900: rgba(0, 0, 0, 0.87)
)
)
);But what if we could make a palette using one color in our code? It is possible because SASS can do the math!
This sass library helps you generate a material palette for use in @angular/material with one base color!
How it use
- Install package
npm i @mat-color/sass - Import
@mat-color/sass/mat-colorin your sass-file. - Use the 'generate-mat-color' function.
- Call the 'mat-palette' function with the returned result.
- Enjoy!
@import "~@mat-color/sass/mat-color";
$primary: mat-palette(generate-mat-color(#b9ffaf));Say thanks
