Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

mdp-sass

1.0.5 • Public • Published

MDP-SASS

A super simple, quick and dirty approximation of a material palette that matches the @angular/material signature of a Material Design palette. Designed to work well with @angular/material.

StackBlitz Demo

Usage

To use, simple install, include where necessary, and call the function:

@import '~@angular/material/theming';
@include mat-core();
@import '~mdp-sass/mdp-sass';
 
$my-base-color: #0e5ab2;
$my-accent-color: #b389d7;
$my-warn-color: #f7377b;
 
$my-mat-primary-palette: mat-palette(get-mat-palette($my-base-color));
$my-mat-accent-palette: mat-palette(get-mat-palette($my-accent-color));
$my-mat-warn-palette: mat-palette(get-mat-palette($my-warn-color));
 
$my-app-theme: mat-light-theme($my-mat-primary-palette, $my-mat-accent-palette, $my-mat-warn-palette);
 
@include angular-material-theme($my-app-theme);

get-mat-palette()

get-mat-palette($hex-value, $light-text: false) Given a base hex value, will return a map formatted to match @angular/material's mat-color signature with contrast values.

Optional Light Text Argument

As of v1.0.4, you may now force a light text for colors that are on the cusp of being dark enough to warrant white/light text.

@import '~@angular/material/theming';
@include mat-core();
@import 'node_modules/mdp-sass';
 
$my-base-color: #0e5ab2;
$my-accent-color: #b389d7;
$my-warn-color: #f7377b;
 
$my-mat-primary-palette: mat-palette(get-mat-palette($my-base-color));
$my-mat-accent-palette-light-text: mat-palette(get-mat-palette($my-accent-color, true));
$my-mat-warn-palette: mat-palette(get-mat-palette($my-warn-color));
 
$my-app-theme: mat-light-theme($my-mat-primary-palette, $my-mat-accent-palette, $my-mat-warn-palette);

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

None, however it is designed to work w/ @angular/material.

Installing

It's just a SASS helper function. So however you see fit for now.

Running the tests

Coming Soon.

Pre-Commit linting tests / CI Tests

And coding style tests

Linter rules.

Deployment

PRs will be auto-deployed via CI/CI pipeline.

Contributing

Please submit a PR and add me as a reviewer.

Authors

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

Install

npm i mdp-sass

DownloadsWeekly Downloads

75

Version

1.0.5

License

MIT

Unpacked Size

7.37 kB

Total Files

3

Last publish

Collaborators

  • avatar