Customized Variation on Material Design Lite Theme with Gulp, Sass

0
votes

I'd like to use a "customized version" of a Material Design Lite "theme".

MDL is basically the CSS and JS elements of Material Design extracted for use in web apps. MDL has a web interface through which one can generate a CSS file using one of their custom theme color variations, but we want to use our own colors.

I have installed MDL with Bower and am using SASS to compile the components.

Aside from changing the MDL files themselves, how/where can the following variables be overwritten:

$color-primary: $palette-red-500 !default;
$color-primary-dark: $palette-red-700 !default;
$color-accent: $palette-pink-A200 !default;

// Our primary is dark, so use $color-dark-contrast for overlaid text.
$color-primary-contrast: $palette-green-700 !default;
// Our accent is dark, so use $color-dark-contrast for overlaid text.
$color-accent-contrast: $palette-green-700 !default;

Further details:

In the MDL codebase the bower_components/material-design-lite/src/_variables.scss file contains the "theme declaration" variables (shown above), which I could of course change, but I think there's a way of overriding them from outside the component.

I tried adding the following to my own assets/styles/common/_variables.scss file, but I think the variables as declared within the component have already been used to create styles by the time Gulp reaches this document:

@import "../../bower_components/material-design-lite/src/color-definitions";
//@import "functions";

$trim-color-classes: false !default;

// Use color primarily for emphasis. Choose colors that fit with
// your brand and provide good contrast between visual components.
$color-primary: $palette-red-500 !default;
$color-primary-dark: $palette-red-700 !default;
$color-accent: $palette-pink-A200 !default;

// Our primary is dark, so use $color-dark-contrast for overlaid text.
$color-primary-contrast: $palette-green-700 !default;
// Our accent is dark, so use $color-dark-contrast for overlaid text.
$color-accent-contrast: $palette-green-700 !default;

I'm not sure if the way bower is pulling in the component CSS (as a single file) would require changing:

"material-design-lite": {
  "main": [
    "./src/material-design-lite.scss",
    "./src/mdlComponentHandler.js"
  ]
}

Is the common approach simply to change the MDL source _variables.scss file?

In case it's useful to anyone else working on custom Material Design Color Pallet:

I used angular-md-color.com/#/, which actually generates the hex values in format of an angular code block based on custom hex values:

angular.module('myApp', ['ngMaterial']).config(function ($mdThemingProvider, palettes) {

        var customPrimary = {
                '50': '#ffffff',
                '100': '#ffffff',
                '200': '#ffffff',
                '300': '#ffffff',
                '400': '#fbfaf8',
                '500': '#f2efe8',
                '600': '#e9e4d8',
                '700': '#e0d8c7',
                '800': '#d6cdb7',
                '900': '#cdc2a7',
                'A100': '#ffffff',
                'A200': '#ffffff',
                'A400': '#ffffff',
                'A700': '#c4b697'
        };
        $mdThemingProvider
                .definePalette('customPrimary', 
                                                customPrimary);

        var customAccent = {
                '50': '#233f95',
                '100': '#2847a9',
                '200': '#2d50be',
                '300': '#355bcf',
                '400': '#4a6bd4',
                '500': '#5e7cd9',
                '600': '#889ee3',
                '700': '#9cafe8',
                '800': '#b1bfed',
                '900': '#c6d0f1',
                'A100': '#889ee3',
                'A200': '#738dde',
                'A400': '#5e7cd9',
                'A700': '#dae1f6'
        };
        $mdThemingProvider
                .definePalette('customAccent', 
                                                customAccent);

        var customWarn = {
                '50': '#ffb280',
                '100': '#ffa266',
                '200': '#ff934d',
                '300': '#ff8333',
                '400': '#ff741a',
                '500': '#ff6400',
                '600': '#e65a00',
                '700': '#cc5000',
                '800': '#b34600',
                '900': '#993c00',
                'A100': '#ffc199',
                'A200': '#ffd1b3',
                'A400': '#ffe0cc',
                'A700': '#803200'
        };
        $mdThemingProvider
                .definePalette('customWarn', 
                                                customWarn);

        var customBackground = {
                '50': '#989794',
                '100': '#8c8a87',
                '200': '#7f7d7b',
                '300': '#72716e',
                '400': '#656462',
                '500': '#585755',
                '600': '#4b4a48',
                '700': '#3e3d3c',
                '800': '#31312f',
                '900': '#242423',
                'A100': '#a5a4a1',
                'A200': '#b1b0ae',
                'A400': '#bebdbb',
                'A700': '#171716'
        };
        $mdThemingProvider
                .definePalette('customBackground', 
                                                customBackground);

     $mdThemingProvider.theme('default')
             .primaryPalette('customPrimary')
             .accentPalette('customAccent')
             .warnPalette('customWarn')
             .backgroundPalette('customBackground')
});

Depending on what format you want to end up with you could use a tool like HSL Color Picker to get corresponding values (rgb, hsl).

I'm overriding the Material Design Gray to match a Benjamin Moore Paint value the client requested:

$palette-grey:
"152, 151, 148"
"140, 138, 135"
"127, 125, 123"
"114, 113, 110"
"101, 100, 98"
"88, 87, 85"
"75, 74, 72"
"62, 61, 60"
"49, 49, 47"
"36, 36, 35"
"165, 164, 161"
"177, 176, 174"
"190, 189, 187"
"23, 23, 22";

