Dark theme support.

Author: ryanlua

src/Workspace/SignsInternal/StudioWidgets/CustomTextButton.lua

@@ -7,10 +7,12 @@
 ----------------------------------------
 GuiUtilities = require(script.Parent.GuiUtilities)
 
-local kButtonImageIdDefault = "rbxasset://textures/TerrainTools/button_default.png"
+local kButtonImageIdDefault = "rbxasset://textures/StudioToolbox/RoundedBackground.png"
 local kButtonImageIdHovered = "rbxasset://textures/TerrainTools/button_hover.png"
 local kButtonImageIdPressed = "rbxasset://textures/TerrainTools/button_pressed.png"
 
+local kButtonBorder = "rbxasset://textures/StudioToolbox/RoundedBorder.png"
+
 CustomTextButtonClass = {}
 CustomTextButtonClass.__index = CustomTextButtonClass
 
@@ -23,33 +25,42 @@ function CustomTextButtonClass.new(buttonName, labelText)
 	button.Image = kButtonImageIdDefault
 	button.BackgroundTransparency = 1
 	button.ScaleType = Enum.ScaleType.Slice
-	button.SliceCenter = Rect.new(7, 7, 156, 36)
+	button.SliceCenter = Rect.new(3, 3, 13, 13)
 	button.AutoButtonColor = false
 
+	local border = Instance.new('ImageLabel')
+	border.Size = UDim2.new(1, 0, 1, 0)
+	border.BackgroundTransparency = 1
+	border.ScaleType = Enum.ScaleType.Slice
+	border.SliceCenter = Rect.new(3, 3, 13, 13)
+	border.Image = kButtonBorder
+	border.Parent = button
+
 	local label = Instance.new('TextLabel')
 	label.Text = labelText
 	label.BackgroundTransparency = 1
 	label.Size = UDim2.new(1, 0, 1, 0) -- 1, 0, 1, GuiUtilities.kButtonVerticalFudge
-	label.Font = Enum.Font.SourceSans                  
-	label.TextSize = 15                           
+	label.Font = Enum.Font.SourceSans
+	label.TextSize = 15
 	label.Parent = button
 
 	self._label = label
+	self._border = border
 	self._button = button
 
 	self._clicked = false
 	self._hovered = false
 
 	button.InputBegan:Connect(function(input)
-		if (input.UserInputType == Enum.UserInputType.MouseMovement) then               
+		if (input.UserInputType == Enum.UserInputType.MouseMovement) then
 			self._hovered = true
 			self:_updateButtonVisual()
 		end
 	end)
 
 
 	button.InputEnded:Connect(function(input)
-		if (input.UserInputType == Enum.UserInputType.MouseMovement) then               
+		if (input.UserInputType == Enum.UserInputType.MouseMovement) then
 			self._hovered = false
 			self._clicked = false
 			self:_updateButtonVisual()
@@ -66,20 +77,22 @@ function CustomTextButtonClass.new(buttonName, labelText)
 		self:_updateButtonVisual()
 	end)
 
+	settings().Studio.ThemeChanged:Connect(self:_updateButtonVisual())
 	self:_updateButtonVisual()
 
 	return self
 end
 
 function CustomTextButtonClass:_updateButtonVisual()
+	self._border.ImageColor3 = GuiUtilities.kButtonStandardBorderColor
 	if (self._clicked) then 
-		self._button.Image = kButtonImageIdPressed
-		self._label.TextColor3 = GuiUtilities.kPressedButtonTextColor
+		self._button.ImageColor3 = GuiUtilities.kButtonPressedBackgroundColor
+		self._label.TextColor3 = GuiUtilities.kStandardButtonTextColor
 	elseif (self._hovered) then 
-		self._button.Image = kButtonImageIdHovered
+		self._button.ImageColor3 = GuiUtilities.kButtonHoverBackgroundColor
 		self._label.TextColor3 = GuiUtilities.kStandardButtonTextColor
 	else
-		self._button.Image = kButtonImageIdDefault
+		self._button.ImageColor3 = GuiUtilities.kButtonStandardBackgroundColor
 		self._label.TextColor3 = GuiUtilities.kStandardButtonTextColor
 	end
 end

src/Workspace/SignsInternal/StudioWidgets/GuiUtilities.lua

@@ -13,7 +13,7 @@ module.kStandardHMargin = 16
 
 module.kCheckboxMinLabelWidth = 52
 module.kCheckboxMinMargin = 16 -- Default: 12
-module.kCheckboxWidth = 16 -- Default: 12
+module.kCheckboxWidth = module.kCheckboxMinMargin -- Default: 12
 
 module.kRadioButtonsHPadding = 54
 
@@ -33,14 +33,14 @@ module.kButtonVerticalFudge = -5
 
 module.kBottomButtonsWidth = 100
 
-module.kDisabledTextColor = Color3.new(.4, .4, .4)                   --todo: input spec disabled text color
-module.kStandardButtonTextColor = Color3.new(0, 0, 0)                --todo: input spec disabled text color
-module.kPressedButtonTextColor = Color3.new(1, 1, 1)                 --todo: input spec disabled text color
+module.kDisabledTextColor = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.ButtonText, Enum.StudioStyleGuideModifier.Disabled)
+module.kStandardButtonTextColor = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.ButtonText, Enum.StudioStyleGuideModifier.Default)
 
-module.kButtonStandardBackgroundColor = Color3.new(1, 1, 1)          --todo: sync with spec
-module.kButtonStandardBorderColor = Color3.new(.4,.4,.4)             --todo: sync with spec
-module.kButtonDisabledBackgroundColor = Color3.new(.7,.7,.7)         --todo: sync with spec
-module.kButtonDisabledBorderColor = Color3.new(.6,.6,.6)             --todo: sync with spec
+module.kButtonStandardBorderColor = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.ButtonBorder, Enum.StudioStyleGuideModifier.Default)
+module.kButtonStandardBackgroundColor = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.Button, Enum.StudioStyleGuideModifier.Default)
+module.kButtonPressedBackgroundColor = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.Button, Enum.StudioStyleGuideModifier.Pressed)
+module.kButtonHoverBackgroundColor = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.Button, Enum.StudioStyleGuideModifier.Hover)
+module.kButtonDisabledBackgroundColor = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.Button, Enum.StudioStyleGuideModifier.Disabled)
 
 module.kButtonBackgroundTransparency = 0.5
 module.kButtonBackgroundIntenseTransparency = 0.4