@quenty/colorpalette 10.21.3 → 10.21.4-canary.559.339cfa7.0

package/src/Shared/Grade/ColorGradePalette.story.lua

@@ -2,13 +2,14 @@
 	@class ColorGradePalette.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 Blend = require("Blend")
 local ColorGradePalette = require("ColorGradePalette")
-local ColorSwatch = require("ColorSwatch")
 local ColorPickerStoryUtils = require("ColorPickerStoryUtils")
+local ColorSwatch = require("ColorSwatch")
+local Maid = require("Maid")
 local ValueObject = require("ValueObject")
 
 return function(target)
@@ -59,163 +60,173 @@ return function(target)
 		local percentMouseOver = Blend.Spring(mouseOver, 60)
 
 		return Blend.New "Frame" {
-			BackgroundColor3 = surface:ObserveGraded(gradePalette:ObserveGrade("surface"));
-			Size = UDim2.new(0, 250, 0, 100);
+			BackgroundColor3 = surface:ObserveGraded(gradePalette:ObserveGrade("surface")),
+			Size = UDim2.new(0, 250, 0, 100),
 
 			[Blend.Children] = {
 				Blend.New "TextLabel" {
-					TextColor3 = text:ObserveGraded(gradePalette:ObserveGrade("text"));
-					Text = labelText;
-					Font = Enum.Font.FredokaOne;
-					Size = UDim2.new(1, 0, 1, 0);
-					BackgroundTransparency = 1;
-					TextScaled = true;
-					ZIndex = 2;
-				};
+					TextColor3 = text:ObserveGraded(gradePalette:ObserveGrade("text")),
+					Text = labelText,
+					Font = Enum.Font.FredokaOne,
+					Size = UDim2.new(1, 0, 1, 0),
+					BackgroundTransparency = 1,
+					TextScaled = true,
+					ZIndex = 2,
+				},
 
 				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 "UIStroke" {
-					Color = surface:ObserveGraded(gradePalette:ObserveGrade("border"));
-					Thickness = 5;
-				};
+					Color = surface:ObserveGraded(gradePalette:ObserveGrade("border")),
+					Thickness = 5,
+				},
 
 				Blend.New "UICorner" {
-					CornerRadius = UDim.new(0, 10);
-				};
+					CornerRadius = UDim.new(0, 10),
+				},
 
 				Blend.New "Frame" {
-					Name = "Highlight";
-					Size = UDim2.new(0.8, 0, 0, 20);
-					Position = UDim2.fromScale(0.5, 0.75);
-					AnchorPoint = Vector2.new(0.5, 0.5);
-					BackgroundColor3 = accent:ObserveGraded(gradePalette:ObserveGrade("highlight"));
+					Name = "Highlight",
+					Size = UDim2.new(0.8, 0, 0, 20),
+					Position = UDim2.fromScale(0.5, 0.75),
+					AnchorPoint = Vector2.new(0.5, 0.5),
+					BackgroundColor3 = accent:ObserveGraded(gradePalette:ObserveGrade("highlight")),
 					[Blend.Children] = {
 						Blend.New "UICorner" {
-							CornerRadius = UDim.new(0, 10);
-						};
-					};
-				};
+							CornerRadius = UDim.new(0, 10),
+						},
+					},
+				},
 
 				Blend.New "Frame" {
-					Name ="Button";
-					Size = UDim2.new(0.5, 0, 0, 40);
-					AnchorPoint = Vector2.new(1, 1);
-					BackgroundColor3 = action:ObserveGraded(gradePalette:ObserveModified("action", "mouseOver", percentMouseOver));
-					Position = UDim2.new(1, 30, 1, 40);
-					ZIndex = 2;
+					Name = "Button",
+					Size = UDim2.new(0.5, 0, 0, 40),
+					AnchorPoint = Vector2.new(1, 1),
+					BackgroundColor3 = action:ObserveGraded(
+						gradePalette:ObserveModified("action", "mouseOver", percentMouseOver)
+					),
+					Position = UDim2.new(1, 30, 1, 40),
+					ZIndex = 2,
 
 					[Blend.OnEvent "MouseEnter"] = function()
 						mouseOver.Value = 1
-					end;
+					end,
 
 					[Blend.OnEvent "MouseLeave"] = function()
 						mouseOver.Value = 0
-					end;
+					end,
 
 					[Blend.Children] = {
 						Blend.New "UICorner" {
-							CornerRadius = UDim.new(0, 10);
-						};
+							CornerRadius = UDim.new(0, 10),
+						},
 
 						Blend.New "TextLabel" {
-							TextColor3 = action:ObserveGraded(gradePalette:ObserveModified(gradePalette:ObserveOn("text", "action"), "mouseOver", percentMouseOver));
-							Text = "Action";
-							TextScaled = true;
-							Font = Enum.Font.FredokaOne;
-							Size = UDim2.new(1, 0, 1, 0);
-							BackgroundTransparency = 1;
-							ZIndex = 2;
-						};
+							TextColor3 = action:ObserveGraded(
+								gradePalette:ObserveModified(
+									gradePalette:ObserveOn("text", "action"),
+									"mouseOver",
+									percentMouseOver
+								)
+							),
+							Text = "Action",
+							TextScaled = true,
+							Font = Enum.Font.FredokaOne,
+							Size = UDim2.new(1, 0, 1, 0),
+							BackgroundTransparency = 1,
+							ZIndex = 2,
+						},
 
 						[Blend.Children] = {
 							Blend.New "UIStroke" {
-								Color = action:ObserveGraded(gradePalette:ObserveModified(gradePalette:ObserveOn("border", "action"), "mouseOver", percentMouseOver));
-								Thickness = 5;
-							};
-						};
+								Color = action:ObserveGraded(
+									gradePalette:ObserveModified(
+										gradePalette:ObserveOn("border", "action"),
+										"mouseOver",
+										percentMouseOver
+									)
+								),
+								Thickness = 5,
+							},
+						},
 
 						Blend.New "Frame" {
-							Name = "Highlight";
-							Size = UDim2.new(0.9, 0, 0, 10);
-							Position = UDim2.fromScale(0.5, 0.75);
-							AnchorPoint = Vector2.new(0.5, 0.5);
-							BackgroundColor3 = accent:ObserveGraded(gradePalette:ObserveOn("highlight", "action"));
+							Name = "Highlight",
+							Size = UDim2.new(0.9, 0, 0, 10),
+							Position = UDim2.fromScale(0.5, 0.75),
+							AnchorPoint = Vector2.new(0.5, 0.5),
+							BackgroundColor3 = accent:ObserveGraded(gradePalette:ObserveOn("highlight", "action")),
 							[Blend.Children] = {
 								Blend.New "UICorner" {
-									CornerRadius = UDim.new(0, 10);
-								};
-							};
-						};
-
+									CornerRadius = UDim.new(0, 10),
+								},
+							},
+						},
 
 						Blend.New "UIPadding" {
-							PaddingTop = UDim.new(0, 5);
-							PaddingBottom = UDim.new(0, 5);
-							PaddingLeft = UDim.new(0, 5);
-							PaddingRight = UDim.new(0, 5);
-						};
-					};
-				};
-			};
-		};
+							PaddingTop = UDim.new(0, 5),
+							PaddingBottom = UDim.new(0, 5),
+							PaddingLeft = UDim.new(0, 5),
+							PaddingRight = UDim.new(0, 5),
+						},
+					},
+				},
+			},
+		}
 	end
 
 	maid:GiveTask((Blend.New "ScrollingFrame" {
-		Size = UDim2.new(1, 0, 1, 0);
-		BackgroundColor3 = Color3.new(0, 0, 0);
-		AutomaticCanvasSize = Enum.AutomaticSize.Y;
-		CanvasSize = UDim2.new(1, 0, 0, 0);
-		Parent = target;
+		Size = UDim2.new(1, 0, 1, 0),
+		BackgroundColor3 = Color3.new(0, 0, 0),
+		AutomaticCanvasSize = Enum.AutomaticSize.Y,
+		CanvasSize = UDim2.new(1, 0, 0, 0),
+		Parent = target,
 
 		[Blend.Children] = {
 			ColorPickerStoryUtils.create(maid, function(createPicker)
-				createPicker("Surface", surfaceColorValue);
-				createPicker("Text", textColorValue);
-				createPicker("Accent", accentColorValue);
-				createPicker("Action", actionColorValue);
-			end);
-
+				createPicker("Surface", surfaceColorValue)
+				createPicker("Text", textColorValue)
+				createPicker("Accent", accentColorValue)
+				createPicker("Action", actionColorValue)
+			end),
 
 			Blend.New "Frame" {
-				Size = UDim2.new(1, 0, 0, 0);
-				BackgroundTransparency = 1;
-				AutomaticSize = Enum.AutomaticSize.Y;
+				Size = UDim2.new(1, 0, 0, 0),
+				BackgroundTransparency = 1,
+				AutomaticSize = Enum.AutomaticSize.Y,
 
 				[Blend.Children] = {
-					sampleGui("Light", light);
-					sampleGui("Dark", dark);
+					sampleGui("Light", light),
+					sampleGui("Dark", dark),
 
 					Blend.New "UIListLayout" {
-						Padding = UDim.new(0, 50);
-						HorizontalAlignment = Enum.HorizontalAlignment.Center;
-						VerticalAlignment = Enum.VerticalAlignment.Top;
-						FillDirection = Enum.FillDirection.Vertical;
-					};
-				};
-			};
-
+						Padding = UDim.new(0, 50),
+						HorizontalAlignment = Enum.HorizontalAlignment.Center,
+						VerticalAlignment = Enum.VerticalAlignment.Top,
+						FillDirection = Enum.FillDirection.Vertical,
+					},
+				},
+			},
 
 			Blend.New "UIListLayout" {
-				Padding = UDim.new(0, 20);
-				HorizontalAlignment = Enum.HorizontalAlignment.Center;
-				VerticalAlignment = Enum.VerticalAlignment.Top;
-				FillDirection = Enum.FillDirection.Vertical;
-			};
+				Padding = UDim.new(0, 20),
+				HorizontalAlignment = Enum.HorizontalAlignment.Center,
+				VerticalAlignment = Enum.VerticalAlignment.Top,
+				FillDirection = Enum.FillDirection.Vertical,
+			},
 
 			Blend.New "UIPadding" {
-				PaddingTop = UDim.new(0, 10);
-			};
-		}
+				PaddingTop = UDim.new(0, 10),
+			},
+		},
 	}):Subscribe())
 