$palette-grey-50: nth($palette-grey, 1);
$palette-grey-100: nth($palette-grey, 2);
$palette-grey-200: nth($palette-grey, 3);
$palette-grey-300: nth($palette-grey, 4);
$palette-grey-400: nth($palette-grey, 5);
$palette-grey-500: nth($palette-grey, 6);
$palette-grey-600: nth($palette-grey, 7);
$palette-grey-700: nth($palette-grey, 8);
$palette-grey-800: nth($palette-grey, 9);
$palette-grey-900: nth($palette-grey, 10);
$palette-grey-A100: nth($palette-grey, 11);
$palette-grey-A200: nth($palette-grey, 12);
$palette-grey-A400: nth($palette-grey, 13);
$palette-grey-A700: nth($palette-grey, 14);

    // Grey

    .mdl-color-text--grey {
        color: unquote("rgb(#{$palette-grey-500})") !important;
    }

    .mdl-color--grey {
        background-color: unquote("rgb(#{$palette-grey-500})") !important;
    }

    .mdl-color-text--grey-50 {
        color: unquote("rgb(#{$palette-grey-50})") !important;
    }

    .mdl-color--grey-50 {
        background-color: unquote("rgb(#{$palette-grey-50})") !important;
    }

    .mdl-color-text--grey-100 {
        color: unquote("rgb(#{$palette-grey-100})") !important;
    }

    .mdl-color--grey-100 {
        background-color: unquote("rgb(#{$palette-grey-100})") !important;
    }

    .mdl-color-text--grey-200 {
        color: unquote("rgb(#{$palette-grey-200})") !important;
    }

    .mdl-color--grey-200 {
        background-color: unquote("rgb(#{$palette-grey-200})") !important;
    }

    .mdl-color-text--grey-300 {
        color: unquote("rgb(#{$palette-grey-300})") !important;
    }

    .mdl-color--grey-300 {
        background-color: unquote("rgb(#{$palette-grey-300})") !important;
    }

    .mdl-color-text--grey-400 {
        color: unquote("rgb(#{$palette-grey-400})") !important;
    }

    .mdl-color--grey-400 {
        background-color: unquote("rgb(#{$palette-grey-400})") !important;
    }

    .mdl-color-text--grey-500 {
        color: unquote("rgb(#{$palette-grey-500})") !important;
    }

    .mdl-color--grey-500 {
        background-color: unquote("rgb(#{$palette-grey-500})") !important;
    }

    .mdl-color-text--grey-600 {
        color: unquote("rgb(#{$palette-grey-600})") !important;
    }

    .mdl-color--grey-600 {
        background-color: unquote("rgb(#{$palette-grey-600})") !important;
    }

    .mdl-color-text--grey-700 {
        color: unquote("rgb(#{$palette-grey-700})") !important;
    }

    .mdl-color--grey-700 {
        background-color: unquote("rgb(#{$palette-grey-700})") !important;
    }

    .mdl-color-text--grey-800 {
        color: unquote("rgb(#{$palette-grey-800})") !important;
    }

    .mdl-color--grey-800 {
        background-color: unquote("rgb(#{$palette-grey-800})") !important;
    }

    .mdl-color-text--grey-900 {
        color: unquote("rgb(#{$palette-grey-900})") !important;
    }

    .mdl-color--grey-900 {
        background-color: unquote("rgb(#{$palette-grey-900})") !important;
    }

    .mdl-color--grey-A100 {
        background-color: unquote("rgb(#{$palette-grey-A100})") !important;
    }

    .mdl-color--grey-A200 {
        background-color: unquote("rgb(#{$palette-grey-A200})") !important;
    }

    .mdl-color--grey-A400 {
        background-color: unquote("rgb(#{$palette-grey-A400})") !important;
    }

    .mdl-color--grey-A700 {
        background-color: unquote("rgb(#{$palette-grey-A700})") !important;
    }

Now I can do something like this:

<header class="mdl-layout__header mdl-color--grey-800 mdl-color-text--grey-100">

and get the custom color.

1
cssangularjsmaterial-design

1 Answers

1
votes

Turns out, according to the MDL docs you have to "define variables before the import of the default variables."

So MY _variables.scss as above:

@import "../../bower_components/material-design-lite/src/color-definitions";
//@import "functions";

$trim-color-classes: false !default;

// Use color primarily for emphasis. Choose colors that fit with
// your brand and provide good contrast between visual components.
$color-primary: $palette-grey-500 !default;
$color-primary-dark: $palette-grey-700 !default;
$color-accent: $palette-indigo-A200 !default;

// Our primary is dark, so use $color-dark-contrast for overlaid text.
$color-primary-contrast: $palette-yellow-500 !default;
// Our accent is dark, so use $color-dark-contrast for overlaid text.
$color-accent-contrast: $palette-yellow-500 !default;

And that file needs to be called before Bower adds the material design component import to my main.scss file:

@import "common/_variables";

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import "../../bower_components/material-design-lite/src/material-design-lite.scss";
// endbower

// more import statements here

And to view my custom colors, I put this in a page:

<div class="content-grid mdl-grid" style="height:300px">
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-50">
      50
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-100">
      100
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-200">
      200
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-300">
      300
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-400">
      400
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-500">
      500
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-600">
      600
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-700">
      700
    </div><div class="mdl-cell mdl-cell--1-col mdl-color--grey-A100">
      A100
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-A200">
      A200
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-A400">
      A400
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-A700">
      A700
    </div>
</div>

Custom MDL Color Pallet Display