@quenty/colorpicker 10.20.0-canary.ae8d76d.0 → 10.20.1-canary.4ea661c.0

package/CHANGELOG.md

@@ -3,12 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [10.20.0-canary.ae8d76d.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpicker@10.19.3...@quenty/colorpicker@10.20.0-canary.ae8d76d.0) (2025-05-10)
+## [10.20.1-canary.4ea661c.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpicker@10.20.0...@quenty/colorpicker@10.20.1-canary.4ea661c.0) (2025-08-12)
+
+**Note:** Version bump only for package @quenty/colorpicker
+
+
+
+
+
+# [10.20.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpicker@10.19.3...@quenty/colorpicker@10.20.0) (2025-05-10)
 
 
 ### Features
 
-* Add even more types ([ae8d76d](https://github.com/Quenty/NevermoreEngine/commit/ae8d76d996594e017ac4bfa19f3c064ebe307cd8))
+* Add even more types ([b31717d](https://github.com/Quenty/NevermoreEngine/commit/b31717d8c9f7620c457f5018a2affa760a65334a))
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quenty/colorpicker",
-  "version": "10.20.0-canary.ae8d76d.0",
+  "version": "10.20.1-canary.4ea661c.0",
   "description": "Color picking UI system for Roblox.",
   "keywords": [
     "Roblox",
@@ -28,17 +28,17 @@
     "access": "public"
   },
   "dependencies": {
-    "@quenty/baseobject": "10.8.3",
-    "@quenty/basicpane": "13.18.0-canary.ae8d76d.0",
-    "@quenty/blend": "12.19.0-canary.ae8d76d.0",
-    "@quenty/buttondragmodel": "1.16.0-canary.ae8d76d.0",
-    "@quenty/color3utils": "11.19.0-canary.ae8d76d.0",
-    "@quenty/inputobjectutils": "4.19.0-canary.ae8d76d.0",
-    "@quenty/instanceutils": "13.18.0-canary.ae8d76d.0",
-    "@quenty/loader": "10.8.3",
-    "@quenty/maid": "3.4.3",
+    "@quenty/baseobject": "10.9.0",
+    "@quenty/basicpane": "13.18.1-canary.4ea661c.0",
+    "@quenty/blend": "12.19.1-canary.4ea661c.0",
+    "@quenty/buttondragmodel": "1.16.1-canary.4ea661c.0",
+    "@quenty/color3utils": "11.19.1-canary.4ea661c.0",
+    "@quenty/inputobjectutils": "4.19.1-canary.4ea661c.0",
+    "@quenty/instanceutils": "13.18.1-canary.4ea661c.0",
+    "@quenty/loader": "10.9.0",
+    "@quenty/maid": "3.5.0",
     "@quenty/math": "2.7.3",
-    "@quenty/valueobject": "13.18.0-canary.ae8d76d.0"
+    "@quenty/valueobject": "13.18.1-canary.4ea661c.0"
   },
-  "gitHead": "ae8d76d996594e017ac4bfa19f3c064ebe307cd8"
+  "gitHead": "4ea661c3fb52b8a3843c7d879c98c1de8a733798"
 }

package/src/Client/ColorPickerUtils.lua

@@ -25,7 +25,7 @@ function ColorPickerUtils.getOutlineWithContrast(color: Color3, backingColor: Co
 		v = math.clamp(v - 80, 0, 100)
 	end
 
-	return LuvColor3Utils.toColor3({l, u, v})
+	return LuvColor3Utils.toColor3({ l, u, v })
 end
 
-return ColorPickerUtils
+return ColorPickerUtils

package/src/Client/Cursor/ColorPickerCursorPreview.lua

@@ -7,13 +7,13 @@
 local require = require(script.Parent.loader).load(script)
 
 local BasicPane = require("BasicPane")
-local Blend = require("Blend")
 local BasicPaneUtils = require("BasicPaneUtils")
-local Math = require("Math")
+local Blend = require("Blend")
 local ColorPickerUtils = require("ColorPickerUtils")
 local LuvColor3Utils = require("LuvColor3Utils")
-local ValueObject = require("ValueObject")
+local Math = require("Math")
 local Signal = require("Signal")
+local ValueObject = require("ValueObject")
 
 local ColorPickerCursorPreview = setmetatable({}, BasicPane)
 ColorPickerCursorPreview.ClassName = "ColorPickerCursorPreview"

package/src/Client/Cursor/ColorPickerTriangle.lua

@@ -66,31 +66,30 @@ end
 
 function ColorPickerTriangle._render(self: ColorPickerTriangle)
 	return Blend.New "Frame" {
-		Name = "ColorPickerTriangle";
-		Size = UDim2.new(1, 0, 1, 0);
-		BackgroundTransparency = 1;
+		Name = "ColorPickerTriangle",
+		Size = UDim2.new(1, 0, 1, 0),
+		BackgroundTransparency = 1,
 
 		Blend.New "ImageLabel" {
-			BackgroundTransparency = 1;
-			Size = UDim2.new(1, 0, 1, 0);
+			BackgroundTransparency = 1,
+			Size = UDim2.new(1, 0, 1, 0),
 			ImageColor3 = Blend.Computed(self._color, self._backgroundColorHint, function(color, backingColor)
 				return ColorPickerUtils.getOutlineWithContrast(color, backingColor)
-			end);
-			ImageTransparency = self._transparency;
-			Image = "rbxassetid://9291514809";
-		};
+			end),
+			ImageTransparency = self._transparency,
+			Image = "rbxassetid://9291514809",
+		},
 
 		Blend.New "UIAspectRatioConstraint" {
 			AspectRatio = Blend.Computed(self._sizeValue, function(size)
 				if size.x <= 0 or size.y <= 0 then
 					return 1
 				else
-					return size.x/size.y
+					return size.x / size.y
 				end
-			end);
-		};
+			end),
+		},
 	}
 end
 
