color

Renamed to @plangrid/paint : )

Future versions will appear there.

Production

@import "node_modules/@plangrid/color/main";

• main.css is the production bundle
• live.css is the same bundle but with live CSS vars
• module.css shows the module content for both

Low-level atomic API

Stateful atomic classes are made via templates and provided for all swatches for use like class="ccc-blue-500"

• .ccc-* base color
  • .fcc-* focus color
  • .hcc-* hover color
  • .xcc-* press color
  • .acc-* active color
  • .dcc-* disabled color
• .ggg-* base background
  • .fgg-* focus background
  • .hgg-* hover background
  • .xgg-* press background
  • .agg-* active background
  • .dgg-* disabled background
• .bbb-* base border-color
  • .fbb-* focus border-color
  • .hbb-* hover border-color
  • .xbb-* press border-color
  • .abb-* active border-color
  • .dbb-* disabled border-color

An earlier simpler less-capable atomic set exists in atomic.css but we plan to move away from those and instead to the ones above wrapped in a higher-level API via JavaScript. See #sheen

Tone

• .tone-validate is designed for inputs using native [aria-invalid] (Recommended)
• .tone-validity is designed for inputs using native constraint validation
• .tone-valid is designed for forcing valid appearance
• .tone-invalid is designed for forcing invalid appearance
• .tone-primary is designed for primary actions (Save)
• .tone-additive is designed for additive actions (Create)
• .tone-destructive is designed for destructive actions (Delete)
• .tone-pill combines primary and destructive for deletable pills
• .tone-secondary is designed for secondary actions (Cancel)
• .tone-icon is designed for buttons represented by icons
• .tone-link is designed for links or buttons appearing as links
• .tone-check is designed for radios and checkboxes

Shadow

• .shadow-raised base static raised shadow
• .shadow-ring applies our standard ring on :focus
• .shadow-halo experimental static raised ring

Blending

Blending patterns are useful for routing colors in component designs. Blending classes themselves are for demoing the technique and are excluded from the main bundle.

| Classes | color | background | border-color | |:--------|:--------|:-------------|:---------------| | .blend .blend-before .blend-after | inherit | transparent | transparent | | .dodge .dodge-before .dodge-after | transparent | transparent | inherit | | .burn .burn-before .burn-after | inherit | transparent | currentColor | | .coat .coat-before .coat-after | inherit | inherit | inherit | | .blot .blot-before .blot-after | inherit | currentColor | currentColor |

JavaScript API

paint

const paint = require("@plangrid/color")

paint includes a superset of sheen swatch ink. These modules are also each available for direct import.

paint.vivid("blue") // atomic classes for vivid blue paint
paint.glaze("blue") // atomic classes for glaze blue paint
paint.matte("blue") // atomic classes for matte blue paint
paint.swatch("blue-500") // "#0085de"
paint.identify("#0085de") // "blue-500"
paint.nearest("#0085dd") // "blue-500"
paint.ideal("blue-base") // "blue-500"
paint.inks() // ["red", "orange", ...]
/*...*/

sheen

const sheen = require("@plangrid/color/sheen")

sheen.vivid("blue") // atomic classes for vivid blue paint
sheen.glaze("blue") // atomic classes for glaze blue paint
sheen.matte("blue") // atomic classes for matte blue paint

ink

const ink = require("@plangrid/color/ink")

ink is special paint for annotations

ink.wet(hue) aka ink.user(hue)

ink.wet("orange") // "#f38109"
ink.user("orange") // "#f38109"

ink.dry(hue) aka ink.master(hue)

ink.dry("orange") // "#e6400a"
ink.master("orange") // "#e6400a"

ink.inks(start=0, end=undefined)

Slice a copy of all the ink hues in the set

ink.inks() // ["red", "orange", ...]

swatch

const swatch = require("@plangrid/color/swatch")

swatch(name) is a custom JavaScript function for providing color by its name in our design system.

swatch("black") // "#1f313d"
swatch("blue-500") // "#0085de"

swatch also works with identical interface in postcss via postcss-functions and node-sass via --functions

box-shadow: 1em 1em swatch("black");
box-shadow: 1em 1em swatch("shade-50");

swatch.identify(value)

• value can be any valid color format
• Returns id of exact match or else throws error

swatch.identify("#1f313d") // "black"
swatch.identify("rgba(31, 49, 61, 0.5)") // "dark-50"

swatch.ideal(id)

• Return ideal id for id
• id may be an alias but the return won't be

swatch.ideal("blue-base") // "blue-500"
swatch.ideal("blue-dim") // "blue-700"

swatch.ideals()

• Return array of all ideals

swatch.ideals() // ["blue-100", "blue-200" ,...]

swatch.nearest(value)

• value can be any valid color format
• Returns id for nearest non-transparent match

swatch.nearest("#444") // "steel"
swatch.nearest("rgb(1, 1, 1)") // "black"
swatch.nearest("rgba(1, 1, 1, .1)") // "black"

swatch.pluck(key)

• Pluck key from registry objects
• Return array of plucked values

Development

git clone [email protected]:plangrid/color.git
cd color
npm install
npm test
npm start
open index.html

Right now the source of truth for the values is in swatch.js and dev.js. Running npm start updates the other files.

Next coat

:art: @plangrid/paint