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
import '~@brightlayer-ui/angular-themes/theme.scss'
import '~@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>
Updating From Version 5 ~> 6
In version 6, we have migrated from the deprecated typeface-open-sans
package to @fontsource/open-sans
(bundled with the Brightlayer UI themes). You'll need to update your Open Sans references in angular.json:
Before:
'./node_modules/typeface-open-sans';
After:
'./node_modules/@brightlayer-ui/angular-themes/open-sans.scss';