sircfenner / StudioComponents

React implementations of Roblox Studio components.
https://sircfenner.github.io/StudioComponents
MIT License
54 stars 16 forks source link

Allow consumers to set their own themes to allow StudioComponents to be used in games. #14

Closed u-train closed 5 months ago

u-train commented 2 years ago

There are two problems stopping StudioComponents from being used in games:

  1. Primarily speaking, withTheme.lua is hard coded to use Studio settings.
  2. Widget is dependent on a plugin object.

Solving two is easy: replace the widget component with a mock widget, or make it an error to use widgets. Problem two, however, requires more thought. It's easy to generate a mock to return the theme object. An important question is should the mock be its library? Another is whether light or dark modes should be used by default. Lastly, how can consumers override the theme if desired?

Wrt to the latter two:

  1. Dark theme is superior.
  2. Transition to using Roact's context. A default value can be provided for the context, rendering the current system obsolete. Consumers can use a provider to change the theme as desired.

Thoughts?

sircfenner commented 2 years ago

Sounds interesting. I would like to hear some more about use cases for this - that is, why do people want to make their games look like Roblox Studio? I don't want to sacrifice any ease of use without good reason, for example I think it is important that theming for plugin context works out of the box and doesn't require any configuration.

u-train commented 2 years ago

For me, it's easier than rolling my components to use and they look fantastic. StudioComponents works well for the utility tools I'm making. Though, I have not asked around for others' opinions.

It's wholly possible to make this a non-breaking change, so the current usage in the plugin context won't change. However, there's an important foot gun to note: Enum.StudioStyleGuideColor and Enum.StudioStyleGuideModifier does not exist in games. A mock has to be used for them as well.

A solution I envisioned would replace the current theme object being used with withTheme() with a nice interface.

withTheme(function(theme)
    theme.MainBackground() --> returns the default color for main background if called.
    theme.MainBackground.Pressed --> returns the pressed main background color.
    theme.MainBackground("Pressed") --> returns the color for when the main background is pressed.
    theme.MainBackground["Pressed"] --> Same effect.
    theme[Enum.StudioGuideStyleColor.MainBackground][Enum.StudioGuideStyleModifier.Pressed] --> Same effect.

    -- To make this a non-breaking change, GetTheme() still works. Just the same as indexing.
    theme:GetTheme("MainBackground", "Pressed")
end)

Then, through this interface, it'll be simple to add the mock.

sircfenner commented 5 months ago

Having reached v.1 I think this is out of scope for the project. Thanks again for bringing this up and for your contribution.