Sidebar color display, like IntelliJ does for other languages

[wilkerlucio]

Recently I did some work back on pure javascript, and there is one feature that I really enjoy about it, that's displaying color on the gutter when the line contains some hex code, like this:

This good so I can get an idea about the colors without having to think about it, and also to click on it and edit the color. I see this feature is present on Javascript and CSS editors on IntelliJ.

Can we bring this to clojure files too?

[cursive-ide]

So would you want that feature for the same - lines containing strings that look like hex colours? Are there Clojure libs using keywords for that, for example?

[wilkerlucio]

Yes, for the lines that have a string with a color inside, IntelliJ puts the marker. It's also smart about having multiple colors on the same line, via examples:

On the multiple colors case, you can click to expand:

And clicking on the color opens the color picker to change the color:

In my case I have code like this:

(def color-map
  {:acquisition              "#A00141"
   :zendesk-twitter-dm       "#D73C4C"
   :feed                     "#F66C3A"
   :chargebacks              "#FFAE59"
   :zendesk-tickets          "#FFE185"
   :waldo                    "#FFFFBC"
   :pusher-chats             "#E6F693"
   :zendesk-facebook-message "#62C3A5"
   :big-mama                 "#2C87BF"
   :sendman                  "#5E4CA4"})

Would be great to have the same experience regarding the color gutter on those cases.

[wilkerlucio]

I wonder if you can re-use the same feature from IntelliJ, given they have it on both Javascript and CSS equally implemented.

[cursive-ide]

Currently this just works for strings in HTML hex format, like in this example. If there are other formats that it would be useful to detect, e.g. keywords that some framework uses for colours, let me know.

[wilkerlucio]

Nice! Looking forward to trying it.

[wilkerlucio]

Minor question, the hex is case insensitive? Another on the details, does it also supports the short hex format (eg: #fff, #cfc...)?

[cursive-ide]

Yes, the hex is case insensitive. When updating, it tries to maintain the case, but it can't always do that. If you start with a hex value which is all numbers it will default to lower case. It doesn't handle the short hex at the moment, would that be useful? If there are other things that would be useful, e.g. keywords representing tailwind colours or anything similar, let me know.

[wilkerlucio]

I think the whole spec on colors from CSS would be useful (hex, short hex, rgb, rgba, hsl...), but for my usages the hex (long and short) are enough for most cases. I just checked the one in Javascript from IntelliJ, that ones supports hex (long and short) and rgb, but not hsl:

[cursive-ide]

I see, but how would you use those in Clojure, just in string constants? e.g. (def x "hsl(100, 30, 255)")?

[cursive-ide]

Ok, I cribbed some code from ajalt/colormath. I'm still working on updating all these formats, but should be done soon. According to this, these are the variants that have some level of browser support:

[wilkerlucio]

omg, that looks awesome!! thanks for going the extra mile to support all css styles!! just curious, when editting the color via the color picker, it retains the used format? not a big deal for me, just curious about how that's getting handled :)

[cursive-ide]

Yes, you should be able to update all those, and it will maintain the existing format. It will make some minor changes, like changing scientific notation to standard, but that should be it. Here's the test text in case you want to try it out:

; https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#examples
(def css-colours
  ["turquoise"
   "#63A"
   "#723f59"
   "rgb(255, 0, 153)"
   "rgb(255 0 153)"
   "rgb(255, 0, 153.0)"
   "rgb(100%, 0%, 60%)"
   "#a22f"
   "#FF0099ff"
   "rgb(255, 0, 153, 1)"
   "rgb(255, 0, 153, 100%)"
   "rgb(255 0 153 / 1)"
   "rgb(100% 0% 50% / 1)"
   "rgb(100%, 0%, 50%, 1)"
   "rgb(255 0 153 / 100%)"
   "rgb(255, 0, 153.6, 1)"
   "rgb(2.55e2, 0e0, 1.53e2, 1e2%)"
   "#3a30"
   "#3A3F"
   "#33aa3300"
   "#33AA3380"
   "rgba(51, 170, 51, .1)"
   "rgba(51, 170, 51, .4)"
   "rgba(51, 170, 51, .7)"
   "rgba(51, 170, 51,  1)"
   "rgba(51 170 51 / 0.4)"
   "rgba(51 170 51 / 40%)"
   "rgba(51, 170, 51.6, 1)"
   "rgba(5.1e1, 1.7e2, 5.1e1, 1e2%)"
   "hsl(0, 0%, 49%)"
   "hsl(270, 60%, 70%)"
   "hsl(270 60% 70%)"
   "hsl(0deg, 34%, 47%)"
   "hsl(3.6134rad, 59%, 70%)"
   "hsl(.75turn, 60%, 70%)"
   "hsl(266.25, 80%, 39%, 0.4509)"
   "hsl(287.5675, 95%, 23%, 45%)"
   "hsl(257.1428, 3%, 45%, 0.4509)"
   "hsl(0, 39%, 44%, 45%)"
   "hsla(0, 100%, 50%, 0.0509)"
   "hsla(240, 100%, 50%, .4)"
   "hsla(240, 100%, 50%, .7)"
   "hsla(244, 100%, 50%, 0.3529)"
   "hsla(267.0588 100% 50% / 0.3686)"
   "hsla(240 100% 50% / 5%)"
   "hwb(94 25% 49%)"
   "hwb(90 50% 10%)"
   "hwb(90deg 10% 10%)"
   "hwb(1.5708rad 60% 0%)"
   "hwb(.25turn 0% 40%)"
   "hwb(90 10% 10% / 0.5)"
   "hwb(0 12% 47% / 25%)"])