From a352f8bad4337cc3899423c4d1e749e787459644 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 29 Apr 2022 00:59:08 -0400 Subject: [PATCH 1/6] Update status bar style --- assets/themes/cave-dark.json | 32 +++++--- assets/themes/cave-light.json | 32 +++++--- assets/themes/dark.json | 32 +++++--- assets/themes/light.json | 32 +++++--- assets/themes/solarized-dark.json | 32 +++++--- assets/themes/solarized-light.json | 32 +++++--- assets/themes/sulphurpool-dark.json | 32 +++++--- assets/themes/sulphurpool-light.json | 32 +++++--- styles/src/styleTree/statusBar.ts | 106 +++++++++++++++++++++++++++ styles/src/styleTree/workspace.ts | 99 +------------------------ 10 files changed, 293 insertions(+), 168 deletions(-) create mode 100644 styles/src/styleTree/statusBar.ts diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index f243732819..a3cd0ab6db 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -192,14 +192,16 @@ "size": 14 }, "lsp_status": { - "icon_spacing": 4, - "icon_width": 14, - "height": 18, "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, + "icon_spacing": 4, + "icon_width": 14, + "height": 18, "message": { "family": "Zed Sans", "color": "#8b8792", @@ -242,13 +244,17 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 } }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -261,6 +267,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -275,14 +283,18 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 }, "background": "#58526052" }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -295,6 +307,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -310,14 +324,14 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 14, + "corner_radius": 6, "padding": { "top": 3, "bottom": 3, "left": 6, "right": 6 }, - "corner_radius": 6, + "icon_size": 14, "icon_color": "#8b8792", "hover": { "icon_color": "#e2dfe7", diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index ff44dab6b1..abdd364217 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -192,14 +192,16 @@ "size": 14 }, "lsp_status": { - "icon_spacing": 4, - "icon_width": 14, - "height": 18, "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, + "icon_spacing": 4, + "icon_width": 14, + "height": 18, "message": { "family": "Zed Sans", "color": "#585260", @@ -242,13 +244,17 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 } }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -261,6 +267,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -275,14 +283,18 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 }, "background": "#8b87921f" }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -295,6 +307,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -310,14 +324,14 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 14, + "corner_radius": 6, "padding": { "top": 3, "bottom": 3, "left": 6, "right": 6 }, - "corner_radius": 6, + "icon_size": 14, "icon_color": "#585260", "hover": { "icon_color": "#26232a", diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 88357f4267..d89b83f5d2 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -192,14 +192,16 @@ "size": 14 }, "lsp_status": { - "icon_spacing": 4, - "icon_width": 14, - "height": 18, "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, + "icon_spacing": 4, + "icon_width": 14, + "height": 18, "message": { "family": "Zed Sans", "color": "#808080", @@ -242,13 +244,17 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 } }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -261,6 +267,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -275,14 +283,18 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 }, "background": "#232323" }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -295,6 +307,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -310,14 +324,14 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 14, + "corner_radius": 6, "padding": { "top": 3, "bottom": 3, "left": 6, "right": 6 }, - "corner_radius": 6, + "icon_size": 14, "icon_color": "#9c9c9c", "hover": { "icon_color": "#c6c6c6", diff --git a/assets/themes/light.json b/assets/themes/light.json index aa4f87ca9e..56f7c62f0b 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -192,14 +192,16 @@ "size": 14 }, "lsp_status": { - "icon_spacing": 4, - "icon_width": 14, - "height": 18, "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, + "icon_spacing": 4, + "icon_width": 14, + "height": 18, "message": { "family": "Zed Sans", "color": "#636363", @@ -242,13 +244,17 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 } }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -261,6 +267,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -275,14 +283,18 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 }, "background": "#eaeaea" }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -295,6 +307,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -310,14 +324,14 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 14, + "corner_radius": 6, "padding": { "top": 3, "bottom": 3, "left": 6, "right": 6 }, - "corner_radius": 6, + "icon_size": 14, "icon_color": "#717171", "hover": { "icon_color": "#393939", diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index 665f0a51d2..faac2f0572 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -192,14 +192,16 @@ "size": 14 }, "lsp_status": { - "icon_spacing": 4, - "icon_width": 14, - "height": 18, "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, + "icon_spacing": 4, + "icon_width": 14, + "height": 18, "message": { "family": "Zed Sans", "color": "#93a1a1", @@ -242,13 +244,17 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 } }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -261,6 +267,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -275,14 +283,18 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 }, "background": "#586e7552" }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -295,6 +307,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -310,14 +324,14 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 14, + "corner_radius": 6, "padding": { "top": 3, "bottom": 3, "left": 6, "right": 6 }, - "corner_radius": 6, + "icon_size": 14, "icon_color": "#93a1a1", "hover": { "icon_color": "#eee8d5", diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index df96c8f190..3f46ccc1b0 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -192,14 +192,16 @@ "size": 14 }, "lsp_status": { - "icon_spacing": 4, - "icon_width": 14, - "height": 18, "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, + "icon_spacing": 4, + "icon_width": 14, + "height": 18, "message": { "family": "Zed Sans", "color": "#586e75", @@ -242,13 +244,17 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 } }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -261,6 +267,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -275,14 +283,18 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 }, "background": "#93a1a11f" }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -295,6 +307,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -310,14 +324,14 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 14, + "corner_radius": 6, "padding": { "top": 3, "bottom": 3, "left": 6, "right": 6 }, - "corner_radius": 6, + "icon_size": 14, "icon_color": "#586e75", "hover": { "icon_color": "#073642", diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 07c1967f05..ecaf11eec6 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -192,14 +192,16 @@ "size": 14 }, "lsp_status": { - "icon_spacing": 4, - "icon_width": 14, - "height": 18, "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, + "icon_spacing": 4, + "icon_width": 14, + "height": 18, "message": { "family": "Zed Sans", "color": "#979db4", @@ -242,13 +244,17 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 } }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -261,6 +267,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -275,14 +283,18 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 }, "background": "#5e668752" }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -295,6 +307,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -310,14 +324,14 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 14, + "corner_radius": 6, "padding": { "top": 3, "bottom": 3, "left": 6, "right": 6 }, - "corner_radius": 6, + "icon_size": 14, "icon_color": "#979db4", "hover": { "icon_color": "#dfe2f1", diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 1879c5de9d..e55d13e024 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -192,14 +192,16 @@ "size": 14 }, "lsp_status": { - "icon_spacing": 4, - "icon_width": 14, - "height": 18, "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, + "icon_spacing": 4, + "icon_width": 14, + "height": 18, "message": { "family": "Zed Sans", "color": "#5e6687", @@ -242,13 +244,17 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 } }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -261,6 +267,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -275,14 +283,18 @@ "container_ok": { "corner_radius": 6, "padding": { - "left": 6, - "right": 6 + "top": 3, + "bottom": 3, + "left": 7, + "right": 7 }, "background": "#979db41f" }, "container_warning": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -295,6 +307,8 @@ "container_error": { "corner_radius": 6, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -310,14 +324,14 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 14, + "corner_radius": 6, "padding": { "top": 3, "bottom": 3, "left": 6, "right": 6 }, - "corner_radius": 6, + "icon_size": 14, "icon_color": "#5e6687", "hover": { "icon_color": "#293256", diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts new file mode 100644 index 0000000000..621b77639e --- /dev/null +++ b/styles/src/styleTree/statusBar.ts @@ -0,0 +1,106 @@ +import Theme from "../themes/theme"; +import { backgroundColor, border, iconColor, text } from "./components"; + +export default function statusBar(theme: Theme) { + + const statusContainer = { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 6, right: 6 } + } + + const diagnosticStatusContainer = { + cornerRadius: 6, + padding: { top: 1, bottom: 1, left: 6, right: 6 } + } + + return { + height: 30, + itemSpacing: 8, + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, + }, + border: border(theme, "primary", { top: true, overlay: true }), + cursorPosition: text(theme, "sans", "muted"), + autoUpdateProgressMessage: text(theme, "sans", "muted"), + autoUpdateDoneMessage: text(theme, "sans", "muted"), + lspStatus: { + ...diagnosticStatusContainer, + iconSpacing: 4, + iconWidth: 14, + height: 18, + message: text(theme, "sans", "muted"), + iconColor: iconColor(theme, "muted"), + hover: { + message: text(theme, "sans", "primary"), + iconColor: iconColor(theme, "primary"), + background: backgroundColor(theme, 300, "hovered"), + } + }, + diagnosticMessage: { + ...text(theme, "sans", "muted"), + hover: text(theme, "sans", "secondary"), + }, + diagnosticSummary: { + height: 16, + iconWidth: 14, + iconSpacing: 2, + summarySpacing: 6, + text: text(theme, "sans", "primary", { size: "sm" }), + iconColorOk: iconColor(theme, "secondary"), + iconColorWarning: iconColor(theme, "warning"), + iconColorError: iconColor(theme, "error"), + containerOk: { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 7, right: 7 }, + }, + containerWarning: { + ...diagnosticStatusContainer, + background: backgroundColor(theme, "warning"), + border: border(theme, "warning"), + }, + containerError: { + ...diagnosticStatusContainer, + background: backgroundColor(theme, "error"), + border: border(theme, "error"), + }, + hover: { + iconColorOk: iconColor(theme, "primary"), + containerOk: { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 7, right: 7 }, + background: backgroundColor(theme, 300, "hovered"), + }, + containerWarning: { + ...diagnosticStatusContainer, + background: backgroundColor(theme, "warning", "hovered"), + border: border(theme, "warning"), + }, + containerError: { + ...diagnosticStatusContainer, + background: backgroundColor(theme, "error", "hovered"), + border: border(theme, "error"), + } + }, + }, + sidebarButtons: { + groupLeft: {}, + groupRight: {}, + item: { + ...statusContainer, + iconSize: 14, + iconColor: iconColor(theme, "secondary"), + hover: { + iconColor: iconColor(theme, "primary"), + background: backgroundColor(theme, 300, "hovered"), + }, + active: { + iconColor: iconColor(theme, "active"), + background: backgroundColor(theme, 300, "active"), + } + } + } + } +} diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index fda75d87ae..8d4ec1ce17 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -1,7 +1,9 @@ import Theme from "../themes/theme"; import { backgroundColor, border, iconColor, text } from "./components"; +import statusBar from "./statusBar"; export default function workspace(theme: Theme) { + const tab = { height: 32, background: backgroundColor(theme, 300), @@ -56,102 +58,7 @@ export default function workspace(theme: Theme) { color: border(theme, "secondary").color, width: 1, }, - statusBar: { - height: 30, - itemSpacing: 8, - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, - }, - border: border(theme, "primary", { top: true, overlay: true }), - cursorPosition: text(theme, "sans", "muted"), - autoUpdateProgressMessage: text(theme, "sans", "muted"), - autoUpdateDoneMessage: text(theme, "sans", "muted"), - lspStatus: { - iconSpacing: 4, - iconWidth: 14, - height: 18, - cornerRadius: 6, - padding: { left: 6, right: 6 }, - message: text(theme, "sans", "muted"), - iconColor: iconColor(theme, "muted"), - hover: { - message: text(theme, "sans", "primary"), - iconColor: iconColor(theme, "primary"), - background: backgroundColor(theme, 300, "hovered"), - } - }, - diagnosticMessage: { - ...text(theme, "sans", "muted"), - hover: text(theme, "sans", "secondary"), - }, - diagnosticSummary: { - height: 16, - iconWidth: 14, - iconSpacing: 2, - summarySpacing: 6, - text: text(theme, "sans", "primary", { size: "sm" }), - iconColorOk: iconColor(theme, "secondary"), - iconColorWarning: iconColor(theme, "warning"), - iconColorError: iconColor(theme, "error"), - containerOk: { - cornerRadius: 6, - padding: { left: 6, right: 6 }, - }, - containerWarning: { - cornerRadius: 6, - padding: { left: 6, right: 6 }, - background: backgroundColor(theme, "warning"), - border: border(theme, "warning"), - }, - containerError: { - cornerRadius: 6, - padding: { left: 6, right: 6 }, - background: backgroundColor(theme, "error"), - border: border(theme, "error"), - }, - hover: { - iconColorOk: iconColor(theme, "primary"), - containerOk: { - cornerRadius: 6, - padding: { left: 6, right: 6 }, - background: backgroundColor(theme, 300, "hovered"), - }, - containerWarning: { - cornerRadius: 6, - padding: { left: 6, right: 6 }, - background: backgroundColor(theme, "warning", "hovered"), - border: border(theme, "warning"), - }, - containerError: { - cornerRadius: 6, - padding: { left: 6, right: 6 }, - background: backgroundColor(theme, "error", "hovered"), - border: border(theme, "error"), - } - }, - }, - sidebarButtons: { - groupLeft: {}, - groupRight: {}, - item: { - iconSize: 14, - padding: { top: 3, bottom: 3, left: 6, right: 6 }, - cornerRadius: 6, - iconColor: iconColor(theme, "secondary"), - hover: { - iconColor: iconColor(theme, "primary"), - background: backgroundColor(theme, 300, "hovered"), - }, - active: { - iconColor: iconColor(theme, "active"), - background: backgroundColor(theme, 300, "active"), - } - }, - }, - }, + statusBar: statusBar(theme), titlebar: { avatarWidth: 18, height: 32, From 70a7bd27471d80925b4292467a94538c0706f509 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 29 Apr 2022 01:06:44 -0400 Subject: [PATCH 2/6] Style out of date message --- assets/themes/cave-dark.json | 17 ++++++++++++++--- assets/themes/cave-light.json | 17 ++++++++++++++--- assets/themes/dark.json | 17 ++++++++++++++--- assets/themes/light.json | 17 ++++++++++++++--- assets/themes/solarized-dark.json | 17 ++++++++++++++--- assets/themes/solarized-light.json | 17 ++++++++++++++--- assets/themes/sulphurpool-dark.json | 17 ++++++++++++++--- assets/themes/sulphurpool-light.json | 17 ++++++++++++++--- styles/src/styleTree/workspace.ts | 14 ++++++++++---- 9 files changed, 122 insertions(+), 28 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index a3cd0ab6db..74a556a366 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -346,7 +346,7 @@ }, "titlebar": { "avatar_width": 18, - "height": 32, + "height": 33, "background": "#26232a", "padding": { "left": 80 @@ -370,7 +370,8 @@ "border": { "color": "#19171c", "width": 1, - "bottom": true + "bottom": true, + "overlay": true }, "sign_in_prompt": { "border": { @@ -425,7 +426,17 @@ "outdated_warning": { "family": "Zed Sans", "color": "#a06e3b", - "size": 13, + "size": 12, + "background": "#a06e3b26", + "border": { + "color": "#a06e3b26", + "width": 1 + }, + "padding": { + "left": 6, + "right": 6 + }, + "corner_radius": 6, "margin": { "right": 6 } diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index abdd364217..1065bdfdec 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -346,7 +346,7 @@ }, "titlebar": { "avatar_width": 18, - "height": 32, + "height": 33, "background": "#e2dfe7", "padding": { "left": 80 @@ -370,7 +370,8 @@ "border": { "color": "#efecf4", "width": 1, - "bottom": true + "bottom": true, + "overlay": true }, "sign_in_prompt": { "border": { @@ -425,7 +426,17 @@ "outdated_warning": { "family": "Zed Sans", "color": "#a06e3b", - "size": 13, + "size": 12, + "background": "#a06e3b26", + "border": { + "color": "#a06e3b26", + "width": 1 + }, + "padding": { + "left": 6, + "right": 6 + }, + "corner_radius": 6, "margin": { "right": 6 } diff --git a/assets/themes/dark.json b/assets/themes/dark.json index d89b83f5d2..2012020b16 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -346,7 +346,7 @@ }, "titlebar": { "avatar_width": 18, - "height": 32, + "height": 33, "background": "#2b2b2b", "padding": { "left": 80 @@ -370,7 +370,8 @@ "border": { "color": "#070707", "width": 1, - "bottom": true + "bottom": true, + "overlay": true }, "sign_in_prompt": { "border": { @@ -425,7 +426,17 @@ "outdated_warning": { "family": "Zed Sans", "color": "#f7bb57", - "size": 13, + "size": 12, + "background": "#f6a72426", + "border": { + "color": "#f6a72426", + "width": 1 + }, + "padding": { + "left": 6, + "right": 6 + }, + "corner_radius": 6, "margin": { "right": 6 } diff --git a/assets/themes/light.json b/assets/themes/light.json index 56f7c62f0b..987a021da9 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -346,7 +346,7 @@ }, "titlebar": { "avatar_width": 18, - "height": 32, + "height": 33, "background": "#eaeaea", "padding": { "left": 80 @@ -370,7 +370,8 @@ "border": { "color": "#d5d5d5", "width": 1, - "bottom": true + "bottom": true, + "overlay": true }, "sign_in_prompt": { "border": { @@ -425,7 +426,17 @@ "outdated_warning": { "family": "Zed Sans", "color": "#d3a20b", - "size": 13, + "size": 12, + "background": "#f6a72426", + "border": { + "color": "#f6a72426", + "width": 1 + }, + "padding": { + "left": 6, + "right": 6 + }, + "corner_radius": 6, "margin": { "right": 6 } diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index faac2f0572..469643f64c 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -346,7 +346,7 @@ }, "titlebar": { "avatar_width": 18, - "height": 32, + "height": 33, "background": "#073642", "padding": { "left": 80 @@ -370,7 +370,8 @@ "border": { "color": "#002b36", "width": 1, - "bottom": true + "bottom": true, + "overlay": true }, "sign_in_prompt": { "border": { @@ -425,7 +426,17 @@ "outdated_warning": { "family": "Zed Sans", "color": "#b58900", - "size": 13, + "size": 12, + "background": "#b5890026", + "border": { + "color": "#b5890026", + "width": 1 + }, + "padding": { + "left": 6, + "right": 6 + }, + "corner_radius": 6, "margin": { "right": 6 } diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 3f46ccc1b0..2c6e834ca9 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -346,7 +346,7 @@ }, "titlebar": { "avatar_width": 18, - "height": 32, + "height": 33, "background": "#eee8d5", "padding": { "left": 80 @@ -370,7 +370,8 @@ "border": { "color": "#fdf6e3", "width": 1, - "bottom": true + "bottom": true, + "overlay": true }, "sign_in_prompt": { "border": { @@ -425,7 +426,17 @@ "outdated_warning": { "family": "Zed Sans", "color": "#b58900", - "size": 13, + "size": 12, + "background": "#b5890026", + "border": { + "color": "#b5890026", + "width": 1 + }, + "padding": { + "left": 6, + "right": 6 + }, + "corner_radius": 6, "margin": { "right": 6 } diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index ecaf11eec6..8a8a2b740f 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -346,7 +346,7 @@ }, "titlebar": { "avatar_width": 18, - "height": 32, + "height": 33, "background": "#293256", "padding": { "left": 80 @@ -370,7 +370,8 @@ "border": { "color": "#202746", "width": 1, - "bottom": true + "bottom": true, + "overlay": true }, "sign_in_prompt": { "border": { @@ -425,7 +426,17 @@ "outdated_warning": { "family": "Zed Sans", "color": "#c08b30", - "size": 13, + "size": 12, + "background": "#c08b3026", + "border": { + "color": "#c08b3026", + "width": 1 + }, + "padding": { + "left": 6, + "right": 6 + }, + "corner_radius": 6, "margin": { "right": 6 } diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index e55d13e024..4538428fbf 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -346,7 +346,7 @@ }, "titlebar": { "avatar_width": 18, - "height": 32, + "height": 33, "background": "#dfe2f1", "padding": { "left": 80 @@ -370,7 +370,8 @@ "border": { "color": "#f5f7ff", "width": 1, - "bottom": true + "bottom": true, + "overlay": true }, "sign_in_prompt": { "border": { @@ -425,7 +426,17 @@ "outdated_warning": { "family": "Zed Sans", "color": "#c08b30", - "size": 13, + "size": 12, + "background": "#c08b3026", + "border": { + "color": "#c08b3026", + "width": 1 + }, + "padding": { + "left": 6, + "right": 6 + }, + "corner_radius": 6, "margin": { "right": 6 } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 8d4ec1ce17..c131027f89 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -61,7 +61,7 @@ export default function workspace(theme: Theme) { statusBar: statusBar(theme), titlebar: { avatarWidth: 18, - height: 32, + height: 33, background: backgroundColor(theme, 100), padding: { left: 80, @@ -80,7 +80,7 @@ export default function workspace(theme: Theme) { // TODO: The background for this ideally should be // set with a token, not hardcoded in rust }, - border: border(theme, "primary", { bottom: true }), + border: border(theme, "primary", { bottom: true, overlay: true }), signInPrompt: { border: border(theme, "primary"), cornerRadius: 6, @@ -120,8 +120,14 @@ export default function workspace(theme: Theme) { } }, outdatedWarning: { - ...text(theme, "sans", "warning"), - size: 13, + ...text(theme, "sans", "warning", { size: "xs" }), + background: backgroundColor(theme, "warning"), + border: border(theme, "warning"), + padding: { + left: 6, + right: 6, + }, + cornerRadius: 6, margin: { right: 6 } }, }, From 945d7c52a068457dd780aae18cadf7863d3fd59e Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 29 Apr 2022 01:23:52 -0400 Subject: [PATCH 3/6] Remove unused import --- styles/src/themes/dark.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/src/themes/dark.ts b/styles/src/themes/dark.ts index ad2cf51656..3dcf9ea691 100644 --- a/styles/src/themes/dark.ts +++ b/styles/src/themes/dark.ts @@ -1,4 +1,4 @@ -import { color, colors, fontWeights, NumberToken } from "../tokens"; +import { colors, fontWeights, NumberToken } from "../tokens"; import { withOpacity } from "../utils/color"; import Theme, { buildPlayer, Syntax } from "./theme"; From 098ad7dbfa38cf742fe27a6a7a49f97445218f39 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 29 Apr 2022 01:24:11 -0400 Subject: [PATCH 4/6] Update base16 themes background states --- styles/src/themes/base16.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/styles/src/themes/base16.ts b/styles/src/themes/base16.ts index 0744611fce..07ffc59136 100644 --- a/styles/src/themes/base16.ts +++ b/styles/src/themes/base16.ts @@ -24,31 +24,31 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[ base: neutral[1], hovered: withOpacity(neutral[2], blend), active: withOpacity(neutral[2], blend * 1.5), - focused: neutral[2], + focused: withOpacity(neutral[2], blend), }, 300: { base: neutral[1], hovered: withOpacity(neutral[2], blend), active: withOpacity(neutral[2], blend * 1.5), - focused: neutral[2], + focused: withOpacity(neutral[2], blend), }, 500: { base: neutral[0], - hovered: neutral[1], - active: neutral[1], - focused: neutral[1], + hovered: withOpacity(neutral[1], blend), + active: withOpacity(neutral[1], blend * 1.5), + focused: withOpacity(neutral[1], blend), }, on300: { base: neutral[0], - hovered: neutral[1], - active: neutral[1], - focused: neutral[1], + hovered: withOpacity(neutral[1], blend), + active: withOpacity(neutral[1], blend * 2), + focused: withOpacity(neutral[1], blend), }, on500: { base: neutral[1], - hovered: neutral[3], - active: neutral[3], - focused: neutral[3], + hovered: withOpacity(neutral[2], blend), + active: withOpacity(neutral[2], blend * 2), + focused: withOpacity(neutral[2], blend), }, ok: { base: withOpacity(accent.green, 0.15), From 67181a16c0fdf912b575ca41a892b90a0a1e7955 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 29 Apr 2022 01:24:21 -0400 Subject: [PATCH 5/6] Update search style --- assets/themes/cave-dark.json | 29 ++++++++++++++-------------- assets/themes/cave-light.json | 29 ++++++++++++++-------------- assets/themes/dark.json | 21 ++++++++++---------- assets/themes/light.json | 21 ++++++++++---------- assets/themes/solarized-dark.json | 29 ++++++++++++++-------------- assets/themes/solarized-light.json | 29 ++++++++++++++-------------- assets/themes/sulphurpool-dark.json | 29 ++++++++++++++-------------- assets/themes/sulphurpool-light.json | 29 ++++++++++++++-------------- styles/src/styleTree/search.ts | 21 ++++++++++---------- 9 files changed, 115 insertions(+), 122 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index 74a556a366..6957e6d15d 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -549,7 +549,7 @@ "right": 6, "top": 2 }, - "background": "#26232a" + "background": "#26232a52" }, "margin": { "left": -14 @@ -567,7 +567,7 @@ "right": 6, "top": 2 }, - "background": "#26232a" + "background": "#26232a7a" } }, "diagnostic_header": { @@ -1334,26 +1334,25 @@ "color": "#8b8792", "size": 14, "background": "#26232a", - "corner_radius": 4, + "corner_radius": 6, "border": { "color": "#26232a", "width": 1 }, "margin": { - "left": 2, - "right": 2 + "right": 4 }, "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "bottom": 2, + "left": 10, + "right": 10, + "top": 2 }, "active": { "family": "Zed Mono", "color": "#efecf4", "size": 14, - "background": "#655f6d", + "background": "#585260a3", "border": { "color": "#655f6d", "width": 1 @@ -1363,7 +1362,7 @@ "family": "Zed Mono", "color": "#efecf4", "size": 14, - "background": "#655f6d", + "background": "#58526052", "border": { "color": "#655f6d", "width": 1 @@ -1394,7 +1393,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1427,7 +1426,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1444,8 +1443,8 @@ }, "option_button_group": { "padding": { - "left": 4, - "right": 4 + "left": 12, + "right": 12 } }, "results_status": { diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index 1065bdfdec..bac7d1e71f 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -549,7 +549,7 @@ "right": 6, "top": 2 }, - "background": "#e2dfe7" + "background": "#e2dfe71f" }, "margin": { "left": -14 @@ -567,7 +567,7 @@ "right": 6, "top": 2 }, - "background": "#e2dfe7" + "background": "#e2dfe72e" } }, "diagnostic_header": { @@ -1334,26 +1334,25 @@ "color": "#585260", "size": 14, "background": "#e2dfe7", - "corner_radius": 4, + "corner_radius": 6, "border": { "color": "#e2dfe7", "width": 1 }, "margin": { - "left": 2, - "right": 2 + "right": 4 }, "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "bottom": 2, + "left": 10, + "right": 10, + "top": 2 }, "active": { "family": "Zed Mono", "color": "#19171c", "size": 14, - "background": "#7e7887", + "background": "#8b87923d", "border": { "color": "#7e7887", "width": 1 @@ -1363,7 +1362,7 @@ "family": "Zed Mono", "color": "#19171c", "size": 14, - "background": "#7e7887", + "background": "#8b87921f", "border": { "color": "#7e7887", "width": 1 @@ -1394,7 +1393,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1427,7 +1426,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1444,8 +1443,8 @@ }, "option_button_group": { "padding": { - "left": 4, - "right": 4 + "left": 12, + "right": 12 } }, "results_status": { diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 2012020b16..dfe95a666c 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -1334,20 +1334,19 @@ "color": "#9c9c9c", "size": 14, "background": "#0e0e0e", - "corner_radius": 4, + "corner_radius": 6, "border": { "color": "#232323", "width": 1 }, "margin": { - "left": 2, - "right": 2 + "right": 4 }, "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "bottom": 2, + "left": 10, + "right": 10, + "top": 2 }, "active": { "family": "Zed Mono", @@ -1394,7 +1393,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1427,7 +1426,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1444,8 +1443,8 @@ }, "option_button_group": { "padding": { - "left": 4, - "right": 4 + "left": 12, + "right": 12 } }, "results_status": { diff --git a/assets/themes/light.json b/assets/themes/light.json index 987a021da9..8cb17fadb2 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -1334,20 +1334,19 @@ "color": "#474747", "size": 14, "background": "#f1f1f1", - "corner_radius": 4, + "corner_radius": 6, "border": { "color": "#d5d5d5", "width": 1 }, "margin": { - "left": 2, - "right": 2 + "right": 4 }, "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "bottom": 2, + "left": 10, + "right": 10, + "top": 2 }, "active": { "family": "Zed Mono", @@ -1394,7 +1393,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1427,7 +1426,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1444,8 +1443,8 @@ }, "option_button_group": { "padding": { - "left": 4, - "right": 4 + "left": 12, + "right": 12 } }, "results_status": { diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index 469643f64c..cd1a300354 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -549,7 +549,7 @@ "right": 6, "top": 2 }, - "background": "#073642" + "background": "#07364252" }, "margin": { "left": -14 @@ -567,7 +567,7 @@ "right": 6, "top": 2 }, - "background": "#073642" + "background": "#0736427a" } }, "diagnostic_header": { @@ -1334,26 +1334,25 @@ "color": "#93a1a1", "size": 14, "background": "#073642", - "corner_radius": 4, + "corner_radius": 6, "border": { "color": "#073642", "width": 1 }, "margin": { - "left": 2, - "right": 2 + "right": 4 }, "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "bottom": 2, + "left": 10, + "right": 10, + "top": 2 }, "active": { "family": "Zed Mono", "color": "#fdf6e3", "size": 14, - "background": "#657b83", + "background": "#586e75a3", "border": { "color": "#657b83", "width": 1 @@ -1363,7 +1362,7 @@ "family": "Zed Mono", "color": "#fdf6e3", "size": 14, - "background": "#657b83", + "background": "#586e7552", "border": { "color": "#657b83", "width": 1 @@ -1394,7 +1393,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1427,7 +1426,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1444,8 +1443,8 @@ }, "option_button_group": { "padding": { - "left": 4, - "right": 4 + "left": 12, + "right": 12 } }, "results_status": { diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 2c6e834ca9..b282a8ce83 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -549,7 +549,7 @@ "right": 6, "top": 2 }, - "background": "#eee8d5" + "background": "#eee8d51f" }, "margin": { "left": -14 @@ -567,7 +567,7 @@ "right": 6, "top": 2 }, - "background": "#eee8d5" + "background": "#eee8d52e" } }, "diagnostic_header": { @@ -1334,26 +1334,25 @@ "color": "#586e75", "size": 14, "background": "#eee8d5", - "corner_radius": 4, + "corner_radius": 6, "border": { "color": "#eee8d5", "width": 1 }, "margin": { - "left": 2, - "right": 2 + "right": 4 }, "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "bottom": 2, + "left": 10, + "right": 10, + "top": 2 }, "active": { "family": "Zed Mono", "color": "#002b36", "size": 14, - "background": "#839496", + "background": "#93a1a13d", "border": { "color": "#839496", "width": 1 @@ -1363,7 +1362,7 @@ "family": "Zed Mono", "color": "#002b36", "size": 14, - "background": "#839496", + "background": "#93a1a11f", "border": { "color": "#839496", "width": 1 @@ -1394,7 +1393,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1427,7 +1426,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1444,8 +1443,8 @@ }, "option_button_group": { "padding": { - "left": 4, - "right": 4 + "left": 12, + "right": 12 } }, "results_status": { diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 8a8a2b740f..54af143394 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -549,7 +549,7 @@ "right": 6, "top": 2 }, - "background": "#293256" + "background": "#29325652" }, "margin": { "left": -14 @@ -567,7 +567,7 @@ "right": 6, "top": 2 }, - "background": "#293256" + "background": "#2932567a" } }, "diagnostic_header": { @@ -1334,26 +1334,25 @@ "color": "#979db4", "size": 14, "background": "#293256", - "corner_radius": 4, + "corner_radius": 6, "border": { "color": "#293256", "width": 1 }, "margin": { - "left": 2, - "right": 2 + "right": 4 }, "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "bottom": 2, + "left": 10, + "right": 10, + "top": 2 }, "active": { "family": "Zed Mono", "color": "#f5f7ff", "size": 14, - "background": "#6b7394", + "background": "#5e6687a3", "border": { "color": "#6b7394", "width": 1 @@ -1363,7 +1362,7 @@ "family": "Zed Mono", "color": "#f5f7ff", "size": 14, - "background": "#6b7394", + "background": "#5e668752", "border": { "color": "#6b7394", "width": 1 @@ -1394,7 +1393,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1427,7 +1426,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1444,8 +1443,8 @@ }, "option_button_group": { "padding": { - "left": 4, - "right": 4 + "left": 12, + "right": 12 } }, "results_status": { diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 4538428fbf..6147c2b632 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -549,7 +549,7 @@ "right": 6, "top": 2 }, - "background": "#dfe2f1" + "background": "#dfe2f11f" }, "margin": { "left": -14 @@ -567,7 +567,7 @@ "right": 6, "top": 2 }, - "background": "#dfe2f1" + "background": "#dfe2f12e" } }, "diagnostic_header": { @@ -1334,26 +1334,25 @@ "color": "#5e6687", "size": 14, "background": "#dfe2f1", - "corner_radius": 4, + "corner_radius": 6, "border": { "color": "#dfe2f1", "width": 1 }, "margin": { - "left": 2, - "right": 2 + "right": 4 }, "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "bottom": 2, + "left": 10, + "right": 10, + "top": 2 }, "active": { "family": "Zed Mono", "color": "#202746", "size": 14, - "background": "#898ea4", + "background": "#979db43d", "border": { "color": "#898ea4", "width": 1 @@ -1363,7 +1362,7 @@ "family": "Zed Mono", "color": "#202746", "size": 14, - "background": "#898ea4", + "background": "#979db41f", "border": { "color": "#898ea4", "width": 1 @@ -1394,7 +1393,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1427,7 +1426,7 @@ "width": 1 }, "margin": { - "right": 6 + "right": 12 }, "padding": { "top": 3, @@ -1444,8 +1443,8 @@ }, "option_button_group": { "padding": { - "left": 4, - "right": 4 + "left": 12, + "right": 12 } }, "results_status": { diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index e0c4a2003c..b48dccc156 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -2,6 +2,8 @@ import Theme from "../themes/theme"; import { backgroundColor, border, player, text } from "./components"; export default function search(theme: Theme) { + + // Search input const editor = { background: backgroundColor(theme, 500), cornerRadius: 8, @@ -12,7 +14,7 @@ export default function search(theme: Theme) { text: text(theme, "mono", "active"), border: border(theme, "secondary"), margin: { - right: 6, + right: 12, }, padding: { top: 3, @@ -29,17 +31,16 @@ export default function search(theme: Theme) { optionButton: { ...text(theme, "mono", "secondary"), background: backgroundColor(theme, "on500"), - cornerRadius: 4, + cornerRadius: 6, border: border(theme, "secondary"), margin: { - left: 2, - right: 2, + right: 4, }, padding: { - bottom: 3, - left: 8, - right: 8, - top: 3, + bottom: 2, + left: 10, + right: 10, + top: 2, }, active: { ...text(theme, "mono", "active"), @@ -63,8 +64,8 @@ export default function search(theme: Theme) { }, optionButtonGroup: { padding: { - left: 4, - right: 4, + left: 12, + right: 12, }, }, resultsStatus: { From f4dbe4d9761ed62ecb8f7f1c69a6ef2ccdeb02b1 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 29 Apr 2022 01:35:58 -0400 Subject: [PATCH 6/6] Update projectBrowser styles --- assets/themes/cave-dark.json | 16 +++++++++------- assets/themes/cave-light.json | 16 +++++++++------- assets/themes/dark.json | 18 ++++++++++-------- assets/themes/light.json | 18 ++++++++++-------- assets/themes/solarized-dark.json | 16 +++++++++------- assets/themes/solarized-light.json | 16 +++++++++------- assets/themes/sulphurpool-dark.json | 16 +++++++++------- assets/themes/sulphurpool-light.json | 16 +++++++++------- styles/src/styleTree/projectPanel.ts | 13 +++++-------- 9 files changed, 79 insertions(+), 66 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index 6957e6d15d..f416b92ccf 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -933,11 +933,13 @@ }, "project_panel": { "padding": { + "left": 12, + "right": 12, "top": 6, - "left": 12 + "bottom": 6 }, "entry": { - "height": 22, + "height": 24, "icon_color": "#8b8792", "icon_size": 8, "icon_spacing": 8, @@ -948,19 +950,19 @@ } }, "hovered_entry": { - "height": 22, + "height": 24, "background": "#58526052", "icon_color": "#8b8792", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#8b8792", + "color": "#e2dfe7", "size": 14 } }, "selected_entry": { - "height": 22, + "height": 24, "icon_color": "#8b8792", "icon_size": 8, "icon_spacing": 8, @@ -971,14 +973,14 @@ } }, "hovered_selected_entry": { - "height": 22, + "height": 24, "background": "#58526052", "icon_color": "#8b8792", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#e2dfe7", + "color": "#efecf4", "size": 14 } } diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index bac7d1e71f..2b86f09d1f 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -933,11 +933,13 @@ }, "project_panel": { "padding": { + "left": 12, + "right": 12, "top": 6, - "left": 12 + "bottom": 6 }, "entry": { - "height": 22, + "height": 24, "icon_color": "#585260", "icon_size": 8, "icon_spacing": 8, @@ -948,19 +950,19 @@ } }, "hovered_entry": { - "height": 22, + "height": 24, "background": "#8b87921f", "icon_color": "#585260", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#585260", + "color": "#26232a", "size": 14 } }, "selected_entry": { - "height": 22, + "height": 24, "icon_color": "#585260", "icon_size": 8, "icon_spacing": 8, @@ -971,14 +973,14 @@ } }, "hovered_selected_entry": { - "height": 22, + "height": 24, "background": "#8b87921f", "icon_color": "#585260", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#26232a", + "color": "#19171c", "size": 14 } } diff --git a/assets/themes/dark.json b/assets/themes/dark.json index dfe95a666c..fbd61d437b 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -933,34 +933,36 @@ }, "project_panel": { "padding": { + "left": 12, + "right": 12, "top": 6, - "left": 12 + "bottom": 6 }, "entry": { - "height": 22, + "height": 24, "icon_color": "#555555", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#9c9c9c", + "color": "#808080", "size": 14 } }, "hovered_entry": { - "height": 22, + "height": 24, "background": "#232323", "icon_color": "#555555", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#9c9c9c", + "color": "#f1f1f1", "size": 14 } }, "selected_entry": { - "height": 22, + "height": 24, "icon_color": "#555555", "icon_size": 8, "icon_spacing": 8, @@ -971,14 +973,14 @@ } }, "hovered_selected_entry": { - "height": 22, + "height": 24, "background": "#232323", "icon_color": "#555555", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#f1f1f1", + "color": "#ffffff", "size": 14 } } diff --git a/assets/themes/light.json b/assets/themes/light.json index 8cb17fadb2..0e8428c0ed 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -933,34 +933,36 @@ }, "project_panel": { "padding": { + "left": 12, + "right": 12, "top": 6, - "left": 12 + "bottom": 6 }, "entry": { - "height": 22, + "height": 24, "icon_color": "#9c9c9c", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#474747", + "color": "#636363", "size": 14 } }, "hovered_entry": { - "height": 22, + "height": 24, "background": "#eaeaea", "icon_color": "#9c9c9c", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#474747", + "color": "#2b2b2b", "size": 14 } }, "selected_entry": { - "height": 22, + "height": 24, "icon_color": "#9c9c9c", "icon_size": 8, "icon_spacing": 8, @@ -971,14 +973,14 @@ } }, "hovered_selected_entry": { - "height": 22, + "height": 24, "background": "#eaeaea", "icon_color": "#9c9c9c", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#2b2b2b", + "color": "#000000", "size": 14 } } diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index cd1a300354..b6257be3b8 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -933,11 +933,13 @@ }, "project_panel": { "padding": { + "left": 12, + "right": 12, "top": 6, - "left": 12 + "bottom": 6 }, "entry": { - "height": 22, + "height": 24, "icon_color": "#93a1a1", "icon_size": 8, "icon_spacing": 8, @@ -948,19 +950,19 @@ } }, "hovered_entry": { - "height": 22, + "height": 24, "background": "#586e7552", "icon_color": "#93a1a1", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#93a1a1", + "color": "#eee8d5", "size": 14 } }, "selected_entry": { - "height": 22, + "height": 24, "icon_color": "#93a1a1", "icon_size": 8, "icon_spacing": 8, @@ -971,14 +973,14 @@ } }, "hovered_selected_entry": { - "height": 22, + "height": 24, "background": "#586e7552", "icon_color": "#93a1a1", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#eee8d5", + "color": "#fdf6e3", "size": 14 } } diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index b282a8ce83..701187459b 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -933,11 +933,13 @@ }, "project_panel": { "padding": { + "left": 12, + "right": 12, "top": 6, - "left": 12 + "bottom": 6 }, "entry": { - "height": 22, + "height": 24, "icon_color": "#586e75", "icon_size": 8, "icon_spacing": 8, @@ -948,19 +950,19 @@ } }, "hovered_entry": { - "height": 22, + "height": 24, "background": "#93a1a11f", "icon_color": "#586e75", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#586e75", + "color": "#073642", "size": 14 } }, "selected_entry": { - "height": 22, + "height": 24, "icon_color": "#586e75", "icon_size": 8, "icon_spacing": 8, @@ -971,14 +973,14 @@ } }, "hovered_selected_entry": { - "height": 22, + "height": 24, "background": "#93a1a11f", "icon_color": "#586e75", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#073642", + "color": "#002b36", "size": 14 } } diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 54af143394..3e5ae726e0 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -933,11 +933,13 @@ }, "project_panel": { "padding": { + "left": 12, + "right": 12, "top": 6, - "left": 12 + "bottom": 6 }, "entry": { - "height": 22, + "height": 24, "icon_color": "#979db4", "icon_size": 8, "icon_spacing": 8, @@ -948,19 +950,19 @@ } }, "hovered_entry": { - "height": 22, + "height": 24, "background": "#5e668752", "icon_color": "#979db4", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#979db4", + "color": "#dfe2f1", "size": 14 } }, "selected_entry": { - "height": 22, + "height": 24, "icon_color": "#979db4", "icon_size": 8, "icon_spacing": 8, @@ -971,14 +973,14 @@ } }, "hovered_selected_entry": { - "height": 22, + "height": 24, "background": "#5e668752", "icon_color": "#979db4", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#dfe2f1", + "color": "#f5f7ff", "size": 14 } } diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 6147c2b632..a2084e2c2f 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -933,11 +933,13 @@ }, "project_panel": { "padding": { + "left": 12, + "right": 12, "top": 6, - "left": 12 + "bottom": 6 }, "entry": { - "height": 22, + "height": 24, "icon_color": "#5e6687", "icon_size": 8, "icon_spacing": 8, @@ -948,19 +950,19 @@ } }, "hovered_entry": { - "height": 22, + "height": 24, "background": "#979db41f", "icon_color": "#5e6687", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#5e6687", + "color": "#293256", "size": 14 } }, "selected_entry": { - "height": 22, + "height": 24, "icon_color": "#5e6687", "icon_size": 8, "icon_spacing": 8, @@ -971,14 +973,14 @@ } }, "hovered_selected_entry": { - "height": 22, + "height": 24, "background": "#979db41f", "icon_color": "#5e6687", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#293256", + "color": "#202746", "size": 14 } } diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index de9b1d88f3..068fd54736 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -6,7 +6,7 @@ import { backgroundColor, iconColor, text, TextColor } from "./components"; export default function projectPanel(theme: Theme) { function entry(theme: Theme, textColor: TextColor, background?: Color) { return { - height: 22, + height: 24, background, iconColor: iconColor(theme, "muted"), iconSize: 8, @@ -17,21 +17,18 @@ export default function projectPanel(theme: Theme) { return { ...panel, - entry: entry(theme, "secondary"), + entry: entry(theme, "muted"), hoveredEntry: entry( theme, - "secondary", + "primary", backgroundColor(theme, 300, "hovered") ), selectedEntry: entry(theme, "primary"), hoveredSelectedEntry: entry( theme, - "primary", + "active", backgroundColor(theme, 300, "hovered") ), - padding: { - top: 6, - left: 12, - }, + padding: { left: 12, right: 12, top: 6, bottom: 6 }, }; }