@quenty/colorpalette 10.21.4-canary.559.9f38947.0 → 10.22.0-canary.559.b31717d.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.21.4-canary.559.9f38947.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@10.21.3...@quenty/colorpalette@10.21.4-canary.559.9f38947.0) (2025-05-10)
+# [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)
 
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quenty/colorpalette",
-  "version": "10.21.4-canary.559.9f38947.0",
+  "version": "10.22.0-canary.559.b31717d.0",
   "description": "Color palette system for Roblox",
   "keywords": [
     "Roblox",
@@ -28,18 +28,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@quenty/baseobject": "10.8.4-canary.559.9f38947.0",
-    "@quenty/blend": "12.18.4-canary.559.9f38947.0",
-    "@quenty/color3utils": "11.18.4-canary.559.9f38947.0",
-    "@quenty/colorpicker": "10.19.4-canary.559.9f38947.0",
-    "@quenty/loader": "10.8.4-canary.559.9f38947.0",
-    "@quenty/maid": "3.4.4-canary.559.9f38947.0",
+    "@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.20.4-canary.559.9f38947.0",
-    "@quenty/rx": "13.17.4-canary.559.9f38947.0",
-    "@quenty/signal": "7.10.4-canary.559.9f38947.0",
-    "@quenty/table": "3.7.5-canary.559.9f38947.0",
-    "@quenty/valueobject": "13.17.4-canary.559.9f38947.0"
+    "@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"
   },
-  "gitHead": "9f38947767d202411936a5c98898033df5865da0"
+  "gitHead": "b31717d8c9f7620c457f5018a2affa760a65334a"
 }

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,13 +2,12 @@
 	@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 ColorPalette = require("ColorPalette")
 local ColorPickerStoryUtils = require("ColorPickerStoryUtils")
-local Maid = require("Maid")
+local ColorPalette = require("ColorPalette")
 local ValueObject = require("ValueObject")
 
 local DARK_MODE_ENABLED = true
@@ -71,182 +70,174 @@ 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,17 +116,18 @@ 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
 
@@ -140,9 +141,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
@@ -161,9 +162,8 @@ 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,14 +2,13 @@
 	@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 ColorPickerStoryUtils = require("ColorPickerStoryUtils")
 local ColorSwatch = require("ColorSwatch")
-local Maid = require("Maid")
+local ColorPickerStoryUtils = require("ColorPickerStoryUtils")
 local ValueObject = require("ValueObject")
 
 return function(target)
@@ -60,173 +59,163 @@ 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,105 +2,103 @@
 	@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