Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display the color of color-hex-codes, color functions #1115

Open
NNBnh opened this issue Nov 16, 2021 · 12 comments · May be fixed by #12308
Open

Display the color of color-hex-codes, color functions #1115

NNBnh opened this issue Nov 16, 2021 · 12 comments · May be fixed by #12308
Labels
A-language-server Area: Language server client C-enhancement Category: Improvements

Comments

@NNBnh
Copy link
Contributor

NNBnh commented Nov 16, 2021

Display the color of color-hex-codes and color functions is pretty helpful for writing CSS and UI design... VScode support this feature by default, while NeoVim have an acceptable plugin vim-hexokinase that do the job:

gif

I hope Helix could support for coloring:

  • 6 digit hex codes (#FFFFFF).
  • 3 digit hex codes (#FFF).
  • RGB functions (rgb(100%, 100%, 100%), rgb(255, 255, 255)).
  • RGBA functions (rgba( ... )).
  • HSL functions (hsl( ... )).
  • HSLA functions (hsla( ... )).

With styling options:

  • Background.
  • Foreground.
  • Virtual (display a small colored square on the right).
  • Sign column (a column next to the line numbers).
@NNBnh NNBnh added the C-enhancement Category: Improvements label Nov 16, 2021
@kirawi kirawi added the A-helix-term Area: Helix term improvements label Nov 16, 2021
@cole-h
Copy link
Contributor

cole-h commented Nov 17, 2021

IMHO, I feel like this is more suited to a plugin, once that's become functional, and not something that should be built-in.

@kirawi kirawi added A-plugin Area: Plugin system and removed A-helix-term Area: Helix term improvements labels Nov 19, 2021
@matoous
Copy link
Contributor

matoous commented Dec 28, 2021

So I mostly agree with @cole-h about this being suited for a plugin. On the other hand, I was very surprised to find this in LSP specs today: https://microsoft.github.io/language-server-protocol/specifications/specification-current/#textDocument_documentColor.

@VuiMuich
Copy link
Contributor

VuiMuich commented Jan 8, 2022

Despite the discussion if this should be a native option I would like to add a few wishes for config options:

  • for the virtual display and the gutter/sign column display it would be cool if there where three options: Square, Circle and Unicode with an additional variable that takes the Unicode character as a String.
  • if it is possible to control the thickness of an underline it would also be nice to have that as an option as well
  • I guess an outline option is not feasibly achievable for a terminal editor, right?

Would it possible to implement this as a tree-sitter? I have no idea if it is possible to have to tree-sitter modules running on a single file..

@the-mikedavis
Copy link
Member

the-mikedavis commented Jan 8, 2022

It should be possible to write a tree-sitter grammar for colors, and then that grammar can be injected into things like toml strings (for editing themes for example) or css values. The only thing that wouldn't work without modification I think would be choosing the colors, so you would have runtime/queries/colors/highlights.scm that would capture colors, but then you'd have to extend the query DSL to be able to highlight using the captured color token instead of consulting the theme for the capture name.

I don't think that would be an unreasonably tough change to make because there's already somewhat similar machinery for injections.scm that allows you to capture the injection language using the query DSL, as in markdown

(info_string) @injection.language

@matoous
Copy link
Contributor

matoous commented Dec 11, 2022

I gave a try to the LSP based color highlighting: https://github.com/matoous/helix/tree/md/lsp-document-colors but it doesn't play nicely with the current text highlighting as the current implmentation is heavily centered around the highlight queries and doesn't support passing in arbitrary colors. The implementation for now works as an overlay: the highlight is applied only after everything else is rendered. I still have some issues with indexing and the highlights are off but you can already try it for example on css/scss files.

@nkoehring
Copy link

@matoous Thank you for implementing this. I tried to get it to work, but I cannot see any color hints in my test CSS file. How do I activate mentioned overlay?

@matoous
Copy link
Contributor

matoous commented Mar 15, 2023

The PR is severely outdated, so I am not sure if it still works. I tried with scss files as far as I recall and it worker but there were some issues with positioning etc. Do you have appropriate LSP installed?

This might be also a question for @pascalkuthe , as far as I remember from implementing this: TextAnnotations don't support custom color per overlay so we would have to create TextAnnotation per document color which I don't think is the intended use case.

@nkoehring
Copy link

I actually made it work by changing the default in the LspConfig and recompile. I hope this finds its way into some working module. Without the offset, of course

@billksun
Copy link

billksun commented Jul 5, 2023

This will be very helpful indeed! I am trying to create a series of new themes for Helix, but have to resort to using other editors to help me preview the colors I entered.

@DoctorRyner

This comment has been minimized.

@kirawi
Copy link
Member

kirawi commented Dec 13, 2023

Can be implemented in Helix by implementing the aforementioned LSP method.

@matoous
Copy link
Contributor

matoous commented Dec 13, 2023

The only thing that bloats this a little is that all highlights at the moment use usize which is reference to a color from the theme. For displaying the color we would have to either add some custom logic or make the highlight an enum that could alternatively use any color.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-language-server Area: Language server client C-enhancement Category: Improvements
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants