mirror of
https://github.com/zed-industries/zed.git
synced 2024-12-29 04:20:46 +00:00
Calculate the range for each color family in a theme (#2738)
Release Notes: - N/A (Internal theme stuff)
This commit is contained in:
commit
662e196267
1 changed files with 36 additions and 1 deletions
|
@ -1,4 +1,4 @@
|
||||||
import { Scale, Color } from "chroma-js"
|
import chroma, { Scale, Color } from "chroma-js"
|
||||||
import { Syntax, ThemeSyntax, SyntaxHighlightStyle } from "./syntax"
|
import { Syntax, ThemeSyntax, SyntaxHighlightStyle } from "./syntax"
|
||||||
export { Syntax, ThemeSyntax, SyntaxHighlightStyle }
|
export { Syntax, ThemeSyntax, SyntaxHighlightStyle }
|
||||||
import {
|
import {
|
||||||
|
@ -32,6 +32,7 @@ export interface Theme {
|
||||||
|
|
||||||
players: Players
|
players: Players
|
||||||
syntax?: Partial<ThemeSyntax>
|
syntax?: Partial<ThemeSyntax>
|
||||||
|
color_family: ColorFamily
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Meta {
|
export interface Meta {
|
||||||
|
@ -69,6 +70,15 @@ export interface Players {
|
||||||
"7": Player
|
"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 {
|
export interface Shadow {
|
||||||
blur: number
|
blur: number
|
||||||
color: string
|
color: string
|
||||||
|
@ -162,6 +172,8 @@ export function create_theme(theme: ThemeConfig): Theme {
|
||||||
"7": player(ramps.yellow),
|
"7": player(ramps.yellow),
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const color_family = build_color_family(ramps)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
name,
|
name,
|
||||||
is_light,
|
is_light,
|
||||||
|
@ -177,6 +189,7 @@ export function create_theme(theme: ThemeConfig): Theme {
|
||||||
|
|
||||||
players,
|
players,
|
||||||
syntax,
|
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 {
|
function lowest_layer(ramps: RampSet): Layer {
|
||||||
return {
|
return {
|
||||||
base: build_style_set(ramps.neutral, 0.2, 1),
|
base: build_style_set(ramps.neutral, 0.2, 1),
|
||||||
|
|
Loading…
Reference in a new issue