Components: Ability to set more than just primary 500, accent 500 or warn 500 as button colors

[bradringel]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

It would be nice to be able to specify a color level from a specified palette to a button using the color attribute. I sometimes want to be able to make a FAB primary 400 or something like that

What is the current behavior?

You can set a button to primary, accent, or warn and the button component picks the 500 level of that palette

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

What is the use-case or motivation for changing an existing behavior?

We don't always want to use the 500 level of our palettes for styling buttons or other components

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular material beta 8

Is there anything else we should know?

[willshowell]

The button doesn't necessarily use 500, but instead uses the default color. If you specify,

$primary: mat-palette($mat-indigo, 400, 100, 700);

then your primary components will all be styled with indigo-400 (occasionally using 100 and 700 for lighter & darker when needed). If you want to style your components different from your primary-default color, you can do this

$primary: map-get($theme, primary);
$my-other-color:  mat-color($primary, 300);

// Override

[bradringel]

Interesting, didn't know that it only used the default. I'm not sure that would solve this issue though because I do want most of the components to be styled using 500, but it would be nice to choose another color for one or two things in certain situations. Currently I'm just overriding the color by defining a style for .mat-fab.mat-primary in the component where the fab is used and setting the color there. That will probably break at some point either due to selector name changes or shadow DOM stuff

[willshowell]

Understood. I think the goal is to use css variables when they're available for all supported browsers, and that should make a lot of theming issues easier.

If I were you, I'd consider overriding globally or wrapping it in a component like <my-primary-fab> with ViewEncapsulation.None. You can use this for reference as to what you should override. Maybe even set up an RSS subscription to that page so you'll know if selectors change?

[jelbourn]

This is something that we think will come once we're able to switch to css variables for theming (e.g., the day we can drop IE11). Trying to allow hue variants now would end up generating an uncomfortable amount of css payload.

[bradringel]

Yeah now that you mention it, generating a style for each color in all three palettes is way too much css to generate. Didn't think about that part.

[willshowell]

@bradringel I don't know why this didn't occur to me before:

You can create two themes (see the part about multiple themes), like $my-main-theme, and $my-secondary-theme. In the secondary one, use alternate palette colors (like indigo-400 for primary).

Then just wrap your FAB or whatever with that class

.my-secondary-theme {
  @include angular-material-theme($my-secondary-theme);
}

<div class="my-secondary-theme"><button md-fab>...</button></div>

[jelbourn]

Also note that, instead of using angular-material-theme (which outputs styles for all of the components), you can use e.g. mat-button-theme which will just output the styles for button.

[tommyc38]

Below is a mixin i created for getting more colors for buttons. Include the mixin in your global style sheet and just add the classes to the buttons you want additional colors applied to.

`

$btn-primary:(
       50: mat-color($primary, 50),
      A100: mat-color($primary, A100),
     A200: mat-color($primary, A200),
     A400: mat-color($primary, A400),
     A700: mat-color($primary, A700),
           );


 @mixin cor-btn-colors($color-map, $palette: primary){
  @each $color, $value in $color-map{
    .cor-btn-#{$color}{

       color: $value;

       &.mat-button:hover .mat-button-focus-overlay,
       &.mat-stroked-button:hover .mat-button-focus-overlay{
       background-color: rgba($value, .12);
        }

        &.mat-stroked-button{
        border-color: $value;
       }

      &.mat-flat-button{
      color: mat-color($palette, #{$color}-contrast);
      background-color: $value;
      }
    }
  }

    @include cor-btn-colors($btn-primary, $primary);

`