Angular Material

Pre-built Angular Material theme config compatible with both v19 and v20. The package itself does not import @angular/material — each consumer app uses its own pinned version, and the same config map produces correct --mat-sys-* system tokens for whichever version is installed.

Usage

@use '@angular/material' as mat;
@use '@presencelearning/styles/material' as pl;

:root {
  @include mat.theme(pl.$theme-light, pl.$overrides-light);
}
.pl-dark {
  @include mat.theme(pl.$theme-dark, pl.$overrides-dark);
}

Live preview

Below is a real Angular Material build using @presencelearning/styles/material — the components, their colors, typography, and shape are all driven by the same SCSS config consumers will use.

Exports

• $theme-light / $theme-dark — full config map: (color: ..., typography: ..., density: ...)
• $overrides-light / $overrides-dark — Figma “01 Color Variables” values keyed by MD3 system token name (primary, on-primary, surface, outline, etc.)
• $primary-palette, $tertiary-palette — composed M3 palettes (16-tone + nested secondary/neutral/neutral-variant/error)
• $typography, $density — the typography and density configs you can compose into your own custom theme

Token values are sourced from colors2, surfaces, and typography — change those primitives and the Material theme follows automatically.

Cross-version proof

Both Angular Material v19 (used by edu-clients) and v20 (used by room) accept the same $config and $overrides map shapes and emit the same --mat-sys-* namespace. Tested via direct compilation against each version’s installed @angular/material source.