-
 	return function()
 		maid:DoCleaning()
 	end
-end
+end

package/src/Shared/Grade/ColorGradeUtils.lua

@@ -126,12 +126,12 @@ function ColorGradeUtils.getGradedColor(baseColor: Color3, colorGrade: number, v
 		-- local towardsOffset = (colorGrade - v)/100
 		-- local scaleTowards = math.clamp(math.abs(towardsOffset), 0, 1)^vividness
 		-- u = math.clamp(Math.map(scaleTowards, 0, 1, u, 0), 0, 100)
-		u = math.clamp(vividness*u, 0, 100)
+		u = math.clamp(vividness * u, 0, 100)
 	end
 
 	v = 100 - colorGrade
 
-	return LuvColor3Utils.toColor3({l, u, v})
+	return LuvColor3Utils.toColor3({ l, u, v })
 end
 
-return ColorGradeUtils
+return ColorGradeUtils

package/src/Shared/Swatch/ColorSwatch.lua

@@ -1,3 +1,4 @@
+--!strict
 --[=[
 	Provides variants of a given color. In painting a swatch contains different shades of the same color.
 	The same idea is here, except we can provide many variants of a color, with different vividness and brightness
@@ -9,23 +10,31 @@
 local require = require(script.Parent.loader).load(script)
 
 local BaseObject = require("BaseObject")
-local ValueObject = require("ValueObject")
 local Blend = require("Blend")
-local LuvColor3Utils = require("LuvColor3Utils")
 local ColorGradeUtils = require("ColorGradeUtils")
-local Rx = require("Rx")
+local LuvColor3Utils = require("LuvColor3Utils")
 local Observable = require("Observable")
+local Rx = require("Rx")
+local Signal = require("Signal")
+local ValueObject = require("ValueObject")
 
 local ColorSwatch = setmetatable({}, BaseObject)
 ColorSwatch.ClassName = "ColorSwatch"
 ColorSwatch.__index = ColorSwatch
 
-function ColorSwatch.new(color, vividness)
-	local self = setmetatable(BaseObject.new(), ColorSwatch)
+export type ColorSwatch = typeof(setmetatable(
+	{} :: {
+		_color: ValueObject.ValueObject<Color3>,
+		_vividness: ValueObject.ValueObject<number>,
+		Changed: Signal.Signal<Color3, Color3>,
+	},
+	{} :: typeof({ __index = ColorSwatch })
+)) & BaseObject.BaseObject
 
-	self._color = ValueObject.new(Color3.new(0, 0, 0))
-	self._maid:GiveTask(self._color)
+function ColorSwatch.new(color: ValueObject.Mountable<Color3>, vividness: number?): ColorSwatch
+	local self: ColorSwatch = setmetatable(BaseObject.new() :: any, ColorSwatch)
 
+	self._color = self._maid:Add(ValueObject.new(Color3.new(0, 0, 0)))
 	self._vividness = self._maid:Add(ValueObject.new(nil))
 
 	self:SetBaseColor(color)
@@ -36,13 +45,16 @@ function ColorSwatch.new(color, vividness)
 	return self
 end
 
-function ColorSwatch:GetGraded(colorGrade: number)
+function ColorSwatch:GetGraded(colorGrade: number): Color3
 	assert(type(colorGrade) == "number", "Bad colorGrade")
 
 	return ColorGradeUtils.getGradedColor(self._color.Value, colorGrade, self._vividness.Value)
 end
 
-function ColorSwatch:ObserveGraded(colorGrade, vividness)
+function ColorSwatch:ObserveGraded(
+	colorGrade: number | Observable.Observable<number>,
+	vividness
+): Observable.Observable<Color3>
 	assert(type(colorGrade) == "number" or Observable.isObservable(colorGrade), "Bad colorGrade")
 
 	local observeColorGrade = Blend.toPropertyObservable(colorGrade) or Rx.of(colorGrade)
@@ -55,60 +67,59 @@ function ColorSwatch:ObserveGraded(colorGrade, vividness)
 	end
 
 	return Rx.combineLatest({
-		colorGrade = observeColorGrade;
-		vividness = observeVividness;
-		baseColor = self:ObserveBaseColor()
+		colorGrade = observeColorGrade,
+		vividness = observeVividness,
+		baseColor = self:ObserveBaseColor(),
 	}):Pipe({
 		Rx.map(function(state)
 			return ColorGradeUtils.getGradedColor(state.baseColor, state.colorGrade, state.vividness)
-		end);
-	})
+		end) :: any,
+	}) :: any
 end
 
