adaptive-colors v0.0.5

adaptive colors

adaptive color palettes

built upon Adobe's Leonardo

motivation

"why do this when Adobe's already got Leonardo?"

tl;dr

• as of writing this, the latest working version of @adobe/leonardo-contrast-colors is 1.0.0-alpha.13 (it's currently on 1.0.0-alpha.17)
• it doesn't support oklab/oklch
• why not send in a pr then? well, sorry Leonardo maintainers, but that code was an absolute horror to read through

adobe's official package for adaptive color palettes is broken, missing support for oklab/oklch, and the code is miserable to work with.

i want to create adaptive color palettes that target oklch. i do not want to work within the constraints of their code, and wait all that time for a pr to be accepted (and for the package to get unborked).

rewriting the whole thing lets me create an api that i prefer, and allows for clearer expression of data flow and transformation.

installation

this package requires Node >=20.0.0. for the most up to date information, see package.json :: engines.node.

npm i adaptive-colors

usage

this section's code examples are adapted from Adobe Leonardo's readme

import { Color, Theme } from "adaptive-colors";

const grey = new Color({
    name: 'grey',
    key_colors: ['#cacaca'],
    ratios: [2, 3, 4.5, 8]
});

const blue = new Color({
    name: 'blue',
    key_colors: ['#5CDBFF', '#0000FF'],
    ratios: [3, 4.5]
});

const red = new Color({
    name: 'red',
    key_colors: ['#FF9A81', '#FF0000'],
    ratios: [3, 4.5]
});

const theme = new Theme({
    colors: [gray, blue, red],
    background_color: gray,
});

/*
colors  - theme colors as json
pairs   - theme colors as flat key:value map
values  - theme colors as list
*/
const { colors, pairs, values } = theme.palette()

interpolation color spaces

colors can be interpolated along a variety of possible color spaces

output formats

this section is adapted from but taken nearly verbatim from Adobe Leonardo's readme

available output formats conform to the W3C CSS Color Module Level 4 spec for the supported options, as listed below: