PX Blue themes for Eaton applications
This package provides theming support for Eaton applications using the PX Blue design system. It includes resources for developers using:
- Angular w/ Angular Material
- React w/ Material UI
The PX Blue themes package comes with two theme options: a Blue theme (standard) and a Dark theme.
Installation
Install with npm
npm install --save @pxblue/themes
or yarn
yarn add @pxblue/themes
Usage
Depending on the framework that you are using, PX Blue themes are applied in different ways.
Angular w/ Angular Material
In order to use the PX Blue 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 PX Blue themes and Open Sans reference:
"styles": [
"src/styles.scss",
"./node_modules/@pxblue/themes/angular/theme.scss",
"./node_modules/typeface-open-sans"
],
Alternatively, you can also import the theme file in your top-level SCSS file.
// in styles.scss or your top-level scss file
import '~@pxblue/themes/angular/theme.scss'
You can then apply the theme to your application by adding the proper class to your application's top-level element:
// Default Theme
<app-root class="pxb-blue">
// Dark Theme
<app-root class="pxb-blue-dark">
If you do not specify a theme class, your application will use the default Material theme.
React w/ Material UI
import {
MuiThemeProvider,
createMuiTheme
} from '@material-ui/core/styles';
import * as PXBThemes from '@pxblue/themes/react';
require('typeface-open-sans');
...
// Default Theme
<MuiThemeProvider theme={createMuiTheme(PXBThemes.blue)}>
<App />
</MuiThemeProvider>
...
// Dark Theme
<MuiThemeProvider theme={createMuiTheme(PXBThemes.blueDark)}>
<App />
</MuiThemeProvider>
React Native w/ @pxblue/react-native-components
import { ThemeProvider } from '@pxblue/react-native-components';
import * as PXBThemes from '@pxblue/themes/react-native';
...
<ThemeProvider theme={PXBThemes.blue}>
<App />
</ThemeProvider>
NOTE: Using the PX Blue React Native theme requires that you add the Open Sans font to your application. You can learn how to do this by reading the instructions for Vanilla React Native or Expo.
When using Expo, you will need to specify the name for each font weight you load using the format
OpenSans-<Weight>, e.g., OpenSans-SemiBold. Refer to one of our React Native demos for reference.
Demos
| Framework | Live Examples |
|---|---|
| Angular | View on Stackblitz |
| React | View on Code Sandbox |
| React Native | Coming Soon |