facelessuser / ColorHelper

Sublime plugin that provides helpful color previews and tooltips
https://facelessuser.github.io/ColorHelper/
MIT License
254 stars 30 forks source link

Add support for hexadecimal #271

Closed h-polaris closed 2 months ago

h-polaris commented 2 months ago

Add support for hexadecimal

I'm developing with threejs. When I write the following code, colorhelper does not highlight its color.

material.color = new THREE.Color(0xffffff); // It doesn't seem to support highlighting in this format

I really like this plugin and hope you can improve it soon!

facelessuser commented 2 months ago

This is not a normal case. Not everyone would want hex to be represented as a color as hex values are used for all sorts of things that are not colors. Could it be done? Yes, through a custom color class where the sRGB color space is overridden: https://github.com/facelessuser/ColorHelper/blob/master/custom/hex_0x.py.

The linked custom color class replaces #<hex> with 0x<hex>. To have both, you'd have to create an sRGB space that has both. Then you'd have to adjust your file rule to include the normal numeric scope, whatever that is. I probably wouldn't add that as a default one as it is unlikely that many would want to confuse all hex with colors.

h-polaris commented 2 months ago

Okay, you can set an optional option that allows users to freely choose.

facelessuser commented 2 months ago

Okay, you can set an optional option that allows users to freely choose.

Choose freely between what? You haven't explicitly told me what you want. You can already define a rule that looks for numerical hex as colors. You have to setup a custom color rule to do so that overrides the default JS handler. I will never include this rule by default though.

    "user_color_rules": [
        {
            "name": "JavaScript/JSX",
            "color_class": "0xhex",
            "scanning": [
                // Covers single and double quoted strings, as well as template strings
                "meta.number.integer.hexadecimal.js"
            ]
        },
    ],

The above will only find 0xhex colors, not other traditional CSS. So you can choose traditional CSS or 0xhex colors by overriding the rule or not overriding the rule. This is a niche class that was created for those specifically working with sRGB hex codes only and were willing to deal with the false positives if using hex for anything else.

If you are wanting both normal CSS colors and these numerical colors, this would require me to alter the current custom hex color object. I would be willing to alter the object, but again, I will not enable such functionality in JS by default, it would require the user to explicitly specify a rule in their settings to use it instead of the default JS handler. Assuming I added such a color class (named oxhexall as an example), it is possible you could do the following:

{
            "name": "JavaScript/JSX",
            "color_class": "0xhexall",
            "scanning": [
                // Covers single and double quoted strings, as well as template strings
                "string.quoted",
                "meta.number.integer.hexadecimal.js"
            ]
        },

ColorHelper only allows one color class per file view, so you have to set up what you'd like in your settings. That is how you choose.

If you wanted anything else, you would likely have to copy the custom color class file, modify it yourself, and create the required rules. My interest is not to include every niche case a user might like, but to provide reasonable defaults and enable the user to add their own niche cases.

So, if the first example is sufficient for your needs, it is already available. If you would like something like oxhexall to be added, you can request it. If you want something else, you'll have to create your own custom class to manage things the way you like.