palette.scss

@use '~@angular/material' as mat;

$palette: (
  500: var(--brand-primary-color),
  primary-rgb: var(--brand-primary-color-rgb),
  contrast: (
    500: white,
    primary-rgb: white,
  )
);

$palette-default: 500;

$primary-palette: mat.define-palette($palette, $palette-default);
$accent-palette: mat.define-palette($palette, $palette-default);
$warn-palette: mat.define-palette(mat.$red-palette);


$primary-color: mat.get-color-from-palette($primary-palette);

theme.scss

@use '~@angular/material' as mat;
@use 'palette';


// Color Generator http://mcg.mbitson.com/#!/?mcgpalette0=%230061af
// Font Generator https://google-webfonts-helper.herokuapp.com/fonts
// Download fonts https://en.bestfonts.pro/font

$body-1: mat.define-typography-level($body-font-size, $body-line-height, 500);

$custom-typography: mat.define-typography-config(
  $font-family: $font-family,
  $body-1: $body-1
);

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core($custom-typography);

@include mat.all-component-typographies($custom-typography);

$app-theme: mat.define-light-theme(palette.$primary-palette, palette.$accent-palette, palette.$warn-palette);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($app-theme);