-
-return ColorPickerTriangle
+return ColorPickerTriangle

package/src/Client/Cursor/HSColorPickerCursor.lua

@@ -10,8 +10,8 @@ local require = require(script.Parent.loader).load(script)
 local BaseObject = require("BaseObject")
 local Blend = require("Blend")
 local ColorPickerUtils = require("ColorPickerUtils")
-local ValueObject = require("ValueObject")
 local Signal = require("Signal")
+local ValueObject = require("ValueObject")
 
 local HSColorPickerCursor = setmetatable({}, BaseObject)
 HSColorPickerCursor.ClassName = "HSColorPickerCursor"
@@ -113,55 +113,57 @@ end
 
 function HSColorPickerCursor._render(self: HSColorPickerCursor)
 	return Blend.New "Frame" {
-		Name = "HSColorPickerCursor";
+		Name = "HSColorPickerCursor",
 		Size = Blend.Computed(self._height, function(height)
 			return UDim2.fromScale(height, height)
-		end);
-		BackgroundTransparency = 1;
-		AnchorPoint = Vector2.new(0.5, 0.5);
+		end),
+		BackgroundTransparency = 1,
+		AnchorPoint = Vector2.new(0.5, 0.5),
 		Position = Blend.Computed(self._position, function(pos)
 			return UDim2.fromScale(pos.x, pos.y)
-		end);
+		end),
 
 		Blend.New "UIAspectRatioConstraint" {
-			AspectRatio = 1;
-		};
+			AspectRatio = 1,
+		},
 
 		Blend.New "Frame" {
-			AnchorPoint = Vector2.new(0.5, 0.5);
-			Position = UDim2.fromScale(0.5, 0.5);
-			Visible = self._horizontalHairVisible;
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.fromScale(0.5, 0.5),
+			Visible = self._horizontalHairVisible,
 			Size = Blend.Computed(self._crossHairWidthAbs, function(width)
 				return UDim2.new(1, 0, 0, width)
-			end);
+			end),
 			BackgroundColor3 = Blend.Computed(self._backgroundColorHint, function(backingColor)
 				return ColorPickerUtils.getOutlineWithContrast(Color3.new(0, 0, 0), backingColor)
-			end);
-			BackgroundTransparency = self._transparency;
+			end),
+			BackgroundTransparency = self._transparency,
 
 			Blend.New "UICorner" {
-				CornerRadius = UDim.new(1, 0);
-			};
-		};
+				CornerRadius = UDim.new(1, 0),
+			},
+		},
 
 		Blend.New "Frame" {
-			AnchorPoint = Vector2.new(0.5, 0.5);
-			Position = UDim2.fromScale(0.5, 0.5);
-			Visible = self._verticalHairVisible;
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.fromScale(0.5, 0.5),
+			Visible = self._verticalHairVisible,
 			Size = Blend.Computed(self._crossHairWidthAbs, function(width)
 				return UDim2.new(0, width, 1, 0)
-			end);
-			BackgroundColor3 = Blend.Spring(Blend.Computed(self._backgroundColorHint, function(backingColor)
-				return ColorPickerUtils.getOutlineWithContrast(Color3.new(0, 0, 0), backingColor)
-			end), 20);
-			BackgroundTransparency = self._transparency;
+			end),
+			BackgroundColor3 = Blend.Spring(
+				Blend.Computed(self._backgroundColorHint, function(backingColor)
+					return ColorPickerUtils.getOutlineWithContrast(Color3.new(0, 0, 0), backingColor)
+				end),
+				20
+			),
+			BackgroundTransparency = self._transparency,
 
 			Blend.New "UICorner" {
-				CornerRadius = UDim.new(1, 0);
-			};
-		};
+				CornerRadius = UDim.new(1, 0),
+			},
+		},
 	}
 end
 
