Add support for angular 16

[heXXag0n]

Maybe this will automatically be fixed when tackling #58

[ODAncona]

If anyone is looking for a working config...

@use '@angular/material' as mat;
@include mat.core();

/* Fonts */
@import 'https://fonts.googleapis.com/icon?family=Material+Icons+Outlined';
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@300;400;500&display=swap');

/* Typography */
// Define the typography levels.
$headline1: mat.define-typography-level(98px, 112px, 300);
$headline2: mat.define-typography-level(61px, 56px, 300);
$headline3: mat.define-typography-level(49px, 48px, 300);
$headline4: mat.define-typography-level(35px, 40px, 300);
$headline5: mat.define-typography-level(24px, 24px, 300); // H1
$headline6: mat.define-typography-level(20px, 20px, 300); // H2
$subtitle1: mat.define-typography-level(16px, 20px, 300); // H3
$subtitle2: mat.define-typography-level(14px, 20px, 300); // H4
$body1: mat.define-typography-level(16px, 24px, 300); // Base body text
$body2: mat.define-typography-level(14px, 24px, 300);
$caption: mat.define-typography-level(12px, 20px, 400);
$button: mat.define-typography-level(14px, 14px, 500);

// Define the typography config.
$bs-typography: mat.define-typography-config(
  $font-family: 'Libre Baskerville',
  $headline-1: $headline1,
  $headline-2: $headline2,
  $headline-3: $headline3,
  $headline-4: $headline4,
  $headline-5: $headline5,
  $headline-6: $headline6,
  $body-1: $body1,
  $body-2: $body2,
  $subtitle-1: $subtitle1,
  $subtitle-2: $subtitle2,
  $button: $button,
  $caption: $caption
);

// Light Theme Text
$dark-text: #000000;
$dark-primary-text: rgba($dark-text, 0.87);
$dark-accent-text: rgba($dark-primary-text, 0.54);
$dark-disabled-text: rgba($dark-primary-text, 0.38);
$dark-dividers: rgba($dark-primary-text, 0.12);
$dark-focused: rgba($dark-primary-text, 0.12);


$mat-light-theme-foreground: (
  base:              black,
  divider:           $dark-dividers,
  dividers:          $dark-dividers,
  disabled:          $dark-disabled-text,
  disabled-button:   rgba($dark-text, 0.26),
  disabled-text:     $dark-disabled-text,
  elevation:         black,
  secondary-text:    $dark-accent-text,
  hint-text:         $dark-disabled-text,
  accent-text:       $dark-accent-text,
  icon:              $dark-accent-text,
  icons:             $dark-accent-text,
  text:              $dark-primary-text,
  slider-min:        $dark-primary-text,
  slider-off:        rgba($dark-text, 0.26),
  slider-off-active: $dark-disabled-text,
);

// Dark Theme text
$light-text: #ffffff;
$light-primary-text: $light-text;
$light-accent-text: rgba($light-primary-text, 0.7);
$light-disabled-text: rgba($light-primary-text, 0.5);
$light-dividers: rgba($light-primary-text, 0.12);
$light-focused: rgba($light-primary-text, 0.12);

$mat-dark-theme-foreground: (
  base:              $light-text,
  divider:           $light-dividers,
  dividers:          $light-dividers,
  disabled:          $light-disabled-text,
  disabled-button:   rgba($light-text, 0.3),
  disabled-text:     $light-disabled-text,
  elevation:         black,
  hint-text:         $light-disabled-text,
  secondary-text:    $light-accent-text,
  accent-text:       $light-accent-text,
  icon:              $light-text,
  icons:             $light-text,
  text:              $light-text,
  slider-min:        $light-text,
  slider-off:        rgba($light-text, 0.3),
  slider-off-active: rgba($light-text, 0.3),
);

// Background config
// Light bg
$light-background:    #fafafa;
$light-bg-darker-5:   darken($light-background, 5%);
$light-bg-darker-10:  darken($light-background, 10%);
$light-bg-darker-20:  darken($light-background, 20%);
$light-bg-darker-30:  darken($light-background, 30%);
$light-bg-lighter-5:  lighten($light-background, 5%);
$dark-bg-tooltip:     lighten(#2c2c2c, 20%);
$dark-bg-alpha-4:     rgba(#2c2c2c, 0.04);
$dark-bg-alpha-12:    rgba(#2c2c2c, 0.12);

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

// Dark bg
$dark-background:     #2c2c2c;
$dark-bg-lighter-5:   lighten($dark-background, 5%);
$dark-bg-lighter-10:  lighten($dark-background, 10%);
$dark-bg-lighter-20:  lighten($dark-background, 20%);
$dark-bg-lighter-30:  lighten($dark-background, 30%);
$light-bg-alpha-4:    rgba(#fafafa, 0.04);
$light-bg-alpha-12:   rgba(#fafafa, 0.12);

// Background palette for dark themes.
$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,
);

// Theme Config
body {
  --primary-color: #492d06;
  --primary-lighter-color: #c8c0b4;
  --primary-darker-color: #311c03;
  --text-primary-color: #{$light-primary-text};
  --text-primary-lighter-color: #{$dark-primary-text};
  --text-primary-darker-color: #{$light-primary-text};
}  
$theme-primary: mat.define-palette(mat.$brown-palette, 500);

body {
  --accent-color: #dea249;
  --accent-lighter-color: #f5e3c8;
  --accent-darker-color: #d18631;
  --text-accent-color: #{$dark-primary-text};
  --text-accent-lighter-color: #{$dark-primary-text};
  --text-accent-darker-color: #{$dark-primary-text};
}
$theme-accent: mat.define-palette(mat.$orange-palette, A200, A100, A400);

body {
  --warn-color: #ed932f;
  --warn-lighter-color: #fadfc1;
  --warn-darker-color: #e5761d;
  --text-warn-color: #{$dark-primary-text};
  --text-warn-lighter-color: #{$dark-primary-text};
  --text-warn-darker-color: #{$dark-primary-text};
}   
$theme-warn: mat.define-palette(mat.$red-palette);

$bs-theme: mat.define-light-theme((
 color: (
   primary: $theme-primary,
   accent: $theme-accent,
   warn: $theme-warn,
 ),
  typography: $bs-typography,
  density: 0,
));
@include mat.all-component-themes($bs-theme);
@include mat.typography-hierarchy($bs-typography);

[pliersch]

@ODAncona Try to set the background to green! Many variables will not use. It seems you set only primary, accent, warn and typography for bs/light theme. This is standard.