Canvas Colors for Web


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;
`

$3

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;
`

$3

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.