themes.scss

@use 'sass:map';
@use '@angular/material' as mat;
@use '../../big/src/lib/theming' as theme;


$my-theme-primary: mat.define-palette(mat.$indigo-palette, 500, 200, 800);
$my-theme-accent: mat.define-palette(mat.$cyan-palette);
$my-theme-warn: mat.define-palette(mat.$deep-orange-palette, A200);

$big-typography-level: mat.define-typography-level(
   $font-family: 'Open Sans',
   $font-weight: 800,
   $font-size: 3rem,
   $line-height: 1,
   $letter-spacing: 0.2em);

$config: mat.define-typography-config();

$config: map.merge(
    $config,
    ( fs-big-typography: $big-typography-level)
);

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

// =====================================
// Initialize custom component themes
// =====================================
@mixin custom-components-theme($theme) {
    @include theme.big-component-theme($theme);
    @include theme.big-component-typography($theme);
// ====================================
// If we had more component themes
// we could include them here as well.
// ====================================
}
@include mat.core-theme($theme);
@include custom-components-theme($theme);