From f2d6a03dffdec06535cc594d1eef4cd7e0408310 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Sun, 26 Feb 2023 17:10:52 -0500 Subject: [PATCH] Finish adding default properties --- styles/src/styleTree/editor.ts | 114 +-------------- styles/src/themes/common/colorScheme.ts | 2 +- styles/src/themes/common/syntax.ts | 182 ++++++++++++++++++++++-- 3 files changed, 171 insertions(+), 127 deletions(-) diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 6dde5363fcafce9ec0f063f1e0241192682328b2..2c67a6f23ca1bfc1e1f62815f415c1a0443bd244 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -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>( - defaultSyntax, - colorScheme.syntax, - { - arrayMerge: (destinationArray, sourceArray) => [ - ...destinationArray, - ...sourceArray, - ], - } - ) - } - - const syntax = createSyntax(colorScheme) + const syntax = buildSyntax(colorScheme) return { textColor: syntax.primary.color, diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts index b56bf636a181ffe574eb68a469bc4e37fb28d879..2594813bf1a1ab8af16e3f9a78f5fe8f0dcdcdb5 100644 --- a/styles/src/themes/common/colorScheme.ts +++ b/styles/src/themes/common/colorScheme.ts @@ -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 ====== / diff --git a/styles/src/themes/common/syntax.ts b/styles/src/themes/common/syntax.ts index 28600c4df4ac9293d474135862e6ec443d8e1efb..ada4c50b57231b1c722166df5eb52f8072df1291 100644 --- a/styles/src/themes/common/syntax.ts +++ b/styles/src/themes/common/syntax.ts @@ -1,14 +1,14 @@ import deepmerge from "deepmerge" -import { fontWeights } from "../../common"; +import { fontWeights } from "../../common" const defaultSyntaxHighlightStyle: Omit = { 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 @@ -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 -} \ No newline at end of file +}