-function ColorSwatch:ObserveBaseColor()
+function ColorSwatch:ObserveBaseColor(): Observable.Observable<Color3>
 	return self._color:Observe()
 end
 
-function ColorSwatch:ObserveVividness()
+function ColorSwatch:ObserveVividness(): Observable.Observable<number>
 	return self._vividness:Observe()
 end
 
-function ColorSwatch:GetBaseColor()
+function ColorSwatch:GetBaseColor(): Color3
 	return self._color.Value
 end
 
-function ColorSwatch:GetBaseGrade()
+function ColorSwatch:GetBaseGrade(): number
 	return 100 - LuvColor3Utils.fromColor3(self._color.Value)[3]
 end
 
-function ColorSwatch:ObserveBaseGrade()
+function ColorSwatch:ObserveBaseGrade(): Observable.Observable<number>
 	return self._color:Observe():Pipe({
 		Rx.map(function(color)
 			return 100 - LuvColor3Utils.fromColor3(color)[3]
-		end)
+		end),
 	})
 end
 
-function ColorSwatch:ObserveBaseGradeBetween(low, high)
+function ColorSwatch:ObserveBaseGradeBetween(low: number, high: number): Observable.Observable<number>
 	return self:ObserveBaseGrade():Pipe({
 		Rx.map(function(grade)
 			return math.clamp(grade, low, high)
-		end)
+		end),
 	})
 end
 
