This commit is contained in:
lx
2026-07-06 14:01:11 -04:00
commit c4f97d729d
16468 changed files with 935321 additions and 0 deletions
@@ -0,0 +1,8 @@
{
"language": {
"mode": "nonstrict"
},
"lint": {
"ImplicitReturn": "fatal"
}
}
@@ -0,0 +1,34 @@
--[[
The is a wrapper for the style provider for apps.
props:
style : table - Includes the name of the theme and font being used.
{
themeName : string - The name of the theme being used.
fontName : string - The name of the font being used.
}
]]
local CorePackages = game:GetService("CorePackages")
local ArgCheck = require(CorePackages.ArgCheck)
local Roact = require(CorePackages.Roact)
local UIBlox = require(CorePackages.UIBlox)
local StyleProvider = UIBlox.Style.Provider
local StylePalette = require(script.Parent.StylePalette)
local AppStyleProvider = Roact.Component:extend("AppStyleProvider")
function AppStyleProvider:render()
local style = self.props.style
ArgCheck.isNotNil(style, "style prop for AppStyleProvider")
local themeName = style.themeName
local fontName = style.fontName
local stylePalette = StylePalette.new()
stylePalette:updateTheme(themeName)
stylePalette:updateFont(fontName)
local appStyle = stylePalette:currentStyle()
return Roact.createElement(StyleProvider,{
style = appStyle,
}, self.props[Roact.Children])
end
return AppStyleProvider
@@ -0,0 +1,32 @@
return function()
local CorePackages = game:GetService("CorePackages")
local Roact = require(CorePackages.Roact)
local AppStyleProvider = require(script.Parent.AppStyleProvider)
local Constants = require(script.Parent.Constants)
local appStyle = {
themeName = Constants.ThemeName.Dark,
fontName = Constants.FontName.Gotham,
}
it("should create and destroy without errors", function()
local element = Roact.createElement("Frame")
local appStyleProvider = Roact.createElement(AppStyleProvider, {
style = appStyle,
},{
Element = element,
})
local instance = Roact.mount(appStyleProvider)
Roact.unmount(instance)
end)
it("should throw when style prop is nil", function()
local element = Roact.createElement("Frame")
local appStyleProvider = Roact.createElement(AppStyleProvider, {},{
Element = element,
})
expect(function()
local instance = Roact.mount(appStyleProvider)
Roact.unmount(instance)
end).to.throw()
end)
end
@@ -0,0 +1,23 @@
local Colors = {
--Common colors
Black = Color3.fromRGB(0, 0, 0),
White = Color3.fromRGB(255, 255, 255),
Green = Color3.fromRGB(0, 176, 111),
Red = Color3.fromRGB(247, 75, 82),
--Dark theme colors
Carbon = Color3.fromRGB(31, 33, 35),
Flint = Color3.fromRGB(57, 59, 61),
Graphite = Color3.fromRGB(101, 102, 104),
Obsidian = Color3.fromRGB(24, 25, 27),
Pumice = Color3.fromRGB(189, 190, 190),
Slate = Color3.fromRGB(35, 37, 39),
--Light theme colors
Alabaster = Color3.fromRGB(242, 244, 245),
Ash = Color3.fromRGB(234, 237, 239),
Chalk = Color3.fromRGB(216, 219, 222),
Smoke = Color3.fromRGB(96, 97, 98),
}
return Colors
@@ -0,0 +1,12 @@
local Constants = {}
Constants.ThemeName = {
Dark = "dark",
Light = "light",
}
Constants.FontName = {
Gotham = "gotham",
}
return Constants
@@ -0,0 +1,54 @@
local baseSize = 16
-- Nominal size conversion
-- https://confluence.rbx.com/display/PX/Font+Metrics
local nominalSizeFactor = 1.2
local font = {
BaseSize = baseSize * nominalSizeFactor,
Title = {
Font = Enum.Font.GothamBlack,
RelativeSize = 32 / baseSize,
RelativeMinSize = 24 / baseSize,
},
Header1 = {
Font = Enum.Font.GothamSemibold,
RelativeSize = 20 / baseSize,
RelativeMinSize = 16 / baseSize,
},
Header2 = {
Font = Enum.Font.GothamSemibold,
RelativeSize = 16 / baseSize,
RelativeMinSize = 12 / baseSize,
},
SubHeader1 = {
Font = Enum.Font.GothamSemibold,
RelativeSize = 16 / baseSize,
RelativeMinSize = 12 / baseSize,
},
Body = {
Font = Enum.Font.Gotham,
RelativeSize = 16 / baseSize,
RelativeMinSize = 12 / baseSize,
},
CaptionHeader = {
Font = Enum.Font.GothamSemibold,
RelativeSize = 12 / baseSize,
RelativeMinSize = 9 / baseSize,
},
CaptionSubHeader = {
Font = Enum.Font.GothamSemibold,
RelativeSize = 12 / baseSize,
RelativeMinSize = 9 / baseSize,
},
CaptionBody = {
Font = Enum.Font.Gotham,
RelativeSize = 12 / baseSize,
RelativeMinSize = 9 / baseSize,
},
Footer = {
Font = Enum.Font.GothamSemibold,
RelativeSize = 10 / baseSize,
RelativeMinSize = 8 / baseSize,
},
}
return font
@@ -0,0 +1,9 @@
return function()
it("should be valid font palette without errors", function()
local CorePackages = game:GetService("CorePackages")
local UIBlox = require(CorePackages.UIBlox)
local validateFont = UIBlox.Style.Validator.validateFont
local Gotham = require(script.Parent.Gotham)
assert(validateFont(Gotham))
end)
end
@@ -0,0 +1,20 @@
local CorePackages = game:GetService("CorePackages")
local ArgCheck = require(CorePackages.ArgCheck)
local Logging = require(CorePackages.Logging)
local UIBlox = require(CorePackages.UIBlox)
local validateFont = UIBlox.Style.Validator.validateFont
return function (fontName, defaultFont, fontMap)
local mappedFont
if fontName ~= nil and #fontName > 0 then
mappedFont = fontMap[string.lower(fontName)]
end
if mappedFont == nil then
mappedFont = fontMap[defaultFont]
Logging.warn(string.format("Unrecognized font name: `%s`", tostring(fontName)))
end
ArgCheck.assert(validateFont(mappedFont))
return mappedFont
end
@@ -0,0 +1,33 @@
return function()
local getFontFromName = require(script.Parent.getFontFromName)
local Constants = require(script.Parent.Parent.Constants)
it("should be able to get a font palette without errors", function()
local fontMap = {
[Constants.FontName.Gotham] = require(script.Parent.Gotham),
}
local fontTable = getFontFromName(Constants.FontName.Gotham, Constants.FontName.Gotham, fontMap)
expect(fontTable).to.be.a("table")
end)
it("should be able to get a font palette using default without errors", function()
local fontMap = {
[Constants.FontName.Gotham] = require(script.Parent.Gotham),
}
local fontTable = getFontFromName("sourceSans", Constants.FontName.Gotham, fontMap)
expect(fontTable).to.be.a("table")
end)
it("should throw the font palette is invalid", function()
expect(function()
local fontMap = {
[Constants.FontName.Gotham] = {
Font = {
Font = Enum.Font.Gotham,
RelativeSize = 1,
},
},
}
getFontFromName(Constants.FontName.Gotham, Constants.FontName.Gotham, fontMap)
end).to.throw()
end)
end
@@ -0,0 +1,49 @@
local getThemeFromName = require(script.Parent.Themes.getThemeFromName)
local getFontFromName = require(script.Parent.Fonts.getFontFromName)
local Constants = require(script.Parent.Constants)
local StylePalette = {}
StylePalette.__index = StylePalette
local DEFAULT_FONT = Constants.FontName.Gotham
local FONT_MAP = {
[Constants.FontName.Gotham] = require(script.Parent.Fonts.Gotham),
}
local DEFAULT_THEME = Constants.ThemeName.Light
local THEME_MAP = {
[Constants.ThemeName.Dark] = require(script.Parent.Themes.DarkTheme),
[Constants.ThemeName.Light] = require(script.Parent.Themes.LightTheme),
}
function StylePalette.new(style)
--By default a new style will be empty.
-- This will allow the font and theme to be merged independently even when one is empty.
local self = {}
if style ~= nil then
self.Font = style.Font
self.Theme = style.Theme
end
setmetatable(self, StylePalette)
return self
end
function StylePalette:updateFont(fontName)
self.Font = getFontFromName(fontName, DEFAULT_FONT, FONT_MAP)
end
function StylePalette:updateTheme(themeName)
self.Theme = getThemeFromName(themeName, DEFAULT_THEME, THEME_MAP)
end
function StylePalette:currentStyle()
local style = {
Font = self.Font,
Theme = self.Theme,
}
return style
end
return StylePalette
@@ -0,0 +1,58 @@
return function()
local CorePackages = game:GetService("CorePackages")
local UIBlox = require(CorePackages.UIBlox)
local StylePalette = require(script.Parent.StylePalette)
local validateStye = UIBlox.Style.Validator.validateStyle
it("should be able to create a style palette", function()
local stylePalette = StylePalette.new()
stylePalette:updateTheme("dark")
stylePalette:updateFont("gotham")
local appStyle = stylePalette:currentStyle()
expect(validateStye(appStyle)).equal(true)
end)
it("should be able to create a style palette and be able to update theme 1", function()
local stylePalette = StylePalette.new()
stylePalette:updateTheme("dark")
stylePalette:updateFont("gotham")
local appStyle = stylePalette:currentStyle()
expect(validateStye(appStyle)).equal(true)
stylePalette:updateTheme("light")
local newAppStyle = stylePalette:currentStyle()
expect(validateStye(newAppStyle)).equal(true)
end)
it("should be able to create a style palette and be able to update theme 2", function()
local stylePalette = StylePalette.new()
stylePalette:updateTheme("dark")
stylePalette:updateFont("gotham")
local appStyle = stylePalette:currentStyle()
expect(validateStye(appStyle)).equal(true)
stylePalette:updateFont("gotham")
local newAppStyle = stylePalette:currentStyle()
expect(validateStye(newAppStyle)).equal(true)
end)
it("should be able to create a style palette and be able to merge an old one in", function()
local stylePalette = StylePalette.new()
stylePalette:updateTheme("dark")
stylePalette:updateFont("gotham")
local appStyle = stylePalette:currentStyle()
expect(validateStye(appStyle)).equal(true)
local newstylePalette = StylePalette.new(stylePalette)
local newAppStyle = newstylePalette:currentStyle()
expect(validateStye(newAppStyle)).equal(true)
end)
it("should be able to create a empty style palette", function()
local stylePalette = StylePalette.new()
local appStyle = stylePalette:currentStyle()
expect(appStyle.Font).equal(nil)
expect(appStyle.Theme).equal(nil)
expect(validateStye(appStyle)).equal(false)
end)
end
@@ -0,0 +1,162 @@
local ThemesRoot = script.Parent
local StylesRoot = ThemesRoot.Parent
local Colors = require(StylesRoot.Colors)
local theme = {
BackgroundDefault = {
Color = Colors.Slate,
Transparency = 0,
},
BackgroundContrast = {
Color = Colors.Carbon,
Transparency = 0,
},
BackgroundMuted = {
Color = Colors.Obsidian,
Transparency = 0,
},
BackgroundUIDefault = {
Color = Colors.Flint,
Transparency = 0,
},
BackgroundUIContrast = {
Color = Colors.Black,
Transparency = 0.3, -- Alpha 0.7
},
BackgroundOnHover = {
Color = Colors.White,
Transparency = 0.9, -- Alpha 0.1
},
BackgroundOnPress = {
Color = Colors.Black,
Transparency = 0.7, -- Alpha 0.3
},
UIDefault = {
Color = Colors.Graphite,
Transparency = 0,
},
UIMuted = {
Color = Colors.Obsidian,
Transparency = 0.2, -- Alpha 0.8
},
UIEmphasis = {
Color = Colors.White,
Transparency = 0.7, -- Alpha 0.3
},
ContextualPrimaryDefault = {
Color = Colors.Green,
Transparency = 0,
},
ContextualPrimaryOnHover = {
Color = Colors.Green,
Transparency = 0,
},
ContextualPrimaryContent = {
Color = Colors.White,
Transparency = 0,
},
SystemPrimaryDefault = {
Color = Colors.White,
Transparency = 0,
},
SystemPrimaryOnHover = {
Color = Colors.White,
Transparency = 0,
},
SystemPrimaryContent = {
Color = Colors.Flint,
Transparency = 0,
},
SecondaryDefault = {
Color = Colors.White,
Transparency = 0.3, -- 0.7 Alpha
},
SecondaryOnHover = {
Color = Colors.White,
Transparency = 0,
},
SecondaryContent = {
Color = Colors.White,
Transparency = 0.3, -- 0.7 Alpha
},
IconDefault = {
Color = Colors.White,
Transparency = 0.3, -- 0.7 alpha
},
IconEmphasis = {
Color = Colors.White,
Transparency = 0,
},
IconOnHover = {
Color = Colors.White,
Transparency = 0,
},
TextEmphasis = {
Color = Colors.White,
Transparency = 0,
},
TextDefault = {
Color = Colors.Pumice,
Transparency = 0,
},
TextMuted = {
Color = Colors.White,
Transparency = 0.3, -- 0.7 Alpha
},
Divider = {
Color = Colors.White,
Transparency = 0.8, -- 0.2 Alpha
},
Overlay = {
Color = Colors.Black,
Transparency = 0.5, -- 0.5 Alpha
},
DropShadow = {
Color = Colors.Black,
Transparency = 0,
},
NavigationBar = {
Color = Colors.Carbon,
Transparency = 0,
},
PlaceHolder = {
Color = Colors.Flint,
Transparency = 0.5, -- 0.5 Alpha
},
OnlineStatus = {
Color = Colors.Green,
Transparency = 0,
},
OfflineStatus = {
Color = Colors.White,
Transparency = 0.3, -- 0.7 Alpha
},
Success = {
Color = Colors.Green,
Transparency = 0,
},
Alert = {
Color = Colors.Red,
Transparency = 0,
},
Badge = {
Color = Colors.White,
Transparency = 0,
},
BadgeContent = {
Color = Colors.Flint,
Transparency = 0,
},
}
return theme
@@ -0,0 +1,9 @@
return function()
it("should be a valid theme palette.", function()
local CorePackages = game:GetService("CorePackages")
local UIBlox = require(CorePackages.UIBlox)
local validateTheme = UIBlox.Style.Validator.validateTheme
local DarkTheme = require(script.Parent.DarkTheme)
assert(validateTheme(DarkTheme))
end)
end
@@ -0,0 +1,168 @@
local ThemesRoot = script.Parent
local StylesRoot = ThemesRoot.Parent
local LuaAppRoot = StylesRoot.Parent
local Colors = require(StylesRoot.Colors)
local GetFFlagLuaAppFixLightTheme = require(LuaAppRoot.Flags.GetFFlagLuaAppFixLightTheme)
local theme = {
BackgroundDefault = {
Color = Colors.Alabaster,
Transparency = 0,
},
BackgroundContrast = {
Color = Colors.Ash,
Transparency = 0,
},
BackgroundMuted = {
Color = Colors.Chalk,
Transparency = 0,
},
BackgroundUIDefault = {
Color = Colors.White,
Transparency = 0,
},
BackgroundUIContrast = {
Color = Colors.White,
Transparency = 0.1, -- Alpha 0.9
},
BackgroundOnHover = GetFFlagLuaAppFixLightTheme() and {
Color = Colors.Black,
Transparency = 0.9, -- Alpha 0.1
} or {
Color = Colors.White,
Transparency = 0.7, -- Alpha 0.3
},
BackgroundOnPress = {
Color = Colors.Black,
Transparency = 0.9, -- Alpha 0.1
},
UIDefault = {
Color = Colors.Pumice,
Transparency = 0,
},
UIMuted = {
Color = Colors.Black,
Transparency = 0.9, -- Alpha 0.1
},
UIEmphasis = {
Color = Colors.Black,
Transparency = 0.7, -- Alpha 0.3
},
ContextualPrimaryDefault = {
Color = Colors.Green,
Transparency = 0,
},
ContextualPrimaryOnHover = {
Color = Colors.Green,
Transparency = 0,
},
ContextualPrimaryContent = {
Color = Colors.White,
Transparency = 0,
},
SystemPrimaryDefault = {
Color = Colors.Flint,
Transparency = 0,
},
SystemPrimaryOnHover = {
Color = Colors.Flint,
Transparency = 0,
},
SystemPrimaryContent = {
Color = Colors.White,
Transparency = 0,
},
SecondaryDefault = {
Color = Colors.Black,
Transparency = 0.5, -- 0.5 Alpha
},
SecondaryOnHover = {
Color = Colors.Flint,
Transparency = 0,
},
SecondaryContent = {
Color = Colors.Black,
Transparency = 0.5, -- 0.5 Alpha
},
IconDefault = {
Color = Colors.Black,
Transparency = 0.4, -- 0.6 alpha
},
IconEmphasis = {
Color = Colors.Flint,
Transparency = 0,
},
IconOnHover = {
Color = Colors.Flint,
Transparency = 0,
},
TextEmphasis = {
Color = Colors.Flint,
Transparency = 0,
},
TextDefault = {
Color = Colors.Smoke,
Transparency = 0,
},
TextMuted = {
Color = Colors.Black,
Transparency = 0.4, -- 0.6 Alpha
},
Divider = {
Color = Colors.Pumice,
Transparency = 0,
},
Overlay = {
Color = Colors.Black,
Transparency = 0.7, -- 0.3 Alpha
},
DropShadow = {
Color = Colors.Black,
Transparency = 0,
},
NavigationBar = {
Color = Colors.White,
Transparency = 0,
},
PlaceHolder = {
Color = Colors.Chalk,
Transparency = 0.3, -- 0.7 Alpha
},
OnlineStatus = {
Color = Colors.Green,
Transparency = 0,
},
OfflineStatus = {
Color = Colors.Black,
Transparency = 0.5, -- 0.5 Alpha
},
Success = {
Color = Colors.Green,
Transparency = 0,
},
Alert = {
Color = Colors.Red,
Transparency = 0,
},
Badge = {
Color = Colors.Flint,
Transparency = 0,
},
BadgeContent = {
Color = Colors.White,
Transparency = 0,
},
}
return theme
@@ -0,0 +1,9 @@
return function()
it("should be a valid theme palette.", function()
local CorePackages = game:GetService("CorePackages")
local UIBlox = require(CorePackages.UIBlox)
local validateTheme = UIBlox.Style.Validator.validateTheme
local LightTheme = require(script.Parent.DarkTheme)
assert(validateTheme(LightTheme))
end)
end
@@ -0,0 +1,19 @@
local CorePackages = game:GetService("CorePackages")
local ArgCheck = require(CorePackages.ArgCheck)
local Logging = require(CorePackages.Logging)
local UIBlox = require(CorePackages.UIBlox)
local validateTheme = UIBlox.Style.Validator.validateTheme
return function (themeName, defaultTheme, themeMap)
local mappedTheme
if themeName ~= nil and #themeName > 0 then
mappedTheme = themeMap[string.lower(themeName)]
end
if mappedTheme == nil then
mappedTheme = themeMap[defaultTheme]
Logging.warn(string.format("Unrecognized theme name: `%s`", tostring(themeName)))
end
ArgCheck.assert(validateTheme(mappedTheme))
return mappedTheme
end
@@ -0,0 +1,33 @@
return function()
local getThemeFromName = require(script.Parent.getThemeFromName)
local Constants = require(script.Parent.Parent.Constants)
it("should be able to get a theme palette without errors", function()
local themeMap = {
[Constants.ThemeName.Dark] = require(script.Parent.DarkTheme),
}
local themeTable = getThemeFromName(Constants.ThemeName.Dark, Constants.ThemeName.Dark,themeMap)
expect(themeTable).to.be.a("table")
end)
it("should be able to get a theme palette using default without errors", function()
local themeMap = {
[Constants.ThemeName.Dark] = require(script.Parent.DarkTheme),
}
local themeTable = getThemeFromName("classic", Constants.ThemeName.Dark, themeMap)
expect(themeTable).to.be.a("table")
end)
it("should throw with invalid theme palette", function()
expect(function()
local themeMap = {
[Constants.ThemeName.Dark] = {
Background = {
Color = Color3.fromRGB(0, 0, 0),
Transparency = 0,
},
}
}
getThemeFromName(Constants.ThemeName.Dark, Constants.ThemeName.Dark, themeMap)
end).to.throw()
end)
end