# @pxblue/themes

> PXBlue themes for Eaton applications

Latest version **3.0.2** (published 2020-01-28) · BSD-3-Clause license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @pxblue/themes
pnpm add @pxblue/themes
yarn add @pxblue/themes
bun add @pxblue/themes
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2020-01-28 |
| First published | 2018-08-22 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 37.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | PX Blue |
| Maintainers | px-blue |
| Keywords | PXBlue, themes, Eaton, Power, Xpert, quality, lighting |

## Links

- npm: https://www.npmjs.com/package/@pxblue/themes
- Repository: https://github.com/pxblue/themes
- Homepage: https://github.com/pxblue/themes#readme
- Issues: https://github.com/pxblue/themes/issues
- npm.io page: https://npm.io/package/@pxblue/themes

## Dependencies (2)

- [@pxblue/colors](https://npm.io/package/@pxblue/colors.md) ^2.0.0
- [typeface-open-sans](https://npm.io/package/typeface-open-sans.md) ^0.0.54

## Recent versions

- 3.0.2 (latest) — 2020-01-28
- 3.0.1 — 2020-01-22
- 3.0.1-beta.0 — 2020-01-21
- 3.0.0 — 2019-12-03
- 3.0.0-beta.0 — 2019-12-03
- 2.2.4 — 2019-11-14
- 2.2.3 — 2019-11-08
- 2.2.2 — 2019-10-31
- 2.2.0 — 2019-10-31
- 2.2.0-beta.2 — 2019-10-31
- 2.2.0-beta.1 — 2019-10-31
- 2.2.0-beta.0 — 2019-10-31
- 2.1.0 — 2019-07-29
- 2.0.3 — 2019-06-17
- 2.0.2 — 2019-05-30
- … 26 more at https://npm.io/package/@pxblue/themes/versions

## README

# 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](https://www.npmjs.com/package/@angular/material)
* React w/ [Material UI](https://www.npmjs.com/package/@material-ui/core)

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](https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e) or [Expo](https://docs.expo.io/versions/latest/guides/using-custom-fonts/). 

> 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](https://stackblitz.com/github/pxblue/themes/tree/master/angular/demo)   |
| React            | [View on Code Sandbox](https://codesandbox.io/s/github/pxblue/themes/tree/master/react/demo) |
| React Native     | Coming Soon                                                                                  |

---
_Source: https://npm.io/package/@pxblue/themes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._