# @pxblue/colors

> PX Blue colors for Eaton applications

Latest version **3.0.1** (published 2021-05-14) · BSD-3-Clause license · 0 weekly downloads

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

## Install

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

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2021-05-14 |
| First published | 2018-09-26 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 14.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | px-blue |
| Maintainers | px-blue |
| Keywords | PXBlue, colors, Eaton, Power, Xpert, quality, lighting |

## Links

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

## Dependencies (1)

- [@pxblue/types](https://npm.io/package/@pxblue/types.md) ^2.0.0

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 3.0.1 (latest) — 2021-05-14
- 3.0.0 — 2020-05-18
- 2.0.1 — 2020-04-01
- 2.0.1-beta.0 — 2020-03-31
- 2.0.0 — 2019-12-19
- 2.0.0-beta.0 — 2019-12-19
- 1.0.13 — 2019-05-29
- 1.0.12 — 2019-05-09
- 1.0.10 — 2019-02-01
- 1.0.9 — 2018-10-17
- 1.0.8 — 2018-09-28
- 1.0.7 — 2018-09-28
- 1.0.6 — 2018-09-28
- 1.0.5 — 2018-09-28
- 1.0.4 — 2018-09-28
- … 4 more at https://npm.io/package/@pxblue/colors/versions

## README

[![Build](https://github.com/etn-ccis/blui-colors/actions/workflows/blui-ci.yml/badge.svg?branch=master)](https://github.com/etn-ccis/blui-colors/actions/workflows/blui-ci.yml)

# Brightlayer UI Colors

This repository contains definitions for various colors used throughout Brightlayer UI applications.

It contains the following color defintions:

## UI Colors

```
primary / $blui-primary
neutral / $blui-neutral
neutralVariant / $blui-neutralVariant
error / $blui-error
warning / $blui-warning
success / $blui-success
orange / $blui-orange
purple / $blui-purple
```

## Branding Colors

```
lightGray / $brand-lightGray
gray / $brand-gray
darkGray / $brand-darkGray
sky / $brand-sky
eatonBlue / $brand-eatonBlue
navy / $brand-navy
ash / $brand-ash
teal / $brand-teal
pine / $brand-pine
sage / $brand-sage
citrus / $brand-citrus
emerald / $brand-emerald
butter / $brand-butter
goldenrod / $brand-goldenrod
toad / $brand-toad
trophy / $brand-trophy
sunset / $brand-sunset
rust / $brand-rust
crimson / $brand-crimson
wine / $brand-wine
```

## Installation

Install with npm

```
npm install --save @brightlayer-ui/colors
```

or yarn

```
yarn add @brightlayer-ui/colors
```

## Usage

Incorporating these colors into your project is handled differently depending on the framework that you are using.

### CSS variables

```
// For UI Colors in styles.scss or your top-level sass file
@import '@brightlayer-ui/colors/palette.scss';
...
background-color: map-get($blui-primary, 10);
```

```
// For Branding Colors in styles.scss or your top-level sass file
@import '@brightlayer-ui/colors/branding-palette.scss';
...
background-color: $brand-lightGray;
```

### JSON Object

```
import Colors, {primary} from '@brightlayer-ui/colors';
import BrandingColors, {lightGray} from '@brightlayer-ui/colors/branding';
...
<div style={{background: Colors.primary[10]}}/>
<div style={{background: primary[10]}}/>
<div style={{background: BrandingColors.lightGray}}/>
<div style={{background: lightGray}}/>
```

## Migration from v3 to v4

In version 4.0.0, we have updated the UI colors and branding colors palette.

We have deprecated `@brightlayer-ui/colors-branding` and `@brightlayer-ui/types` packages, as they will be part of the `@brightlayer-ui/colors` package.
The branding colors palette and individual branding colors now can be imported from `@brightlayer-ui/colors/branding`.

```
import BrandingColors, {lightGray} from '@brightlayer-ui/colors/branding';
```

You should include @brightlayer-ui/colors version v4 for React Native projects with Material Design v3. For React Native projects with Material Design v2, include @brightlayer-ui/colors version v3.

**Note:** Material Design 3 support is currently available for React Native projects through react-native-paper. React web applications using MUI do not yet have Material Design 3 support.

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