Nourishing Plushie Monster

    mdp-sass

    1.1.1 • 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

    165

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    7.39 kB

    Total Files

    3

    Last publish

    Collaborators

    • tabuckner