1.1.2 • Published 4 years ago

@tallang/shared-design-demo v1.1.2

Weekly downloads
1
License
MIT
Repository
-
Last release
4 years ago

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);

Fortum 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.

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.0

4 years ago