Nuclearly Potent Moonshine

    @workday/canvas-colors-web
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Canvas Colors for Web

    License: CC 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.

    import colors from '@workday/canvas-colors-web'
    
    colors.frenchVanilla100
    CommonJS

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

    const colors = require('@workday/canvas-colors-web')
    
    colors.frenchVanilla100
    HSLA

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

    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.

    @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.

    @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

    import { iconColors } from '@workday/canvas-colors-web'
    
    iconColors.hover

    SCSS

    @import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.scss';
    
    $wdc-color-common-background;

    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

    import { chartingColors, chartingColorOffsets } from '@workday/canvas-colors-web'
    
    chartingColors[1]
    chartingColors[chartingColorOffsets.barAndColumn + i]

    SCSS

    @import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.scss';
    
    $wdc-color-charting-1;
    $wdc-color-bar-and-column;

    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

    Install

    npm i @workday/canvas-colors-web

    DownloadsWeekly Downloads

    4,208

    Version

    2.0.0

    License

    CC-BY-ND-4.0

    Unpacked Size

    522 kB

    Total Files

    35

    Last publish

    Collaborators

    • workday-canvas-kit
    • justin.pante
    • byed
    • anicholls