In Vision we could create a custom property as color type. What’s the best way to accomplish this in Perspective?
CSS uses strings for representing color values. I recommend hex because it’s easier to read, but you can supply an RGB string and get the same result. It’s important that you not try to use Java Color objects, though, so watch out for that.
"color_one": "#00FF00"
"color_two": "rgb(0,255,0)"
These should be equivalent when used as colors in Perspective.
I prefer HSL personally as you then know exactly the colour you’re l getting in terms humans can understand (we’re not very good at mixing colours in our heads). You can relatively easily learn through experience what Hue something is from 0-255: main colours are essentially 30H apart, 0=red, 30=orange, 60=yellow, 90=lime green, 120=green…, and then Saturation and Lightness are obvious. Hex and rgb are identical practically except hex requires more cognitive load
3 Likes
Except for some of us weirdos. (:
4 Likes
In Vision when using color type we could use the color picker, so it sounds like there really isn’t an option for that, the user will need to know what to do? We could also enter text, like “red”, “blue”. Is this still an option?
I’m starting to look into doing more with Perspective, and looking at “porting” over some Vision popups. I understand it’s a different approach, just trying to find the best approach.
If you want to use color names, then you can use any named color supported within CSS. I think this site supplies a pretty big list which should all work within Perspective.
BEGIN UPDATED CONTENT
As for using a color picker, the schema defines what properties expect colors, and so properties which are expected to be colors should have a color picker.
When a property is first created as a “value” property, it has no idea what it will actually be so we can’t just start providing a way to help with colors. When Perspective finds a property value which is defined in the schema as expecting a color, we treat that property a bit differently in the Designer and provide a color picker when the color square next to the property is clicked. Since custom properties are not defined in the schema, we don not provide the picker there.
END UPDATED CONTENT
If you click the blue square seen in this screenshot, you’ll be provided a color picker.
1 Like
That’s what I was hoping for, but I’m not able get it working right. Just to make sure I’m understanding…
If I create a custom property and give it a string value like, “#00FF00”, it should then recognize as a color and give me a picker? I’m not seeing this happen. Using 8.1.4.
1 Like
The same thing happens for me in 8.1.5. Not just with colors though, boolean values too. Type in True or False and it keeps it as a string. I’ve found the only way I can force them to the type I want is to create a binding on the property to another property that has the proper type and then remove the binding. It will maintain the data type after removing the binding. Numbers and strings switch back and forth, automatically, as expected. Would be nice if there was a right click option to force a property to the type you want and possibly lock it to that type.
Edit: I guess it’s not recognizing the boolean because I have it in my head to always capitalize True/False… 
Would still be nice to be able to lock in a data type for a property. Help prevent potential future errors if someone accidentally changes a property value in the designer, not throwing an error since it automatically switches type, and then throws an error in the client because of an improper type.
How you used vision client tags to hold colours and how you use colours in Perspective are two very different things.
Perspective Styles should hold most of your colour and styling config, where perspective styles should ideally take their colours from CSS variables, either from the standard igntion themes, or from your own theme. Using references to CSS variables allows you to then swap whole themes of colours out to support different colour themes such as light, dark, or high contrast. Take a look at the readme.md within the perspective theme folder (I’ll get a link tomorrow if someone doesn’t post it before then)
To reference a css variable, use:
var(--variable-name)
E.g.
var(--neutral-80)
You can use this for any property value
That's not what I'm doing in this case. It's not a global thing, it's per instance.
I thought I noticed that as well.
Even still, the colours themselves ideally should come from a Style in most cases. Of course there are always exceptions
Yeah, just realized that apparently it needs to be lowercase true or false to recognize it automatically. Must be a javascript thing since I’m used to Python being capitalized.
This would be the exception, we aren’t going to create a style for each instance.
Can I ask what the colours are for? And the instances for that matter too
I’m creating reusable components, like templates. Each instance might have a different back color, text color, etc., but may have lots of bindings that are the same throughout (which is why I would like to use a “template”). I’m just throwing around things right now, will get a better feel for it as I get more in to it.
We also use global colors, those I use styles.
Notice my spelling of color? 
Maybe, but there might be a misunderstanding in what is expected; if you specify the property value as "#00FF00" (note the inclusion of double quotes), then that is a string value which includes quotes and will therefore only be recognized as a string. You should supply the value as #00FF00 (note that you did not need to supply quotes yourself). Also, notice that the values you're supplying are not using O (oh) - they are using 0 (zero). The only characters used in hex values are A-F and 0-9.
Fair enough. The params themselves won't be able to be set to a particular type, so the name of the params will just have to suffice as an indication of what their type should be. Fwiw you could accept in entire style objects if you want to make them fully customisable.
I copied the hex value from a picker in vision. I didn’t include quotes, actually I tried both.
I copied your value and it isn’t working either.
2 Likes
Same thing for me in 8.1.5
