Understanding generated themes in angular material m3

Question

I used the theme generator of angular material m3 (v18). The generated file look like this:

$_palettes: (
  primary: (
    0: #000000,
    10: #001a43,
    20: #002d6c,
...

$_rest: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes,  neutral-variant),
  error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary,
    // use-system-variables: true,
  ),
  typography: (
    plain-family: 'Roboto, sans-serif',
    brand-family: 'Roboto, sans-serif',
    // use-system-variables: true,
  ),
));

Now I have some questions about the generated code:

1. _primary and _tertiary both contains secondary, neutral and error. This is assigned to the color. Why can't I assign secondary directly?
2. Is there a place inside the theme where I can store custom colors which doesn't belong to a palette? As far as I understand, palettes are supposed to be a range of colors with different shade.
3. In m2 it was possible to set the mat-typography class to body, so all elements used the correct font-family. Not sure why this has been removed. Is there something similar to make sure, elements like h2, h3... use the font-family which I assigned in typography in theme?

Answer 1

_primary and _tertiary both contains secondary, neutral and error. This is assigned to the color. Why can't I assign secondary directly?

If you want to set secondary directly, you can modify the colors of secondary collection in the primary palette. The tertiary secondary palette is discarded.

How to define 6 palettes in Angular Material 3?

Why this might be done, is to simplify the color palettes of angular, or maybe to stick to M3 design standards.

---

Is there a place inside the theme where I can store custom colors which doesn't belong to a palette? As far as I understand, palettes are supposed to be a range of colors with different shade.

You can create your own custom SCSS/CSS variables and use them through the application.

You might have a tough time access SCSS variables from other components, in that scenario, CSS variables are better.

:root {
    --some-var: #000000;
}

$some-var: #ffffff

In m2 it was possible to set the mat-typography class to body, so all elements used the correct font-family. Not sure why this has been removed. Is there something similar to make sure, elements like h2, h3... use the font-family which I assigned in typography in theme?

Yes, on the theme definition we have the option to define typography, this will get applied throughout the application.

$theme: mat.define-theme((
      typography: (
        brand-family: Comic Sans,
        plain-family: Wingdings,
        bold-weight: 300,
        medium-weight: 200,
        regular-weight: 100,
      )
));

Angular 18 Material 3 Font Size [duplicate]