0.0.6 • Published 3 years ago
@brewermap/theming v0.0.6
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);