Theming for Brewer Map Applications

Angular Material based predefined themes, palettes and general styles.

Colors

This are the advailable color palettes:

Name	Base Color Code	SCSS Variable	Color
Hop	#73c369	$bm-hop
Chocolate	#453329	$bm-chocolate
Amber	#912411	$bm-amber
Violet	#b793c9	$bm-violet
Oldhop	#515913	$bm-oldhop
Apricot	#ffcead	$bm-apricot
Orange	#ee9e4f	$bm-orange
Dirt	#977459	$bm-dirt
Wheat	#ffdb82	$bm-wheat
Water	#69a8c3	$bm-water

Usage

Just import the main theming scss in the file for the Angular Material custom theme setup and use the palettes

@import "~@angular/material/theming";
@import "~@bm/theming/bm";

$bm-typography: mat-typography-config(
  $font-family: 'Open Sans, sans-serif',
  $headline: mat-typography-level(32px, 48px, 700),
  $body-1: mat-typography-level(16px, 24px, 500)
);

@include mat-core($bm-typography);

$bm-hops-primary: mat-palette($bm-hop);
$bm-hops-accent: mat-palette($bm-chocolate, 800);

$bm-hops-warn: mat-palette($bm-amber);

$bm-hops-theme: mat-light-theme(
  (
    color: (
      primary: $bm-hops-primary,
      accent: $bm-hops-accent,
      warn: $bm-hops-warn,
    ),
  )
);

@include angular-material-theme($bm-hops-theme);