Improve visual indicators of interactability

ImAvafe · Jun 14, 2024 · 98c8d2c · 98c8d2c
1 parent 31bb91b
commit 98c8d2c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 19 deletions.
diff --git a/src/Components/SwitchInput.lua b/src/Components/SwitchInput.lua
@@ -97,12 +97,12 @@ return function(Props: Props)
 		StrokeTransparency = Spring(
 			Computed(function()
 				if Disabled:get() then
-					return 0.9
+					return 0.8
 				end
 				if Switched:get() then
 					return 0
 				else
-					return 0.5
+					return 0.6
 				end
 			end),
 			Themer.Theme.SpringSpeed["1"],

diff --git a/src/Components/TextInput.lua b/src/Components/TextInput.lua
@@ -33,6 +33,7 @@ export type Props = Base.Props & {
 	PlaceholderColor3: PubTypes.CanBeState<Color3>?,
 	TextXAlignment: PubTypes.CanBeState<Enum.TextXAlignment>?,
 	TextYAlignment: PubTypes.CanBeState<Enum.TextYAlignment>?,
+	TextTransparency: PubTypes.CanBeState<number>?,
 
 	IsFocused: PubTypes.CanBeState<boolean>?,
 	OnFocused: PubTypes.CanBeState<() -> ()>?,
@@ -41,23 +42,17 @@ export type Props = Base.Props & {
 
 return function(Props: Props)
 	local Disabled = EnsureValue(Props.Disabled, "boolean", false)
+	local RemainingCharaters = Value(-1)
+	local IsFocused = EnsureValue(Props.IsFocused, "boolean", false)
+	local OnFocused = EnsureValue(Props.OnFocused, "function", function() end)
+	local OnFocusLost = EnsureValue(Props.OnFocusLost, "function", function() end)
 	local Text = EnsureValue(Props.Text, "string", "")
 	local Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Primary.Main)
 	local CharacterLimit = EnsureValue(Props.CharacterLimit, "number", -1)
 	local ClearTextOnFocus = EnsureValue(Props.ClearTextOnFocus, "boolean", false)
 	local PlaceholderText = EnsureValue(Props.PlaceholderText, "string", "")
 	local TextSize = EnsureValue(Props.TextSize, "number", Themer.Theme.TextSize["1"])
-	local PlaceholderColor3 = EnsureValue(
-		Props.PlaceholderColor3,
-		"Color3",
-		Computed(function()
-			if Disabled:get() then
-				return Themer.Theme.Colors.NeutralContent.Dark:get()
-			else
-				return Themer.Theme.Colors.NeutralContent.Light:get()
-			end
-		end)
-	)
+	local PlaceholderColor3 = EnsureValue(Props.PlaceholderColor3, "Color3", Themer.Theme.Colors.NeutralContent.Dark)
 	local TextColor3 = EnsureValue(
 		Props.TextColor3,
 		"Color3",
@@ -74,11 +69,19 @@ return function(Props: Props)
 	)
 	local TextXAlignment = EnsureValue(Props.TextXAlignment, "EnumItem", Enum.TextXAlignment.Left)
 	local TextYAlignment = EnsureValue(Props.TextYAlignment, "EnumItem", Enum.TextYAlignment.Top)
-
-	local RemainingCharaters = Value(-1)
-	local IsFocused = EnsureValue(Props.IsFocused, "boolean", false)
-	local OnFocused = EnsureValue(Props.OnFocused, "function", function() end)
-	local OnFocusLost = EnsureValue(Props.OnFocusLost, "function", function() end)
+	local TextTransparency = EnsureValue(
+		Props.TextTransparency,
+		"number",
+		Computed(function()
+			if Disabled:get() then
+				return 0.75
+			elseif IsFocused:get() then
+				return 0
+			else
+				return 0.5
+			end
+		end)
+	)
 
 	local Observers = {
 		Observer(Text):onChange(function()
@@ -133,14 +136,15 @@ return function(Props: Props)
 		[Cleanup] = Observers,
 	}))) {
 		Text = Text,
-		TextColor3 = TextColor3,
+		TextColor3 = Spring(TextColor3, Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening),
 		TextSize = TextSize,
 		FontFace = FontFace,
 		PlaceholderColor3 = PlaceholderColor3,
 		PlaceholderText = PlaceholderText,
 		TextXAlignment = TextXAlignment,
 		TextYAlignment = TextYAlignment,
 		ClearTextOnFocus = ClearTextOnFocus,
+		TextTransparency = Spring(TextTransparency, Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening),
 		MultiLine = Props.MultiLine,
 		TextWrapped = Props.TextWrapped,