-
 return HSColorPickerCursor

package/src/Client/HSV/HSColorPicker.lua

@@ -173,33 +173,33 @@ end
 
 function HSColorPicker:_render()
 	return Blend.New "ImageButton" {
-		Name = "HSColorPicker";
-		Size = UDim2.new(1, 0, 1, 0);
-		BackgroundTransparency = 1;
-		Active = true;
-		Image = "rbxassetid://9290917908";
-		ImageTransparency = self._transparency;
+		Name = "HSColorPicker",
+		Size = UDim2.new(1, 0, 1, 0),
+		BackgroundTransparency = 1,
+		Active = true,
+		Image = "rbxassetid://9290917908",
+		ImageTransparency = self._transparency,
 
 		[Blend.Instance] = function(inst)
 			self._dragModel:SetButton(inst)
-		end;
+		end,
 
 		Blend.New "UIAspectRatioConstraint" {
 			AspectRatio = Blend.Computed(self._sizeValue, function(size)
 				if size.x <= 0 or size.y <= 0 then
 					return 1
 				else
-					return size.x/size.y
+					return size.x / size.y
 				end
-			end);
-		};
+			end),
+		},
 
 		Blend.New "UICorner" {
-			CornerRadius = UDim.new(0, 4);
-		};
+			CornerRadius = UDim.new(0, 4),
+		},
 
-		self._preview.Gui;
-		self._cursor.Gui;
+		self._preview.Gui,
+		self._cursor.Gui,
 	}
 end
 

package/src/Client/HSV/HSColorPicker.story.lua

@@ -2,10 +2,11 @@
 	@class serviceBag.story
 ]]
 
-local require = require(game:GetService("ServerScriptService"):FindFirstChild("LoaderUtils", true).Parent).bootstrapStory(script)
+local require =
+	require(game:GetService("ServerScriptService"):FindFirstChild("LoaderUtils", true).Parent).bootstrapStory(script)
 
-local Maid = require("Maid")
 local HSColorPicker = require("HSColorPicker")
+local Maid = require("Maid")
 
 return function(target)
 	local maid = Maid.new()
@@ -13,11 +14,11 @@ return function(target)
 	local picker = maid:Add(HSColorPicker.new())
 	picker:SetColor(Color3.new(1, 1, 1))
 	picker.Gui.AnchorPoint = Vector2.new(0.5, 0.5)
-	picker.Gui.Position = UDim2.fromScale(0.5, 0.5);
+	picker.Gui.Position = UDim2.fromScale(0.5, 0.5)
 	picker.Gui.Size = UDim2.fromScale(0.8, 0.8)
 	picker.Gui.Parent = target
 
 	return function()
 		maid:DoCleaning()
 	end
-end
+end

package/src/Client/HSV/HSVColorPicker.story.lua

@@ -2,10 +2,11 @@
 	@class HSVColorPicker.story
 ]]
 
-local require = require(game:GetService("ServerScriptService"):FindFirstChild("LoaderUtils", true).Parent).bootstrapStory(script)
+local require =
+	require(game:GetService("ServerScriptService"):FindFirstChild("LoaderUtils", true).Parent).bootstrapStory(script)
 
-local Maid = require("Maid")
 local HSVColorPicker = require("HSVColorPicker")
+local Maid = require("Maid")
 
 return function(target)
 	local maid = Maid.new()
