From a352f8bad4337cc3899423c4d1e749e787459644 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 29 Apr 2022 00:59:08 -0400 Subject: [PATCH] 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 f243732819f7584651733b74d61aa10be805ffcb..a3cd0ab6db1929e1f88c251e090f8080185833b0 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 ff44dab6b11c881add133e84fa8f0e16bf2970ae..abdd3642175453060ce96e54f56119e4e020662d 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 88357f42673ff02939efc363c2d1ffcdd05ae974..d89b83f5d272a34efd35cd34c83d19fa916d4070 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 aa4f87ca9ed8bd83072b252da8a251edd3b98e3a..56f7c62f0bacce476ebef2fd742a5f7b84274975 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 665f0a51d24cd2ecf5bbb08fc6556d8baaf423bd..faac2f0572f850f3c5ad8e788b8e9e1f556a09a6 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 df96c8f1900cd68f7a53c21bde44c31ce1d1209a..3f46ccc1b0ad105e043c5b8a7b2a6b1c59de4095 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 07c1967f05a03647994ae6372ca5358140dd01e4..ecaf11eec6c295027d9824e5f92fcee0a9e1ccb0 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 1879c5de9d8d5fdedec7ab4f2c96d5a34849bb69..e55d13e02435a7d5ef110c859d24880f82f2c5b6 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 0000000000000000000000000000000000000000..621b77639ea5f7a89f78d3756811fff7d41b6101 --- /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 fda75d87ae87e98025afc2d1ad01ef50a52cd340..8d4ec1ce1746fc90e3705ce83b8554236f7bea57 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,