@brightlayer-ui/angular-themes
Advanced tools
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:
Install with npm
npm install --save @brightlayer-ui/angular-themes
or yarn
yarn add @brightlayer-ui/angular-themes
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.
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.
Brightlayer UI provides some custom classes and attributes that can be used to further align it with Material Design specifications.
blui-inlineblui-inline is an attribute that can be placed on a mat-button that applies custom icon-sizing and placement.
<button blui-inline mat-flat-button color="primary">
<mat-icon>download</mat-icon>
<span>Download</span>
</button>
blui-inputblui-input is an attribute that can be applied to a mat-form-field to standardize the height to be 56px.
<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 TypographyOur 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.
<div class="blui-headline-1">Headline 1</div>
<div class="blui-headline-2">Headline 2</div>
...
<div class="blui-overline">Overline</div>
If you are using an older version of the themes package and wish to update, check out our migration guide;
v9.0.2 (February 9, 2024)
FAQs
Angular themes for Brightlayer UI applications
The npm package @brightlayer-ui/angular-themes receives a total of 261 weekly downloads. As such, @brightlayer-ui/angular-themes popularity was classified as not popular.
We found that @brightlayer-ui/angular-themes demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.