-function ColorSwatch:GetVividness()
+function ColorSwatch:GetVividness(): number
 	return self._vividness.Value
 end
 
-function ColorSwatch:SetVividness(vividness)
+function ColorSwatch:SetVividness(vividness: number | Observable.Observable<number> | nil)
 	if type(vividness) == "number" then
 		self._vividness.Value = vividness
 		self._maid._currentVividness = nil
 		return
 	end
 
-
 	local observable = Blend.toPropertyObservable(vividness)
 	if not observable then
 		self._maid._currentVividness = nil
@@ -124,7 +135,7 @@ function ColorSwatch:SetVividness(vividness)
 	end)
 end
 
-function ColorSwatch:SetBaseColor(color)
+function ColorSwatch:SetBaseColor(color: ValueObject.Mountable<Color3>)
 	if typeof(color) == "Color3" then
 		self._color.Value = color
 		self._maid._currentColor = nil
@@ -146,4 +157,4 @@ function ColorSwatch:SetBaseColor(color)
 	end)
 end
 
-return ColorSwatch
+return ColorSwatch

package/src/Shared/Swatch/ColorSwatch.story.lua

@@ -2,103 +2,105 @@
 	@class ColorSwatch.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 Blend = require("Blend")
 local ColorSwatch = require("ColorSwatch")
