[OutSystems UI Style Guide Preview] Remove hard-coded values of css variables from colors, typography, spaces, borders

Forge Component
Published on 7 Mar by OutSystems R&D
10 votes
Published on 7 Mar by OutSystems R&D

First of all,

Congrats for this HUGE and fine tune work enabling us to have a ready to user live style guide. It change some culture on our company!


Here we created an application that is composed by a enterprise base theme, a enterprise template and this style guide( a clone) and if we change values of css in the theme them the Live Style Guide will show the presentation part correctly as it is based on theme, but ALL IT'D harded-code values will be wrong.

I don't know the better approach, but can think some partial solutions;

We can use getComputedStyle(documentElement).getPropertyValue('--css-variable') on each element;

Can get computed style once on preparation(i guess) and only use getPropertyValue on replace of fixed text elements;

We can create a structure on preparation do respresent color pallete, typo and soo on and populate it just after the screen renders.

This time if these few screens perform poor and show the correct values, it solves the problem until a second iteration waiting for free time;

I think that to the Live Style Guide to generate value it needs to be used for all people defining styles company broad wide.

If we can collaborate a bit more let us know!



Hi people!

Any news about our suggestion?

It would be great if we could count on this and we can make out enterprise Live Style Guide Preview more strong and a central point with values always following our enterprise theme.

If you don't plan do it now is there any diretion you could point us now?


Hello Márcio!

Thank you for the support, it's great to hear about the value this component creates for you and about the actual mindset change for developing apps.

Regarding the topic you raised, the team has had a few discussions internally for possible solutions, including the ones you shared. Right now we can't commit to a date when this will be improved, but this issue is on our radar and we'll look into it as soon as we can. This feedback was also shared by other users and we're totally aligned to improve the process and make it easier for everyone :)

My regards

Hello Dinis!

Glad to see that you are looking for this.

We will postpone change this for now and make other little fixes and see what we have customized at the beginning and make our clone more simple to stay updated with your new versions.

As we have translated almost the whole clone the comparison is more hard.

I'll review our changes and if I found something useful and you want know I can post here.

For now I just remember:

To replace the login screen with the one we move to our theme and use an optional  parameter to show the login screen even if the user is logged in;

Include flags to change the current locale as we translate it to pt-BR;

Create a section for our company screen templates;


Hello Dinis!

Can you give us some hope?

Any news about it?


Hi Márcio.

Not for the short term. We're considering several improvements for the Style Guide, including a mobile version, but no dates yet.

My regards

Thanks for your answer Dinis,

You are considering a new mobile version without solving this kind of problem. IMO, this kind of static solution overrides the larger proposal of the Live Style Guide, which is to be Live and not static.
I have already praised the initiative which is excellent, but with this static lock without responding to the theme for now it makes it almost nil.
Please consider prioritizing this even before we have the improvements you mentioned.


Hi Márcio,

I understand your point, and indeed it's supposed to be live and easy to manage.

We'll discuss this improvement and try to understand if we can have an update for it soon.

My regards