zed/styles/app.ts
Nathan Sobo 8b33a58076 Express workspace in terms of new components
Co-Authored-By: Nate Butler <1714999+iamnbutler@users.noreply.github.com>
2022-04-04 12:13:59 -07:00

498 lines
12 KiB
TypeScript

import { backgroundColor } from "./components";
import selectorModal from "./selector-modal";
import workspace from "./workspace";
import Theme from "./theme";
export default function app(theme: Theme): Object {
return {
selector: selectorModal(theme),
workspace: workspace(theme),
chat_panel: {
extends: "$panel",
channel_name: {
extends: "$text.primary",
weight: "bold",
},
channel_name_hash: {
text: "$text.muted",
padding: {
right: 8,
},
},
channel_select: {
active_item: {
extends: "$chat_panel.channel_select.item",
name: "$text.primary",
},
header: {
extends: "$chat_panel.channel_select.active_item",
padding: {
bottom: 4,
left: 0,
},
},
hovered_active_item: {
extends: "$chat_panel.channel_select.hovered_item",
name: "$text.primary",
},
hovered_item: {
background: "$state.hover",
corner_radius: 6,
extends: "$chat_panel.channel_select.item",
},
item: {
name: "$text.secondary",
padding: 4,
hash: {
extends: "$text.muted",
margin: {
right: 8,
},
},
},
menu: {
background: "$surface.500",
corner_radius: 6,
padding: 4,
border: {
color: "$border.primary",
width: 1,
},
shadow: {
blur: 16,
color: "$shadow.0",
offset: [0, 2],
},
},
},
hovered_sign_in_prompt: {
color: "$text.secondary.color",
extends: "$chat_panel.sign_in_prompt",
},
input_editor: {
background: backgroundColor(theme, 300),
corner_radius: 6,
placeholder_text: "$text.muted",
selection: "$selection.host",
text: "$text.primary",
border: {
color: "$border.primary",
width: 1,
},
padding: {
bottom: 7,
left: 8,
right: 8,
top: 7,
},
},
message: {
body: "$text.secondary",
timestamp: "$text.muted",
padding: {
bottom: 6,
},
sender: {
extends: "$text.primary",
weight: "bold",
margin: {
right: 8,
},
},
},
pending_message: {
extends: "$chat_panel.message",
body: {
color: "$text.muted.color",
},
sender: {
color: "$text.muted.color",
},
timestamp: {
color: "$text.muted.color",
},
},
sign_in_prompt: {
extends: "$text.primary",
underline: true,
},
},
contacts_panel: {
extends: "$panel",
host_row_height: 28,
tree_branch_color: "$surface.100",
tree_branch_width: 1,
host_avatar: {
corner_radius: 10,
width: 18,
},
host_username: {
extends: "$text.primary",
padding: {
left: 8,
},
},
hovered_shared_project: {
background: "$state.hover",
corner_radius: 6,
extends: "$contacts_panel.shared_project",
},
hovered_unshared_project: {
background: "$state.hover",
corner_radius: 6,
extends: "$contacts_panel.unshared_project",
},
project: {
guest_avatar_spacing: 4,
height: 24,
guest_avatar: {
corner_radius: 8,
width: 14,
},
name: {
extends: "$text.secondary",
margin: {
right: 6,
},
},
padding: {
left: 8,
},
},
shared_project: {
extends: "$contacts_panel.project",
name: {
color: "$text.primary.color",
},
},
unshared_project: {
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,
tab_icon_width: 13,
tab_summary_spacing: 10,
empty_message: {
extends: "$text.primary",
size: 18,
},
status_bar_item: {
extends: "$text.muted",
margin: {
right: 10,
},
},
},
project_panel: {
extends: "$panel",
entry: {
height: 22,
icon_color: "$text.muted.color",
icon_size: 8,
icon_spacing: 8,
text: "$text.secondary",
},
hovered_entry: {
background: "$state.hover",
extends: "$project_panel.entry",
},
hovered_selected_entry: {
extends: "$project_panel.hovered_entry",
text: {
extends: "$text.primary",
},
},
padding: {
top: 6,
},
selected_entry: {
extends: "$project_panel.entry",
text: {
extends: "$text.primary",
},
},
},
search: {
background: backgroundColor(theme, 300),
match_background: "$state.highlighted_line",
tab_icon_spacing: 4,
tab_icon_width: 14,
active_hovered_option_button: {
background: "$surface.100",
extends: "$search.option_button",
},
active_option_button: {
background: "$surface.100",
extends: "$search.option_button",
},
editor: {
background: "$surface.500",
corner_radius: 6,
max_width: 400,
placeholder_text: "$text.muted",
selection: "$selection.host",
text: "$text.primary",
border: {
color: "$border.primary",
width: 1,
},
margin: {
bottom: 5,
left: 5,
right: 5,
top: 5,
},
padding: {
bottom: 3,
left: 13,
right: 13,
top: 3,
},
},
hovered_option_button: {
background: "$surface.100",
extends: "$search.option_button",
},
invalid_editor: {
extends: "$search.editor",
border: {
color: "$status.bad",
width: 1,
},
},
match_index: {
extends: "$text.secondary",
padding: 6,
},
option_button: {
background: backgroundColor(theme, 300),
corner_radius: 6,
extends: "$text.secondary",
border: {
color: "$border.primary",
width: 1,
},
margin: {
left: 1,
right: 1,
},
padding: {
bottom: 1,
left: 6,
right: 6,
top: 1,
},
},
option_button_group: {
padding: {
left: 2,
right: 2,
},
},
results_status: {
extends: "$text.primary",
size: 18,
},
},
};
}