Method of inclusion for color variables

[althras]

The example states this:

$layout-header-bg-color: #000 !default;

When trying to get it to work, this is actually what works:

$color-primary: 121,85,72 !default;
$color-primary-dark: 93,64,55 !default;
$color-accent: 244,67,54 !default;

@import "material";

Update example, unless there's something wrong with code? I find it odd that it's the rgb values that is required as well.

[rubysamurai]

$layout-header-bg-color: #000 !default;

Changes default background color of a header.

Using MDL official code snippets, by default it looks like this and with the example above it should look like this.

I just tested it with a few other header examples and for me this variable work as intended. Could you please confirm that there is an issue and provide an example of not working html chunk of code.

[althras]

Odd - with

$layout-header-bg-color: #000 !default;

it works fine.

Try this:

$color-primary: #795548 !default;

Stick a colored button somewhere, and you'll get a transparent button instead of a brown one. With this however:

$color-primary: 121,85,72 !default;

The brown color will come out.

[rubysamurai]

Oh I see, the problem with your button example is because Google decided to use RGB in their Sass source code; For instance, here are some variables for button colors:

// Colored button colors.
$button-primary-color-alt: unquote("rgb(#{$color-primary})") !default;
$button-hover-color-alt: unquote("rgb(#{$color-primary})") !default;
$button-active-color-alt: unquote("rgb(#{$color-primary})") !default;

And if you want these variable to work properly with hexadecimal value from a $color-primary: #795548 !default; you have to redefine them too, like this:

// Colored button colors.
$button-primary-color-alt: $color-primary !default;
$button-hover-color-alt: $color-primary !default;
$button-active-color-alt: $color-primary !default;

Google's official MDL repository has a few issues raised regarding this, here is a link to one of them, see last post.

And yes, I should definitely make this more clear in a README and current example showing hexadecimal color is misleading.