@brewermap/theming
v0.0.6
Published
Color variables and common styles for Brewer Map apps
Downloads
5
Readme
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);