UI / Theme improvements

Nate Butler created 3 years ago

Change summary

styles/src/styleTree/app.ts        |  2 +-
styles/src/styleTree/statusBar.ts  | 10 +++++-----
styles/src/styleTree/tooltip.ts    |  2 +-
styles/src/styleTree/workspace.ts  | 27 +++++++++++++++++----------
styles/src/themes/common/base16.ts |  8 ++++----
5 files changed, 28 insertions(+), 21 deletions(-)

Detailed changes

styles/src/styleTree/app.ts

@@ -17,7 +17,7 @@ import tooltip from "./tooltip";
 import terminal from "./terminal";
 
 export const panel = {
-  padding: { top: 12, bottom: 12 },
+  padding: { top: 12, bottom: 12 }
 };
 
 export default function app(theme: Theme): Object {

styles/src/styleTree/statusBar.ts

@@ -35,7 +35,7 @@ export default function statusBar(theme: Theme) {
       iconColor: iconColor(theme, "muted"),
       hover: {
         message: text(theme, "sans", "primary"),
-        iconColor: iconColor(theme, "primary"),
+        iconColor: iconColor(theme, "active"),
         background: backgroundColor(theme, 300, "hovered"),
       }
     },
@@ -49,7 +49,7 @@ export default function statusBar(theme: Theme) {
     },
     diagnosticSummary: {
       height: 16,
-      iconWidth: 14,
+      iconWidth: 16,
       iconSpacing: 2,
       summarySpacing: 6,
       text: text(theme, "sans", "primary", { size: "sm" }),
@@ -71,7 +71,7 @@ export default function statusBar(theme: Theme) {
         border: border(theme, "error"),
       },
       hover: {
-        iconColorOk: iconColor(theme, "primary"),
+        iconColorOk: iconColor(theme, "active"),
         containerOk: {
           cornerRadius: 6,
           padding: { top: 3, bottom: 3, left: 7, right: 7 },
@@ -94,10 +94,10 @@ export default function statusBar(theme: Theme) {
       groupRight: {},
       item: {
         ...statusContainer,
-        iconSize: 14,
+        iconSize: 16,
         iconColor: iconColor(theme, "secondary"),
         hover: {
-          iconColor: iconColor(theme, "primary"),
+          iconColor: iconColor(theme, "active"),
           background: backgroundColor(theme, 300, "hovered"),
         },
         active: {

styles/src/styleTree/tooltip.ts

@@ -14,7 +14,7 @@ export default function tooltip(theme: Theme) {
       background: backgroundColor(theme, "on500"),
       cornerRadius: 4,
       margin: { left: 6 },
-      padding: { left: 3, right: 3 },
+      padding: { left: 4, right: 4 },
       ...text(theme, "mono", "muted", { size: "xs", weight: "bold" })
     },
     maxTextWidth: 200,

styles/src/styleTree/workspace.ts

@@ -60,7 +60,7 @@ export default function workspace(theme: Theme) {
       border: {
         ...tab.border
       },
-      iconWidth: 14,
+      iconWidth: 12,
       buttonWidth: tab.height,
       hover: {
         color: iconColor(theme, "active"),
@@ -110,17 +110,24 @@ export default function workspace(theme: Theme) {
       },
       border: border(theme, "primary", { bottom: true, overlay: true }),
       signInPrompt: {
-        border: border(theme, "primary"),
+        background: backgroundColor(theme, 100),
+        border: border(theme, "secondary"),
         cornerRadius: 6,
         margin: {
           top: 1,
         },
         padding: {
-          left: 6,
-          right: 6,
+          top: 1,
+          bottom: 1,
+          left: 7,
+          right: 7,
         },
         ...text(theme, "sans", "secondary", { size: "xs" }),
-        hover: text(theme, "sans", "active", { size: "xs" }),
+        hover: {
+          ...text(theme, "sans", "active", { size: "xs" }),
+          background: backgroundColor(theme, "on300", "hovered"),
+          border: border(theme, "primary"),
+        }
       },
       offlineIcon: {
         color: iconColor(theme, "secondary"),
@@ -152,9 +159,9 @@ export default function workspace(theme: Theme) {
       border: border(theme, "secondary", { bottom: true }),
       itemSpacing: 8,
       navButton: {
-        color: iconColor(theme, "secondary"),
-        iconWidth: 8,
-        buttonWidth: 18,
+        color: iconColor(theme, "primary"),
+        iconWidth: 12,
+        buttonWidth: 24,
         cornerRadius: 6,
         hover: {
           color: iconColor(theme, "active"),
@@ -164,7 +171,7 @@ export default function workspace(theme: Theme) {
           color: withOpacity(iconColor(theme, "muted"), 0.6),
         },
       },
-      padding: { left: 16, right: 8, top: 4, bottom: 4 },
+      padding: { left: 8, right: 8, top: 4, bottom: 4 },
     },
     breadcrumbs: {
       ...text(theme, "mono", "secondary"),
@@ -183,7 +190,7 @@ export default function workspace(theme: Theme) {
       shadow: modalShadow(theme),
     },
     notifications: {
-      width: 380,
+      width: 400,
       margin: { right: 10, bottom: 10 },
     }
   };

styles/src/themes/common/base16.ts

@@ -62,13 +62,13 @@ export function createTheme(
     },
     on300: {
       base: sample(ramps.neutral, 0),
-      hovered: sample(ramps.neutral, 0.25),
-      active: sample(ramps.neutral, 0.5),
+      hovered: sample(ramps.neutral, 0.5),
+      active: sample(ramps.neutral, 1),
     },
     on500: {
-      base: sample(ramps.neutral, 1.25),
+      base: sample(ramps.neutral, 1),
       hovered: sample(ramps.neutral, 1.5),
-      active: sample(ramps.neutral, 1.75),
+      active: sample(ramps.neutral, 2),
     },
     ok: {
       base: withOpacity(sample(ramps.green, 0.5), 0.15),