Merge pull request #1078 from zed-industries/lsp-hover

LSP Hover Information

styles/src/styleTree/chatPanel.ts

@@ -4,9 +4,10 @@ import {
   backgroundColor,
   border,
   player,
-  shadow,
+  modalShadow,
   text,
-  TextColor
+  TextColor,
+  popoverShadow
 } from "./components";
 
 export default function chatPanel(theme: Theme) {
@@ -69,7 +70,7 @@ export default function chatPanel(theme: Theme) {
         cornerRadius: 6,
         padding: 4,
         border: border(theme, "primary"),
-        shadow: shadow(theme),
+        shadow: popoverShadow(theme),
       },
     },
     signInPrompt: text(theme, "sans", "secondary", { underline: true }),

styles/src/styleTree/components.ts

@@ -1,4 +1,5 @@
 import chroma from "chroma-js";
+import { isIPv4 } from "net";
 import Theme, { BackgroundColorSet } from "../themes/common/theme";
 import { fontFamilies, fontSizes, FontWeight } from "../tokens";
 import { Color } from "../utils/color";
@@ -84,10 +85,18 @@ export function backgroundColor(
   return theme.backgroundColor[name][state || "base"].value;
 }
 
-export function shadow(theme: Theme) {
+export function modalShadow(theme: Theme) {
   return {
     blur: 16,
-    color: chroma("black").alpha(theme.shadowAlpha.value).hex(),
+    color: theme.shadow.value,
     offset: [0, 2],
   };
 }
+
+export function popoverShadow(theme: Theme) {
+  return {
+    blur: 4,
+    color: theme.shadow.value,
+    offset: [1, 2],
+  };
+}

styles/src/styleTree/contextMenu.ts

@@ -1,12 +1,12 @@
 import Theme from "../themes/common/theme";
-import { backgroundColor, border, borderColor, shadow, text } from "./components";
+import { backgroundColor, border, borderColor, popoverShadow, text } from "./components";
 
 export default function contextMenu(theme: Theme) {
   return {
     background: backgroundColor(theme, 300, "base"),
     cornerRadius: 6,
     padding: 6,
-    shadow: shadow(theme),
+    shadow: popoverShadow(theme),
     border: border(theme, "primary"),
     item: {
       padding: { left: 4, right: 4, top: 2, bottom: 2 },

styles/src/styleTree/editor.ts

@@ -4,9 +4,11 @@ import {
   border,
   iconColor,
   player,
+  popoverShadow,
   text,
   TextColor
 } from "./components";
+import hoverPopover from "./hoverPopover";
 
 export default function editor(theme: Theme) {
   const autocompleteItem = {
@@ -80,6 +82,7 @@ export default function editor(theme: Theme) {
       cornerRadius: 8,
       padding: 4,
       border: border(theme, "secondary"),
+      shadow: popoverShadow(theme),
       item: autocompleteItem,
       hoveredItem: {
         ...autocompleteItem,
@@ -143,6 +146,7 @@ export default function editor(theme: Theme) {
     invalidHintDiagnostic: diagnostic(theme, "muted"),
     invalidInformationDiagnostic: diagnostic(theme, "muted"),
     invalidWarningDiagnostic: diagnostic(theme, "muted"),
+    hover_popover: hoverPopover(theme),
     syntax,
   };
 }

styles/src/styleTree/hoverPopover.ts

@@ -0,0 +1,27 @@
+import Theme from "../themes/common/theme";
+import { backgroundColor, border, popoverShadow, text } from "./components";
+
+export default function HoverPopover(theme: Theme) {
+  return {
+    container: {
+      background: backgroundColor(theme, "on500"),
+      cornerRadius: 8,
+      padding: {
+        left: 8,
+        right: 8,
+        top: 4,
+        bottom: 4
+      },
+      shadow: popoverShadow(theme),
+      border: border(theme, "primary"),
+      margin: {
+        left: -8,
+      },
+    },
+    block_style: {
+      padding: { top: 4 },
+    },
+    prose: text(theme, "sans", "primary", { "size": "sm" }),
+    highlight: theme.editor.highlight.occurrence.value,
+  }
+}

styles/src/styleTree/picker.ts

@@ -1,5 +1,5 @@
 import Theme from "../themes/common/theme";
-import { backgroundColor, border, player, shadow, text } from "./components";
+import { backgroundColor, border, player, modalShadow, text } from "./components";
 
 export default function picker(theme: Theme) {
   return {
@@ -48,6 +48,6 @@ export default function picker(theme: Theme) {
         top: 7,
       },
     },
-    shadow: shadow(theme),
+    shadow: modalShadow(theme),
   };
 }

styles/src/styleTree/tooltip.ts

@@ -1,5 +1,5 @@
 import Theme from "../themes/common/theme";
-import { backgroundColor, border, shadow, text } from "./components";
+import { backgroundColor, border, popoverShadow, text } from "./components";
 
 export default function tooltip(theme: Theme) {
   return {
@@ -7,7 +7,7 @@ export default function tooltip(theme: Theme) {
     border: border(theme, "secondary"),
     padding: { top: 4, bottom: 4, left: 8, right: 8 },
     margin: { top: 6, left: 6 },
-    shadow: shadow(theme),
+    shadow: popoverShadow(theme),
     cornerRadius: 6,
     text: text(theme, "sans", "secondary", { size: "xs", weight: "bold" }),
     keystroke: {

styles/src/styleTree/workspace.ts

@@ -1,6 +1,6 @@
 import Theme from "../themes/common/theme";
 import { withOpacity } from "../utils/color";
-import { backgroundColor, border, iconColor, shadow, text } from "./components";
+import { backgroundColor, border, iconColor, modalShadow, text } from "./components";
 import statusBar from "./statusBar";
 
 export function workspaceBackground(theme: Theme) {
@@ -164,7 +164,7 @@ export default function workspace(theme: Theme) {
       cornerRadius: 6,
       padding: 12,
       border: border(theme, "primary"),
-      shadow: shadow(theme),
+      shadow: modalShadow(theme),
     },
     notifications: {
       width: 380,