Theme variables not working for integer properties

Ignition
,
1

I am trying to create 2 themes with some variables to make it easy to switch my project from 1024x768 resolution to 1080P. the variables I'm using in the project adjust things like font size, basis, etc., so I can easily just switch themes when i need my project to fit a different screen. The var(--cssVariable) format works great when I put that as the value for string properties like font size and basis, but whenever I try to use it for integer properties it gets completely ignored and sometimes throws an error.

For example, i want to be able to change the rows per page (pager.initialOption) and column widths (columns.active.activeTime.width) of my alarm status table which are both integer properties. Initial Option gets ignored and says "string found, number expected," while the time column width just gets ignored.

Other alarm status table properties like fontSize, lineHeight, etc., which are string variables work great with css variables.

image
image

Is there any way around this issue? Potentially some sort of binding that will return the actual value of the variable instead of it's name?

1 Like
2

I wouldn't expect css variables to work non-styling properties. They have absolutely no reason to try and interpret what you give them as css.
The width in your screenshot, while outside of the usual style prop, is still a styling element and it makes sense for it to accept css.
initialOption, on the other hand...

Either that, or, as you said, initialOption expects an integer. css, in my understanding, is inherently strings.

edit: Just a silly thought... you might be able to use your css variable in a dummy style property, then bind to that and cast to int. I'm not sure how I feel about that.

3

If these are session-wide properties, why not use session props instead of css variables?

1 Like
4

That’s what I was coming back to say.
The easiest solution, if you want that initial option to depend on the theme, would probably be to just… bind to the session’s theme prop.

5

Thanks. I was hoping to not have to have a bunch of extra bindings all over my project if it was possible to cleanly do it with css (it's already getting a little complicated and hard to refactor for new projects). If it's not possible though, then that's what i'll have to do.

6

What if you just use a css calc expression instead of a set of variables for all you resolutions?

Eg

clamp(4pt, calc(0.8*(1.0vmin + 1.0vmax)), 16pt)

I would strongly recommend you use style classes instead of directly referencing css variables, as variables arent selectable nor structureable. Within s style I would also recommend having a different expression for a portrait orientation using media queries

1 Like