Dynamic theming. Closes #241.

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.

plugin/src/Components/ConnectingPanel.lua

@@ -2,8 +2,7 @@ local Roact = require(script:FindFirstAncestor("Rojo").Roact)
 
 local Plugin = script:FindFirstAncestor("Plugin")
 
-local Theme = require(Plugin.Theme)
-
+local Theme = require(Plugin.Components.Theme)
 local Panel = require(Plugin.Components.Panel)
 local FitText = require(Plugin.Components.FitText)
 
@@ -12,23 +11,25 @@ local e = Roact.createElement
 local ConnectingPanel = Roact.Component:extend("ConnectingPanel")
 
 function ConnectingPanel:render()
-	return e(Panel, nil, {
-		Layout = Roact.createElement("UIListLayout", {
-			HorizontalAlignment = Enum.HorizontalAlignment.Center,
-			VerticalAlignment = Enum.VerticalAlignment.Center,
-			SortOrder = Enum.SortOrder.LayoutOrder,
-			Padding = UDim.new(0, 8),
-		}),
+	return Theme.with(function(theme)
+		return e(Panel, nil, {
+			Layout = Roact.createElement("UIListLayout", {
+				HorizontalAlignment = Enum.HorizontalAlignment.Center,
+				VerticalAlignment = Enum.VerticalAlignment.Center,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				Padding = UDim.new(0, 8),
+			}),
 
-		Text = e(FitText, {
-			Padding = Vector2.new(12, 6),
-			Font = Theme.ButtonFont,
-			TextSize = 18,
-			Text = "Connecting...",
-			TextColor3 = Theme.PrimaryColor,
-			BackgroundTransparency = 1,
-		}),
-	})
+			Text = e(FitText, {
+				Padding = Vector2.new(12, 6),
+				Font = theme.ButtonFont,
+				TextSize = 18,
+				Text = "Connecting...",
+				TextColor3 = theme.Text1,
+				BackgroundTransparency = 1,
+			}),
+		})
+	end)
 end
 
 return ConnectingPanel