+local Maid = require("Maid")
 
 return function(target)
 	local maid = Maid.new()
 
 	local function entry(color, text, isBaseColor)
 		return Blend.New "Frame" {
-			Name = "Entry";
-			Size = UDim2.new(0, 25, 0, 45);
-			BackgroundTransparency = 1;
+			Name = "Entry",
+			Size = UDim2.new(0, 25, 0, 45),
+			BackgroundTransparency = 1,
 
 			[Blend.Children] = {
 				Blend.New "Frame" {
-					BackgroundColor3 = color;
-					Size = UDim2.new(0, 25, 0, 25);
-				};
+					BackgroundColor3 = color,
+					Size = UDim2.new(0, 25, 0, 25),
+				},
 
 				Blend.New "TextLabel" {
-					Text = tostring(text);
-					Size = UDim2.new(1, 0, 0, 15);
-					Position = UDim2.new(0, 0, 1, 0);
-					AnchorPoint = Vector2.new(0, 1);
-					Font = Enum.Font.Code;
-					TextScaled = true;
+					Text = tostring(text),
+					Size = UDim2.new(1, 0, 0, 15),
+					Position = UDim2.new(0, 0, 1, 0),
+					AnchorPoint = Vector2.new(0, 1),
+					Font = Enum.Font.Code,
+					TextScaled = true,
 
 					[Blend.Children] = {
 						Blend.New "UIStroke" {
-							Color = Color3.new(0.6, 1, 0.6);
-							Thickness = isBaseColor and 3 or 0;
-						};
-					}
-				};
-			};
-		};
+							Color = Color3.new(0.6, 1, 0.6),
+							Thickness = isBaseColor and 3 or 0,
+						},
+					},
+				},
+			},
+		}
 	end
 
