mirror of
https://github.com/zed-industries/zed.git
synced 2024-12-30 21:16:23 +00:00
Convert editor styles to TypeScript
This commit is contained in:
Nathan Sobo
Keith Simmons
parent
8b33a58076
commit
cb3c111401
4 changed files with 214 additions and 199 deletions
201
styles/app.ts
201
styles/app.ts
|
|
@ -1,13 +1,15 @@
|
|||
import { backgroundColor } from "./components";
|
||||
import selectorModal from "./selector-modal";
|
||||
import workspace from "./workspace";
|
||||
import editor from "./editor";
|
||||
import Theme from "./theme";
|
||||
|
||||
export default function app(theme: Theme): Object {
|
||||
return {
|
||||
selector: selectorModal(theme),
|
||||
workspace: workspace(theme),
|
||||
chat_panel: {
|
||||
editor: editor(theme),
|
||||
chatPanel: {
|
||||
extends: "$panel",
|
||||
channel_name: {
|
||||
extends: "$text.primary",
|
||||
|
|
@ -169,203 +171,6 @@ export default function app(theme: Theme): Object {
|
|||
extends: "$contacts_panel.project",
|
||||
},
|
||||
},
|
||||
editor: {
|
||||
active_line_background: "$state.active_line",
|
||||
background: backgroundColor(theme, 300),
|
||||
code_actions_indicator: "$text.muted.color",
|
||||
diff_background_deleted: "$state.deleted_line",
|
||||
diff_background_inserted: "$state.inserted_line",
|
||||
document_highlight_read_background: "#99999920",
|
||||
document_highlight_write_background: "#99999916",
|
||||
error_color: "$status.bad",
|
||||
guest_selections: "$selection.guests",
|
||||
gutter_background: backgroundColor(theme, 300),
|
||||
gutter_padding_factor: 2.5,
|
||||
highlighted_line_background: "$state.highlighted_line",
|
||||
line_number: "$text.muted.color",
|
||||
line_number_active: "$text.primary.color",
|
||||
rename_fade: 0.6,
|
||||
selection: "$selection.host",
|
||||
text_color: "$text.secondary.color",
|
||||
unnecessary_code_fade: 0.5,
|
||||
autocomplete: {
|
||||
background: "$surface.100",
|
||||
corner_radius: 6,
|
||||
padding: 6,
|
||||
border: {
|
||||
color: "$border.secondary",
|
||||
width: 2,
|
||||
},
|
||||
hovered_item: {
|
||||
background: "$state.hover",
|
||||
extends: "$editor.autocomplete.item",
|
||||
},
|
||||
item: {
|
||||
corner_radius: 6,
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 6,
|
||||
right: 6,
|
||||
top: 2,
|
||||
},
|
||||
},
|
||||
margin: {
|
||||
left: -14,
|
||||
},
|
||||
match_highlight: {
|
||||
color: "$editor.syntax.keyword.color",
|
||||
weight: "$editor.syntax.keyword.weight",
|
||||
},
|
||||
selected_item: {
|
||||
background: "$state.selected",
|
||||
extends: "$editor.autocomplete.item",
|
||||
},
|
||||
},
|
||||
diagnostic_header: {
|
||||
background: "$editor.background",
|
||||
icon_width_factor: 1.5,
|
||||
text_scale_factor: 0.857,
|
||||
border: {
|
||||
bottom: true,
|
||||
color: "$border.secondary",
|
||||
top: true,
|
||||
width: 1,
|
||||
},
|
||||
code: {
|
||||
extends: "$text.muted",
|
||||
size: 14,
|
||||
margin: {
|
||||
left: 10,
|
||||
},
|
||||
},
|
||||
message: {
|
||||
highlight_text: {
|
||||
extends: "$text.primary",
|
||||
size: 14,
|
||||
weight: "bold",
|
||||
},
|
||||
text: {
|
||||
extends: "$text.secondary",
|
||||
size: 14,
|
||||
},
|
||||
},
|
||||
},
|
||||
diagnostic_path_header: {
|
||||
background: "$state.active_line",
|
||||
text_scale_factor: 0.857,
|
||||
filename: {
|
||||
extends: "$text.primary",
|
||||
size: 14,
|
||||
},
|
||||
path: {
|
||||
extends: "$text.muted",
|
||||
size: 14,
|
||||
margin: {
|
||||
left: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
error_diagnostic: {
|
||||
text_scale_factor: 0.857,
|
||||
header: {
|
||||
border: {
|
||||
color: "$border.primary",
|
||||
top: true,
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
message: {
|
||||
highlight_text: {
|
||||
color: "$status.bad",
|
||||
extends: "$text.secondary",
|
||||
size: 14,
|
||||
weight: "bold",
|
||||
},
|
||||
text: {
|
||||
color: "$status.bad",
|
||||
extends: "$text.secondary",
|
||||
size: 14,
|
||||
},
|
||||
},
|
||||
},
|
||||
hint_diagnostic: {
|
||||
extends: "$editor.error_diagnostic",
|
||||
message: {
|
||||
highlight_text: {
|
||||
color: "$status.info",
|
||||
},
|
||||
text: {
|
||||
color: "$status.info",
|
||||
},
|
||||
},
|
||||
},
|
||||
information_diagnostic: {
|
||||
extends: "$editor.error_diagnostic",
|
||||
message: {
|
||||
highlight_text: {
|
||||
color: "$status.info",
|
||||
},
|
||||
text: {
|
||||
color: "$status.info",
|
||||
},
|
||||
},
|
||||
},
|
||||
invalid_error_diagnostic: {
|
||||
extends: "$editor.error_diagnostic",
|
||||
message: {
|
||||
highlight_text: {
|
||||
color: "$text.muted.color",
|
||||
},
|
||||
text: {
|
||||
color: "$text.muted.color",
|
||||
},
|
||||
},
|
||||
},
|
||||
invalid_hint_diagnostic: {
|
||||
extends: "$editor.hint_diagnostic",
|
||||
message: {
|
||||
highlight_text: {
|
||||
color: "$text.muted.color",
|
||||
},
|
||||
text: {
|
||||
color: "$text.muted.color",
|
||||
},
|
||||
},
|
||||
},
|
||||
invalid_information_diagnostic: {
|
||||
extends: "$editor.information_diagnostic",
|
||||
message: {
|
||||
highlight_text: {
|
||||
color: "$text.muted.color",
|
||||
},
|
||||
text: {
|
||||
color: "$text.muted.color",
|
||||
},
|
||||
},
|
||||
},
|
||||
invalid_warning_diagnostic: {
|
||||
extends: "$editor.warning_diagnostic",
|
||||
message: {
|
||||
highlight_text: {
|
||||
color: "$text.muted.color",
|
||||
},
|
||||
text: {
|
||||
color: "$text.muted.color",
|
||||
},
|
||||
},
|
||||
},
|
||||
warning_diagnostic: {
|
||||
extends: "$editor.error_diagnostic",
|
||||
message: {
|
||||
highlight_text: {
|
||||
color: "$status.warn",
|
||||
},
|
||||
text: {
|
||||
color: "$status.warn",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
project_diagnostics: {
|
||||
background: backgroundColor(theme, 300),
|
||||
tab_icon_spacing: 4,
|
||||
|
|
|
|||
|
|
@ -3,10 +3,12 @@ import core from "./core";
|
|||
import { Color } from "./lib";
|
||||
import Theme, { BackgroundColor, Weight } from "./theme";
|
||||
|
||||
export type TextColor = keyof Theme["textColor"];
|
||||
|
||||
export function text(
|
||||
theme: Theme,
|
||||
fontFamily: keyof typeof core.fontFamily,
|
||||
color: keyof Theme["textColor"],
|
||||
color: TextColor,
|
||||
properties?: { size?: keyof typeof core["fontSize"]; weight?: Weight }
|
||||
) {
|
||||
const sizeKey = properties.size || fontFamily === "sans" ? "sm" : "md";
|
||||
|
|
|
|||
143
styles/editor.ts
Normal file
143
styles/editor.ts
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
import {
|
||||
backgroundColor,
|
||||
border,
|
||||
iconColor,
|
||||
player,
|
||||
text,
|
||||
TextColor,
|
||||
} from "./components";
|
||||
import Theme from "./theme";
|
||||
|
||||
export default function editor(theme: Theme) {
|
||||
const autocompleteItem = {
|
||||
cornerRadius: 6,
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 6,
|
||||
right: 6,
|
||||
top: 2,
|
||||
},
|
||||
};
|
||||
|
||||
function diagnostic(theme: Theme, color: TextColor) {
|
||||
return {
|
||||
textScaleFactor: 0.857,
|
||||
header: {
|
||||
border: border(theme, "primary", {
|
||||
top: true,
|
||||
}),
|
||||
},
|
||||
message: {
|
||||
text: {
|
||||
...text(theme, "sans", color),
|
||||
size: 14,
|
||||
},
|
||||
highlightText: {
|
||||
...text(theme, "sans", color, { weight: "bold" }),
|
||||
size: 14,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
textColor: theme.textColor.secondary.value,
|
||||
background: backgroundColor(theme, 300),
|
||||
activeLineBackground: theme.editor.line.active.value,
|
||||
codeActionsIndicator: iconColor(theme, "secondary"),
|
||||
diffBackgroundDeleted: backgroundColor(theme, "error"),
|
||||
diffBackgroundInserted: backgroundColor(theme, "ok"),
|
||||
documentHighlightReadBackground: theme.editor.highlight.occurrence.value,
|
||||
documentHighlightWriteBackground: theme.editor.highlight.occurrence.value,
|
||||
errorColor: theme.textColor.error,
|
||||
gutterBackground: backgroundColor(theme, 300),
|
||||
gutterPaddingFactor: 2.5,
|
||||
highlightedLineBackground: theme.editor.line.highlighted.value,
|
||||
lineNumber: theme.editor.gutter.primary.value,
|
||||
lineNumberActive: theme.editor.gutter.active,
|
||||
renameFade: 0.6,
|
||||
unnecessaryCodeFade: 0.5,
|
||||
selection: player(theme, 1).selection,
|
||||
guestSelections: [
|
||||
player(theme, 2).selection,
|
||||
player(theme, 3).selection,
|
||||
player(theme, 4).selection,
|
||||
player(theme, 5).selection,
|
||||
player(theme, 6).selection,
|
||||
player(theme, 7).selection,
|
||||
player(theme, 8).selection,
|
||||
],
|
||||
autocomplete: {
|
||||
background: backgroundColor(theme, 100),
|
||||
cornerRadius: 6,
|
||||
padding: 6,
|
||||
border: border(theme, "secondary"),
|
||||
item: autocompleteItem,
|
||||
hoveredItem: {
|
||||
...autocompleteItem,
|
||||
background: backgroundColor(theme, 100, "hover"),
|
||||
},
|
||||
margin: {
|
||||
left: -14,
|
||||
},
|
||||
matchHighlight: {
|
||||
color: theme.syntax.keyword.color.value,
|
||||
weight: theme.syntax.keyword.weight.value,
|
||||
},
|
||||
selectedItem: {
|
||||
...autocompleteItem,
|
||||
background: backgroundColor(theme, 100, "active"),
|
||||
},
|
||||
},
|
||||
diagnosticHeader: {
|
||||
background: theme.editor.background.value,
|
||||
iconWidthFactor: 1.5,
|
||||
textScaleFactor: 0.857,
|
||||
border: border(theme, "secondary", {
|
||||
bottom: true,
|
||||
top: true,
|
||||
}),
|
||||
code: {
|
||||
...text(theme, "mono", "muted"),
|
||||
size: 14,
|
||||
margin: {
|
||||
left: 10,
|
||||
},
|
||||
},
|
||||
message: {
|
||||
highlightText: {
|
||||
...text(theme, "sans", "primary"),
|
||||
size: 14,
|
||||
weight: "bold",
|
||||
},
|
||||
text: {
|
||||
...text(theme, "sans", "secondary"),
|
||||
size: 14,
|
||||
},
|
||||
},
|
||||
},
|
||||
diagnosticPathHeader: {
|
||||
background: theme.editor.line.active,
|
||||
textScaleFactor: 0.857,
|
||||
filename: {
|
||||
...text(theme, "mono", "primary"),
|
||||
size: 14,
|
||||
},
|
||||
path: {
|
||||
...text(theme, "mono", "muted"),
|
||||
size: 14,
|
||||
margin: {
|
||||
left: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
errorDiagnostic: diagnostic(theme, "error"),
|
||||
warningDiagnostic: diagnostic(theme, "warning"),
|
||||
informationDiagnostic: diagnostic(theme, "info"),
|
||||
hintDiagnostic: diagnostic(theme, "info"),
|
||||
invalidErrorDiagnostic: diagnostic(theme, "muted"),
|
||||
invalidHintDiagnostic: diagnostic(theme, "muted"),
|
||||
invalidInformationDiagnostic: diagnostic(theme, "muted"),
|
||||
invalidWarningDiagnostic: diagnostic(theme, "muted"),
|
||||
};
|
||||
}
|
||||
|
|
@ -52,6 +52,10 @@ export default interface Theme {
|
|||
100: BackgroundColor;
|
||||
300: BackgroundColor;
|
||||
500: BackgroundColor;
|
||||
ok: BackgroundColor;
|
||||
error: BackgroundColor;
|
||||
warning: BackgroundColor;
|
||||
info: BackgroundColor;
|
||||
};
|
||||
borderColor: {
|
||||
primary: {
|
||||
|
|
@ -134,6 +138,66 @@ export default interface Theme {
|
|||
value: Color;
|
||||
};
|
||||
};
|
||||
editor: {
|
||||
background: {
|
||||
value: Color;
|
||||
};
|
||||
indent_guide: {
|
||||
value: Color;
|
||||
};
|
||||
indent_guide_active: {
|
||||
value: Color;
|
||||
};
|
||||
line: {
|
||||
active: {
|
||||
value: Color;
|
||||
};
|
||||
highlighted: {
|
||||
value: Color;
|
||||
};
|
||||
inserted: {
|
||||
value: Color;
|
||||
};
|
||||
deleted: {
|
||||
value: Color;
|
||||
};
|
||||
modified: {
|
||||
value: Color;
|
||||
};
|
||||
};
|
||||
highlight: {
|
||||
selection: {
|
||||
value: Color;
|
||||
};
|
||||
occurrence: {
|
||||
value: Color;
|
||||
};
|
||||
activeOccurrence: {
|
||||
value: Color;
|
||||
};
|
||||
matchingBracket: {
|
||||
value: Color;
|
||||
};
|
||||
match: {
|
||||
value: Color;
|
||||
};
|
||||
activeMatch: {
|
||||
value: Color;
|
||||
};
|
||||
related: {
|
||||
value: Color;
|
||||
};
|
||||
};
|
||||
gutter: {
|
||||
primary: {
|
||||
value: Color;
|
||||
};
|
||||
active: {
|
||||
value: Color;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
syntax: {
|
||||
primary: SyntaxHighlightStyle;
|
||||
comment: SyntaxHighlightStyle;
|
||||
|
|
@ -151,6 +215,7 @@ export default interface Theme {
|
|||
boolean: SyntaxHighlightStyle;
|
||||
predictive: SyntaxHighlightStyle;
|
||||
};
|
||||
|
||||
player: {
|
||||
1: Player;
|
||||
2: Player;
|
||||
|
|
|
|||
Loading…
Reference in a new issue