oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP + Format

Browse Source
This commit is contained in:
Nate Butler
2022-10-09 19:43:06 -04:00
parent c4028ef116
commit 2d25e25ec3
26 changed files with 407 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/themes/abruzzo.ts
+12 -19
View File
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "abruzzo";
const ramps = {
neutral: chroma.scale([
"#1b0d05",
"#2c1e18",
"#654035",
"#9d5e4a",
"#b37354",
"#c1825a",
"#dda66e",
"#fbf3e2",
]).domain([
0,
0.15,
0.35,
0.5,
0.6,
0.75,
0.85,
1
]),
neutral: chroma
.scale([
"#1b0d05",
"#2c1e18",
"#654035",
"#9d5e4a",
"#b37354",
"#c1825a",
"#dda66e",
"#fbf3e2",
])
.domain([0, 0.15, 0.35, 0.5, 0.6, 0.75, 0.85, 1]),
red: colorRamp(chroma("#e594c4")),
orange: colorRamp(chroma("#d9e87e")),
yellow: colorRamp(chroma("#fd9d83")),
styles/src/themes/andromeda.ts
+12 -19
View File
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "andromeda";
const ramps = {
neutral: chroma.scale([
"#1E2025",
"#23262E",
"#292E38",
"#2E323C",
"#ACA8AE",
"#CBC9CF",
"#E1DDE4",
"#F7F7F8",
]).domain([
0,
0.15,
0.25,
0.35,
0.7,
0.8,
0.9,
1
]),
neutral: chroma
.scale([
"#1E2025",
"#23262E",
"#292E38",
"#2E323C",
"#ACA8AE",
"#CBC9CF",
"#E1DDE4",
"#F7F7F8",
])
.domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
red: colorRamp(chroma("#F92672")),
orange: colorRamp(chroma("#F39C12")),
yellow: colorRamp(chroma("#FFE66D")),
styles/src/themes/brushtrees.ts
+12 -19
View File
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "brush-tree";
const ramps = {
neutral: chroma.scale([
"#485867",
"#5A6D7A",
"#6D828E",
"#8299A1",
"#98AFB5",
"#B0C5C8",
"#C9DBDC",
"#E3EFEF",
]).domain([
0,
0.17,
0.32,
0.48,
0.6,
0.715,
0.858,
1
]),
neutral: chroma
.scale([
"#485867",
"#5A6D7A",
"#6D828E",
"#8299A1",
"#98AFB5",
"#B0C5C8",
"#C9DBDC",
"#E3EFEF",
])
.domain([0, 0.17, 0.32, 0.48, 0.6, 0.715, 0.858, 1]),
red: colorRamp(chroma("#b38686")),
orange: colorRamp(chroma("#d8bba2")),
yellow: colorRamp(chroma("#aab386")),
styles/src/themes/cave.ts
+12 -19
View File
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "cave";
const ramps = {
neutral: chroma.scale([
"#19171c",
"#26232a",
"#585260",
"#655f6d",
"#7e7887",
"#8b8792",
"#e2dfe7",
"#efecf4",
]).domain([
0,
0.3,
0.45,
0.6,
0.65,
0.7,
0.85,
1
]),
neutral: chroma
.scale([
"#19171c",
"#26232a",
"#585260",
"#655f6d",
"#7e7887",
"#8b8792",
"#e2dfe7",
"#efecf4",
])
.domain([0, 0.3, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#be4678")),
orange: colorRamp(chroma("#aa573c")),
yellow: colorRamp(chroma("#a06e3b")),
styles/src/themes/common/colorScheme.ts
+50 -50
View File
@@ -1,83 +1,83 @@
import { Scale } from "chroma-js";
export interface ColorScheme {
name: string,
isLight: boolean,
name: string;
isLight: boolean;
lowest: Elevation,
middle: Elevation,
highest: Elevation,
lowest: Elevation;
middle: Elevation;
highest: Elevation;
players: Players,
players: Players;
}
export interface Player {
cursor: string,
selection: string,
cursor: string;
selection: string;
}
export interface Players {
"0": Player,
"1": Player,
"2": Player,
"3": Player,
"4": Player,
"5": Player,
"6": Player,
"7": Player,
"0": Player;
"1": Player;
"2": Player;
"3": Player;
"4": Player;
"5": Player;
"6": Player;
"7": Player;
}
export interface Elevation {
ramps: RampSet,
ramps: RampSet;
bottom: Layer,
middle: Layer,
top: Layer,
bottom: Layer;
middle: Layer;
top: Layer;
above?: Elevation,
shadow?: Shadow
above?: Elevation;
shadow?: Shadow;
}
export interface Shadow {
blur: number,
color: string,
offset: number[],
blur: number;
color: string;
offset: number[];
}
export type StyleSets = keyof Layer;
export interface Layer {
base: StyleSet,
variant: StyleSet,
on: StyleSet,
info: StyleSet,
positive: StyleSet,
warning: StyleSet,
negative: StyleSet,
base: StyleSet;
variant: StyleSet;
on: StyleSet;
info: StyleSet;
positive: StyleSet;
warning: StyleSet;
negative: StyleSet;
}
export interface RampSet {
neutral: Scale,
red: Scale,
orange: Scale,
yellow: Scale,
green: Scale,
cyan: Scale,
blue: Scale,
violet: Scale,
magenta: Scale,
neutral: Scale;
red: Scale;
orange: Scale;
yellow: Scale;
green: Scale;
cyan: Scale;
blue: Scale;
violet: Scale;
magenta: Scale;
}
export type Styles = keyof StyleSet;
export interface StyleSet {
default: Style,
active: Style,
disabled: Style,
hovered: Style,
pressed: Style,
default: Style;
active: Style;
disabled: Style;
hovered: Style;
pressed: Style;
}
export interface Style {
background: string,
border: string,
foreground: string,
}
background: string;
border: string;
foreground: string;
}
styles/src/themes/common/ramps.ts
+97 -94
View File
@@ -1,5 +1,15 @@
import chroma, { Color, Scale } from "chroma-js";
import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, Styles, StyleSet } from "./colorScheme";
import {
ColorScheme,
Elevation,
Layer,
Player,
RampSet,
Shadow,
Style,
Styles,
StyleSet,
} from "./colorScheme";
export function colorRamp(color: Color): Scale {
let hue = color.hsl()[0];
@@ -8,7 +18,11 @@ export function colorRamp(color: Color): Scale {
return chroma.scale([startColor, color, endColor]).mode("hsl");
}
export function createColorScheme(name: string, isLight: boolean, colorRamps: { [rampName: string]: Scale }): ColorScheme {
export function createColorScheme(
name: string,
isLight: boolean,
colorRamps: { [rampName: string]: Scale }
): ColorScheme {
// Chromajs scales from 0 to 1 flipped if isLight is true
let baseRamps: typeof colorRamps = {};
@@ -20,18 +34,16 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
// function to any in order to get the colors back out from the original ramps.
if (isLight) {
for (var rampName in colorRamps) {
baseRamps[rampName] = chroma
.scale(colorRamps[rampName].colors(100).reverse());
baseRamps[rampName] = chroma.scale(
colorRamps[rampName].colors(100).reverse()
);
}
baseRamps.neutral = chroma
.scale(colorRamps.neutral.colors(100).reverse());
baseRamps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse());
} else {
for (var rampName in colorRamps) {
baseRamps[rampName] = chroma
.scale(colorRamps[rampName].colors(100));
baseRamps[rampName] = chroma.scale(colorRamps[rampName].colors(100));
}
baseRamps.neutral = chroma
.scale(colorRamps.neutral.colors(100));
baseRamps.neutral = chroma.scale(colorRamps.neutral.colors(100));
}
let baseSet = {
@@ -46,40 +58,28 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
magenta: baseRamps.magenta,
};
let lowest = elevation(
resampleSet(
baseSet,
evenSamples(0, 1)
),
isLight,
);
let lowest = elevation(resampleSet(baseSet, evenSamples(0, 1)), isLight);
let middle = elevation(
resampleSet(
baseSet,
evenSamples(0.08, 1)
),
isLight,
{
blur: 4,
color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
offset: [1, 2],
}
);
let middle = elevation(resampleSet(baseSet, evenSamples(0.08, 1)), isLight, {
blur: 4,
color: baseSet
.neutral(isLight ? 7 : 0)
.darken()
.alpha(0.2)
.hex(), // TODO used blend previously. Replace with something else
offset: [1, 2],
});
lowest.above = middle;
let highest = elevation(
resampleSet(
baseSet,
evenSamples(0.16, 1)
),
isLight,
{
blur: 16,
color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
offset: [0, 2],
}
);
let highest = elevation(resampleSet(baseSet, evenSamples(0.16, 1)), isLight, {
blur: 16,
color: baseSet
.neutral(isLight ? 7 : 0)
.darken()
.alpha(0.2)
.hex(), // TODO used blend previously. Replace with something else
offset: [0, 2],
});
middle.above = highest;
let players = {
@@ -91,7 +91,7 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
"5": player(baseSet.cyan),
"6": player(baseSet.red),
"7": player(baseSet.yellow),
}
};
return {
name,
@@ -109,11 +109,13 @@ function player(ramp: Scale): Player {
return {
selection: ramp(0.5).alpha(0.24).hex(),
cursor: ramp(0.5).hex(),
}
};
}
function evenSamples(min: number, max: number): number[] {
return Array.from(Array(101).keys()).map((i) => (i / 100) * (max - min) + min);
return Array.from(Array(101).keys()).map(
(i) => (i / 100) * (max - min) + min
);
}
function resampleSet(ramps: RampSet, samples: number[]): RampSet {
@@ -127,7 +129,7 @@ function resampleSet(ramps: RampSet, samples: number[]): RampSet {
blue: resample(ramps.blue, samples),
violet: resample(ramps.violet, samples),
magenta: resample(ramps.magenta, samples),
}
};
}
function resample(scale: Scale, samples: number[]): Scale {
@@ -135,7 +137,11 @@ function resample(scale: Scale, samples: number[]): Scale {
return chroma.scale(newColors);
}
function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation {
function elevation(
ramps: RampSet,
isLight: boolean,
shadow?: Shadow
): Elevation {
return {
ramps,
@@ -148,17 +154,20 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
}
interface StyleColors {
default: number | Color,
hovered: number | Color,
pressed: number | Color,
active: number | Color,
disabled: number | Color,
default: number | Color;
hovered: number | Color;
pressed: number | Color;
active: number | Color;
disabled: number | Color;
}
function buildStyleSet(ramp: Scale, styleDefinitions: {
background: StyleColors,
border: StyleColors,
foreground: StyleColors,
}): StyleSet {
function buildStyleSet(
ramp: Scale,
styleDefinitions: {
background: StyleColors;
border: StyleColors;
foreground: StyleColors;
}
): StyleSet {
function colorString(indexOrColor: number | Color): string {
if (typeof indexOrColor === "number") {
return ramp(indexOrColor).hex();
@@ -172,7 +181,7 @@ function buildStyleSet(ramp: Scale, styleDefinitions: {
background: colorString(styleDefinitions.background[style]),
border: colorString(styleDefinitions.border[style]),
foreground: colorString(styleDefinitions.foreground[style]),
}
};
}
return {
@@ -181,73 +190,67 @@ function buildStyleSet(ramp: Scale, styleDefinitions: {
pressed: buildStyle("pressed"),
active: buildStyle("active"),
disabled: buildStyle("disabled"),
}
};
}
function buildLayer(fgLayer: number, bgBase: number, fgBase: number, step: number) {
function buildLayer(bgBase: number, fgBase: number, step: number) {
return {
background: {
default: bgBase,
hovered: bgBase + step,
pressed: bgBase + (step * 1.5),
active: bgBase + (step * 2.5),
pressed: bgBase + step * 1.5,
active: bgBase + step * 3,
disabled: bgBase,
},
border: {
default: bgBase + step,
default: bgBase + step * 1,
hovered: bgBase + step,
pressed: bgBase + step,
active: bgBase + step,
disabled: bgBase + step,
active: bgBase + step * 3,
disabled: bgBase + step * 0.5,
},
foreground: {
default: fgBase,
hovered: fgBase - step,
pressed: fgBase - step,
active: fgBase,
disabled: fgLayer - (step * 4),
disabled: bgBase + step * 4,
},
}
};
}
function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
let fgLayer = 1
return {
base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.2, 1, 0.08)),
variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.2, 0.7, 0.08)),
on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0.2, 1, 0.08)),
positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0.2, 1, 0.08)),
warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0.2, 1, 0.08)),
negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0.2, 1, 0.08))
base: buildStyleSet(ramps.neutral, buildLayer(0.2, 1, 0.08)),
variant: buildStyleSet(ramps.neutral, buildLayer(0.2, 0.7, 0.08)),
on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
};
}
function middleLayer(ramps: RampSet, isLight: boolean): Layer {
let fgLayer = 1
return {
base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 0.7, 0.08)),
on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 1, 0.08)),
info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0.1, 1, 0.08)),
positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0.1, 1, 0.08)),
warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0.1, 1, 0.08)),
negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0.1, 1, 0.08))
base: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
variant: buildStyleSet(ramps.neutral, buildLayer(0.1, 0.7, 0.08)),
on: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
};
}
function topLayer(ramps: RampSet, isLight: boolean): Layer {
let fgLayer = 1
return {
base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 1, 0.08)),
variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 0.7, 0.08)),
on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0, 1, 0.08)),
positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0, 1, 0.08)),
warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0, 1, 0.08)),
negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0, 1, 0.08))
base: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
variant: buildStyleSet(ramps.neutral, buildLayer(0, 0.7, 0.08)),
on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
};
}
}
styles/src/themes/internal/zed-pro.ts
+12 -19
View File
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "../common/ramps";
const name = "zed-pro";
const ramps = {
neutral: chroma.scale([
"#101010",
"#1C1C1C",
"#212121",
"#2D2D2D",
"#B9B9B9",
"#DADADA",
"#E6E6E6",
"#FFFFFF",
]).domain([
0,
0.1,
0.2,
0.3,
0.7,
0.8,
0.9,
1
]),
neutral: chroma
.scale([
"#101010",
"#1C1C1C",
"#212121",
"#2D2D2D",
"#B9B9B9",
"#DADADA",
"#E6E6E6",
"#FFFFFF",
])
.domain([0, 0.1, 0.2, 0.3, 0.7, 0.8, 0.9, 1]),
red: colorRamp(chroma("#DC604F")),
orange: colorRamp(chroma("#DE782F")),
yellow: colorRamp(chroma("#E0B750")),
styles/src/themes/one-dark.ts
+3 -19
View File
@@ -24,25 +24,9 @@ const base0E = "#c678dd";
const base0F = "#be5046";
const ramps = {
neutral: chroma.scale([
base00,
base01,
base02,
base03,
base04,
base05,
base06,
base07,
]).domain([
0.05,
0.22,
0.25,
0.45,
0.62,
0.8,
0.9,
1
]),
neutral: chroma
.scale([base00, base01, base02, base03, base04, base05, base06, base07])
.domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
red: colorRamp(chroma(base08)),
orange: colorRamp(chroma(base09)),
yellow: colorRamp(chroma(base0A)),
styles/src/themes/one-light.ts
+3 -15
View File
@@ -24,21 +24,9 @@ const base0E = "#a626a4";
const base0F = "#986801";
const ramps = {
neutral: chroma.scale([
base00,
base01,
base02,
base03,
base04,
base05,
base06,
base07,
]).domain([
0,
0.05,
0.77,
1
]),
neutral: chroma
.scale([base00, base01, base02, base03, base04, base05, base06, base07])
.domain([0, 0.05, 0.77, 1]),
red: colorRamp(chroma(base08)),
orange: colorRamp(chroma(base09)),
yellow: colorRamp(chroma(base0A)),
styles/src/themes/rose-pine-dawn.ts
+12 -14
View File
@@ -4,20 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "rosé-pine-dawn";
const ramps = {
neutral: chroma.scale([
"#575279",
"#797593",
"#9893A5",
"#B5AFB8",
"#D3CCCC",
"#F2E9E1",
"#FFFAF3",
"#FAF4ED",
]).domain([
0,
0.73,
1
]),
neutral: chroma
.scale([
"#575279",
"#797593",
"#9893A5",
"#B5AFB8",
"#D3CCCC",
"#F2E9E1",
"#FFFAF3",
"#FAF4ED",
])
.domain([0, 0.73, 1]),
red: colorRamp(chroma("#B4637A")),
orange: colorRamp(chroma("#D7827E")),
yellow: colorRamp(chroma("#EA9D34")),
styles/src/themes/rose-pine-moon.ts
+12 -15
View File
@@ -4,21 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "rosé-pine-moon";
const ramps = {
neutral: chroma.scale([
"#232136",
"#2A273F",
"#393552",
"#3E3A53",
"#56526C",
"#6E6A86",
"#908CAA",
"#E0DEF4",
]).domain([
0,
0.3,
0.55,
1
]),
neutral: chroma
.scale([
"#232136",
"#2A273F",
"#393552",
"#3E3A53",
"#56526C",
"#6E6A86",
"#908CAA",
"#E0DEF4",
])
.domain([0, 0.3, 0.55, 1]),
red: colorRamp(chroma("#EB6F92")),
orange: colorRamp(chroma("#EBBCBA")),
yellow: colorRamp(chroma("#F6C177")),
styles/src/themes/solarized.ts
+13 -20
View File
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "solarized";
const ramps = {
neutral: chroma.scale([
"#002b36",
"#073642",
"#586e75",
"#657b83",
"#839496",
"#93a1a1",
"#eee8d5",
"#fdf6e3",
]).domain([
0,
0.2,
0.38,
0.45,
0.65,
0.7,
0.85,
1
]),
neutral: chroma
.scale([
"#002b36",
"#073642",
"#586e75",
"#657b83",
"#839496",
"#93a1a1",
"#eee8d5",
"#fdf6e3",
])
.domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#dc322f")),
orange: colorRamp(chroma("#cb4b16")),
yellow: colorRamp(chroma("#b58900")),
@@ -34,4 +27,4 @@ const ramps = {
};
export const dark = createColorScheme(`${name}-dark`, false, ramps);
export const light = createColorScheme(`${name}-light`, true, ramps);
export const light = createColorScheme(`${name}-light`, true, ramps);
styles/src/themes/sulphurpool.ts
+12 -19
View File
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "sulphurpool";
const ramps = {
neutral: chroma.scale([
"#202746",
"#293256",
"#5e6687",
"#6b7394",
"#898ea4",
"#979db4",
"#dfe2f1",
"#f5f7ff",
]).domain([
0,
0.2,
0.38,
0.45,
0.65,
0.7,
0.85,
1
]),
neutral: chroma
.scale([
"#202746",
"#293256",
"#5e6687",
"#6b7394",
"#898ea4",
"#979db4",
"#dfe2f1",
"#f5f7ff",
])
.domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#c94922")),
orange: colorRamp(chroma("#c76b29")),
yellow: colorRamp(chroma("#c08b30")),
styles/src/themes/summercamp.ts
+12 -19
View File
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
const name = "summercamp";
const ramps = {
neutral: chroma.scale([
"#1c1810",
"#2a261c",
"#3a3527",
"#3a3527",
"#5f5b45",
"#736e55",
"#bab696",
"#f8f5de",
]).domain([
0,
0.2,
0.38,
0.4,
0.65,
0.7,
0.85,
1
]),
neutral: chroma
.scale([
"#1c1810",
"#2a261c",
"#3a3527",
"#3a3527",
"#5f5b45",
"#736e55",
"#bab696",
"#f8f5de",
])
.domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#e35142")),
orange: colorRamp(chroma("#fba11b")),
yellow: colorRamp(chroma("#f2ff27")),