Passing a Angular Material Theme to Oikaze

This example illustrates the use of Oikaze with an Angular Material theme. The theme is defined by Angular Material's SCSS functions, which are passed to Oikaze as a map. The map is then used to generate CSS variables, which can be used outside of Material.

@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-primary,
      accent: $my-accent,
    ),
  )
);

@use 'oikaze' as tokens with (
  $sets: (
    default: $my-theme,
  )
);

:root {
  @include tokens.css-definitions();
}

body {
  color: tokens.get('foreground.base'); // var(--foreground-base, black)
  color: tokens.get('$primary.default'); // #3f51b5;
}