[Studio Beta] Introducing UI Styling!

[ethamcker (ethamck)]

Is Roblox looking into expanding Enum.GuiState to include a :Focus for TextBoxes?

Why I ask

Roblox only provides Enum.GuiStates of Idle, Hover, Press, and NonInteractable as state selectors for UI Styling.

This means that styling active TextBoxes must be done either by

• using CollectionService and listening for new instances (assuming that your TextBoxes have any tags to begin with) or
• manually connecting events to each future TextBox.

For styles that need to be overwritten or set back to defaults, neither of these are viable options.

In context, I’m trying to style TextBox:Hover, :Press, and the nonexistent :Focus (named for parity with CSS; Roblox might bias “:Focused” to match :IsFocused() and .Focused) to all have TextWrapped = false, overriding my previous style on TextLabel, TextButton, TextBox for true, so that selecting a TextBox to copy its content will make it render without wrapping.

One other situation I can think of that would benefit from exactly this is text translucency when a TextBox is unselected. Here’s that:

And given this setup, you can’t directly script the desired effect, either.

script.Parent.Focused:Connect(function()
	script.Parent.TextTransparency = 0
end)
script.Parent.FocusLost:Connect(function()
	script.Parent.TextTransparency = 0.5
end)

doesn’t work because 0 is the default and overwritten by the original style. Switching the 0.5 property to exclusively :Idle still doesn’t work, because a focused TextBox has a GuiState of Idle.

Workarounds are excessive, incompatible, and inharmonious with this feature.

[Zairky]

I’m curious why StyleSheets use names but proclude attributes for customisation.

Binding stylisations to names make having multiple labels using the same rules basically unusable if I also want to call :FindFirstChild(name) or otherwise want ways to differentiate my labels for animation purposes.

Is it intended to for UIGradients to be able to look up token colors? Currently it’s impossible (I think) to say e.g. $ColorId when defining a ColorSequenceKeypoint in the sequence.

Other than that, I love this update! Truly one of the best features ever added.

[thom463s]

Not sure if this is still in beta but I just recently tried this out for my Sonic Adventure 2 Title Card recreation and it works fairly well despite my confusing start.

Screenshots

Since there wasn’t really much to change about the UI anyways, I only really had to update a few colors, switch out a few images, update rect offset for sprite sheets, etc.

[ThunderBolt5140]

@Zairky we recommend using tag (.) StyleRule selectors when you want to have multiple labels with multiple StyleRules applying to one instance.

It is not currently possible to look up color tokens in a gradient ColorSequence. We only support 1:1 mappings of tokens to property values. We have this noted as a feature request.

[ThunderBolt5140]

@thom463s this is now in Client Beta! This means that you can publish your experience with StyleSheets.

[ThunderBolt5140]

@parrrty @ZacAttackk We are looking into the issue of StyleSheets not working as descendants of a PluginGui. Can you verify if this is still not working as expected and if so, can you provide more details on how the plugin is setup with the StyleSheet and StyleLink and where they are located exactly?

I tried creating a StyleSheet and StyleLink via plugin script and parenting these under the plugin gui in PluginGuiService, which seems to work as expected.

[theburgerkingbuilder]

@BackspaceRGB We’re currently looking into the duplicate property name conflict and working on a fix, thanks for reporting it! As for the issue with the modal property, I was unable to reproduce the issue. I attempted to and was successful in adding and setting the modal property for both an ImageButton and a TextButton. Would you mind checking if its still a bug on your end?

[BackspaceRGB]

Yes, the modal property has been working correctly for some time, I dont remember since when exactly. Thank you for checking in!

[theburgerkingbuilder]

Awesome sounds good, we hope to get that fix on duplicate property names out as soon as we can!

[BackspaceRGB]

I came across another issue that I don’t know if it has been mentioned before.

There is currently seemingly no way to differentiate between default properties and edited properties, if they are the same.

IE: Setting a StyleLink to the BaseStyleSheet makes you unable to set an ImageLabel’s Image to blank, since that’s considered the default, so it displays the placeholder image instead. This is also the case for things like setting a Frame’s size to {0, 0}, {0, 0}. Probably the worst case is when you have a boolean property set to enabled in a StyleSheet, because you cannot disable it for specific elements, since false is the default value, which automatically gets set to the StyleSheet value.

[ThunderBolt5140]

@BackspaceRGB this is expected behavior, but we recommend linking the StyleLink to a different StyleSheet and creating a new StyleRule with the default property value rather than setting the property to the default value directly.

All new StyleSheets should derive the BaseStyleSheet, so StyleRules that you make in other StyleSheets should override the BaseStyleSheet StyleRule value as expected.

[OctoShotR (OctoShot)]

When packaging a StyleSheet inside the plugin script, the styling isn’t applied

StyleLinks inside the DockWidgetPluginGui work fine if linked to a StyleSheet elsewhere, eg. ReplicatedStorage

[Festivereinhard2 (Festivereinhard)]

Creating a tokensheet does not work. I press the plus button to add one and nothing happens. i think it is a bug, or am i doing something wrong?

[ThunderBolt5140]

We have enabled a fix for this! If you restart Roblox Studio, you should no longer see this error.

[theburgerkingbuilder]

Hey @BackspaceRGB the issue of duplicate property name conflicts between an Instance and its PseudoInstances should be resolved now. Let me know if you are still experiencing it!

[Askavix]

I’ve been trying to use UI Styling for the past hour, running into a few really annoying issues.

1. If I have an already existing Gui that I wish to apply a style to, I create the StyleLink and set the StyleSheet property and it does nothing to the BackgroundColor3, I have to go to each BackgroundColor3, right click and go reset.

2. For some reason.. at what seems random points. It will no longer let me right click to reset the backgroundcolor3 to default, and will act as if I am just clicking on the value. If I click to a different object, it lets me do it there but some objects just seem to be cursed…

As much as I want to like and use this feature, its a major pain right now and I’ve decided that I could just create my own system that does the functionality I want without going through this.

EDIT: 3) Unlinking token not working and then when the token menu does appear.. it slides off into the sunset

[index_self]

The property must be set to its default value (not bolded in the properties menu) for a StyleLink to affect it. Frames inserted in studio have their BackgroundColor3 and a few other properties ‘helpfully’ set to something different than their actual instance defaults, which is why yours isn’t affected.

You can reset a property to its default value by right clicking on it. Personally, I think they should add a symbol to the properties menu to better show when a property isn’t being affected by styling due to this.

Edit: Sorry, I missed the part where you were already trying to reset it. Whoops!

[Askavix]

The second issue of my post is that it will not let me reset the default values when I right click. It does on other instances no issue, but for some reason the ones in a gui with the stylelink won’t let me.

I ended up scrapping it and restarting.

[ThunderBolt5140]

This issue should now be fixed! Please let us know if you continue to have issues with Styling your plugins.

[ThunderBolt5140]

We have added the option to view/edit/create StyleSheets from plugins in PluginDebugService in the Style Editor by toggling the source of the StyleSheets that you would like to view.