Components: Bug: Theming - using mat-color(background, hue) where hue is a palette property results in sass compile error

Created on 24 May 2017  路  2Comments  路  Source: angular/components

Bug, feature request, or proposal:

Enhance background and foreground palettes on generated themes to include
all properties that a palette is featuring usually.

What is the expected behavior?

The foreground and background palettes are complete, e.g.

$mat-grey: (
  0: #ffffff,
  50: #fafafa,
  100: #f5f5f5,
  200: #eeeeee,
  300: #e0e0e0,
  400: #bdbdbd,
  500: #9e9e9e,
  600: #757575,
  700: #616161,
  800: #424242,
  900: #212121,
  1000: #000000,
  A100: #ffffff,
  A200: #eeeeee,
  A400: #bdbdbd,
  A700: #616161,
  contrast: (
    0: $black-87-opacity,
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: $black-87-opacity,
    600: $white-87-opacity,
    700: $white-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    1000: $white-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: $white-87-opacity,
  )
);

What is the current behavior?

The scss will not compile because the foreground and background palettes feature only
some magic constant values like background, raised-button, card among others.

What are the steps to reproduce?

Define and include a scss file that uses mat-color, e.g.

@import '~@angular/material/theming';

@mixin my-custom-component-theme($theme) {

    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    my-custom-component {
        background-color: mat-color($background, 300, 0.3);
        color: mat-color($foreground, A400, 0.9);
    }
}

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

Expectation that foreground and background are a full palettes on a theme and available when applying custom theming to custom material components. Otherwise its hard to find out what is available, especially since all the other palettes primary, accent and warn are fully available.

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

beta.5

All 2 comments

Foreground and background palettes are a different format from the primary/accent/warn palettes because the Material Design spec is more specific on those colors. Neither is just "grey" or similar; they're their own thing.

https://material.io/guidelines/style/color.html#color-themes

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings