feat(all theming): Clean and reusable way to override all components theme colors

[ahimik]

Feature Description

Currently, there is a way to generate a custom color palette using the generation tool. However, all components appear too dark regardless of the target color, and there is no single-line solution to specify a base color tone for all components since --mat-sys-primary is hardcoded to the tone value 40 by the theme mixin.

Unfortunately, with Material v19, picking colors from the theme no longer works. You can still specify a material theme using $app-theme: mat.define-theme(...) with some restrictions, but applying it using the new mixin @include mat.theme($app-theme) doesn't work.

So please provide clean and simple solution to:

1. Specify and reuse a theme object
For example:

// Define theme object
$app_theme: mat.define-theme((
 color: (primary: $primary-palette), 
...
)); // Like it was in Material 18

// then use this theme object to apply theme or get theme color:
@include mat.theme($app-theme);
$theme-color: mat.get-theme-color($app-theme, primary, 70);

2. Specify a base color tone for all components at once
For example:

  @include mat.theme((
    color: (
      theme-type: light,
      primary: themes.$app-theme-palette, // Generated color palette
      primary-color-tone: 70 // Here we specify which tone level to pick from color palette for --mat-sys-primary color
      ...
    )
  ));

or as an alternative output all theme-palette tones as css variables, so we can easily reuse them to customize theme and component colors:

  @include mat.theme-overrides((
    primary: var(--mat-sys-primary-70),
    on-primary: var(--mat-sys-primary-100)
  ));

  @include mat.autocomplete-overrides((
    background-color: var(--mat-sys-primary-80); // or any other custom color
  ));

3. Specify a base color for a specific component (single-line override)
For example:

  @include mat.autocomplete-overrides((
    base-color: mat.get-theme-color($theme, primary, 30); // or any other custom color
  ));