Nonchalantly Performs Magic

    @brightlayer-ui/angular-themes

    7.0.1 • Public • Published

    Brightlayer UI themes for Angular applications

    This package provides theming support for Eaton applications using the Brightlayer UI design system. It includes resources for developers using Angular w/ Angular Material. This package comes with two theme options: a Blue theme (standard) and a Dark theme.

    For other frameworks, check out our related packages:

    Installation

    Install with npm

    npm install --save @brightlayer-ui/angular-themes

    or yarn

    yarn add @brightlayer-ui/angular-themes

    Usage

    In order to use the Brightlayer UI themes and font (Open Sans), you will need to modify your angular.json file "styles" entries (there is one under "build" and one under "test") to include the Brightlayer UI themes and Open Sans reference:

    "styles": [
        "src/styles.scss",
        "./node_modules/@brightlayer-ui/angular-themes/theme.scss",
        "./node_modules/@brightlayer-ui/angular-themes/open-sans.scss"
    ],

    Alternatively, you can also import the theme file in your top-level SCSS file.

    // in styles.scss or your top-level scss file
    use '@brightlayer-ui/angular-themes/theme.scss'
    use '@brightlayer-ui/angular-themes/open-sans.scss'

    You can then apply the theme to your application by adding the proper class to your application's body element:

    // Default Theme
    <body class="blui-blue">
    
    // Dark Theme
    <body class="blui-blue-dark">

    If you do not specify a theme class, your application will use the default Material theme.

    Custom Classes and Attributes

    Brightlayer UI provides some custom classes and attributes that can be used to further align it with Material Design specifications.

    blui-inline

    blui-inline is an attribute that can be placed on a mat-button that applies custom icon-sizing and placement.

    Usage

    <button blui-inline mat-flat-button color="primary">
        <mat-icon>download</mat-icon>
        <span>Download</span>
    </button>
    

    blui-input

    blui-input is an attribute that can be applied to a mat-form-field to standardize the height to be 56px.

    Usage

    <mat-form-field blui-input appearance="standard">
        <input matInput placeholder="Placeholder" />
        <mat-label>Legacy</mat-label>
        <mat-hint>Hint</mat-hint>
        <mat-hint align="end">0/10</mat-hint>
        <mat-icon matSuffix>info</mat-icon>
        <mat-icon matPrefix>info</mat-icon>
    </mat-form-field>

    blui Typography

    Our Brightlayer UI Typography guidelines align with Material Design's recommended naming convention and size specifications.
    We have included a custom set of blui-[name] classes to match our documentation, eliminating the need to cross-reference Angular Material's default typography naming convention to find a specific correct font.

    Usage

    <div class="blui-headline-1">Headline 1</div>
    <div class="blui-headline-2">Headline 2</div>
    ...
    <div class="blui-overline">Overline</div>
    

    Migration

    If you are using an older version of the themes package and wish to update, check out our migration guide;

    Demo

    View on Stackblitz

    Install

    npm i @brightlayer-ui/angular-themes

    DownloadsWeekly Downloads

    304

    Version

    7.0.1

    License

    BSD-3-Clause

    Unpacked Size

    109 kB

    Total Files

    23

    Last publish

    Collaborators

    • brightlayerui