1import chroma, { Color, Scale } from "chroma-js"
2import { RampSet } from "./create_theme"
3import {
4 ThemeConfigInputColors,
5 ThemeConfigInputColorsKeys,
6} from "./theme_config"
7
8export function color_ramp(color: Color): Scale {
9 const end_color = color.desaturate(1).brighten(5)
10 const start_color = color.desaturate(1).darken(4)
11 return chroma.scale([start_color, color, end_color]).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 is_light
22 * @param color_ramps
23 * @returns
24 */
25export function get_ramps(
26 is_light: boolean,
27 color_ramps: ThemeConfigInputColors
28): RampSet {
29 const ramps: RampSet = {} as any // eslint-disable-line @typescript-eslint/no-explicit-any
30 const color_keys = Object.keys(color_ramps) as ThemeConfigInputColorsKeys[]
31
32 if (is_light) {
33 for (const ramp_name of color_keys) {
34 ramps[ramp_name] = chroma.scale(
35 color_ramps[ramp_name].colors(100).reverse()
36 )
37 }
38 ramps.neutral = chroma.scale(color_ramps.neutral.colors(100).reverse())
39 } else {
40 for (const ramp_name of color_keys) {
41 ramps[ramp_name] = chroma.scale(color_ramps[ramp_name].colors(100))
42 }
43 ramps.neutral = chroma.scale(color_ramps.neutral.colors(100))
44 }
45
46 return ramps
47}