@@ -13,11 +14,11 @@ return function(target)
 	local picker = maid:Add(HSVColorPicker.new())
 	picker:SetColor(Color3.new(0.5, 0.8, 0.3))
 	picker.Gui.AnchorPoint = Vector2.new(0.5, 0.5)
-	picker.Gui.Position = UDim2.fromScale(0.5, 0.5);
+	picker.Gui.Position = UDim2.fromScale(0.5, 0.5)
 	picker.Gui.Size = UDim2.fromScale(0.8, 0.8)
 	picker.Gui.Parent = target
 
 	return function()
 		maid:DoCleaning()
 	end
-end
+end

package/src/Client/HSV/ValueColorPicker.lua

@@ -10,9 +10,9 @@ local require = require(script.Parent.loader).load(script)
 local BaseObject = require("BaseObject")
 local Blend = require("Blend")
 local ButtonDragModel = require("ButtonDragModel")
-local ValueObject = require("ValueObject")
 local ColorPickerCursorPreview = require("ColorPickerCursorPreview")
 local ColorPickerTriangle = require("ColorPickerTriangle")
+local ValueObject = require("ValueObject")
 
 local ValueColorPicker = setmetatable({}, BaseObject)
 ValueColorPicker.ClassName = "ValueColorPicker"
@@ -203,35 +203,35 @@ end
 
 function ValueColorPicker:_render()
 	return Blend.New "ImageButton" {
-		Name = "HSColorPicker";
-		Size = UDim2.new(1, 0, 1, 0);
-		BackgroundTransparency = 1;
-		Active = true;
+		Name = "HSColorPicker",
+		Size = UDim2.new(1, 0, 1, 0),
+		BackgroundTransparency = 1,
+		Active = true,
 
 		[Blend.Instance] = function(inst)
 			self._dragModel:SetButton(inst)
-		end;
+		end,
 
 		Blend.New "UIAspectRatioConstraint" {
 			AspectRatio = Blend.Computed(self._sizeValue, function(size)
 				if size.x <= 0 or size.y <= 0 then
 					return 1
 				else
-					return size.x/size.y
+					return size.x / size.y
 				end
-			end);
-		};
+			end),
+		},
 
 		Blend.New "Frame" {
-			BackgroundColor3 = Color3.new(1, 1, 1);
-			BackgroundTransparency = self._transparency;
+			BackgroundColor3 = Color3.new(1, 1, 1),
+			BackgroundTransparency = self._transparency,
 			Size = Blend.Computed(self._leftWidth, self._sizeValue, function(width, sizeValue)
 				if sizeValue.x == 0 then
 					return UDim2.new(0, 0, 1, 0)
 				end
 
-				return UDim2.new(width/sizeValue.x, 0, 1, 0)
-			end);
+				return UDim2.new(width / sizeValue.x, 0, 1, 0)
+			end),
 
 			Blend.New "UIGradient" {
 				Color = Blend.Computed(self._hsvColorValue, function(color)
@@ -239,31 +239,31 @@ function ValueColorPicker:_render()
 					local start = Color3.fromHSV(h, s, 0)
 					local finish = Color3.fromHSV(h, s, 1)
 					return ColorSequence.new(start, finish)
-				end);
-				Rotation = -90;
-			};
+				end),
+				Rotation = -90,
+			},
 			Blend.New "UICorner" {
-				CornerRadius = UDim.new(0, 4);
-			};
+				CornerRadius = UDim.new(0, 4),
+			},
 
-			self._preview.Gui;
+			self._preview.Gui,
 			-- self._cursor.Gui;
-		};
+		},
 
 		Blend.New "Frame" {
-			BackgroundTransparency = 1;
-			Position = UDim2.fromScale(1, 0);
-			AnchorPoint = Vector2.new(1, 0);
+			BackgroundTransparency = 1,
+			Position = UDim2.fromScale(1, 0),
+			AnchorPoint = Vector2.new(1, 0),
 			Size = Blend.Computed(self._leftWidth, self._sizeValue, function(width, sizeValue)
 				if sizeValue.x == 0 then
 					return UDim2.new(0, 0, 1, 0)
 				end
 
-				return UDim2.new((sizeValue.x - width)/sizeValue.x, 0, 1, 0)
-			end);
+				return UDim2.new((sizeValue.x - width) / sizeValue.x, 0, 1, 0)
+			end),
 
-			self._triangle.Gui;
-		}
+			self._triangle.Gui,
+		},
 	}
 end
 

