diff --git a/CHANGELOG.md b/CHANGELOG.md index 7552a0ed9..54e1cd77c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,9 @@ # Rojo Changelog ## Unreleased Changes +* Updated Theme to use Studio colors ([#838]) + +[#838]: https://github.com/rojo-rbx/rojo/pull/838 * Projects may now specify rules for syncing files as if they had a different file extension. ([#813]) This is specified via a new field on project files, `syncRules`: diff --git a/plugin/src/App/Components/Dropdown.lua b/plugin/src/App/Components/Dropdown.lua index 4b761636f..3fde88c5d 100644 --- a/plugin/src/App/Components/Dropdown.lua +++ b/plugin/src/App/Components/Dropdown.lua @@ -109,9 +109,7 @@ function Dropdown:render() }, { DropArrow = e("ImageLabel", { Image = if self.props.locked then Assets.Images.Dropdown.Locked else Assets.Images.Dropdown.Arrow, - ImageColor3 = self.openBinding:map(function(a) - return theme.Closed.IconColor:Lerp(theme.Open.IconColor, a) - end), + ImageColor3 = theme.IconColor, ImageTransparency = self.props.transparency, Size = UDim2.new(0, 18, 0, 18), diff --git a/plugin/src/App/Components/PatchVisualizer/ChangeList.lua b/plugin/src/App/Components/PatchVisualizer/ChangeList.lua index 7aac862a5..522dd95bb 100644 --- a/plugin/src/App/Components/PatchVisualizer/ChangeList.lua +++ b/plugin/src/App/Components/PatchVisualizer/ChangeList.lua @@ -54,7 +54,7 @@ function ChangeList:render() BackgroundTransparency = 1, Font = Enum.Font.GothamBold, TextSize = 14, - TextColor3 = theme.Settings.Setting.DescriptionColor, + TextColor3 = theme.TextColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = props.transparency, TextTruncate = Enum.TextTruncate.AtEnd, @@ -66,7 +66,7 @@ function ChangeList:render() BackgroundTransparency = 1, Font = Enum.Font.GothamBold, TextSize = 14, - TextColor3 = theme.Settings.Setting.DescriptionColor, + TextColor3 = theme.TextColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = props.transparency, TextTruncate = Enum.TextTruncate.AtEnd, @@ -78,7 +78,7 @@ function ChangeList:render() BackgroundTransparency = 1, Font = Enum.Font.GothamBold, TextSize = 14, - TextColor3 = theme.Settings.Setting.DescriptionColor, + TextColor3 = theme.TextColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = props.transparency, TextTruncate = Enum.TextTruncate.AtEnd, @@ -197,7 +197,7 @@ function ChangeList:render() BackgroundTransparency = 1, Font = Enum.Font.GothamMedium, TextSize = 14, - TextColor3 = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor, + TextColor3 = if isWarning then theme.Diff.Warning else theme.TextColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = props.transparency, TextTruncate = Enum.TextTruncate.AtEnd, diff --git a/plugin/src/App/Components/PatchVisualizer/DomLabel.lua b/plugin/src/App/Components/PatchVisualizer/DomLabel.lua index 8495d7121..f15931f65 100644 --- a/plugin/src/App/Components/PatchVisualizer/DomLabel.lua +++ b/plugin/src/App/Components/PatchVisualizer/DomLabel.lua @@ -205,7 +205,7 @@ function DomLabel:render() BackgroundTransparency = 1, Font = Enum.Font.GothamMedium, TextSize = 14, - TextColor3 = if props.isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor, + TextColor3 = if props.isWarning then theme.Diff.Warning else theme.TextColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = props.transparency, TextTruncate = Enum.TextTruncate.AtEnd, diff --git a/plugin/src/App/Components/PatchVisualizer/init.lua b/plugin/src/App/Components/PatchVisualizer/init.lua index aad2e63dc..59cbe09bd 100644 --- a/plugin/src/App/Components/PatchVisualizer/init.lua +++ b/plugin/src/App/Components/PatchVisualizer/init.lua @@ -98,7 +98,7 @@ function PatchVisualizer:render() Text = "No changes to sync, project is up to date.", Font = Enum.Font.GothamMedium, TextSize = 15, - TextColor3 = theme.Settings.Setting.DescriptionColor, + TextColor3 = theme.TextColor, TextWrapped = true, Size = UDim2.new(1, 0, 1, 0), BackgroundTransparency = 1, diff --git a/plugin/src/App/StatusPages/Confirming.lua b/plugin/src/App/StatusPages/Confirming.lua index 457340bd5..ca5bfba06 100644 --- a/plugin/src/App/StatusPages/Confirming.lua +++ b/plugin/src/App/StatusPages/Confirming.lua @@ -47,7 +47,7 @@ function ConfirmingPage:render() Font = Enum.Font.Gotham, LineHeight = 1.2, TextSize = 14, - TextColor3 = theme.Settings.Setting.DescriptionColor, + TextColor3 = theme.TextColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = self.props.transparency, Size = UDim2.new(1, 0, 0, 20), diff --git a/plugin/src/App/Theme.lua b/plugin/src/App/Theme.lua index d6f9622bd..2ba8fc9d8 100644 --- a/plugin/src/App/Theme.lua +++ b/plugin/src/App/Theme.lua @@ -25,249 +25,161 @@ local strict = require(script.Parent.Parent.strict) local BRAND_COLOR = Color3.fromHex("E13835") -local lightTheme = strict("LightTheme", { - BackgroundColor = Color3.fromHex("FFFFFF"), - Button = { - Solid = { - ActionFillColor = Color3.fromHex("FFFFFF"), - ActionFillTransparency = 0.8, - Enabled = { - TextColor = Color3.fromHex("FFFFFF"), - BackgroundColor = BRAND_COLOR, +local Context = Roact.createContext({}) + +local StudioProvider = Roact.Component:extend("StudioProvider") + +-- Pull the current theme from Roblox Studio and update state with it. +function StudioProvider:updateTheme() + local studioTheme = getStudio().Theme + + local theme = strict(studioTheme.Name .. "Theme", { + BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainBackground), + TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText), + Button = { + Solid = { + -- Solid uses brand theming, not Studio theming. + ActionFillColor = Color3.fromHex("FFFFFF"), + ActionFillTransparency = 0.8, + Enabled = { + TextColor = Color3.fromHex("FFFFFF"), + BackgroundColor = BRAND_COLOR, + }, + Disabled = { + TextColor = Color3.fromHex("FFFFFF"), + BackgroundColor = BRAND_COLOR, + }, }, - Disabled = { - TextColor = Color3.fromHex("FFFFFF"), - BackgroundColor = BRAND_COLOR, + Bordered = { + ActionFillColor = studioTheme:GetColor( + Enum.StudioStyleGuideColor.ButtonText, + Enum.StudioStyleGuideModifier.Selected + ), + ActionFillTransparency = 0.9, + Enabled = { + TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.ButtonText), + BorderColor = studioTheme:GetColor( + Enum.StudioStyleGuideColor.CheckedFieldBorder, + Enum.StudioStyleGuideModifier.Disabled + ), + }, + Disabled = { + TextColor = studioTheme:GetColor( + Enum.StudioStyleGuideColor.ButtonText, + Enum.StudioStyleGuideModifier.Disabled + ), + BorderColor = studioTheme:GetColor( + Enum.StudioStyleGuideColor.CheckedFieldBorder, + Enum.StudioStyleGuideModifier.Disabled + ), + }, }, }, - Bordered = { - ActionFillColor = Color3.fromHex("000000"), - ActionFillTransparency = 0.9, - Enabled = { - TextColor = Color3.fromHex("393939"), - BorderColor = Color3.fromHex("ACACAC"), + Checkbox = { + Active = { + -- Active checkboxes use brand theming, not Studio theming. + IconColor = Color3.fromHex("FFFFFF"), + BackgroundColor = BRAND_COLOR, }, - Disabled = { - TextColor = Color3.fromHex("393939"), - BorderColor = Color3.fromHex("ACACAC"), + Inactive = { + IconColor = studioTheme:GetColor( + Enum.StudioStyleGuideColor.CheckedFieldIndicator, + Enum.StudioStyleGuideModifier.Disabled + ), + BorderColor = studioTheme:GetColor( + Enum.StudioStyleGuideColor.CheckedFieldBorder, + Enum.StudioStyleGuideModifier.Disabled + ), }, }, - }, - Checkbox = { - Active = { - IconColor = Color3.fromHex("FFFFFF"), - BackgroundColor = BRAND_COLOR, - }, - Inactive = { - IconColor = Color3.fromHex("EEEEEE"), - BorderColor = Color3.fromHex("AFAFAF"), - }, - }, - Dropdown = { - TextColor = Color3.fromHex("000000"), - BorderColor = Color3.fromHex("AFAFAF"), - BackgroundColor = Color3.fromHex("EEEEEE"), - Open = { - IconColor = BRAND_COLOR, - }, - Closed = { - IconColor = Color3.fromHex("EEEEEE"), - }, - }, - TextInput = { - Enabled = { - TextColor = Color3.fromHex("000000"), - PlaceholderColor = Color3.fromHex("8C8C8C"), - BorderColor = Color3.fromHex("ACACAC"), - }, - Disabled = { - TextColor = Color3.fromHex("393939"), - PlaceholderColor = Color3.fromHex("8C8C8C"), - BorderColor = Color3.fromHex("AFAFAF"), - }, - ActionFillColor = Color3.fromHex("000000"), - ActionFillTransparency = 0.9, - }, - AddressEntry = { - TextColor = Color3.fromHex("000000"), - PlaceholderColor = Color3.fromHex("8C8C8C"), - }, - BorderedContainer = { - BorderColor = Color3.fromHex("CBCBCB"), - BackgroundColor = Color3.fromHex("EEEEEE"), - }, - Spinner = { - ForegroundColor = BRAND_COLOR, - BackgroundColor = Color3.fromHex("EEEEEE"), - }, - Diff = { - Add = Color3.fromHex("baffbd"), - Remove = Color3.fromHex("ffbdba"), - Edit = Color3.fromHex("bacdff"), - Row = Color3.fromHex("000000"), - Warning = Color3.fromHex("FF8E3C"), - }, - ConnectionDetails = { - ProjectNameColor = Color3.fromHex("000000"), - AddressColor = Color3.fromHex("000000"), - DisconnectColor = BRAND_COLOR, - }, - Settings = { - DividerColor = Color3.fromHex("CBCBCB"), - Navbar = { - BackButtonColor = Color3.fromHex("000000"), - TextColor = Color3.fromHex("000000"), - }, - Setting = { - NameColor = Color3.fromHex("000000"), - DescriptionColor = Color3.fromHex("5F5F5F"), - }, - }, - Header = { - LogoColor = BRAND_COLOR, - VersionColor = Color3.fromHex("727272"), - }, - Notification = { - InfoColor = Color3.fromHex("000000"), - CloseColor = BRAND_COLOR, - }, - ErrorColor = Color3.fromHex("000000"), - ScrollBarColor = Color3.fromHex("000000"), -}) - -local darkTheme = strict("DarkTheme", { - BackgroundColor = Color3.fromHex("2E2E2E"), - Button = { - Solid = { - ActionFillColor = Color3.fromHex("FFFFFF"), - ActionFillTransparency = 0.8, + Dropdown = { + TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.ButtonText), + BorderColor = studioTheme:GetColor( + Enum.StudioStyleGuideColor.CheckedFieldBorder, + Enum.StudioStyleGuideModifier.Disabled + ), + BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainBackground), + IconColor = studioTheme:GetColor( + Enum.StudioStyleGuideColor.CheckedFieldIndicator, + Enum.StudioStyleGuideModifier.Disabled + ), + }, + TextInput = { Enabled = { - TextColor = Color3.fromHex("FFFFFF"), - BackgroundColor = BRAND_COLOR, + TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText), + PlaceholderColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.SubText), + BorderColor = studioTheme:GetColor( + Enum.StudioStyleGuideColor.CheckedFieldBorder, + Enum.StudioStyleGuideModifier.Disabled + ), }, Disabled = { - TextColor = Color3.fromHex("FFFFFF"), - BackgroundColor = BRAND_COLOR, + TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText), + PlaceholderColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.SubText), + BorderColor = studioTheme:GetColor( + Enum.StudioStyleGuideColor.CheckedFieldBorder, + Enum.StudioStyleGuideModifier.Disabled + ), }, - }, - Bordered = { - ActionFillColor = Color3.fromHex("FFFFFF"), + ActionFillColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText), ActionFillTransparency = 0.9, - Enabled = { - TextColor = Color3.fromHex("DBDBDB"), - BorderColor = Color3.fromHex("535353"), + }, + AddressEntry = { + TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText), + PlaceholderColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.SubText), + }, + BorderedContainer = { + BorderColor = studioTheme:GetColor( + Enum.StudioStyleGuideColor.CheckedFieldBorder, + Enum.StudioStyleGuideModifier.Disabled + ), + BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.InputFieldBackground), + }, + Spinner = { + ForegroundColor = BRAND_COLOR, + BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.InputFieldBackground), + }, + Diff = { + Add = studioTheme:GetColor(Enum.StudioStyleGuideColor.DiffTextAdditionBackground), + Remove = studioTheme:GetColor(Enum.StudioStyleGuideColor.DiffTextDeletionBackground), + Edit = studioTheme:GetColor(Enum.StudioStyleGuideColor.DiffLineNumSeparatorBackground), + Row = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText), + Warning = studioTheme:GetColor(Enum.StudioStyleGuideColor.WarningText), + }, + ConnectionDetails = { + ProjectNameColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText), + AddressColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText), + DisconnectColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText), + }, + Settings = { + DividerColor = studioTheme:GetColor( + Enum.StudioStyleGuideColor.CheckedFieldBorder, + Enum.StudioStyleGuideModifier.Disabled + ), + Navbar = { + BackButtonColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText), + TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText), }, - Disabled = { - TextColor = Color3.fromHex("DBDBDB"), - BorderColor = Color3.fromHex("535353"), + Setting = { + NameColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText), + DescriptionColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText), }, }, - }, - Checkbox = { - Active = { - IconColor = Color3.fromHex("FFFFFF"), - BackgroundColor = BRAND_COLOR, - }, - Inactive = { - IconColor = Color3.fromHex("484848"), - BorderColor = Color3.fromHex("5A5A5A"), - }, - }, - Dropdown = { - TextColor = Color3.fromHex("FFFFFF"), - BorderColor = Color3.fromHex("5A5A5A"), - BackgroundColor = Color3.fromHex("2B2B2B"), - Open = { - IconColor = BRAND_COLOR, - }, - Closed = { - IconColor = Color3.fromHex("484848"), - }, - }, - TextInput = { - Enabled = { - TextColor = Color3.fromHex("FFFFFF"), - PlaceholderColor = Color3.fromHex("8B8B8B"), - BorderColor = Color3.fromHex("535353"), - }, - Disabled = { - TextColor = Color3.fromHex("484848"), - PlaceholderColor = Color3.fromHex("8B8B8B"), - BorderColor = Color3.fromHex("5A5A5A"), - }, - ActionFillColor = Color3.fromHex("FFFFFF"), - ActionFillTransparency = 0.9, - }, - AddressEntry = { - TextColor = Color3.fromHex("FFFFFF"), - PlaceholderColor = Color3.fromHex("8B8B8B"), - }, - BorderedContainer = { - BorderColor = Color3.fromHex("535353"), - BackgroundColor = Color3.fromHex("2B2B2B"), - }, - Spinner = { - ForegroundColor = BRAND_COLOR, - BackgroundColor = Color3.fromHex("2B2B2B"), - }, - Diff = { - Add = Color3.fromHex("273732"), - Remove = Color3.fromHex("3F2D32"), - Edit = Color3.fromHex("193345"), - Row = Color3.fromHex("FFFFFF"), - Warning = Color3.fromHex("FF8E3C"), - }, - ConnectionDetails = { - ProjectNameColor = Color3.fromHex("FFFFFF"), - AddressColor = Color3.fromHex("FFFFFF"), - DisconnectColor = Color3.fromHex("FFFFFF"), - }, - Settings = { - DividerColor = Color3.fromHex("535353"), - Navbar = { - BackButtonColor = Color3.fromHex("FFFFFF"), - TextColor = Color3.fromHex("FFFFFF"), + Header = { + LogoColor = BRAND_COLOR, + VersionColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText), }, - Setting = { - NameColor = Color3.fromHex("FFFFFF"), - DescriptionColor = Color3.fromHex("D3D3D3"), + Notification = { + InfoColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText), + CloseColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText), }, - }, - Header = { - LogoColor = BRAND_COLOR, - VersionColor = Color3.fromHex("D3D3D3"), - }, - Notification = { - InfoColor = Color3.fromHex("FFFFFF"), - CloseColor = Color3.fromHex("FFFFFF"), - }, - ErrorColor = Color3.fromHex("FFFFFF"), - ScrollBarColor = Color3.fromHex("FFFFFF"), -}) - -local Context = Roact.createContext(lightTheme) - -local StudioProvider = Roact.Component:extend("StudioProvider") - --- Pull the current theme from Roblox Studio and update state with it. -function StudioProvider:updateTheme() - local studioTheme = getStudio().Theme - - if studioTheme.Name == "Light" then - self:setState({ - theme = lightTheme, - }) - elseif studioTheme.Name == "Dark" then - self:setState({ - theme = darkTheme, - }) - else - Log.warn("Unexpected theme '{}'' -- falling back to light theme!", studioTheme.Name) + ErrorColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText), + ScrollBarColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText), + }) - self:setState({ - theme = lightTheme, - }) - end + self:setState({ + theme = theme, + }) end function StudioProvider:init()