-
 	local function palette(color)
 		local grades = {}
 
 		local colorSwatch = ColorSwatch.new(color, 1)
 
-		for i=0, 100, 10 do
-			table.insert(grades, entry(colorSwatch:GetGraded(i), tostring(i), math.abs(colorSwatch:GetBaseGrade() - i) <= 5))
+		for i = 0, 100, 10 do
+			table.insert(
+				grades,
+				entry(colorSwatch:GetGraded(i), tostring(i), math.abs(colorSwatch:GetBaseGrade() - i) <= 5)
+			)
 		end
 
 		return Blend.New "Frame" {
-			Size = UDim2.new(1, 0, 0, 45);
+			Size = UDim2.new(1, 0, 0, 45),
 			[Blend.Children] = {
-				grades;
+				grades,
 				Blend.New "UIListLayout" {
-					Padding = UDim.new(0, 0);
-					HorizontalAlignment = Enum.HorizontalAlignment.Center;
-					VerticalAlignment = Enum.VerticalAlignment.Center;
-					FillDirection = Enum.FillDirection.Horizontal;
-				}
-			}
+					Padding = UDim.new(0, 0),
+					HorizontalAlignment = Enum.HorizontalAlignment.Center,
+					VerticalAlignment = Enum.VerticalAlignment.Center,
+					FillDirection = Enum.FillDirection.Horizontal,
+				},
+			},
 		}
 	end
 
-
 	maid:GiveTask((Blend.New "ScrollingFrame" {
-		Size = UDim2.new(1, 0, 1, 0);
-		Parent = target;
+		Size = UDim2.new(1, 0, 1, 0),
+		Parent = target,
 		[Blend.Children] = {
-			palette(Color3.new(0, 0, 0));
+			palette(Color3.new(0, 0, 0)),
 			-- palette(Color3.new(1, 1, 1));
 			-- palette(Color3.new(0.5, 0.5, 0.5));
-			palette(Color3.fromRGB(117, 117, 117));
-			palette(Color3.fromRGB(245, 238, 214));
-			palette(Color3.fromRGB(96, 58, 58));
-			palette(Color3.fromRGB(85, 170, 127));
-			palette(Color3.new(1, 0, 0));
-			palette(Color3.new(0, 1, 0));
-			palette(Color3.new(0, 0, 1));
-			palette(Color3.new(1, 0, 1));
-			palette(Color3.new(1, 1, 0));
-			palette(Color3.new(0, 1, 1));
+			palette(Color3.fromRGB(117, 117, 117)),
+			palette(Color3.fromRGB(245, 238, 214)),
+			palette(Color3.fromRGB(96, 58, 58)),
+			palette(Color3.fromRGB(85, 170, 127)),
+			palette(Color3.new(1, 0, 0)),
+			palette(Color3.new(0, 1, 0)),
+			palette(Color3.new(0, 0, 1)),
+			palette(Color3.new(1, 0, 1)),
+			palette(Color3.new(1, 1, 0)),
+			palette(Color3.new(0, 1, 1)),
 
 			Blend.New "UIListLayout" {
-				Padding = UDim.new(0, 5);
-				HorizontalAlignment = Enum.HorizontalAlignment.Center;
-				VerticalAlignment = Enum.VerticalAlignment.Top;
-				FillDirection = Enum.FillDirection.Vertical;
-			};
+				Padding = UDim.new(0, 5),
+				HorizontalAlignment = Enum.HorizontalAlignment.Center,
+				VerticalAlignment = Enum.VerticalAlignment.Top,
+				FillDirection = Enum.FillDirection.Vertical,
+			},
 
 			Blend.New "UIPadding" {
-				PaddingTop = UDim.new(0, 10);
-			};
-		}
+				PaddingTop = UDim.new(0, 10),
+			},
+		},
 	}):Subscribe())
 
 	return function()
 		maid:DoCleaning()
 	end
-end
+end