@quenty/colorpalette 10.22.0-canary.559.b31717d.0 → 10.22.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [10.22.0-canary.559.b31717d.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@10.21.3...@quenty/colorpalette@10.22.0-canary.559.b31717d.0) (2025-05-10)
+# [10.22.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@10.21.3...@quenty/colorpalette@10.22.0) (2025-05-10)
 
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quenty/colorpalette",
-  "version": "10.22.0-canary.559.b31717d.0",
+  "version": "10.22.0",
   "description": "Color palette system for Roblox",
   "keywords": [
     "Roblox",
@@ -28,18 +28,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@quenty/baseobject": "10.8.3",
-    "@quenty/blend": "12.19.0-canary.559.b31717d.0",
-    "@quenty/color3utils": "11.19.0-canary.559.b31717d.0",
-    "@quenty/colorpicker": "10.20.0-canary.559.b31717d.0",
-    "@quenty/loader": "10.8.3",
-    "@quenty/maid": "3.4.3",
-    "@quenty/math": "2.7.3",
-    "@quenty/observablecollection": "12.21.0-canary.559.b31717d.0",
-    "@quenty/rx": "13.18.0-canary.559.b31717d.0",
-    "@quenty/signal": "7.10.3",
-    "@quenty/table": "3.7.4",
-    "@quenty/valueobject": "13.18.0-canary.559.b31717d.0"
+    "@quenty/baseobject": "^10.9.0",
+    "@quenty/blend": "^12.19.0",
+    "@quenty/color3utils": "^11.19.0",
+    "@quenty/colorpicker": "^10.20.0",
+    "@quenty/loader": "^10.9.0",
+    "@quenty/maid": "^3.5.0",
+    "@quenty/math": "^2.7.3",
+    "@quenty/observablecollection": "^12.21.0",
+    "@quenty/rx": "^13.18.0",
+    "@quenty/signal": "^7.11.0",
+    "@quenty/table": "^3.8.0",
+    "@quenty/valueobject": "^13.18.0"
   },
-  "gitHead": "b31717d8c9f7620c457f5018a2affa760a65334a"
+  "gitHead": "20cff952c2cf06b959f2f11d2293bdef38acc604"
 }

package/src/Shared/ColorPalette.lua

@@ -393,4 +393,4 @@ function ColorPalette.DefineColorSwatch(self: ColorPalette, colorName, value)
 	return colorSwatch
 end
 
-return ColorPalette
+return ColorPalette

package/src/Shared/ColorPalette.story.lua

@@ -2,12 +2,13 @@
 	@class ColorPalette.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 ColorPickerStoryUtils = require("ColorPickerStoryUtils")
 local ColorPalette = require("ColorPalette")
+local ColorPickerStoryUtils = require("ColorPickerStoryUtils")
+local Maid = require("Maid")
 local ValueObject = require("ValueObject")
 
 local DARK_MODE_ENABLED = true
@@ -70,174 +71,182 @@ return function(target)
 		local percentMouseOver = Blend.Spring(mouseOver, 60)
 
 		return Blend.New "Frame" {
-			BackgroundColor3 = palette:ObserveColor("surface");
-			Size = UDim2.new(0, 250, 0, 100);
+			BackgroundColor3 = palette:ObserveColor("surface"),
+			Size = UDim2.new(0, 250, 0, 100),
 
 			[Blend.Children] = {
 				Blend.New "TextLabel" {
-					TextColor3 = palette:ObserveColor("text");
-					Text = labelText;
-					Font = Enum.Font.FredokaOne;
-					Size = UDim2.new(1, 0, 1, 0);
-					BackgroundTransparency = 1;
-					TextScaled = true;
-					ZIndex = 2;
-				};
+					TextColor3 = palette:ObserveColor("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 = palette:ObserveColor("surface", "border");
-					Thickness = 5;
-				};
+					Color = palette:ObserveColor("surface", "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 = palette:ObserveColor("accent", "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 = palette:ObserveColor("accent", "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);
+					Name = "Button",
+					Size = UDim2.new(0.5, 0, 0, 40),
+					AnchorPoint = Vector2.new(1, 1),
 					BackgroundColor3 = palette:GetSwatch("action"):ObserveGraded(
-						palette:ObserveModifiedGrade("action", "mouseOver", percentMouseOver));
-					Position = UDim2.new(1, 30, 1, 40);
-					ZIndex = 2;
+						palette:ObserveModifiedGrade("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 = palette:ObserveColor("action", palette:ObserveModifiedGrade(
-								palette:ObserveGradeOn("text", "action"),
-								"mouseOver",
-								percentMouseOver));
-							Text = "Action";
-							TextScaled = true;
-							Font = Enum.Font.FredokaOne;
-							Size = UDim2.new(1, 0, 1, 0);
-							BackgroundTransparency = 1;
-							ZIndex = 2;
-						};
+							TextColor3 = palette:ObserveColor(
+								"action",
+								palette:ObserveModifiedGrade(
+									palette:ObserveGradeOn("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 = palette:ObserveColor("action", palette:ObserveModifiedGrade(
-									palette:ObserveGradeOn("border", "action"),
-									"mouseOver",
-									percentMouseOver));
-								Thickness = 5;
-							};
-						};
+								Color = palette:ObserveColor(
+									"action",
+									palette:ObserveModifiedGrade(
+										palette:ObserveGradeOn("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 = palette:ObserveColor("accent", palette:ObserveGradeOn("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 = palette:ObserveColor(
+								"accent",
+								palette:ObserveGradeOn("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", palette:GetColorValue("surface"));
-				createPicker("Text", palette:GetColorValue("text"));
-				createPicker("Accent", palette:GetColorValue("accent"));
-				createPicker("Action", palette:GetColorValue("action"));
-			end);
+				createPicker("Surface", palette:GetColorValue("surface"))
+				createPicker("Text", palette:GetColorValue("text"))
+				createPicker("Accent", palette:GetColorValue("accent"))
+				createPicker("Action", palette:GetColorValue("action"))
+			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");
+					sampleGui("Light"),
 
 					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),
+			},
 
 			Blend.New "Frame" {
-				Name = "TestCustomColor";
-				Size = UDim2.new(0, 30, 0, 30);
-				BackgroundColor3 = palette:ObserveColor(Color3.new(0, 0, 1), "text");
-			};
-		}
+				Name = "TestCustomColor",
+				Size = UDim2.new(0, 30, 0, 30),
+				BackgroundColor3 = palette:ObserveColor(Color3.new(0, 0, 1), "text"),
+			},
+		},
 	}):Subscribe())
 
