StudioColor

StudioColor.lua

--!strict


--> Packages ------------------------------------------------------------------------------------------
local Fusion = require(--[[Put path to Fusion module here.]])
local Value, peek, Computed = Fusion.Value, Fusion.peek, Fusion.Computed
-------------------------------------------------------------------------------------------------------


--> Types ---------------------------------------------------------------------------------------------
type ThemeColorType = "WarningText" | "ScriptKeyword" | "BrightText" | "InfoBarWarningBackground" | "OnboardingShadow" | 
"ViewPortBackground" | "OnboardingCover" | "CategoryItem" | "DiffLineNumAdditionBackground" | "AICOOverlayButtonBackgroundHover" | 
"ScriptString" | "ScrollBarBackground" | "ScriptMatchingWordSelectionBackground" | "ScriptInformation" | 
"Light" | "ScriptLuauKeyword" | "TitlebarText" | "ScriptWhitespace" | "SensitiveText" | "Tooltip" | "CurrentMarker" | 
"Titlebar" | "FilterButtonAccent" | "ScriptBracket" | "HeaderSection" | "DebuggerCurrentLine" | "ScriptLocal" | 
"ScrollBar" | "InputFieldBorder" | "ScriptError" | "DiffTextAdditionBackground" | "DiffTextSeparatorBackground" | 
"ButtonBorder" | "ScriptText" | "AICOOverlayButtonBackground" | "ScriptSelf" | "ScriptFunctionName" | 
"DiffTextNoChange" | "ScriptSelectionBackground" | "InfoBarWarningText" | "DiffFilePathBorder" | 
"ScriptNil" | "ScriptProperty" | "Button" | "MainButton" | "FilterButtonChecked" | "DimmedText" | "ScriptMethod" | 
"DiffLineNum" | "ScriptFunction" | "ScriptOperator" | "DialogMainButtonText" | "ScriptSideWidget" | 
"DialogButtonBorder" | "TableItem" | "ButtonText" | "RibbonTab" | "CheckedFieldBorder" | "DebuggerErrorLine" | 
"StatusBar" | "AICOOverlayText" | "RibbonButton" | "DialogButton" | "InfoText" | "DialogMainButton" | "SubText" | 
"EmulatorBar" | "DiffTextDeletion" | "DiffTextNoChangeBackground" | "Border" | "ChatModeratedMessageColor" | 
"DiffTextHunkInfo" | "Notification" | "Item" | "ChatOutgoingBgColor" | "ChatIncomingTextColor" | "MainText" | 
"ChatIncomingBgColor" | "ScriptBool" | "CheckedFieldIndicator" | "DiffLineNumDeletionBackground" | 
"FilterButtonHover" | "DiffLineNumSeparatorBackground" | "ScriptEditorCurrentLine" | "InputFieldBackground" | 
"DiffTextAddition" | "RibbonTabTopBar" | "ChatOutgoingTextColor" | "Dropdown" | "ScriptRuler" | "GameSettingsTableItem" | 
"DiffTextDeletionBackground" | "DiffFilePathText" | "DropShadow" | "ScriptTodo" | "OnboardingHighlight" | 
"Mid" | "Midlight" | "Tab" | "TabBar" | "Shadow" | "ScriptComment" | "ScriptHint" | "ScriptBuiltInFunction" | "DiffFilePathBackground" | 
"ScriptWarning" | "AICOOverlayButtonBackgroundPressed" | "CheckedFieldBackground" | "DialogButtonText" | 
"DocViewCodeBackground" | "ScriptNumber" | "DiffLineNumNoChangeBackground" | "ScriptFindSelectionBackground" | 
"ColorPickerFrame" | "ScriptSelectionText" | "FilterButtonDefault" | "GameSettingsTooltip" | "ErrorText" | 
"EmulatorDropDown" | "ScriptBackground" | "FilterButtonBorder" | "MainBackground" | "Separator" | "LinkText" | 
"Dark" | "AttributeCog" | "FilterButtonBorderAlt"

type ThemeModifier = "Hover" | "Default" | "Selected" | "Disabled" | "Pressed"

type StudioColors = {
	[ ThemeColorType ]: {
		[ ThemeModifier ]: Color3
	}
}
-------------------------------------------------------------------------------------------------------


--> Variables -----------------------------------------------------------------------------------------
local StudioColorsValue = Value({})

local Studio = settings().Studio
local ThemeColors = Enum.StudioStyleGuideColor:GetEnumItems()
local ThemeModifiers = Enum.StudioStyleGuideModifier:GetEnumItems()
-------------------------------------------------------------------------------------------------------


--> Private Functions ---------------------------------------------------------------------------------
function SetTheme()
	local theme = Studio.Theme :: StudioTheme
	local colors = {}
	
	for _,colorType in ThemeColors do
		local colorTypeName = colorType.Name
		colors[colorTypeName] = {}
		
		for _,modifier in ThemeModifiers do
			colors[colorTypeName][modifier.Name] = theme:GetColor(colorType, modifier)
		end
	end
	
	StudioColorsValue:set(colors, true)
end
-------------------------------------------------------------------------------------------------------

SetTheme()
Studio.ThemeChanged:Connect(SetTheme)

return {
	new = function(
		themeType: (ThemeColorType | Fusion.Value<ThemeColorType | string>),
		themeModifier: (ThemeModifier | Fusion.Value<ThemeModifier | string>)?
	)
		return Computed(function(use)
			local _themeType = (typeof(themeType) == "table" and themeType["type"] == "State") and use(themeType) or themeType
			local _themeModifier = (typeof(themeModifier) == "table" and themeModifier["type"] == "State") and use(themeModifier) or themeModifier
			
			return use(StudioColorsValue)[_themeType][_themeModifier or "Default"]
		end)
	end,
	
	peekAll = function(): StudioColors
		return peek(StudioColorsValue) :: StudioColors
	end,
}

Usage.lua

local Fusion = require(--[[Put path to Fusion module here.]])
local New, Tween, Computed = Fusion.New, Fusion.Tween, Fusion.Computed
local StudioColor = require(--[[Put path to StudioColor module here.]])

-- Example 1 | .new().
New "Frame" {
    BackgroundColor3 = StudioColor.new("MainBackground")
}

-- Example 2 | .new() with modifier.
New "TextBox" {
    BackgroundColor3 = StudioColor.new("InputFieldBackground", "Disabled")
}

-- Example 3 | .peekAll().
local state = Value("Default")
New "TextBox" {
    BackgroundColor3 = Tween(Computed(function(use)
        return StudioColor.peekAll()["InputFieldBorder"][use(state)]
    end), TweenInfo.new(.25)),
  
    [OnEvent "MouseEnter"] = function() state:set("Hover") end,
    [OnEvent "MouseLeave"] = function() state:set("Default") end,
}

-- Example 4 | A shorter alternative for Example 3. (state can be directly passed into `StudioColor.new`).
local state = Value("Default")
New "TextBox" {
    BackgroundColor3 = Tween(StudioColor.new("InputFieldBorder", state), TweenInfo.new(.25)),
  
    [OnEvent "MouseEnter"] = function() state:set("Hover") end,
    [OnEvent "MouseLeave"] = function() state:set("Default") end,
}