package/src/Client/HSV/ValueColorPicker.story.lua

@@ -2,7 +2,8 @@
 	@class ValueColorPicker.story
 ]]
 
-local require = require(game:GetService("ServerScriptService"):FindFirstChild("LoaderUtils", true).Parent).bootstrapStory(script)
+local require =
+	require(game:GetService("ServerScriptService"):FindFirstChild("LoaderUtils", true).Parent).bootstrapStory(script)
 
 local Maid = require("Maid")
 local ValueColorPicker = require("ValueColorPicker")
@@ -13,11 +14,11 @@ return function(target)
 	local picker = maid:Add(ValueColorPicker.new())
 	picker:SetHSVColor(Vector3.new(1, 0.5, 1))
 	picker.Gui.AnchorPoint = Vector2.new(0.5, 0.5)
-	picker.Gui.Position = UDim2.fromScale(0.5, 0.5);
+	picker.Gui.Position = UDim2.fromScale(0.5, 0.5)
 	picker.Gui.Size = UDim2.fromScale(0.8, 0.8)
 	picker.Gui.Parent = target
 
 	return function()
 		maid:DoCleaning()
 	end
-end
+end

package/src/Client/Story/ColorPickerStoryUtils.lua

@@ -14,8 +14,8 @@ function ColorPickerStoryUtils.createPicker(maid, valueSync, labelText, currentV
 	local picker = maid:Add(HSVColorPicker.new())
 	picker.Gui.AnchorPoint = Vector2.new(0.5, 1)
 	picker.Gui.Position = UDim2.new(0.5, 0, 1, 0)
-	picker.Gui.Size = UDim2.new(0, 150, 1, -30);
-	picker.Gui.ZIndex = 2;
+	picker.Gui.Size = UDim2.new(0, 150, 1, -30)
+	picker.Gui.ZIndex = 2
 
 	maid:GiveTask(picker:SyncValue(valueSync))
 
@@ -35,57 +35,59 @@ function ColorPickerStoryUtils.createPicker(maid, valueSync, labelText, currentV
 	end))
 
 	return Blend.New "ImageButton" {
-		BackgroundTransparency = 0;
-		AutoButtonColor = true;
-		BackgroundColor3 = Color3.new(0.2, 0.2, 0.2);
-		Size = Blend.Spring(Blend.Computed(visible, function(isVisible)
-			if isVisible then
-				return UDim2.new(0, 170, 0, 190);
-			else
-				return UDim2.new(0, 170, 0, 50);
-			end
-		end), 40);
-		ClipsDescendants = false;
+		BackgroundTransparency = 0,
+		AutoButtonColor = true,
+		BackgroundColor3 = Color3.new(0.2, 0.2, 0.2),
+		Size = Blend.Spring(
+			Blend.Computed(visible, function(isVisible)
+				if isVisible then
+					return UDim2.new(0, 170, 0, 190)
+				else
+					return UDim2.new(0, 170, 0, 50)
+				end
+			end),
+			40
+		),
+		ClipsDescendants = false,
 		[Blend.OnEvent "Activated"] = function()
 			visible.Value = not visible.Value
-		end;
+		end,
 
-		picker.Gui;
+		picker.Gui,
 		Blend.New "TextLabel" {
-			BackgroundTransparency = 1;
-			Text = labelText;
-			Position = UDim2.new(0, 35, 0, 5);
-			Size = UDim2.new(1, -40, 0, 20);
-			Font = Enum.Font.FredokaOne;
-			TextXAlignment = Enum.TextXAlignment.Left;
-			TextScaled = true;
-			TextColor3 = Color3.new(1, 1, 1);
-			ZIndex = 0;
-		};
+			BackgroundTransparency = 1,
+			Text = labelText,
+			Position = UDim2.new(0, 35, 0, 5),
+			Size = UDim2.new(1, -40, 0, 20),
+			Font = Enum.Font.FredokaOne,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextScaled = true,
+			TextColor3 = Color3.new(1, 1, 1),
+			ZIndex = 0,
+		},
 
 		Blend.New "Frame" {
-			BackgroundColor3 = valueSync;
-			Size = UDim2.new(0, 20, 0, 20);
-			Position = UDim2.new(0, 5, 0, 5);
+			BackgroundColor3 = valueSync,
+			Size = UDim2.new(0, 20, 0, 20),
+			Position = UDim2.new(0, 5, 0, 5),
 			[Blend.Children] = {
 				Blend.New "UICorner" {
-					CornerRadius = UDim.new(0, 10);
-				};
-			};
-		};
+					CornerRadius = UDim.new(0, 10),
+				},
+			},
+		},
 
 		Blend.New "UIPadding" {
-			PaddingTop = UDim.new(0, 10);
-			PaddingBottom = UDim.new(0, 10);
-			PaddingLeft = UDim.new(0, 10);
-			PaddingRight = UDim.new(0, 10);
-		};
+			PaddingTop = UDim.new(0, 10),
+			PaddingBottom = UDim.new(0, 10),
+			PaddingLeft = UDim.new(0, 10),
+			PaddingRight = UDim.new(0, 10),
+		},
 
 		Blend.New "UICorner" {
-			CornerRadius = UDim.new(0, 10);
-		};
+			CornerRadius = UDim.new(0, 10),
+		},
 	}
