Series: Material Design with ember-paper

Material Design with ember-paper-Colors

Published on May 27, 2016

Material Design has a nice palette of colors, and ember-paper makes them easy to use.



$sidebar-color: 'grey';
.course-sidebar {
  background-color: color($sidebar-color, '900');
  md-icon {
    color: color($sidebar-color, '200');
$theme-name: "default" !default;

$primary: "indigo" !default;
$accent: "pink" !default;
$warn: "red" !default;
$background: "grey" !default;
$link: "light-blue" !default;

$dark: false !default;
$default-color: '500' !default;

$foreground: "foreground-dark" !default;
$foreground-shadow: $foreground-light-shadow !default;

$base-background-color: white !default;
$base-color: rgba(0, 0, 0, 0.87) !default;
{{#paper-toolbar warn=true}}



Hi and welcome back to our series on Ember Paper. This week we’re not going to focus on a specific component. Instead, we’re going to focus on how to use colors in Ember Paper. We looked at this a little bit in our first episode in the series, but here we’re going to go deeper.

So Material Design, it has a palette of colors and they’re represented in a certain way. You have the color which is here at the top, and then we have different weights, so anywhere from 50 to 900, and the higher the weight, the darker it is. There are also accent colors. They’re represented by the letter ‘A’ for ‘accent’ followed by a weight. This way of dealing with things seems a lot easier than representing it through hexadecimal, where let’s say you want to make something lighter. It’s kind of hard to tell with hexadecimal how you’re going to do that. You just have to experiment until it looks sort of like the same color but lighter. And with hexadecimal, this is a simplified one, but you have... I mean this is still simplified... you have the paradox of choice where it’s really difficult to decide, just because there are so many options.

So how do we use this within Ember Paper? Well, if you think back to the first episode, you may remember that we looked at color-palette.scss and we saw this list of colors. And this list, notice it’s the same list here. These are the Material Design colors. And of course the different weights here are defined in hexadecimal. It’s way easier to go from 300 to 400 in blue-grey than to figure out that this to this means you’re darkening it but keeping the same color, so thank you Material Design folks for doing that. And so we have these lists of these defined colors, and then we have this color function, and we’ll go ahead and see how we use that.

Our example will be the Ember School App, and what we’ll first look at is this sidebar. So we have our background color, and then whatever color we have the icons as. And here we can see that they’re both different colors of grey, so the background color is just a darker shade than the icon color is. And we can go ahead and make them both blue-grey if we wanted to. It still looks pretty good. And you can see that the contrast between them is still pretty similar to what it used to be before, and the lighter shade and the darker shade are clearly coming from the same color.

You can make this even more explicit if you want, that these are the same color. So we can create a variable called sidebar-color which will define what we want to have, and we’ll make it grey for now. And we’ll go ahead and replace all our instances of blue-grey, and then we’ll go ahead and replace all our instances of grey so that it’s all one shade, all controlled at the top.

So here, everything around here except for basically this orange is controlled by the sidebar-color variable. Let’s go ahead and change it from grey to indigo. You can see all of this changing all at once. So this is a great scheme for being able to set up different colors and theming. Of course in such a theme, you'd need to change the orange to make it match a little bit better. The good thing about Material Design is that even when it clashes, it’s... well, there are much worse things that could happen than this blue and orange if we were just free-styling it.

So speaking of themes, what about the things like the pre-built-in Ember Paper components, things like this top bar or this progress bar? How do we decide the color and the theming on that? Well, in the Ember Paper addon, there’s a file called default-theme.scss, and it contains all the different colors that you can overwrite. And so the primary one is indigo, that’s what it’s been using on almost everything, and it has some other things as well. Let’s start by changing this primary. And we’ll do that in our app.scss before we input ember-paper. That’s important. So we’ll just define primary and we’ll give it orange. So now when we go back, we’ll see that everything that was indigo is now orange, and this is everything that was determined using the primary color. However, you can make a component be determined by one of the other colors. In the documentation, it gives the example of making it the accent color, and you’d do this by saying accent=true. So now this will be pink. That got me thinking, can you turn a component into any of these other colors? And I went ahead and checked them all out for you. You can turn it into the warn color, you can definitely do that, but that doesn’t work for any of the other colors. Let’s say if we try to turn it background, then it’s going to go back to the primary color.

So that’s how you use the Material Design colors within Ember Paper. Now if you found huge flaws in this, remember I’m not a designer, I’m just showing you how you can design more quickly using the tools available to you in Ember. And finally, I’d like to thank Michael Swanson for showing me a lot of the things that I showed you today. He’s a great designer and Ember developer. Alright, and I will see you next week.

Material Design with ember-paper

Subscribe to our mailing list