Calculate the range for each color family in a theme (#2738)

Release Notes:
- N/A (Internal theme stuff)
This commit is contained in:
Nate Butler 2023-08-08 11:49:52 -04:00 committed by GitHub
commit 662e196267
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1,4 +1,4 @@
import { Scale, Color } from "chroma-js"
import chroma, { Scale, Color } from "chroma-js"
import { Syntax, ThemeSyntax, SyntaxHighlightStyle } from "./syntax"
export { Syntax, ThemeSyntax, SyntaxHighlightStyle }
import {
@ -32,6 +32,7 @@ export interface Theme {
players: Players
syntax?: Partial<ThemeSyntax>
color_family: ColorFamily
}
export interface Meta {
@ -69,6 +70,15 @@ export interface Players {
"7": Player
}
export type ColorFamily = Partial<{ [K in keyof RampSet]: ColorFamilyRange }>
export interface ColorFamilyRange {
low: number
high: number
range: number
scaling_value: number
}
export interface Shadow {
blur: number
color: string
@ -162,6 +172,8 @@ export function create_theme(theme: ThemeConfig): Theme {
"7": player(ramps.yellow),
}
const color_family = build_color_family(ramps)
return {
name,
is_light,
@ -177,6 +189,7 @@ export function create_theme(theme: ThemeConfig): Theme {
players,
syntax,
color_family,
}
}
@ -187,6 +200,28 @@ function player(ramp: Scale): Player {
}
}
function build_color_family(ramps: RampSet): ColorFamily {
const color_family: ColorFamily = {}
for (const ramp in ramps) {
const ramp_value = ramps[ramp as keyof RampSet]
const lightnessValues = [ramp_value(0).get('hsl.l') * 100, ramp_value(1).get('hsl.l') * 100]
const low = Math.min(...lightnessValues)
const high = Math.max(...lightnessValues)
const range = high - low
color_family[ramp as keyof RampSet] = {
low,
high,
range,
scaling_value: 100 / range,
}
}
return color_family
}
function lowest_layer(ramps: RampSet): Layer {
return {
base: build_style_set(ramps.neutral, 0.2, 1),