Use CSS Variable instead of Python Script

[andrew.budaiev]

@Eugene49

Is there an advantage favoring the use of expression?

I'll link this post FYI, very useful read

Building for Performance

In this example, #3 is the most performant, though it could be argued that the performance gain in this instance would be negligible. Anytime you add an additional processing step you add latency. In general for the best performance I follow these guidelines: If you can achieve what you want with a binding, use a binding. Always use the binding type that is the most direct. (e.g. if all you need is a binding to a property use a property binding, not an expression binding.) Given the choice b…

[pascal.fragnoud]

@Eugene49

What I did, I created 4 global variables in python, and pass those variables to background of each flex? To remain consistent project wide.
What is wrong with this?

What's wrong with this is that it's much more complicated than using the built-in mechanisms, and it involves things that have nothing to do with it - in this case, you're involving python for something that only concern the front-end, adding more layers of complexity into the processing of something that should be quite trivial.

To figure out the proper course of actions, answer those questions:

1. are those colors fixed, or can they change ?
2. are they used somewhere else ? And by that I mean that if one of those colors changes, it needs to change in other places as well.

[Eugene49]

Gentlemen,
Noted on the use of expression.
And noted on use of styles for Aesthetic purpose.

But using styles, I will need to get used to memorizing hex code. For instance neon green #265F400 where I use it on different components, like values and highlights.

• this was the main reason why I used python variable and binding, example background = theme.neonGreen

• Another one: On the components style dropdown, I wish they can be collapse/hidden into folders, and not show all at once.

My bad on parameter=null when opening the view on designer. To my surprise it was a case of race conditions. This was answered on the 2nd post (use expression structure).

[lrose]

@Eugene49

But using styles, I will need to get used to memorizing hex code. For instance neon green #265F400 where I use it on different components, like values and highlights.

No, you won't.

You can create a CSS Variable, and then set the colors like this:

var(--NeonGreen)

There are already pre-defined colors in the provided themes that come stock with the Perspective module, such as var(--callToAction)

You can even use rgba(255,0,0,1) or hsl(0,100%,50%) if you must.

Create style classes and then just by applying the styles your components get assigned the colors you want for that type of component or function. No need to input colors with the creation of every component. And if you need to update a color the change can be made from a single convenient place.

[Eugene49]

@lrose

You can create a CSS Variable, and then set the colors like this:

Does this involves creating/editing .css file on the installation folder?

[lrose]

It doesn't have to, no. In older versions you would have to create your own theme files to accomplish this, now you should be able to use the Stylesheet resource.

[Eugene49]

Just saw this, in the manual under Style Classes.
I will play with this.

Thanks.

[nminchin]

@lrose

var(--callToAction)

Note, you should only reference these with var if you use them inside of perspective styles. Outside of these though, just use the variable name --green-neon

However, I would still suggest using Perspective styles over direct colour references, since css variables aren't selectable from a dropdown, so aren't all that dev friendly. Use the css variable names in your p styles.

[Eugene49]

i was hoping you would reply with your fancy screenshot.

Edit: was referring to transistor.

[Eugene49]

Is this how you would write a global css variable in perpective?

if i create a global css variable, would I able to call that variable under component style properties, example backgroundColor: neonGreen. ?

[lrose]

You can reference it with var(), but as Nick mentioned, the recommended way is to reference it in a Style class, then select that class in the classes drop-down. This avoids the pesky red highlight telling you that it doesn’t match the expected pattern.

[Eugene49]

This really helped big Time....

Thank you guys.

You need to reopen project or saved or reopen the view though, before the extended stylesheet to kick in.
It's one or the other.

It was a bit quirky when I did it, sometimes it work, and then it stopped.
Hope this finally stays.

[nminchin]

@lrose

This avoids the pesky red highlight telling you that it doesn’t match the expected pattern

It only does this if you use var to reference it. Without var, there's no warning, as in @Eugene49 's screenshot

[Eugene49]

Really headache to switch from styles to view, back and forth.
Hope we can dock style separately, like on scripting.

Is there a way to open styles and view at the same time?

[nminchin]

@Eugene49

Hope we can dock style separately, like on scriptin

Wait, there's a way to undock scripting from the project browser so you can have scripting and gui open at the same time?? I can't say I've tried to do this, but it would be great!

[PGriffith]

Right click the tab strip heading and there's an option to 'Float' the frame.

IMO, platform level features like scripting and named queries used everywhere should just automatically float, instead of opening a separate workspace at all. It's relatively high on my list of designer UX improvements.

[nminchin]

@PGriffith

Right click the tab strip heading and there's an option to 'Float' the frame.

This only floats the Project Browser panel though (and only for the selected workspace [Scripting/Perspective/Vision/etc] apparently)

@PGriffith

platform level features like scripting and named queries used everywhere should just automatically float, instead of opening a separate workspace at all

This sounds great; it's a bit of a pain when you're constantly going between Perspective / Scripting / Named Queries and the entire workspace changes. It would be far better if this was all seamless, and as you say, if you could have them both open at the same time that would be amazing.

I actually open 2 designers if i'm using both scripting and Perspective for this simple reason

[pascal.fragnoud]

Most of my scripts are in another project anyway... So I have the 2 designers opened pretty much at all time.