feat(theme): add the ability to add (even partial) background and foreground to color object

[heXXag0n]

feat(theme): add the ability to add (even partial) background and foreground to color object

While declaring the primary, accent and warn via the color object is easy and straight-forward, the configuration of foreground and background proves rather tedious. This commit adds the ability to declare foreground and background in the color object when defining a theme, even partially, meaning that missing values are taken from the default light or dark theme respectively.

Fixes #11390, #6244

[heXXag0n]

Example:

$main-theme: mat.define-dark-theme((
  color: (
    primary: $theme-primary,
    accent: $theme-accent,
    warn: $theme-warn,
    foreground: $mat-dark-theme-foreground,
    background: $mat-dark-theme-background,
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

whereas the background configuration looks i.e. like this

$mat-dark-theme-background: (
  background: $dark-background,
  status-bar: $dark-bg-lighter-20,
  app-bar: $dark-bg-lighter-5,
  hover: $light-bg-alpha-4,
  card: $dark-bg-lighter-5,
  dialog: $dark-bg-lighter-5,
  tooltip: $dark-bg-lighter-20,
  disabled-button: $light-bg-alpha-12,
  raised-button: $dark-bg-lighter-5,
  focused-button: $light-focused,
  selected-button: $dark-bg-lighter-20,
  selected-disabled-button: $dark-bg-lighter-30,
  disabled-button-toggle: $dark-bg-lighter-10,
  unselected-chip: $dark-bg-lighter-20,
  disabled-list-option: $dark-bg-lighter-10,
);

[andrewseguin]

Thanks for this contribution! We are actually in the works of redoing our whole theming setup to start bringing in Material 3 styles. We agree that it's not easy to customize specific parts of components and we want to make it easier. However, we do not expect to use the current setup, so this PR will already be out of sync with our plans. We appreciate the work

[heXXag0n]

Oh okay, thanks for information and the quick reply :)

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