ramps.ts

 1import chroma, { Color, Scale } from "chroma-js"
 2import { RampSet } from "./colorScheme"
 3import {
 4    ThemeConfigInputColors,
 5    ThemeConfigInputColorsKeys,
 6} from "./themeConfig"
 7
 8export function colorRamp(color: Color): Scale {
 9    let endColor = color.desaturate(1).brighten(5)
10    let startColor = color.desaturate(1).darken(4)
11    return chroma.scale([startColor, color, endColor]).mode("lab")
12}
13
14/**
15 * Chromajs mutates the underlying ramp when you call domain. This causes problems because
16    we now store the ramps object in the theme so that we can pull colors out of them.
17    So instead of calling domain and storing the result, we have to construct new ramps for each
18    theme so that we don't modify the passed in ramps.
19    This combined with an error in the type definitions for chroma js means we have to cast the colors
20    function to any in order to get the colors back out from the original ramps.
21 * @param isLight 
22 * @param colorRamps 
23 * @returns 
24 */
25export function getRamps(
26    isLight: boolean,
27    colorRamps: ThemeConfigInputColors
28): RampSet {
29    const ramps: RampSet = {} as any
30    const colorsKeys = Object.keys(colorRamps) as ThemeConfigInputColorsKeys[]
31
32    if (isLight) {
33        for (const rampName of colorsKeys) {
34            ramps[rampName] = chroma.scale(
35                colorRamps[rampName].colors(100).reverse()
36            )
37        }
38        ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse())
39    } else {
40        for (const rampName of colorsKeys) {
41            ramps[rampName] = chroma.scale(colorRamps[rampName].colors(100))
42        }
43        ramps.neutral = chroma.scale(colorRamps.neutral.colors(100))
44    }
45
46    return ramps
47}