mixinColor: Allow custom colors

[tmburnell]

Feature Description

Add error as a valid ThemePalette
or better yet, provide a way to create custom Palette colors.

Use Case

Years ago I had the need to have a color="error" that was different than color="warn".
To accomplish this I have created scss library that creates all the css needed on all the material components to support the error color.
Here is an example of what I am talking about: https://stackblitz.com/edit/error-button-color

It works in stackblitz due to this bug: stackblitz/core#220
With Angular9 and this setting turned on (in the tsconfig.json):

"angularCompilerOptions": {
    "strictTemplates": true
}

it returns this error:

Type '"error"' is not assignable to type 'ThemePalettte'

A third option (that I have not figured out) is can you override the ThemePalettte type definition?

[devversion]

As per Material Design specification, there is only a primary, secondary and error palette. Obviously our palette is named warn through. Regardless of that though, there are only three supported themes as per spec, so I don't think we'll be able to add support for more.

We cannot add another option to ThemePalette as that would signify a breaking change, and we'd need to handle it in our theming system too.

Generally though, this is a great issue though! Please keep us updated when you find a way to achieve a fourth palette. It might be worth experimenting with TS declaration merging (though that might not play nicely w/ type checking)

[tmburnell]

I may have got this to work (not fully tested).

import { ThemePalette as oldThemePalette } from '@angular/material/core';

export type ThemePalette = Partial<oldThemePalette | 'error'>;

If I make all my variables use my definition instead of materials.

The only issue i see is there is no clean way to do:

<button mat-button color="error"></button>

because it will by default use materials definition and not mine. (unless I can find a way to globally apply it.
---------------------------------------
my compiler was slow even my custom type was marked as errored

Type '"error" | "primary" | "accent" | "warn"' is not assignable to type 'ThemePalette'.

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