Fix Table diff colors (#1084)

CHANGELOG.md

@@ -1,12 +1,15 @@
 # Rojo Changelog
 
 ## Unreleased
+
+* Fixed colors of Table diff ([#1084])
 * Fixed `sourcemap` command outputting paths with OS-specific path separators ([#1085])
 * Fixed nil -> nil properties showing up as failing to sync in plugin's patch visualizer ([#1081])
-* Changed the background of the server's in-browser UI to be gray instead of white ([#1080]) 
+* Changed the background of the server's in-browser UI to be gray instead of white ([#1080])
 * Fixed `Auto Connect Playtest Server` no longer functioning due to Roblox change ([#1066])
 * Added an update indicator to the version header when a new version of the plugin is available. ([#1069])
 
+[#1084]: https://github.com/rojo-rbx/rojo/pull/1084
 [#1085]: https://github.com/rojo-rbx/rojo/pull/1085
 [#1081]: https://github.com/rojo-rbx/rojo/pull/1081
 [#1080]: https://github.com/rojo-rbx/rojo/pull/1080

plugin/src/App/Components/PatchVisualizer/DomLabel.lua

@@ -95,7 +95,7 @@ function DomLabel:render()
 	return Theme.with(function(theme)
 		local color = if props.isWarning
 			then theme.Diff.Warning
-			elseif props.patchType then theme.Diff[props.patchType]
+			elseif props.patchType then theme.Diff.Background[props.patchType]
 			else theme.TextColor
 
 		local indent = (depth - 1) * 12 + 15

plugin/src/App/Components/StringDiffVisualizer/init.lua

@@ -178,7 +178,7 @@ function StringDiffVisualizer:render()
 					size = UDim2.new(1, 0, 1, 0),
 					position = UDim2.new(0, 0, 0, 0),
 					text = oldString,
-					lineBackground = theme.Diff.Remove,
+					lineBackground = theme.Diff.Background.Remove,
 					markedLines = self.state.remove,
 				}),
 			}),
@@ -193,7 +193,7 @@ function StringDiffVisualizer:render()
 					size = UDim2.new(1, 0, 1, 0),
 					position = UDim2.new(0, 0, 0, 0),
 					text = newString,
-					lineBackground = theme.Diff.Add,
+					lineBackground = theme.Diff.Background.Add,
 					markedLines = self.state.add,
 				}),
 			}),

plugin/src/App/Components/TableDiffVisualizer/Array.lua

@@ -93,7 +93,7 @@ function Array:render()
 				e("Frame", {
 					Size = UDim2.new(1, 0, 0, 25),
 					BackgroundTransparency = if patchType == "Remain" then 1 else self.props.transparency,
-					BackgroundColor3 = if patchType == "Remain" then theme.Diff.Row else theme.Diff[patchType],
+					BackgroundColor3 = theme.Diff.Background[patchType],
 					BorderSizePixel = 0,
 					LayoutOrder = i,
 				}, {

plugin/src/App/Components/TableDiffVisualizer/Dictionary.lua

@@ -91,9 +91,7 @@ function Dictionary:render()
 					LayoutOrder = order,
 					BorderSizePixel = 0,
 					BackgroundTransparency = if line.patchType == "Remain" then 1 else self.props.transparency,
-					BackgroundColor3 = if line.patchType == "Remain"
+					BackgroundColor3 = theme.Diff.Background[line.patchType],
-						then theme.Diff.Row
-						else theme.Diff[line.patchType],
 				}, {
 					DiffIcon = if line.patchType ~= "Remain"
 						then e("ImageLabel", {
@@ -114,7 +112,7 @@ function Dictionary:render()
 						TextXAlignment = Enum.TextXAlignment.Left,
 						FontFace = theme.Font.Main,
 						TextSize = theme.TextSize.Body,
-						TextColor3 = theme.Settings.Setting.DescriptionColor,
+						TextColor3 = theme.Diff.Text[line.patchType],
 						TextTruncate = Enum.TextTruncate.AtEnd,
 					}),
 					OldValue = e("Frame", {
@@ -125,7 +123,7 @@ function Dictionary:render()
 						e(DisplayValue, {
 							value = oldValue,
 							transparency = self.props.transparency,
-							textColor = theme.Settings.Setting.DescriptionColor,
+							textColor = theme.Diff.Text[line.patchType],
 						}),
 					}),
 					NewValue = e("Frame", {
@@ -136,7 +134,7 @@ function Dictionary:render()
 						e(DisplayValue, {
 							value = newValue,
 							transparency = self.props.transparency,
-							textColor = theme.Settings.Setting.DescriptionColor,
+							textColor = theme.Diff.Text[line.patchType],
 						}),
 					}),
 				})

plugin/src/App/Theme.lua

@@ -165,12 +165,29 @@ function StudioProvider:updateTheme()
 			BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.InputFieldBackground),
 		},
 		Diff = {
-			-- Studio doesn't have good colors since their diffs use backgrounds, not text
+			-- Very bright different colors in case some places were not updated to use
-			Add = if isDark then Color3.fromRGB(143, 227, 154) else Color3.fromRGB(41, 164, 45),
+			-- the new background diff colors.
-			Remove = if isDark then Color3.fromRGB(242, 125, 125) else Color3.fromRGB(150, 29, 29),
+			Add = Color3.fromRGB(255, 0, 255),
-			Edit = if isDark then Color3.fromRGB(120, 154, 248) else Color3.fromRGB(0, 70, 160),
+			Remove = Color3.fromRGB(255, 0, 255),
+			Edit = Color3.fromRGB(255, 0, 255),
+
 			Row = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
 			Warning = studioTheme:GetColor(Enum.StudioStyleGuideColor.WarningText),
+
+			Background = {
+				-- Studio doesn't have good colors since their diffs use backgrounds, not text
+				Add = if isDark then Color3.fromRGB(143, 227, 154) else Color3.fromRGB(41, 164, 45),
+				Remove = if isDark then Color3.fromRGB(242, 125, 125) else Color3.fromRGB(150, 29, 29),
+				Edit = if isDark then Color3.fromRGB(120, 154, 248) else Color3.fromRGB(0, 70, 160),
+				Remain = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+			},
+
+			Text = {
+				Add = if isDark then Color3.new(0, 0, 0) else Color3.new(1, 1, 1),
+				Remove = if isDark then Color3.new(0, 0, 0) else Color3.new(1, 1, 1),
+				Edit = if isDark then Color3.new(0, 0, 0) else Color3.new(1, 1, 1),
+				Remain = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText),
+			},
 		},
 		ConnectionDetails = {
 			ProjectNameColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),