-
 	return function()
 		maid:DoCleaning()
 	end
-end
+end

package/src/Shared/Font/FontPalette.lua

@@ -255,4 +255,4 @@ function FontPalette._tryToGetFontFace(_self: FontPalette, fontFace: Font)
 	end
 end
 
-return FontPalette
+return FontPalette

package/src/Shared/Grade/ColorGradePalette.lua

@@ -116,18 +116,17 @@ end
 
 function ColorGradePalette:ObserveModified(gradeName, amount, multiplier)
 	return Rx.combineLatest({
-		grade = self:_observeGradeFromName(gradeName);
-		amount = self:_observeGradeFromName(amount);
-		multiplier = multiplier or 1;
+		grade = self:_observeGradeFromName(gradeName),
+		amount = self:_observeGradeFromName(amount),
+		multiplier = multiplier or 1,
 	}):Pipe({
 		Rx.map(function(state)
 			assert(type(state.grade) == "number", "Bad state.grade")
 			assert(type(state.amount) == "number", "Bad state.amount")
 			assert(type(state.multiplier) == "number", "Bad state.multiplier")
 
-
-			return state.grade + state.multiplier*state.amount
-		end);
+			return state.grade + state.multiplier * state.amount
+		end),
 	})
 end
 
@@ -141,9 +140,9 @@ function ColorGradePalette:ObserveOn(gradeName, newSurfaceName, baseSurfaceName)
 	end
 
 	return Rx.combineLatest({
-		grade = self:_observeGradeFromName(gradeName);
-		newSurfaceGrade = self:_observeGradeFromName(newSurfaceName);
-		baseSurfaceGrade = observeBaseSurfaceGrade;
+		grade = self:_observeGradeFromName(gradeName),
+		newSurfaceGrade = self:_observeGradeFromName(newSurfaceName),
+		baseSurfaceGrade = observeBaseSurfaceGrade,
 	}):Pipe({
 		Rx.map(function(state)
 			local difference = state.grade - state.baseSurfaceGrade
@@ -162,8 +161,9 @@ function ColorGradePalette:ObserveOn(gradeName, newSurfaceName, baseSurfaceName)
 			end
 
 			return finalGrade
-		end)
-	}), self._vividness[gradeName]
+		end),
+	}),
+		self._vividness[gradeName]
 end
 
 function ColorGradePalette:_observeGradeFromName(gradeName)
@@ -181,7 +181,7 @@ function ColorGradePalette:_observeGradeFromName(gradeName)
 				else
 					error("Bad grade value")
 				end
-			end)
+			end),
 		})
 	end
 
@@ -194,7 +194,7 @@ function ColorGradePalette:_observeGradeFromName(gradeName)
 	local colorOrObservable = Blend.toPropertyObservable(gradeName)
 	if colorOrObservable then
 		return colorOrObservable:Pipe({
-			Rx.map(ColorGradeUtils.getGrade)
+			Rx.map(ColorGradeUtils.getGrade),
 		})
 	end
 
@@ -209,8 +209,8 @@ function ColorGradePalette:ObserveDefaultSurfaceGrade()
 			else
 				return Rx.EMPTY
 			end
-		end)
+		end),
 	})
 end
 
-return ColorGradePalette
+return ColorGradePalette

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

@@ -157,4 +157,4 @@ function ColorSwatch:SetBaseColor(color: ValueObject.Mountable<Color3>)
 	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