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.

<favi-showcase></favi-showcase>

Installation

npm install --save @favian/favian-ui

Import Styles

To use system styles, add stylePreprocessorOptions to your angular.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.

@import "favi-theme";

@include apply-theme();

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

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

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

// 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:

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