@quenty/colorpalette 5.0.0-canary.331.7eefa75.0 → 5.0.0-canary.367.e9fdcbc.0

package/CHANGELOG.md

@@ -3,7 +3,117 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [5.0.0-canary.331.7eefa75.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.12.0...@quenty/colorpalette@5.0.0-canary.331.7eefa75.0) (2023-02-27)
+# [5.0.0-canary.367.e9fdcbc.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.23.0...@quenty/colorpalette@5.0.0-canary.367.e9fdcbc.0) (2023-06-05)
+
+**Note:** Version bump only for package @quenty/colorpalette
+
+
+
+
+
+# [4.23.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.22.0...@quenty/colorpalette@4.23.0) (2023-05-26)
+
+
+### Bug Fixes
+
+* Fix unknown font construction in FontPalette ([b14b679](https://github.com/Quenty/NevermoreEngine/commit/b14b6799e0313fda7cd9977be7921d3edaba7fb2))
+
+
+### Features
+
+* Initial refactor of guis to use ValueObject instead of ValueObject ([723aba0](https://github.com/Quenty/NevermoreEngine/commit/723aba0208cae7e06c9d8bf2d8f0092d042d70ea))
+
+
+
+
+
+# [4.22.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.21.0...@quenty/colorpalette@4.22.0) (2023-05-08)
+
+
+### Features
+
+* Add ColorGradeUtils.ensureGradeContrast(color, backing, amount) ([65a931b](https://github.com/Quenty/NevermoreEngine/commit/65a931b43b058c77585f1eb3b18b7614eb2a41cb))
+
+
+
+
+
+# [4.21.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.20.0...@quenty/colorpalette@4.21.0) (2023-04-10)
+
+**Note:** Version bump only for package @quenty/colorpalette
+
+
+
+
+
+# [4.20.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.19.1...@quenty/colorpalette@4.20.0) (2023-04-07)
+
+
+### Features
+
+* Add FontPalette:GetFontFaceValue(fontName) ([3411e11](https://github.com/Quenty/NevermoreEngine/commit/3411e116f2d48453a016d9dc15eab6ea64fb1bc4))
+
+
+
+
+
+## [4.19.1](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.19.0...@quenty/colorpalette@4.19.1) (2023-04-07)
+
+**Note:** Version bump only for package @quenty/colorpalette
+
+
+
+
+
+# [4.19.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.18.0...@quenty/colorpalette@4.19.0) (2023-04-06)
+
+**Note:** Version bump only for package @quenty/colorpalette
+
+
+
+
+
+# [4.18.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.17.0...@quenty/colorpalette@4.18.0) (2023-04-03)
+
+**Note:** Version bump only for package @quenty/colorpalette
+
+
+
+
+
+# [4.17.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.16.0...@quenty/colorpalette@4.17.0) (2023-03-31)
+
+**Note:** Version bump only for package @quenty/colorpalette
+
+
+
+
+
+# [4.16.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.15.0...@quenty/colorpalette@4.16.0) (2023-03-31)
+
+**Note:** Version bump only for package @quenty/colorpalette
+
+
+
+
+
+# [4.15.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.14.0...@quenty/colorpalette@4.15.0) (2023-03-06)
+
+**Note:** Version bump only for package @quenty/colorpalette
+
+
+
+
+
+# [4.14.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.13.0...@quenty/colorpalette@4.14.0) (2023-03-05)
+
+**Note:** Version bump only for package @quenty/colorpalette
+
+
+
+
+
+# [4.13.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.12.0...@quenty/colorpalette@4.13.0) (2023-02-27)
 
 **Note:** Version bump only for package @quenty/colorpalette
 

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2014-2022 Quenty
+Copyright (c) 2014-2023 James Onnen (Quenty)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quenty/colorpalette",
-  "version": "5.0.0-canary.331.7eefa75.0",
+  "version": "5.0.0-canary.367.e9fdcbc.0",
   "description": "Color palette system for Roblox",
   "keywords": [
     "Roblox",
@@ -28,17 +28,17 @@
     "access": "public"
   },
   "dependencies": {
-    "@quenty/baseobject": "6.1.0",
-    "@quenty/blend": "7.0.0-canary.331.7eefa75.0",
-    "@quenty/color3utils": "6.0.0-canary.331.7eefa75.0",
-    "@quenty/colorpicker": "5.0.0-canary.331.7eefa75.0",
-    "@quenty/loader": "6.1.0",
-    "@quenty/maid": "2.4.0",
-    "@quenty/math": "2.2.0",
-    "@quenty/rx": "8.0.0-canary.331.7eefa75.0",
-    "@quenty/signal": "2.3.0",
+    "@quenty/baseobject": "6.2.1",
+    "@quenty/blend": "7.0.0-canary.367.e9fdcbc.0",
+    "@quenty/color3utils": "6.0.0-canary.367.e9fdcbc.0",
+    "@quenty/colorpicker": "5.0.0-canary.367.e9fdcbc.0",
+    "@quenty/loader": "6.2.1",
+    "@quenty/maid": "2.5.0",
+    "@quenty/math": "3.0.0-canary.367.e9fdcbc.0",
+    "@quenty/rx": "7.11.0",
+    "@quenty/signal": "2.4.0",
     "@quenty/table": "3.2.0",
-    "@quenty/valueobject": "8.0.0-canary.331.7eefa75.0"
+    "@quenty/valueobject": "8.0.0-canary.367.e9fdcbc.0"
   },
-  "gitHead": "7eefa756f8bd892b1210349a8133d6d56992dffb"
+  "gitHead": "e9fdcbc6ea1d46e068bf42a08b833099e9005259"
 }

package/src/Shared/ColorPalette.lua

@@ -315,9 +315,7 @@ function ColorPalette:SetColor(colorName, color)
 		error(("No color grade with name %q"):format(colorName))
 	end
 
-	self._colorMaid[colorName] = Blend.mount(self._colorValues[colorName], {
-		Value = color;
-	})
+	self._colorMaid[colorName] = self._colorValues[colorName]:Mount(color)
 end
 
 function ColorPalette:SetVividness(gradeName, vividness)
@@ -327,21 +325,18 @@ function ColorPalette:SetVividness(gradeName, vividness)
 		error(("No vividness with name %q"):format(gradeName))
 	end
 
-	self._vividMaid[gradeName] = Blend.mount(self._vividnessValues[gradeName], {
-		Value = vividness;
-	})
+	self._vividMaid[gradeName] = self._vividnessValues[gradeName]:Mount(vividness)
 end
 
 function ColorPalette:SetColorGrade(gradeName, grade)
 	assert(type(gradeName) == "string", "Bad colorName")
+	assert(grade, "Bad grade")
 
 	if not self._colorGradeValues[gradeName] then
 		error(("No color grade with name %q"):format(gradeName))
 	end
 
-	self._gradeMaid[gradeName] = Blend.mount(self._colorGradeValues[gradeName], {
-		Value = grade;
-	})
+	self._gradeMaid[gradeName] = self._colorGradeValues[gradeName]:Mount(grade)
 end
 
 
@@ -355,11 +350,11 @@ function ColorPalette:DefineColorGrade(gradeName, gradeValue, vividnessValue)
 	assert(type(gradeName) == "string", "Bad gradeName")
 
 	if self._colorGradeValues[gradeName] then
-		warn(("Already defined grade of name %q"):format(gradeName))
+		warn(("[ColorPalette.DefineColorGrade] - Already defined grade of name %q"):format(gradeName))
 		return
 	end
 
-	local colorGrade = Instance.new("NumberValue")
+	local colorGrade = ValueObject.new(0, "number")
 	self._maid:GiveTask(colorGrade)
 
 	local vividness = ValueObject.new(nil)
@@ -371,7 +366,7 @@ function ColorPalette:DefineColorGrade(gradeName, gradeValue, vividnessValue)
 	self._vividnessValues[gradeName] = vividness
 
 	self:SetVividness(gradeName, vividnessValue)
-	self:SetColorGrade(gradeName, gradeValue)
+	self:SetColorGrade(gradeName, gradeValue or 0)
 
 	self.ColorGradeAdded:Fire(gradeName)
 
@@ -382,12 +377,11 @@ function ColorPalette:DefineColorSwatch(colorName, value)
 	assert(type(colorName) == "string", "Bad colorName")
 
 	if self._swatches[colorName] then
-		warn(("Already defined color of name %q"):format(colorName))
+		warn(("[ColorPalette.DefineColorGrade] -Already defined color of name %q"):format(colorName))
 		return
 	end
 
-	local colorValue = Instance.new("Color3Value")
-	colorValue.Value = value or Color3.new(0, 0, 0)
+	local colorValue = ValueObject.new(value or Color3.new(0, 0, 0), "Color3")
 	self._maid:GiveTask(colorValue)
 
 	local colorSwatch = ColorSwatch.new(colorValue)

package/src/Shared/ColorPalette.story.lua

@@ -8,6 +8,7 @@ local Maid = require("Maid")
 local Blend = require("Blend")
 local ColorPickerStoryUtils = require("ColorPickerStoryUtils")
 local ColorPalette = require("ColorPalette")
+local ValueObject = require("ValueObject")
 
 local DARK_MODE_ENABLED = false
 
@@ -61,8 +62,7 @@ return function(target)
 	end
 
 	local function sampleGui(labelText)
-		local mouseOver = Instance.new("NumberValue")
-		mouseOver.Value = 0
+		local mouseOver = ValueObject.new(0, "number")
 		maid:GiveTask(mouseOver)
 
 		local percentMouseOver = Blend.Spring(mouseOver, 60)

package/src/Shared/Font/FontPalette.lua

@@ -25,6 +25,7 @@ function FontPalette.new()
 	local self = setmetatable(BaseObject.new(), FontPalette)
 
 	self._fonts = {}
+	self._fontFaces = {}
 	self._defaultFontMap = {} -- [name] = Enum.Font.?
 
 	self.FontAdded = Signal.new() -- :Fire(name)
@@ -96,21 +97,38 @@ end
 function FontPalette:ObserveFontFace(fontName, weight, style)
 	assert(type(fontName) == "string", "Bad fontName")
 
+	if weight == nil and style == nil then
+		return self:GetFontFaceValue(fontName):Observe()
+	end
+
 	return Rx.combineLatest({
-		family = self:GetFontValue(fontName):Observe():Pipe({
-			Rx.map(function(fontEnum)
-				return Font.fromEnum(fontEnum).Family
-			end);
-		});
-		weight = weight or Enum.FontWeight.Regular;
-		style = style or Enum.FontStyle.Normal;
+		font = self:GetFontFaceValue(fontName):Observe();
+		weight = weight;
+		style = style;
 	}):Pipe({
 		Rx.map(function(state)
-			return Font.new(state.family, state.weight, state.style)
+			return Font.new(state.font.Family, state.weight or state.font.Weight, state.style or state.font.Style)
 		end);
 	})
 end
 
+--[=[
+	Gets a font value object for a given font.
+
+	@param fontName string
+	@return ValueObject<Enum.Font>
+]=]
+function FontPalette:GetFontFaceValue(fontName)
+	assert(type(fontName) == "string", "Bad fontName")
+
+	local fontValue = self._fontFaces[fontName]
+	if not fontValue then
+		error(("No font with name %q"):format(fontName))
+	end
+
+	return fontValue
+end
+
 --[=[
 	Gets a font value object for a given font.
 
@@ -120,12 +138,12 @@ end
 function FontPalette:GetFontValue(fontName)
 	assert(type(fontName) == "string", "Bad fontName")
 
-	local font = self._fonts[fontName]
-	if not font then
+	local fontValue = self._fonts[fontName]
+	if not fontValue then
 		error(("No font with name %q"):format(fontName))
 	end
 
-	return font
+	return fontValue
 end
 
 --[=[
@@ -140,27 +158,71 @@ end
 	Defines a new font into the palette which can be changed over time.
 
 	@param fontName string
-	@param font Font
-	@return ValueObject<Enum.Font>
+	@param defaultFont Enum.Font | Font
+	@return ValueObject<Enum.Font | Font>
 ]=]
-function FontPalette:DefineFont(fontName, font)
+function FontPalette:DefineFont(fontName, defaultFont)
 	assert(type(fontName) == "string", "Bad fontName")
-	assert(typeof(font) == "EnumItem", "Bad font")
+	assert(typeof(defaultFont) == "EnumItem" or typeof(defaultFont) == "Font", "Bad defaultFont")
 
 	if self._fonts[fontName] then
-		warn(("Already defined font of name %q"):format(fontName))
+		warn(("Already defined defaultFont of name %q"):format(fontName))
 		return
 	end
 
-	local fontValue = ValueObject.new(font)
+	local defaultFontEnum
+	local defaultFontFace
+	if typeof(defaultFont) == "EnumItem" then
+		defaultFontEnum = defaultFont
+		defaultFontFace = Font.fromEnum(defaultFont)
+	elseif typeof(defaultFont) == "Font" then
+		defaultFontEnum = defaultFont
+		defaultFontFace = defaultFont
+	else
+		error("Bad defaultFont")
+	end
+
+	local fontValue = ValueObject.new(defaultFontEnum)
 	self._maid:GiveTask(fontValue)
 
+	local fontFaceValue = ValueObject.new(defaultFontFace)
+	self._maid:GiveTask(fontFaceValue)
+
 	self._fonts[fontName] = fontValue
-	self._defaultFontMap[fontName] = font
+	self._fontFaces[fontName] = fontFaceValue
+	self._defaultFontMap[fontName] = defaultFont
+
+	self._maid:GiveTask(fontFaceValue.Changed:Connect(function(fontFace)
+		fontValue.Value = self:_tryToGetFontFace(fontFace)
+	end))
+
+	self._maid:GiveTask(fontValue.Changed:Connect(function(fontEnum)
+		-- Assume fontFace is set with something reasonable
+		if fontEnum ~= Enum.Font.Unknown then
+			local font = Font.fromEnum(fontEnum)
+			local current = fontFaceValue.Value
+			fontFaceValue.Value = Font.new(font.Family, current.Weight, current.Style)
+		end
+	end))
 
 	self.FontAdded:Fire(fontName)
 
 	return fontValue
 end
 
+function FontPalette:_tryToGetFontFace(fontFace)
+	local assetName = string.gmatch(fontFace.Family, "rbxasset://fonts/families/([%w]+).json$")()
+
+	local fontEnum
+	pcall(function()
+		fontEnum = Enum.Font[assetName]
+	end)
+
+	if fontEnum then
+		return fontEnum
+	else
+		return Enum.Font.Unknown
+	end
+end
+
 return FontPalette

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

@@ -53,8 +53,7 @@ return function(target)
 	dark:Add("mouseOver", -15)
 
 	local function sampleGui(labelText, gradePalette)
-		local mouseOver = Instance.new("NumberValue")
-		mouseOver.Value = 0
+		local mouseOver = ValueObject.new(0, "number")
 		maid:GiveTask(mouseOver)
 
 		local percentMouseOver = Blend.Spring(mouseOver, 60)

package/src/Shared/Grade/ColorGradeUtils.lua

@@ -1,4 +1,11 @@
 --[=[
+	Helps with color grades, which is the concept where the darkness of the color
+	goes from 0 to 100, with a grade of 100 being white, and a grade of 0 being
+	black.
+
+	Grades ensure a human-readable contrast value which means a grade contrast
+	of 70 will always meet accessibility standards.
+
 	@class ColorGradeUtils
 ]=]
 
@@ -8,6 +15,15 @@ local LuvColor3Utils = require("LuvColor3Utils")
 
 local ColorGradeUtils = {}
 
+--[=[
+	Adds to the grade and picks the direction to ensure the best amount of contrast.
+	May consider using [ColorGradeUtils.ensureGradeContrast] for a more background
+	aware contrast picker.
+
+	@param grade number
+	@param difference number
+	@return Color3
+]=]
 function ColorGradeUtils.addGrade(grade, difference)
 	local finalGrade = grade + difference
 
@@ -26,6 +42,48 @@ function ColorGradeUtils.addGrade(grade, difference)
 	return finalGrade
 end
 
+--[=[
+	Ensures the given contrast between the color and the backing, with
+	an adjustment to saturation to keep the UI loking good
+
+	@param color Color3
+	@param backing Color3
+	@param amount number -- Between 0 and 100
+	@return Color3
+]=]
+function ColorGradeUtils.ensureGradeContrast(color, backing, amount)
+	local l, u, v = unpack(LuvColor3Utils.fromColor3(color))
+	local _, _, bv = unpack(LuvColor3Utils.fromColor3(backing))
+
+	local grade = 100 - v
+	local backingGrade = 100 - bv
+
+	local rel = grade - backingGrade
+
+	-- Increase
+	if math.abs(rel) >= amount then
+		return color
+	end
+
+	local newRel = math.sign(rel)*amount
+
+	local newGrade = math.clamp(backingGrade + newRel, 0, 100)
+	local otherNewGrade = math.clamp(backingGrade - newRel, 0, 100)
+
+	local finalGrade
+	if math.abs(newGrade - backingGrade) > math.abs(otherNewGrade - backingGrade) then
+		finalGrade = newGrade
+	else
+		finalGrade = otherNewGrade
+	end
+
+	-- The further away from the original color the more we reduce vividness
+	local proportion = math.min(amount, math.abs(finalGrade - grade))/amount
+	u = math.clamp((1 - 0.5*proportion)*u, 0, 100)
+
+	return LuvColor3Utils.toColor3({l, u, 100 - finalGrade})
+end
+
 --[=[
 	Gets the grade for a given color
 
@@ -39,6 +97,14 @@ function ColorGradeUtils.getGrade(color)
 	return 100 - v
 end
 
+--[=[
+	Converts a color into a graded version of that color.
+
+	@param baseColor Color3
+	@param colorGrade number -- 0 to 100
+	@param vividness number | nil
+	@return Color3
+]=]
 function ColorGradeUtils.getGradedColor(baseColor, colorGrade, vividness)
 	assert(typeof(baseColor) == "Color3", "Bad baseColor")
 	assert(type(vividness) == "number" or vividness == nil, "Bad vividness")