From fbf1552be910a61e9a5a237d836847736fc197ae Mon Sep 17 00:00:00 2001
From: Sergey Onufrienko <sergey@onufrienko.com>
Date: Mon, 10 Jul 2023 20:41:39 +0100
Subject: [PATCH 1/2] Add color_family to theme

---
 styles/src/theme/create_theme.ts | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/styles/src/theme/create_theme.ts b/styles/src/theme/create_theme.ts
index d2701f8341..3f4a076654 100644
--- a/styles/src/theme/create_theme.ts
+++ b/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),

From 036d3e811aa48bf62368dfcd6c9e5812bc16398f Mon Sep 17 00:00:00 2001
From: Sergey Onufrienko <sergey@onufrienko.com>
Date: Thu, 13 Jul 2023 22:09:31 +0100
Subject: [PATCH 2/2] feat: add low, high, range and scaling

---
 styles/src/theme/create_theme.ts | 33 ++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/styles/src/theme/create_theme.ts b/styles/src/theme/create_theme.ts
index 3f4a076654..e0da345bc5 100644
--- a/styles/src/theme/create_theme.ts
+++ b/styles/src/theme/create_theme.ts
@@ -70,11 +70,14 @@ export interface Players {
     "7": Player
 }
 
-export interface ColorFamily {
-    range: ColorFamilyRange
-}
+export type ColorFamily = Partial<{ [K in keyof RampSet]: ColorFamilyRange }>
 
-export type ColorFamilyRange = Partial<{ [K in keyof RampSet]: number }>
+export interface ColorFamilyRange {
+    low: number
+    high: number
+    range: number
+    scaling_value: number
+}
 
 export interface Shadow {
     blur: number
@@ -169,9 +172,7 @@ export function create_theme(theme: ThemeConfig): Theme {
         "7": player(ramps.yellow),
     }
 
-    const color_family = {
-        range: build_color_family(ramps)
-    }
+    const color_family = build_color_family(ramps)
 
     return {
         name,
@@ -199,11 +200,23 @@ function player(ramp: Scale): Player {
     }
 }
 
-function build_color_family(ramps: RampSet): ColorFamilyRange {
-    const color_family: ColorFamilyRange = {}
+function build_color_family(ramps: RampSet): ColorFamily {
+    const color_family: ColorFamily = {}
 
     for (const ramp in ramps) {
-        color_family[ramp as keyof RampSet] = chroma(ramps[ramp as keyof RampSet](0.5)).luminance()
+        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