mat-color/mat-color

This sass library helps you generate a material palette for use in @angular/material with one base color!

@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

1. Install package npm i @mat-color/sass
2. Import @mat-color/sass/mat-color in your sass-file.
3. Use the 'generate-mat-color' function.
4. Call the 'mat-palette' function with the returned result.
5. Enjoy!

@import "~@mat-color/sass/mat-color";

$primary: mat-palette(generate-mat-color(#b9ffaf));

Say thanks

mat-color's Issues

JS api

Is your feature request related to a problem? Please describe.
I want to use it in JavaScript.

Describe the solution you'd like
I want to implement the mat-color/core library (or with another name). This library can be used in JavaScript/TypeScript projects.

[BUG] : DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Describe the bug
In mat-color.scss regular division are used. Those division will be depreciated in Dart Sass 2.0.0.

To Reproduce
Just use generate-mat-color() function and compile.

Expected behavior
No warning.

Screenshots
Not applicable.

Desktop (please complete the following information):

• OS: All
• Node.js: v16.13.0
• Version v1.0.2

Additional context
None