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 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, 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 a3cd0ab6db1929e1f88c251e090f8080185833b0..74a556a3663fb39e2238d21c8b81268f08145467 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 abdd3642175453060ce96e54f56119e4e020662d..1065bdfdec2e0fdc15bb12a3b22f68b1f91c1492 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 d89b83f5d272a34efd35cd34c83d19fa916d4070..2012020b16b0d4d93a118b109aac36c29a6874c1 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 56f7c62f0bacce476ebef2fd742a5f7b84274975..987a021da945b5589f64135491cc5ff649bd5e2f 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 faac2f0572f850f3c5ad8e788b8e9e1f556a09a6..469643f64cefb388beeb597cf0b378555f5ac76b 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 3f46ccc1b0ad105e043c5b8a7b2a6b1c59de4095..2c6e834ca94dc6d27db1dfa2e87a7aaf0351b2ee 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 ecaf11eec6c295027d9824e5f92fcee0a9e1ccb0..8a8a2b740f17a518e1c892120aec434df4939f99 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 e55d13e02435a7d5ef110c859d24880f82f2c5b6..4538428fbf09cfd62830d41ad06b1f6400c5d9d8 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 8d4ec1ce1746fc90e3705ce83b8554236f7bea57..c131027f891577a792f77df54f6ab4944dd995fd 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 ad2cf516563946970df43a806444c305becd17f6..3dcf9ea6918300b2c156ca9b31be909dd67eab3e 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 0744611fce3e020196235f0422aa609b38fd7e69..07ffc59136e2652780ffb64d44768aa8ac1423d2 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 74a556a3663fb39e2238d21c8b81268f08145467..6957e6d15d987eff2b35556e4ecdf7a94b9f88ee 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 1065bdfdec2e0fdc15bb12a3b22f68b1f91c1492..bac7d1e71fad0912b5c827c9f97da80cde5d3d76 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 2012020b16b0d4d93a118b109aac36c29a6874c1..dfe95a666c499c37bf5cc75bc48b39028d8451f5 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 987a021da945b5589f64135491cc5ff649bd5e2f..8cb17fadb2ab5b49cb9396e29ae8fba09793fcbc 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 469643f64cefb388beeb597cf0b378555f5ac76b..cd1a30035431454520ad32dcb91b282b15463599 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 2c6e834ca94dc6d27db1dfa2e87a7aaf0351b2ee..b282a8ce83aad98a7a1a313f4d37ea04415772f3 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 8a8a2b740f17a518e1c892120aec434df4939f99..54af143394998d46d72b2ada07427287ef08a8e5 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 4538428fbf09cfd62830d41ad06b1f6400c5d9d8..6147c2b632f77e054d89c8f6057e71da484dd99f 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 e0c4a2003ceff00a3524000ac26a27d4766a3afb..b48dccc156149c2269ae45640cf66426cd760625 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 6957e6d15d987eff2b35556e4ecdf7a94b9f88ee..f416b92ccf455bd19c5612ddaae607f1ddfd1e1a 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 bac7d1e71fad0912b5c827c9f97da80cde5d3d76..2b86f09d1f270d0c3996081913b25db575f7197f 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 dfe95a666c499c37bf5cc75bc48b39028d8451f5..fbd61d437b0acb84f1afd3b0ee5aca59868e6db8 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 8cb17fadb2ab5b49cb9396e29ae8fba09793fcbc..0e8428c0ed188c174672d1c2e16e6fd287ef33ce 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 cd1a30035431454520ad32dcb91b282b15463599..b6257be3b8effea6ba1fb1932514430fb3fd2a47 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 b282a8ce83aad98a7a1a313f4d37ea04415772f3..701187459b5622a582ce4327dfbf47d337ec9346 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 54af143394998d46d72b2ada07427287ef08a8e5..3e5ae726e09461bfffaa4a1dfd45dc3f2746b8cb 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 6147c2b632f77e054d89c8f6057e71da484dd99f..a2084e2c2f8813404aefc16b55fdc9f66304b801 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 de9b1d88f3b7aa56a9cdeee06678d035a84b316d..068fd547366bfac4953f8d8cbac2e43d280473d2 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 }, }; }