Allow CSS variables in color palettes

[StefanKern]

Please describe the feature you would like to request.

A color palette has to be defined by by using COLOR values, but doesn't allow CSS variables.

Example:

$sample-palette: (
  50 : var(--color-primary), ...

is invalid.

What is the use-case or motivation for this proposal?

We have an application, where we defined the colors as CSS variables, so we can switch for different brands.

Is there anything else we should know?

Only two places are depending on the colors:

  .mat-calendar-body-disabled > .mat-calendar-body-selected {
    background-color: fade-out(mat-color($palette), $mat-datepicker-selected-fade-amount);
  }

_theming.scss 2542

.mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) {
    border-color: fade-out(mat-color($foreground, hint-text), $mat-datepicker-today-fade-amount);
  }

_theming.scss 2603

If these lines are commented out, a palette can be used with CSS variables.

I know CSS variables are not supported by Internet explorer. However just changing these two lines (the calendar disables state), would allow their usage!

[jelbourn]

@mmalerba we should remove this use of fade-out from the calendar CSS

@crisbeto we should have something that asserts that people can successfully use css variables like this

[angular-automatic-lock-bot]

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.}