theme.scss

@use 'sass:map';
@use '@angular/material' as mat;
@use '@fireflysemantics/big-component-typography-example/theming' as theme;

// ============================================
// Only include core on time
// ============================================
@include mat.core();

// ============================================
// Palettes: https://material.io/design/color/
// ============================================
$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$cyan-palette);
$theme-warn: mat.define-palette(mat.$orange-palette);

$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: $theme-primary,
      accent: $theme-accent,
      warn: $theme-warn,
    ),
    typography: $config,
  )
);

@include mat.all-component-themes($theme);

// =====================================
// 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 custom-components-theme($theme);