@pxblue/themes

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