Add syntax overrides for One Light

This commit is contained in:
Nate Butler 2023-02-26 10:09:16 -05:00
parent 4f307c7601
commit 64b07dbfeb

View file

@ -1,32 +1,71 @@
import chroma from "chroma-js"
import { Meta } from "./common/colorScheme"
import { fontWeights } from "../common";
import { Meta, ThemeSyntax } from "./common/colorScheme"
import { colorRamp, createColorScheme } from "./common/ramps"
const name = "One Light"
export const light = createColorScheme(`${name}`, true, {
const color = {
black: "#383A41",
grey: "#A2A3A7",
red: "#D36050",
orange: "#AD6F26",
yellow: "#DFC184",
green: "#659F58",
teal: "#3982B7",
blue: "#5B79E3",
purple: "#A449AB",
magenta: "#994EA6"
};
const ramps = {
neutral: chroma
.scale([
"#090a0b",
"#202227",
"#383a42",
"#383A41",
"#535456",
"#696c77",
"#a0a1a7",
"#e5e5e6",
"#f0f0f1",
"#fafafa",
"#9D9D9F",
"#A9A9A9",
"#DBDBDC",
"#EAEAEB",
"#FAFAFA",
])
.domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
.domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1])
,
red: colorRamp(chroma(color.red)),
orange: colorRamp(chroma(color.orange)),
yellow: colorRamp(chroma(color.yellow)),
green: colorRamp(chroma(color.green)),
cyan: colorRamp(chroma(color.teal)),
blue: colorRamp(chroma(color.blue)),
violet: colorRamp(chroma(color.purple)),
magenta: colorRamp(chroma(color.magenta)),
};
red: colorRamp(chroma("#ca1243")),
orange: colorRamp(chroma("#d75f00")),
yellow: colorRamp(chroma("#c18401")),
green: colorRamp(chroma("#50a14f")),
cyan: colorRamp(chroma("#0184bc")),
blue: colorRamp(chroma("#4078f2")),
violet: colorRamp(chroma("#a626a4")),
magenta: colorRamp(chroma("#986801")),
})
const syntax: ThemeSyntax = {
primary: { color: color.black },
"variable.special": { color: color.orange },
comment: { color: color.grey },
punctuation: { color: color.black },
keyword: { color: color.purple },
function: { color: color.blue },
type: { color: color.teal },
variant: { color: color.blue },
property: { color: color.red },
enum: { color: color.red },
operator: { color: color.teal },
string: { color: color.green },
number: { color: color.orange },
boolean: { color: color.orange },
title: { color: color.red, weight: fontWeights.normal },
"emphasis.strong": {
color: color.orange,
},
linkText: { color: color.blue },
linkUri: { color: color.teal },
}
export const light = createColorScheme(name, true, ramps, syntax)
export const meta: Meta = {
name,