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}