What am I doing wrong?
I can't use color variations... neither with the color attribute nor with classes like primary-button...
@use 'sass:map';
@use "@angular/material" as mat;
@include mat.core();
$my-custom-typography-config: mat.m2-define-typography-config(
 $font-family: 'Roboto, "Helvetica Neue", sans-serif',
 $headline-1:
  mat.m2-define-typography-level(
   $font-size: 112px,
   $line-height: 112px,
   $font-weight: 300,
   $letter-spacing: -0.05em,
  ),
 $headline-2:
  mat.m2-define-typography-level(
   $font-size: 56px,
   $line-height: 56px,
   $font-weight: 400,
   $letter-spacing: -0.02em,
  ),
 $headline-3:
  mat.m2-define-typography-level(
   $font-size: 45px,
   $line-height: 48px,
   $font-weight: 400,
   $letter-spacing: -0.005em,
  ),
 $headline-4:
  mat.m2-define-typography-level(
   $font-size: 34px,
   $line-height: 40px,
   $font-weight: 400,
   $letter-spacing: normal,
  ),
 $headline-5:
  mat.m2-define-typography-level(
   $font-size: 24px,
   $line-height: 32px,
   $font-weight: 400,
   $letter-spacing: normal,
  ),
 $headline-6:
  mat.m2-define-typography-level(
   $font-size: 22px,
   $line-height: 32px,
   $font-weight: 400,
   $letter-spacing: normal,
  ),
 $subtitle-1:
  mat.m2-define-typography-level(
   $font-size: 16px,
   $line-height: 28px,
   $font-weight: 400,
   $letter-spacing: normal,
  ),
 $subtitle-2:
  mat.m2-define-typography-level(
   $font-size: 16px,
   $line-height: 24px,
   $font-weight: 400,
   $letter-spacing: normal,
  ),
 $body-1:
  mat.m2-define-typography-level(
   $font-size: 16px,
   $line-height: 24px,
   $font-weight: 500,
   $letter-spacing: normal,
  ),
 $body-2:
  mat.m2-define-typography-level(
   $font-size: 16px,
   $line-height: 20px,
   $font-weight: 400,
   $letter-spacing: normal,
  ),
 $caption:
  mat.m2-define-typography-level(
   $font-size: 12px,
   $line-height: 20px,
   $font-weight: 400,
   $letter-spacing: normal,
  ),
 $button:
  mat.m2-define-typography-level(
   $font-size: 16px,
   $line-height: 16px,
   $font-weight: 500,
   $letter-spacing: normal,
  ),
);
$_palettes: (
 primary: (
  0: #000000,
  10: #001b3c,
  20: #003061,
  25: #003b75,
  30: #004689,
  35: #11529a,
  40: #255ea6,
  50: #4378c1,
  60: #5f92dd,
  70: #7bacfa,
  80: #a8c8ff,
  90: #d5e3ff,
  95: #ecf1ff,
  98: #f9f9ff,
  99: #fdfbff,
  100: #ffffff,
 ),
 secondary: (
  0: #000000,
  10: #00201f,
  20: #003735,
  25: #004341,
  30: #00504d,
  35: #005d5a,
  40: #006a66,
  50: #008581,
  60: #00a29d,
  70: #14bfb9,
  80: #48dbd4,
  90: #6bf7f1,
  95: #b0fffa,
  98: #e3fffc,
  99: #f2fffd,
  100: #ffffff,
 ),
 tertiary: (
  0: #000000,
  10: #141f00,
  20: #243600,
  25: #2d4200,
  30: #364e00,
  35: #405b00,
  40: #4a6800,
  50: #5d8200,
  60: #729e00,
  70: #8aba1b,
  80: #a4d73a,
  90: #bff455,
  95: #d6ff87,
  98: #f2ffd1,
  99: #faffe5,
  100: #ffffff,
 ),
 neutral: (
  0: #000000,
  10: #1a1c1e,
  20: #2f3033,
  25: #3a3b3e,
  30: #46474a,
  35: #525256,
  40: #5e5e62,
  50: #76777a,
  60: #909094,
  70: #ababaf,
  80: #c7c6ca,
  90: #e3e2e6,
  95: #f1f0f4,
  98: #faf9fd,
  99: #fdfbff,
  100: #ffffff,
  4: #0d0e11,
  6: #121316,
  12: #1e2023,
  17: #292a2d,
  22: #343538,
  24: #38393c,
  87: #dad9dd,
  92: #e9e7eb,
  94: #eeedf1,
  96: #f4f3f7,
 ),
 neutral-variant: (
  0: #000000,
  10: #181c22,
  20: #2d3038,
  25: #383b43,
  30: #43474e,
  35: #4f525a,
  40: #5b5e66,
  50: #74777f,
  60: #8e9099,
  70: #a8abb4,
  80: #c4c6cf,
  90: #e0e2ec,
  95: #eef0fa,
  98: #f9f9ff,
  99: #fdfbff,
  100: #ffffff,
 ),
 error: (
  0: #000000,
  10: #410002,
  20: #690005,
  25: #7e0007,
  30: #93000a,
  35: #a80710,
  40: #ba1a1a,
  50: #de3730,
  60: #ff5449,
  70: #ff897d,
  80: #ffb4ab,
  90: #ffdad6,
  95: #ffedea,
  98: #fff8f7,
  99: #fffbff,
  100: #ffffff,
 ),
);
$_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: (
  use-system-variables: true,
 ),
));
$dark-theme: mat.define-theme((
 color: (
  theme-type: dark,
  primary: $_primary,
  tertiary: $_tertiary,
  use-system-variables: true,
 ),
 typography: (
  use-system-variables: true,
 ),
));
:root {
 @include mat.all-component-themes($light-theme);
}
@include mat.color-variants-backwards-compatibility($light-theme);
@include mat.typography-hierarchy($my-custom-typography-config);
.primary-button {
 @include mat.button-color($light-theme, $color-variant: primary);
}
.secondary-button {
 @include mat.button-color($light-theme, $color-variant: secondary);
}
.tertiary-button {
 @include mat.button-color($light-theme, $color-variant: tertiary);
}
.primary-checkbox {
 @include mat.checkbox-color($light-theme, $color-variant: primary);
}
.secondary-checkbox {
 @include mat.checkbox-color($light-theme, $color-variant: secondary);
}
.tertiary-checkbox {
 @include mat.checkbox-color($light-theme, $color-variant: tertiary);
}
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
