mirror of
https://github.com/rojo-rbx/rojo.git
synced 2026-10-21 20:21:38 +00:00
3107b1b21b
Upgrades to Roact master and introduces dynamic theme switching. We branch on the theme name in order to try to use Rojo's brand colors instead of Studio's. I kind of winged it with these colors and we might want to choose slightly nicer dark theme colors in the future. I also took the opportunity to reorganize the color naming scheme since it didn't really work for dark theme.
64 lines
No EOL
1.4 KiB
Lua
64 lines
No EOL
1.4 KiB
Lua
local Rojo = script:FindFirstAncestor("Rojo")
|
|
local Plugin = Rojo.Plugin
|
|
|
|
local Roact = require(Rojo.Roact)
|
|
|
|
local Assets = require(Plugin.Assets)
|
|
local Theme = require(Plugin.Components.Theme)
|
|
local FitList = require(Plugin.Components.FitList)
|
|
local FitText = require(Plugin.Components.FitText)
|
|
|
|
local e = Roact.createElement
|
|
|
|
local RoundBox = Assets.Slices.RoundBox
|
|
|
|
local function FormButton(props)
|
|
local text = props.text
|
|
local layoutOrder = props.layoutOrder
|
|
local onClick = props.onClick
|
|
|
|
local textColor
|
|
local backgroundColor
|
|
|
|
return Theme.with(function(theme)
|
|
if props.secondary then
|
|
textColor = theme.Brand1
|
|
backgroundColor = theme.Background2
|
|
else
|
|
textColor = theme.TextOnAccent
|
|
backgroundColor = theme.Brand1
|
|
end
|
|
|
|
return e(FitList, {
|
|
containerKind = "ImageButton",
|
|
containerProps = {
|
|
LayoutOrder = layoutOrder,
|
|
BackgroundTransparency = 1,
|
|
Image = RoundBox.asset,
|
|
ImageRectOffset = RoundBox.offset,
|
|
ImageRectSize = RoundBox.size,
|
|
SliceCenter = RoundBox.center,
|
|
ScaleType = Enum.ScaleType.Slice,
|
|
ImageColor3 = backgroundColor,
|
|
|
|
[Roact.Event.Activated] = function()
|
|
if onClick ~= nil then
|
|
onClick()
|
|
end
|
|
end,
|
|
},
|
|
}, {
|
|
Text = e(FitText, {
|
|
Kind = "TextLabel",
|
|
Text = text,
|
|
TextSize = 18,
|
|
TextColor3 = textColor,
|
|
Font = theme.ButtonFont,
|
|
Padding = Vector2.new(16, 8),
|
|
BackgroundTransparency = 1,
|
|
}),
|
|
})
|
|
end)
|
|
end
|
|
|
|
return FormButton |