Question: Can we rename the Design folder or nest it in other folders? From just a quick test it seemed to still work correctly, but can we have an official confirmation?
Can this be interpreted to mean that it will come eventually, or at the minimum, your team is looking into it?
We don’t currently support dynamic operations on tokens, unfortunately.
It would be nice if there was an option to create tokens in a ui element instead of in a StyleRule/StyleSheet.
In CSS/SCSS there is a common workflow to apply a variation to a component:
button {
background-color: var(--bg);
:hover {
background-color: var(--bgHover);
}
&.primary {
--bg: var(--bgPrimary);
--bgHover: var(--bgHoverPrimary);
}
&.secondary {
--bg: var(--bgSecondary);
--bgHover: var(--bgHoverSecondary);
}
}
This does not work when attempting to do a similar thing with Roblox StyleSheets. This is because tokens are attached to the rule/sheet where they were created, not the ui elements that the selector matches:
TextButton {
-- This `$Bg` token does not have access to the `Bg` token from
-- the `.Primary` and `.Secondary` rules below. This is because
-- it only has access to attributes from the current StyleRule
-- and its ancestors.
BackgroundColor3 = $Bg;
:hover {
BackgroundColor3 = $BgHover;
}
.Primary {
$Bg = $BgPrimary;
$BgHover = $BgHoverPrimary;
}
.Secondary {
$Bg = $BgSecondary;
$BgHover = $BgHoverSecondary;
}
}
You can workaround this by assigning the BackgroundColor3 and :hover rule separately in each variation rule (.Primary and .Secondary). However this can get repetitive quick if you have a lot of variations.
My Proposed Solutions.
Solution A
My first solution proposes a new local token to be added. Local tokens would apply the attribute to the individual ui element instead of the StyleSheet/StyleRule. They would be defined with two dollar sign symbols, for example $$MyLocalToken.
This has the disadvantage of adding more complexity to the styling system. Users will now have to think about which type of token they want.
Solution B
My second solution proposes that tokens defined in StyleRule’s should be applied to the individual ui elements instead of the StyleRule. Tokens applied to StyleSheets will still be applied to the StyleSheet.
Assigning a token to ui elements instead of rules has slightly more overhead. A user may not need the added benefits of assigning a token to ui elements but with this solution they will not have the choice.
2 Likes
If GuiState is being used for pseudo-classes in StyleSheets, is there a chance this will ever be fixed?
Besides this, will we ever see a way to define transition animations between GuiStates?
EDIT: Also can we have a way of telling if a property is stylable from the API dump?
Basic Dump:
Full Dump:
1 Like
When we can expect a fix for those missing this beta feature? That hasn’t been addressed at all.
1 Like
so you also not know you just can touch the < button to open the roblox menu
is there a date when the roblox cleint will use this as i want to fully make a game with this to use the themes so there diferent themes i think for now i just use the tags it system add to do it with scripts
found an wierd bug with duplicating stylesheets to
token in duplicated stylesheet
gives error
it says invalid token as its existing
You add it as a > child class. From the … Frame menu select New > Child > Class > ImageLabel
Styling won’t add the ImageLabel for you like it does with Pseudo Instances, but if you add an ImageLabel as a child of a Frame via the ribbon, explorer or code and apply the .IsBox tag to the Frame, it will apply the rule to the ImageLabel child.
2 Likes
Saw this earlier today. I’m glad the convenience of UI-based work is finally being acknowledge by ROBLOX.
2 Likes
Any idea when this will be available to publish? I want to use it but if I cant publish with it I will hold off
1 Like
From my testing, I’m fairly sure these three flags get it enabled
{
"FFlagEngineStyling3BetaFeature": true,
"FFlagEnableStyleEditor": true,
"FFlagStyleEditorUITab2": true
}
You probably only need the first one to get the beta feature to appear. If it still doesn’t appear, try the other two flags
1 Like
for realll!!! ive wanted to add this to my game for a while now, but couldn’t find a way to make that
you can use this script where you need to add tags and tokens to tables so on the game clients it uses that to apply styles
Now that we’re on the topic of UI Updates, will we be able to expect Rich Text tags like <wave>, or <pulse>? It would be a great update, making text effects so much easier instead of having different text label instances for each character needed.
5 Likes
What version are you currently showing in the about box?
Will give this a try shortly!
I am running 0.674.0.6740785
The beta feature is now showing, but studio never displayed it was updating so I’m not sure how it’s showing now.
this will save a lot of time! however, this feature doenst allow smooth transitions (tweenservice) 
but in general, its good.
2 Likes
From a UX standpoint, it does feel a bit more demanding to continually have to keep pressing the tiny … buttons to add the rules, as right-clicking the rules themselves won’t open the same dropdown.
Dragging rules to other rules to change their hierarchy doesn’t exist, etc etc. Definitely just a consequence of it being in beta.
On a different note, I feel like this would be easier to do in a text-based form. I wonder if projects like Rojo would ever consider adding support to writing these instances in CSS form?
EDIT: To add onto this, maybe Page Up and Page Down or CTRL + UPARROW and DOWNARROW to move stuff up and down the priority level would be nice.
2 Likes
it supports transparency and unified colour if the parent frame is a canvasgroup.
not saying this shouldnt be a feature, but there are more important UI related stuff roblox should tackle first