@infrabel-ui/styles NPM

@infrabel-ui/styles

The library holds all the styling assets and utilities for Infrabel tools.

Installation

yarn add @infrabel-ui/styles

Usage

To use the styling assets and utilities of this library, you can import the scss files to your project, for example adding it to an angular project make sure to add it to this array:

angular.json > projects > {NAME_OF_YOUR_PROJECT} > architect > build > options

// Content of angular.json
...
"options": {
    "assets": [
        ...
        {
        "glob": "**/*.woff",
        "input": "./node_modules/@infrabel-ui/styles/src/assets/fonts",
        "output": "./assets/fonts"
        }
    ],
    "stylePreprocessorOptions": {
        "includePaths": [
        ...
        "./node_modules/@infrabel-ui/styles/src",
        "./node_modules/@infrabel-ui/styles/src/infrabel-ui"
        ]
    },
}

To include it inside a publishable library:

    // Content of ng-package.json
    ...
    "lib": {
        "entryFile": "src/index.ts",
        "styleIncludePaths": [
        ...
        "./node_modules/@infrabel-ui/styles/src",
        "./node_modules/@infrabel-ui/styles/src/infrabel-ui"
        ]
    }

then use it inside any .scss files within your angular projects (app or library) as such:

@import 'infrabel-ui';

body {
    background-color: infrabel-color(primary, base);
}

// this will compile to:
body {
    background-color: #02bcf0;
}

Variables table of contents

Name	type	Description
`$infrabel-colors`	scss map	Contains base and variant colors
`infrabel-color($name, $variant)`	scss function	returns respected colors from color palette

Basic Color Palette

Color palette consist of the following base colors and their respected variant:

Primary: -- base, light, lighter, dark, darker
Accent: -- base, light, lighter, dark, darker
Supporting: -- base, light, lighter, dark, darker
Shade: -- base, light, lighter, lightest
Warn: -- base
Success: -- base
Grey: -- base
Basic: -- light -- dark

Material Design Palettes

Inheriting from the Basic Color Palette, a set of material design color palettes are available:

\$infrabel-md-primary
\$infrabel-md-accent
\$infrabel-md-supporting
\$infrabel-md-warn
\$infrabel-md-success
\$infrabel-md-grey

Fonts

The library contains set of fonts with different font-style and font-weight, under font-family 'Calibre'.

Type	font-style	font-weight
calibre-thin	normal	100
calibre-light	normal	300
calibre-regular	normal	400
calibre-medium	normal	500
calibre-semibold	normal	600
calibre-bold	normal	700
calibre-black	normal	900
calibre-thin-italic	italic	100
calibre-light-italic	italic	300
calibre-regular-italic	italic	400
calibre-medium-italic	italic	500
calibre-semibold-italic	italic	600
calibre-bold-italic	italic	700
calibre-black-italic	italic	900

The @font-face has font-display: swap, to use it inside your SCSS files:

@import 'infrabel-ui';

// You may add the font details manually:
body {
    // Calibre is the default font, the rest are fallback
    // and browser will swap them with Calibre once loaded.
    font-family: Calibre, Roboto, "Helvetica Neue", sans-serif;
    font-style: normal;
    font-weight: 400;
}

// Or use the basic fonts settings:
@import 'infrabel-ui';
@import 'infrabel-ui/base/typography'; // <== This will add basic font settings to body as show:

// By default body will compile to:
body {
  // abstracts/_variables.scss > $text-font-family 
  font-family: 'Calibre', Roboto, 'Helvetica Neue', sans-serif !default; 
  
  // abstracts/_variables.scss > $text-font-style
  font-style: normal;
  
  // abstracts/_variables.scss > $text-font-weight;
  font-weight: 400; 
}

Development

To use the library locally follow the fellowing steps:

Run yarn link inside dist/libs/styles.
Run yarn link "@infarbel-ui/styles" inside the root folder of your own project.
Run yarn build --watch inside the root folder of this library.
To trigger a change you must save any .ts file, saving .scss won't do anything.
To unlink your project from the local development run yarn unlink "@infrabel-ui/styles" inside the root folder of your own project.