# @workday/canvas-colors-web

> Canvas colors for web

Latest version **2.0.1** (published 2024-05-20) · CC-BY-ND-4.0 license · 0 weekly downloads

## Install

```sh
npm install @workday/canvas-colors-web
pnpm add @workday/canvas-colors-web
yarn add @workday/canvas-colors-web
bun add @workday/canvas-colors-web
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2024-05-20 |
| First published | 2019-05-09 |
| Weekly downloads | 0 |
| License | CC-BY-ND-4.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 509.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Workday, Inc. |
| Maintainers | jaclynjessup, nicholasboll, alanbsmith, workday-canvas-kit, justin.pante, anicholls |
| Keywords | canvas, workday, colors, scss, sass |

## Links

- npm: https://www.npmjs.com/package/@workday/canvas-colors-web
- npm.io page: https://npm.io/package/@workday/canvas-colors-web

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2024-05-20
- 2.0.0 — 2020-06-03
- 1.1.0 — 2020-06-02
- 1.0.3 — 2020-04-10
- 1.0.2 — 2019-07-02
- 0.17.13 — 2019-05-09

## README

# Canvas Colors for Web

[![License: CC BY 4.0](https://img.shields.io/badge/License-CC%20BY%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by/4.0/)

Canvas colors values in web formats.

## Usage

The base Canvas color palette is available in CommonJS, ES6, JSON, LESS, and SASS formats.

Colors (100-600):

* Cinnamon
* Peach
* Chili Mango
* Cantaloupe
* Sour Lemon
* Juicy Pear
* Kiwi
* Green Apple
* Watermelon
* Jewel
* Toothpaste
* Blueberry
* Plum
* Berry Smoothie
* Blackberry
* Island Punch
* Grape Soda
* Pomegranate
* Fruit Punch
* Root Beer
* Toasted Marshmallow
* Coconut
* Cappuccino
* Soap
* Licorice
* French Vanilla
* Black Pepper

#### JavaScript

The default import will provide hex color values as strings. Colors are accessed via their camel-cased names (e.g. `frenchVanilla100`).

TypeScript types are provided for convenience.

##### ES6

ES6 exports are located in `@workday/canvas-colors-web/dist/es6`.

```js
import colors from '@workday/canvas-colors-web'

colors.frenchVanilla100
```

##### CommonJS

CommonJS exports are located in `@workday/canvas-colors-web/dist/commonjs`.

```js
const colors = require('@workday/canvas-colors-web')

colors.frenchVanilla100
```

##### HSLA

To access HSLA, import from `canvas-colors.js` from your preferred JS format folder.

```js
import colors from '@workday/canvas-colors-web/dist/es6/canvas-colors.js'
const colors = require('@workday/canvas-colors-web/dist/commonjs/canvas-colors.js')

colors.frenchVanilla100
```

#### SASS

**Import Paths**

SASS variable sheets are located in `@workday/canvas-colors-web/dist/sass`. They are available as both `.sass` and `.scss`.

* Hex: `canvas-colors-hex.scss`
* RGBA: `canvas-colors-rgba.scss`
* HSLA: `canvas-colors.scss`

##### Usage

Color variables are camel-cased.

```scss
@import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.scss';

$wdc-color-french-vanilla-100;
```

#### LESS

**Import Paths**

LESS variable sheets are located in `@workday/canvas-colors-web/dist/less`.

* Hex: `canvas-colors-hex.less`
* RGBA: `canvas-colors-rgba.less`
* HSLA: `canvas-colors.less`

##### Usage

Color variables are camel-cased.

```less
@import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.less';

@wdc-color-french-vanilla-100;
```

### Semantic Colors

To ensure consistency across implementations, our semantic constants should be used wherever possible. This allows us to swap out the color of a button or icon for example, without having to find every instance of it and change the color manually.

We have several semantic groupings:

* `commonColors`
* `buttonColors`
  * `delete`
  * `primary`
  * `secondary`
* `iconColors`
* `statusColors`
* `typeColors`

**JS**

```js
import { iconColors } from '@workday/canvas-colors-web'

iconColors.hover
```

**SCSS**

```scss
@import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.scss';

$wdc-color-common-background;
```

**LESS**

```less
@import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.scss';

@wdc-color-common-background;
```

### Charting Colors

The charting color palette is a set of 86 colors from the Canvas palette. Colors should be used in incremental numerical order. Offsets should also be used depending on the chart type. Color access keys start at `1` and go up to `86`.

Offsets:

* Bar and Column
* Pie
* Line and Area
* Bubble

**JS**

```js
import { chartingColors, chartingColorOffsets } from '@workday/canvas-colors-web'

chartingColors[1]
chartingColors[chartingColorOffsets.barAndColumn + i]
```

**SCSS**

```scss
@import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.scss';

$wdc-color-charting-1;
$wdc-color-bar-and-column;
```

**LESS**

```less
@import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.scss';

@wdc-color-charting-1;
@wdc-color-bar-and-column;
```

## License

(c) Workday, Inc.

[![License: CC BY 4.0](https://img.shields.io/badge/License-CC%20BY%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by/4.0/)

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