npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@brightlayer-ui/angular-themes

v9.0.2

Published

Angular themes for Brightlayer UI applications

Downloads

1,065

Readme

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.

Customization

If you need to customize the styles (for OEM purposes for example). You can import the styles and define the customization in your top level scss file.

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

@include theme-bases.coreTypography();

body {
    $blui-blue-primary: mat.define-palette($primary);
    $blui-blue-accent: mat.define-palette($accent);
    $blui-blue-warn: mat.define-palette($warn);

    @include theme-bases.light-theme($blui-blue-primary, $blui-blue-accent, $blui-blue-warn);
}

Where the variables $primary, $accent and $warn must be a palette. The values in the palette can be CSS custom properties or css colors.

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

Interactive Demo