Allow style overrides for inlay_hints.css (#2232)

* Move inlay hint CSS to separate file * Add paragraph in docs * Addendum * reorder sections I just reordered the sections from: ``` ... ... ... ... ``` to: ``` ... ... ... ... ``` I think the Keyboard shortcuts are more important than the styling of hover and inlay hints. --------- Co-authored-by: Предраг Николић <idmpepe@gmail.com>
sublimelsp · Apr 9, 2023 · 121c592 · 121c592
1 parent a3641dd
commit 121c592
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 25 deletions.
diff --git a/docs/src/customization.md b/docs/src/customization.md
@@ -1,18 +1,3 @@
-## Hover popups
-
-LSP uses [mdpopups](https://github.com/facelessuser/sublime-markdown-popups) to display the popup.
-You can override its style by creating a `Packages/User/mdpopups.css` file.
-In particular, to get the same font in the popup as your `"font_face"` setting in `Packages/User/Preferences.sublime-settings`, add
-
-```css
-html {
-    --mdpopups-font-mono: "your desired font face";
-}
-```
-
-to `Packages/User/mdpopups.css`.
-See the [mdpopups documentation](http://facelessuser.github.io/sublime-markdown-popups/) for more details.
-
 ## Keyboard shortcuts (key bindings)
 
 LSP's key bindings can be edited from the `Preferences: LSP Key Bindings` command in the Command Palette. Many of the default key bindings (visible in the left view) are disabled to avoid conflicts with default or user key bindings. To enable those, copy them to your user key bindings on the right, un-comment, and pick the key shortcut of your choice. Check also the overview of available [Keyboard Shortcuts](keyboard_shortcuts.md).
@@ -66,6 +51,28 @@ Here is an example mouse binding that triggers LSP's "go to symbol definition" c
 ]
 ```
 
+## Hover popups
+
+LSP uses [mdpopups](https://github.com/facelessuser/sublime-markdown-popups) to display the popup.
+You can override its style by creating a `Packages/User/mdpopups.css` file.
+In particular, to get the same font in the popup as your `"font_face"` setting in `Packages/User/Preferences.sublime-settings`, add
+
+```css
+html {
+    --mdpopups-font-mono: "your desired font face";
+}
+```
+
+to `Packages/User/mdpopups.css`.
+See the [mdpopups documentation](http://facelessuser.github.io/sublime-markdown-popups/) for more details.
+
+## Inlay Hints
+
+The style for inlay hints is defined in a [`inlay_hints.css`](https://github.com/sublimelsp/LSP/blob/main/inlay_hints.css) file in the root directory of the LSP package.
+If you would like to adjust the inlay hints style, you can create an [override](https://www.sublimetext.com/docs/packages.html#overriding-files-from-a-zipped-package) for this file (a restart of Sublime Text is required to apply the changes).
+But be aware that by doing this, you might miss out future changes in this file, in case of updates in a new release of the LSP package.
+So consider to use a package like [OverrideAudit](https://packagecontrol.io/packages/OverrideAudit) in order to get a notification when that happens.
+
 ## Color scheme customizations
 
 Some features use TextMate scopes to control the colors (underline, background or text color) of styled regions in a document or popup.

diff --git a/inlay_hints.css b/inlay_hints.css
@@ -0,0 +1,12 @@
+.inlay-hint {
+    color: color(var(--foreground) alpha(0.6));
+    background-color: color(var(--foreground) alpha(0.08));
+    border-radius: 4px;
+    padding: 0.05em 4px;
+    font-size: 0.9em;
+}
+
+.inlay-hint a {
+    color: color(var(--foreground) alpha(0.6));
+    text-decoration: none;
+}
diff --git a/plugin/core/css.py b/plugin/core/css.py
@@ -10,6 +10,7 @@ def __init__(self) -> None:
         self.notification_classname = "notification"
         self.sheets = sublime.load_resource("Packages/LSP/sheets.css")
         self.sheets_classname = "lsp_sheet"
+        self.inlay_hints = sublime.load_resource("Packages/LSP/inlay_hints.css")
 
 
 _css = None  # type: Optional[CSS]

diff --git a/plugin/inlay_hint.py b/plugin/inlay_hint.py
@@ -1,3 +1,4 @@
+from .core.css import css
 from .core.protocol import InlayHint
 from .core.protocol import InlayHintLabelPart
 from .core.protocol import MarkupContent
@@ -102,25 +103,17 @@ def get_inlay_hint_html(view: sublime.View, inlay_hint: InlayHint, session: Sess
     <body id="lsp-inlay-hint">
         <style>
             .inlay-hint {{
-                color: color(var(--foreground) alpha(0.6));
-                background-color: color(var(--foreground) alpha(0.08));
-                border-radius: 4px;
-                padding: 0.05em 4px;
-                font-size: 0.9em;
                 font-family: {font};
             }}
-
-            .inlay-hint a {{
-                color: color(var(--foreground) alpha(0.6));
-                text-decoration: none;
-            }}
+            {css}
         </style>
         <div class="inlay-hint">
             {label}
         </div>
     </body>
     """.format(
         font=font,
+        css=css().inlay_hints,
         label=label
     )
     return html