mirror of
https://github.com/zed-industries/zed.git
synced 2025-01-27 04:44:30 +00:00
Finish adding default properties
This commit is contained in:
Nate Butler
parent
3b19a409f8
commit
f2d6a03dff
3 changed files with 171 additions and 127 deletions
|
|
@ -11,6 +11,7 @@ import { background, border, borderColor, foreground, text } from "./components"
|
|||
import hoverPopover from "./hoverPopover"
|
||||
|
||||
import deepmerge from "deepmerge"
|
||||
import { buildSyntax } from "../themes/common/syntax"
|
||||
|
||||
export default function editor(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.highest
|
||||
|
|
@ -43,118 +44,7 @@ export default function editor(colorScheme: ColorScheme) {
|
|||
}
|
||||
}
|
||||
|
||||
const defaultSyntax: Syntax = {
|
||||
primary: {
|
||||
color: colorScheme.ramps.neutral(1).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
"variable.special": {
|
||||
// Highlights for self, this, etc
|
||||
color: colorScheme.ramps.blue(0.7).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
comment: {
|
||||
color: colorScheme.ramps.neutral(0.71).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
punctuation: {
|
||||
color: colorScheme.ramps.neutral(0.86).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
constant: {
|
||||
color: colorScheme.ramps.green(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
keyword: {
|
||||
color: colorScheme.ramps.blue(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
function: {
|
||||
color: colorScheme.ramps.yellow(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
type: {
|
||||
color: colorScheme.ramps.cyan(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
constructor: {
|
||||
color: colorScheme.ramps.blue(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
variant: {
|
||||
color: colorScheme.ramps.blue(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
property: {
|
||||
color: colorScheme.ramps.blue(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
enum: {
|
||||
color: colorScheme.ramps.orange(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
operator: {
|
||||
color: colorScheme.ramps.orange(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
string: {
|
||||
color: colorScheme.ramps.orange(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
number: {
|
||||
color: colorScheme.ramps.green(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
boolean: {
|
||||
color: colorScheme.ramps.green(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
predictive: {
|
||||
color: colorScheme.ramps.neutral(0.57).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
title: {
|
||||
color: colorScheme.ramps.yellow(0.5).hex(),
|
||||
weight: fontWeights.bold,
|
||||
},
|
||||
emphasis: {
|
||||
color: colorScheme.ramps.blue(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
"emphasis.strong": {
|
||||
color: colorScheme.ramps.blue(0.5).hex(),
|
||||
weight: fontWeights.bold,
|
||||
},
|
||||
linkUri: {
|
||||
color: colorScheme.ramps.green(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
underline: true,
|
||||
},
|
||||
linkText: {
|
||||
color: colorScheme.ramps.orange(0.5).hex(),
|
||||
weight: fontWeights.normal,
|
||||
italic: true,
|
||||
},
|
||||
}
|
||||
|
||||
function createSyntax(colorScheme: ColorScheme): Syntax {
|
||||
if (!colorScheme.syntax) {
|
||||
return defaultSyntax
|
||||
}
|
||||
|
||||
return deepmerge<Syntax, Partial<ThemeSyntax>>(
|
||||
defaultSyntax,
|
||||
colorScheme.syntax,
|
||||
{
|
||||
arrayMerge: (destinationArray, sourceArray) => [
|
||||
...destinationArray,
|
||||
...sourceArray,
|
||||
],
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const syntax = createSyntax(colorScheme)
|
||||
const syntax = buildSyntax(colorScheme)
|
||||
|
||||
return {
|
||||
textColor: syntax.primary.color,
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ export interface Syntax {
|
|||
title: SyntaxHighlightStyle
|
||||
linkUri: SyntaxHighlightStyle
|
||||
linkText: SyntaxHighlightStyle
|
||||
// md: indented_code_block, fenced_code_block, code_span
|
||||
/** md: indented_code_block, fenced_code_block, code_span */
|
||||
"text.literal": SyntaxHighlightStyle
|
||||
|
||||
// == Punctuation ====== /
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import deepmerge from "deepmerge"
|
||||
import { fontWeights } from "../../common";
|
||||
import { fontWeights } from "../../common"
|
||||
|
||||
const defaultSyntaxHighlightStyle: Omit<SyntaxHighlightStyle, "color"> = {
|
||||
weight: fontWeights.normal,
|
||||
underline: false,
|
||||
italic: false
|
||||
italic: false,
|
||||
}
|
||||
|
||||
function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
|
||||
// Make a temporary object that is allowed to be missing
|
||||
// Make a temporary object that is allowed to be missing
|
||||
// the "color" property for each style
|
||||
const syntax: {
|
||||
[key: string]: Omit<SyntaxHighlightStyle, "color">
|
||||
|
|
@ -17,32 +17,182 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
|
|||
// then spread the default to each style
|
||||
for (const key of Object.keys({} as Syntax)) {
|
||||
syntax[key as keyof Syntax] = {
|
||||
...defaultSyntaxHighlightStyle
|
||||
...defaultSyntaxHighlightStyle,
|
||||
}
|
||||
}
|
||||
|
||||
const color = {
|
||||
comment: colorScheme.ramps.neutral(0.71).hex()
|
||||
primary: colorScheme.ramps.neutral(1).hex(),
|
||||
comment: colorScheme.ramps.neutral(0.71).hex(),
|
||||
punctuation: colorScheme.ramps.neutral(0.86).hex(),
|
||||
predictive: colorScheme.ramps.neutral(0.57).hex(),
|
||||
emphasis: colorScheme.ramps.blue(0.5).hex(),
|
||||
string: colorScheme.ramps.orange(0.5).hex(),
|
||||
function: colorScheme.ramps.yellow(0.5).hex(),
|
||||
type: colorScheme.ramps.cyan(0.5).hex(),
|
||||
constructor: colorScheme.ramps.blue(0.5).hex(),
|
||||
variant: colorScheme.ramps.blue(0.5).hex(),
|
||||
property: colorScheme.ramps.blue(0.5).hex(),
|
||||
enum: colorScheme.ramps.orange(0.5).hex(),
|
||||
operator: colorScheme.ramps.orange(0.5).hex(),
|
||||
number: colorScheme.ramps.green(0.5).hex(),
|
||||
boolean: colorScheme.ramps.green(0.5).hex(),
|
||||
constant: colorScheme.ramps.green(0.5).hex(),
|
||||
keyword: colorScheme.ramps.blue(0.5).hex(),
|
||||
}
|
||||
|
||||
// Then assign colors and use Syntax to enforce each style getting it's own color
|
||||
const defaultSyntax: Syntax = {
|
||||
...syntax,
|
||||
comment: {
|
||||
color: color.comment
|
||||
color: color.comment,
|
||||
},
|
||||
"comment.doc": {
|
||||
color: color.comment
|
||||
color: color.comment,
|
||||
},
|
||||
primary: {
|
||||
color: colorScheme.ramps.neutral(1).hex()
|
||||
color: color.primary,
|
||||
},
|
||||
predictive: {
|
||||
color: colorScheme.ramps.neutral(0.57).hex()
|
||||
}
|
||||
// TODO: Finish default styles
|
||||
color: color.predictive,
|
||||
},
|
||||
emphasis: {
|
||||
color: color.emphasis,
|
||||
},
|
||||
"emphasis.strong": {
|
||||
color: color.emphasis,
|
||||
weight: fontWeights.bold,
|
||||
},
|
||||
title: {
|
||||
color: color.primary,
|
||||
weight: fontWeights.bold,
|
||||
},
|
||||
linkUri: {
|
||||
color: colorScheme.ramps.green(0.5).hex(),
|
||||
underline: true,
|
||||
},
|
||||
linkText: {
|
||||
color: colorScheme.ramps.orange(0.5).hex(),
|
||||
italic: true,
|
||||
},
|
||||
"text.literal": {
|
||||
color: color.string,
|
||||
},
|
||||
punctuation: {
|
||||
color: color.punctuation,
|
||||
},
|
||||
"punctuation.bracket": {
|
||||
color: color.punctuation,
|
||||
},
|
||||
"punctuation.delimiter": {
|
||||
color: color.punctuation,
|
||||
},
|
||||
"punctuation.special": {
|
||||
color: colorScheme.ramps.neutral(0.86).hex(),
|
||||
},
|
||||
"punctuation.list_marker": {
|
||||
color: color.punctuation,
|
||||
},
|
||||
string: {
|
||||
color: color.string,
|
||||
},
|
||||
"string.special": {
|
||||
color: color.string,
|
||||
},
|
||||
"string.special.symbol": {
|
||||
color: color.string,
|
||||
},
|
||||
"string.special.regex": {
|
||||
color: color.string,
|
||||
},
|
||||
"string.escape": {
|
||||
color: color.comment,
|
||||
},
|
||||
"string.regex": {
|
||||
color: color.string,
|
||||
},
|
||||
constructor: {
|
||||
color: colorScheme.ramps.blue(0.5).hex(),
|
||||
},
|
||||
variant: {
|
||||
color: colorScheme.ramps.blue(0.5).hex(),
|
||||
},
|
||||
type: {
|
||||
color: color.type,
|
||||
},
|
||||
"type.builtin": {
|
||||
color: color.type,
|
||||
},
|
||||
"variable.builtin": {
|
||||
color: colorScheme.ramps.blue(0.5).hex(),
|
||||
},
|
||||
"variable.special": {
|
||||
color: colorScheme.ramps.blue(0.7).hex(),
|
||||
},
|
||||
label: {
|
||||
color: colorScheme.ramps.blue(0.5).hex(),
|
||||
},
|
||||
tag: {
|
||||
color: colorScheme.ramps.blue(0.5).hex(),
|
||||
},
|
||||
attribute: {
|
||||
color: colorScheme.ramps.blue(0.5).hex(),
|
||||
},
|
||||
property: {
|
||||
color: colorScheme.ramps.blue(0.5).hex(),
|
||||
},
|
||||
constant: {
|
||||
color: color.constant,
|
||||
},
|
||||
keyword: {
|
||||
color: color.keyword,
|
||||
},
|
||||
enum: {
|
||||
color: color.enum,
|
||||
},
|
||||
operator: {
|
||||
color: color.operator,
|
||||
},
|
||||
number: {
|
||||
color: color.number,
|
||||
},
|
||||
boolean: {
|
||||
color: color.boolean,
|
||||
},
|
||||
"constant.builtin": {
|
||||
color: color.constant,
|
||||
},
|
||||
function: {
|
||||
color: color.function,
|
||||
},
|
||||
"function.builtin": {
|
||||
color: color.function,
|
||||
},
|
||||
"function.call": {
|
||||
color: color.function,
|
||||
},
|
||||
"function.definition": {
|
||||
color: color.function,
|
||||
},
|
||||
"function.special.definition": {
|
||||
color: color.function,
|
||||
},
|
||||
"function.method": {
|
||||
color: color.function,
|
||||
},
|
||||
"function.method.builtin": {
|
||||
color: color.function,
|
||||
},
|
||||
preproc: {
|
||||
color: color.primary,
|
||||
},
|
||||
embedded: {
|
||||
color: color.primary,
|
||||
},
|
||||
}
|
||||
|
||||
console.log(JSON.stringify(defaultSyntax, null, 2))
|
||||
|
||||
return defaultSyntax
|
||||
}
|
||||
|
||||
|
|
@ -63,13 +213,17 @@ function mergeSyntax(defaultSyntax: Syntax, colorScheme: ColorScheme): Syntax {
|
|||
)
|
||||
}
|
||||
|
||||
import { ColorScheme, Syntax, SyntaxHighlightStyle, ThemeSyntax } from "./colorScheme";
|
||||
import {
|
||||
ColorScheme,
|
||||
Syntax,
|
||||
SyntaxHighlightStyle,
|
||||
ThemeSyntax,
|
||||
} from "./colorScheme"
|
||||
|
||||
export function buildSyntax(colorScheme: ColorScheme): Syntax {
|
||||
|
||||
const defaultSyntax: Syntax = buildDefaultSyntax(colorScheme)
|
||||
|
||||
const syntax = mergeSyntax(defaultSyntax, colorScheme)
|
||||
|
||||
return syntax
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue