npm package: @infrabel-ui/styles
Description: The library holds all the styling assets and utilities for Infrabel tools.
Latest version: 0.0.16

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