Skip to content

Latest commit

 

History

History
52 lines (42 loc) · 2.23 KB

README.md

File metadata and controls

52 lines (42 loc) · 2.23 KB

Shared design demo

npm version

This package works as a demo to illustrate how to share typography and colors through SASS mixins:

Colors

The colors and their SASS-names are provided below.

Colors

  • #2196F3 #2196F3: $calm-blue
  • #009688 #009688: $teal
  • #FFC107 #FFC107: $amber
  • #D32F2F #D32F2F: $red

Greys

  • #282828 #282828: $dark-grey
  • #dedede #dedede: $light-grey

All of the provided colors are available in three shades. They can be used by postfixing the SASS-name with -75 or -50. This will give the color an opacity of 75% or 50%, depending on your choice. An example is given below:

background: $calm-blue;
color: $calm-blue-75;
border-color: $calm-blue-50;

Material Design Colors

If you're using @angular/material, this package provides prebuilt primary, accent and warn colors. These variables are named

  • $demo-primary
  • $demo-accent
  • $demo-warn

They can be used when configuring the @angular/material palette:

@import '~@angular/material/theming';
@import '~@tallang/shared-design-demo/theme';

@include mat-core();
$primary-color:  mat-palette($demo-primary);
$accent-color:   mat-palette($demo-accent);
$warn-color:     mat-palette($demo-warn);
$theme:          mat-light-theme($primary-color, $accent-color, $warn-color);

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

Shared typography

The typography configuration is implemented as a SASS mixin, and can be used by including it in your styles:

@import '~@tallang/shared-design-demo/theme';

@include demo-typography();

The demo-typography mixin includes color, font-size, font-weight, line-height, margin and alignment for all common HTML text elements (h1, h2, p, b, strong, i, em, mark, del, ins). It also sets the global font family to Montserrat with a fallback to sans-serif if Montserrat is not available.