-
 end
 
 function ColorPickerStoryUtils.create(maid, buildPickers)
@@ -99,26 +101,26 @@ function ColorPickerStoryUtils.create(maid, buildPickers)
 
 	local function pickerGroup(pickers)
 		return Blend.New "Frame" {
-			Size = UDim2.new(1, 0, 0, 0);
-			AnchorPoint = Vector2.new(0.5, 0.5);
-			Position = UDim2.fromScale(0.5, 0.5);
-			BackgroundTransparency = 1;
-			AutomaticSize = Enum.AutomaticSize.Y;
+			Size = UDim2.new(1, 0, 0, 0),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.fromScale(0.5, 0.5),
+			BackgroundTransparency = 1,
+			AutomaticSize = Enum.AutomaticSize.Y,
 
 			Blend.New "UIListLayout" {
-				Padding = UDim.new(0, 10);
-				HorizontalAlignment = Enum.HorizontalAlignment.Left;
-				VerticalAlignment = Enum.VerticalAlignment.Top;
-				FillDirection = Enum.FillDirection.Horizontal;
-			};
-
-			pickers;
-		};
+				Padding = UDim.new(0, 10),
+				HorizontalAlignment = Enum.HorizontalAlignment.Left,
+				VerticalAlignment = Enum.VerticalAlignment.Top,
+				FillDirection = Enum.FillDirection.Horizontal,
+			},
+
+			pickers,
+		}
 	end
 
 	local groups = {}
 	local current = {}
-	for i=1, #built do
+	for i = 1, #built do
 		table.insert(current, built[i])
 		if #current >= 4 then
 			table.insert(groups, pickerGroup(current))
@@ -131,11 +133,11 @@ function ColorPickerStoryUtils.create(maid, buildPickers)
 	end
 
 	return Blend.New "Frame" {
-		Size = UDim2.new(0, 0, 0, 0);
-		AnchorPoint = Vector2.new(0.5, 0.5);
-		Position = UDim2.fromScale(0.5, 0.5);
-		BackgroundTransparency = 1;
-		AutomaticSize = Enum.AutomaticSize.XY;
+		Size = UDim2.new(0, 0, 0, 0),
+		AnchorPoint = Vector2.new(0.5, 0.5),
+		Position = UDim2.fromScale(0.5, 0.5),
+		BackgroundTransparency = 1,
+		AutomaticSize = Enum.AutomaticSize.XY,
 
 		[Blend.OnEvent "InputBegan"] = function(inputObject, processed)
 			if processed then
@@ -145,17 +147,17 @@ function ColorPickerStoryUtils.create(maid, buildPickers)
 			if inputObject.UserInputType == Enum.UserInputType.MouseButton1 then
 				currentVisible.Value = nil
 			end
-		end;
+		end,
 
 		Blend.New "UIListLayout" {
-			Padding = UDim.new(0, 10);
-			HorizontalAlignment = Enum.HorizontalAlignment.Center;
-			VerticalAlignment = Enum.VerticalAlignment.Top;
-			FillDirection = Enum.FillDirection.Vertical;
-		};
-
-		groups;
-	};
+			Padding = UDim.new(0, 10),
+			HorizontalAlignment = Enum.HorizontalAlignment.Center,
+			VerticalAlignment = Enum.VerticalAlignment.Top,
+			FillDirection = Enum.FillDirection.Vertical,
+		},
+
+		groups,
+	}
 end
 
-return ColorPickerStoryUtils
+return ColorPickerStoryUtils