npm package: @favian/favian-ui
Description: A UI Library based on Favian Design System.
Author: tk2rush90
Latest version: 0.1.40

# Favian UI

A UI Library based on Favian Design System.

For now, there is no organized documentation for component.

To see available components, render `FaviShowcaseComponent` in view.

```html
<favi-showcase></favi-showcase>
```

## Installation

```shell
npm install --save @favian/favian-ui
```

## Import Styles

To use system styles, add `stylePreprocessorOptions` to your `angular.json`.

```json
{
  "stylePreprocessorOptions": {
    "includePaths": [
      "node_modules/@favian/favian-ui/styles"
    ]
  }
}
```

In your `styles.scss` file, import `favi-theme` and call `apply-theme()` mixin to apply theme for UI.

```scss
@import "favi-theme";

@include apply-theme();
```

The `apply-theme()` mixin can retrieve map as `$options` parameter which contains following properties.

```scss
$options: (
  primary: $primary,
  secondary: $secondary,
  tertiary: $tertiary,
  quaternary: $quaternary,
  warning: $warning,
  error: $error,
  success: $success,
  light-foreground: $light-foreground,
  dark-foreground: $dark-foreground,
  light-background: $light-background,
  dark-background: $dark-background,
  light-contrast: $light-contrast,
  dark-contrast: $dark-contrast,
)
```

- `primary`: Set the primary color of UI. Default is `#FE4365`.
- `secondary`: Set the secondary color of UI. Default is `#FC9D9A`.
- `tertiary`: Set the tertiary color of UI. Default is `#F9CDAD`.
- `quaternary`: Set the quaternary color of UI. Default is `#C8C8A9`.
- `warning`: Set the warning color of UI. Default is `#F2B33D`.
- `error`: Set the error color of UI. Default is `#C02942`.
- `success`: Set the success color of UI. Default is `#27AE60`.
- `light-foreground`: Set the font color for light theme. Default is `#444444`.
- `dark-foreground`: Set the font color for dark theme. `#DDDDDD`.
- `light-background`: Set the background color for light theme. Default is `#FFFFFF`.
- `dark-background`: Set the background color for dark theme. Default is `#222222`.
- `light-contrast`: Set the highlight color for light theme. Default is `#000000`.
- `dark-contrast`: Set the highlight color for dark theme. Default is `#FFFFFF`.

To apply your custom theme, you can provide all or partial properties.

```scss
// Apply theme by providing all properties.
@import "favi-theme";

@include apply-theme((
  primary: #FE4365,
  secondary: #FC9D9A,
  tertiary: #F9CDAD,
  quaternary: #C8C8A9,
  warning: #F2B33D,
  error: #C02942,
  success: #27AE60,
  light-foreground: #444444,
  dark-foreground: #DDDDDD,
  light-background: #FFFFFF,
  dark-background: #222222,
  light-contrast: #000000,
  dark-contrast: #FFFFFF,
));
```

```scss
// Apply theme by providing partial properties.
@import "favi-theme";

@include apply-theme((
  primary: #FE4365,
  secondary: #FC9D9A,
));
```

## App

It is highly recommended to wrap your application in `FaviAppComponent`.

The `FaviAppComponent` do following things:

- Wrap your application with `width: 100%`, `height: 100%`, `position: absolute`, `overflow: auto` container.
- Create outlets of Toast and Overlay. If you don't use `FaviAppComponent`, both have to imported manually.

In your `app.component.html`:

```html
<favi-app>
  <!-- Your Application content in here. -->
</favi-app>
```