254 lines
6.9 KiB
TypeScript
254 lines
6.9 KiB
TypeScript
import { fontWeights } from "../common";
|
|
import { ColorScheme, Elevation, Layer, StyleSets } from "../themes/common/colorScheme";
|
|
import {
|
|
background,
|
|
border,
|
|
borderColor,
|
|
foreground,
|
|
text,
|
|
} from "./components";
|
|
import hoverPopover from "./hoverPopover";
|
|
|
|
export default function editor(colorScheme: ColorScheme) {
|
|
let elevation = colorScheme.lowest;
|
|
let layer = elevation.top;
|
|
|
|
const autocompleteItem = {
|
|
cornerRadius: 6,
|
|
padding: {
|
|
bottom: 2,
|
|
left: 6,
|
|
right: 6,
|
|
top: 2,
|
|
},
|
|
};
|
|
|
|
function diagnostic(layer: Layer, styleSet: StyleSets) {
|
|
return {
|
|
textScaleFactor: 0.857,
|
|
header: {
|
|
border: border(layer, {
|
|
top: true,
|
|
}),
|
|
},
|
|
message: {
|
|
text: text(layer, "sans", styleSet, { size: "sm" }),
|
|
highlightText: text(layer, "sans", styleSet, {
|
|
size: "sm",
|
|
weight: "bold",
|
|
}),
|
|
},
|
|
};
|
|
}
|
|
|
|
const syntax = {
|
|
primary: {
|
|
color: elevation.ramps.neutral(1).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
comment: {
|
|
color: elevation.ramps.neutral(0.71).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
punctuation: {
|
|
color: elevation.ramps.neutral(0.86).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
constant: {
|
|
color: elevation.ramps.neutral(0.57).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
keyword: {
|
|
color: elevation.ramps.blue(0.5).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
function: {
|
|
color: elevation.ramps.yellow(0.5).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
type: {
|
|
color: elevation.ramps.cyan(0.5).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
constructor: {
|
|
color: elevation.ramps.blue(0.5).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
variant: {
|
|
color: elevation.ramps.blue(0.5).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
property: {
|
|
color: elevation.ramps.blue(0.5).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
enum: {
|
|
color: elevation.ramps.orange(0.5).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
operator: {
|
|
color: elevation.ramps.orange(0.5).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
string: {
|
|
color: elevation.ramps.orange(0.5).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
number: {
|
|
color: elevation.ramps.green(0.5).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
boolean: {
|
|
color: elevation.ramps.green(0.5).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
predictive: {
|
|
color: elevation.ramps.neutral(0.57).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
title: {
|
|
color: elevation.ramps.yellow(0.5).hex(),
|
|
weight: fontWeights.bold,
|
|
},
|
|
emphasis: {
|
|
color: elevation.ramps.blue(0.5).hex(),
|
|
weight: fontWeights.normal,
|
|
},
|
|
"emphasis.strong": {
|
|
color: elevation.ramps.blue(0.5).hex(),
|
|
weight: fontWeights.bold,
|
|
},
|
|
linkUri: {
|
|
color: elevation.ramps.green(0.5).hex(),
|
|
weight: fontWeights.normal,
|
|
underline: true,
|
|
},
|
|
linkText: {
|
|
color: elevation.ramps.orange(0.5).hex(),
|
|
weight: fontWeights.normal,
|
|
italic: true,
|
|
},
|
|
}
|
|
|
|
return {
|
|
textColor: syntax.primary.color,
|
|
background: background(layer),
|
|
activeLineBackground: background(layer, "variant"),
|
|
highlightedLineBackground: background(layer, "variant"),
|
|
codeActions: {
|
|
indicator: foreground(layer, "variant"),
|
|
verticalScale: 0.618
|
|
},
|
|
diffBackgroundDeleted: background(layer, "negative"),
|
|
diffBackgroundInserted: background(layer, "positive"),
|
|
documentHighlightReadBackground: elevation.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: This was blend
|
|
documentHighlightWriteBackground: elevation.ramps.neutral(0.5).alpha(0.4).hex(), // TODO: This was blend * 2
|
|
errorColor: foreground(layer, "negative"),
|
|
gutterBackground: background(layer),
|
|
gutterPaddingFactor: 3.5,
|
|
lineNumber: foreground(layer),
|
|
lineNumberActive: foreground(layer, "active"),
|
|
renameFade: 0.6,
|
|
unnecessaryCodeFade: 0.5,
|
|
selection: colorScheme.players[0],
|
|
guestSelections: [
|
|
colorScheme.players[1],
|
|
colorScheme.players[2],
|
|
colorScheme.players[3],
|
|
colorScheme.players[4],
|
|
colorScheme.players[5],
|
|
colorScheme.players[6],
|
|
colorScheme.players[7],
|
|
],
|
|
autocomplete: {
|
|
background: background(elevation.above.top),
|
|
cornerRadius: 8,
|
|
padding: 4,
|
|
border: border(elevation.above.top),
|
|
shadow: elevation.above.shadow,
|
|
item: autocompleteItem,
|
|
hoveredItem: {
|
|
...autocompleteItem,
|
|
background: background(elevation.above.top, "hovered"),
|
|
},
|
|
margin: {
|
|
left: -14,
|
|
},
|
|
matchHighlight: elevation.above.ramps.blue(0.5).hex(),
|
|
selectedItem: {
|
|
...autocompleteItem,
|
|
background: background(elevation.above.top, "active"),
|
|
},
|
|
},
|
|
diagnosticHeader: {
|
|
background: background(elevation.middle),
|
|
iconWidthFactor: 1.5,
|
|
textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these.
|
|
border: border(elevation.middle, {
|
|
bottom: true,
|
|
top: true,
|
|
}),
|
|
code: {
|
|
...text(elevation.middle, "mono", { size: "sm" }),
|
|
margin: {
|
|
left: 10,
|
|
},
|
|
},
|
|
message: {
|
|
highlightText: text(elevation.middle, "sans", {
|
|
size: "sm",
|
|
weight: "bold",
|
|
}),
|
|
text: text(elevation.middle, "sans", { size: "sm" }),
|
|
},
|
|
},
|
|
diagnosticPathHeader: {
|
|
background: background(elevation.middle),
|
|
textScaleFactor: 0.857,
|
|
filename: text(elevation.middle, "mono", { size: "sm" }),
|
|
path: {
|
|
...text(elevation.middle, "mono", { size: "sm" }),
|
|
margin: {
|
|
left: 12,
|
|
},
|
|
},
|
|
},
|
|
errorDiagnostic: diagnostic(elevation.middle, "negative"),
|
|
warningDiagnostic: diagnostic(elevation.middle, "warning"),
|
|
informationDiagnostic: diagnostic(elevation.middle, "info"),
|
|
hintDiagnostic: diagnostic(elevation.middle, "positive"),
|
|
invalidErrorDiagnostic: diagnostic(elevation.middle, "base"),
|
|
invalidHintDiagnostic: diagnostic(elevation.middle, "base"),
|
|
invalidInformationDiagnostic: diagnostic(elevation.middle, "base"),
|
|
invalidWarningDiagnostic: diagnostic(elevation.middle, "base"),
|
|
hoverPopover: hoverPopover(elevation.above),
|
|
linkDefinition: {
|
|
color: syntax.linkUri.color,
|
|
underline: syntax.linkUri.underline,
|
|
},
|
|
jumpIcon: {
|
|
color: foreground(layer, "on"),
|
|
iconWidth: 20,
|
|
buttonWidth: 20,
|
|
cornerRadius: 6,
|
|
padding: {
|
|
top: 6,
|
|
bottom: 6,
|
|
left: 6,
|
|
right: 6,
|
|
},
|
|
hover: {
|
|
color: foreground(layer, "on", "hovered"),
|
|
background: background(layer, "on", "hovered"),
|
|
},
|
|
},
|
|
compositionMark: {
|
|
underline: {
|
|
thickness: 1.0,
|
|
color: borderColor(layer),
|
|
},
|
|
},
|
|
syntax,
|
|
};
|
|
}
|