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

Publish to npm

WIP