@bravura/ui

Bravura UI Components for Angular applications

Usage no npm install needed!

<script type="module">
  import bravuraUi from 'https://cdn.skypack.dev/@bravura/ui';
</script>

README

Bravura UI Components for Angular applications

This package contains a set of UI components built on top of Angular Material library and Component Development Kit. It supplements Angular Material in implementing Bravura UX Design System, which is an extension of the latest Material Design Specification.

Storybook on Chromatic

Setup

Install the package in your Angular project by using one of the commands below, according to the package manager chosen.

NPM:

npm install --save @bravura/ui

Yarn:

yarn add @bravura/ui

Import the NgModule from one of the sub-packages where the component is provided. For example:

@import {RadioPanelModule} from '@bravura/ui/radio-panel'
@NgModule({
    declarations: [MyComponent],
    imports: [RadioPanelModule]
})
export class MyModule {}

Theming

To incorporate components' theming with Angular Material, you need to configure a custom theme, following the theming guide on the Angular Material document site. In the global style SASS partial where the Material theme is configured, add a mixing reference to activate theming, for example:

@use '~@angular/material' as mat;
@use '~@bravura/ui/theme/ui-theme' as bui; // add this import

@include mat.core();

$primary: mat.define-palette(mat.$indigo-palette, 500);
$accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$theme: mat.define-light-theme(
    (
        color: (
            primary: $primary,
            accent: $accent
        ),
        typography: mat.define-typography-config(
                $font-family: Roboto
            )
    )
);

@include mat.all-component-themes($theme);
// activate @bravura/ui component theming with the following statement
@include bui.theme($theme);

// the following defines a dark theme according to Angular Theming Guide
$dark-theme: mat.define-dark-theme(
    (
        color: (
            primary: $primary,
            accent: $accent
        )
    )
);

.dark-theme {
    // apply component colors for dark theme, according to Angular Theming Guide
    @include mat.all-component-colors($dark-theme);
    // apply BUI component colors for dark theme
    @include bui.apply-colors($dark-theme);
}

You may also need to include the CSS of custom font definitions for Material Icon Font into the global stylesheets, for example:

@import url(https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Outlined&family=Material+Icons+Round&family=Material+Icons+Two+Tone&family=Material+Icons+Sharp);
@import url(https://use.fontawesome.com/releases/v5.15.0/css/all.css);