Add color_family to theme

styles/src/theme/create_theme.ts 🔗

@@ -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,12 @@ export interface Players {
     "7": Player
 }
 
+export interface ColorFamily {
+    range: ColorFamilyRange
+}
+
+export type ColorFamilyRange = Partial<{ [K in keyof RampSet]: number }>
+
 export interface Shadow {
     blur: number
     color: string
@@ -162,6 +169,10 @@ export function create_theme(theme: ThemeConfig): Theme {
         "7": player(ramps.yellow),
     }
 
+    const color_family = {
+        range: build_color_family(ramps)
+    }
+
     return {
         name,
         is_light,
@@ -177,6 +188,7 @@ export function create_theme(theme: ThemeConfig): Theme {
 
         players,
         syntax,
+        color_family,
     }
 }
 
@@ -187,6 +199,16 @@ function player(ramp: Scale): Player {
     }
 }
 
+function build_color_family(ramps: RampSet): ColorFamilyRange {
+    const color_family: ColorFamilyRange = {}
+
+    for (const ramp in ramps) {
+        color_family[ramp as keyof RampSet] = chroma(ramps[ramp as keyof RampSet](0.5)).luminance()
+    }
+
+    return color_family
+}
+
 function lowest_layer(ramps: RampSet): Layer {
     return {
         base: build_style_set(ramps.neutral, 0.2, 1),

Change summary

Detailed changes

styles/src/theme/create_theme.ts 🔗