You can write your topic however you want, but you need to answer these questions:
- What do you want to achieve? Keep it simple and clear!
I’m trying to make a theme builder script.
- What is the issue? Include screenshots / videos if possible!
Whenever I pass through a Fusion Color3 State variable with null safety, it still thinks the variable is null when I pass the Color3 state variable through an assert() alternative it errors “Error occured, no output from Lua.”
- What solutions have you tried so far? Did you look for solutions on the Developer Hub?
I read that it was used for ROBLOX Locked objects, but I don’t think thats the problem here…?
Here’s how its set up:
color palette maker script:
Color Palette maker script:
local CorePalette = require(script.palettes.core_palette).CorePalette
--[[
*
* Represents a Material color scheme, a mapping of color roles to colors.
]]
--@majdTRM
local function declare(conexp: true | string)
if conexp ~= true then error(conexp) end
end
local Scheme
do
Scheme = setmetatable({}, {
__tostring = function()
return "Scheme"
end,
})
Scheme.__index = Scheme
function Scheme.new(...)
local self = setmetatable({}, Scheme)
return self:constructor(...) or self
end
function Scheme:constructor(Colors)
self.Colors = Colors
end
function Scheme:light(color3)
declare(color3 or `Required Color3 property, got nil`)
local core = CorePalette:of(color3)
return Scheme.new({
primary = core.a1:tone(40),
onPrimary = core.a1:tone(100),
primaryContainer = core.a1:tone(90),
onPrimaryContainer = core.a1:tone(10),
secondary = core.a2:tone(40),
onSecondary = core.a2:tone(100),
secondaryContainer = core.a2:tone(90),
onSecondaryContainer = core.a2:tone(10),
tertiary = core.a3:tone(40),
onTertiary = core.a3:tone(100),
tertiaryContainer = core.a3:tone(90),
onTertiaryContainer = core.a3:tone(10),
error = core.error:tone(40),
onError = core.error:tone(100),
errorContainer = core.error:tone(90),
onErrorContainer = core.error:tone(10),
background = core.n1:tone(99),
onBackground = core.n1:tone(10),
surface = core.n1:tone(99),
onSurface = core.n1:tone(10),
surfaceVariant = core.n2:tone(90),
onSurfaceVariant = core.n2:tone(30),
outline = core.n2:tone(50),
shadow = core.n1:tone(0),
inverseSurface = core.n1:tone(20),
inverseOnSurface = core.n1:tone(95),
inversePrimary = core.a1:tone(80),
}).Colors
end
function Scheme:dark(color3)
declare(color3 or `Required Color3 property, got nil`)
local core = CorePalette:of(color3)
return Scheme.new({
primary = core.a1:tone(80),
onPrimary = core.a1:tone(20),
primaryContainer = core.a1:tone(30),
onPrimaryContainer = core.a1:tone(90),
secondary = core.a2:tone(80),
onSecondary = core.a2:tone(20),
secondaryContainer = core.a2:tone(30),
onSecondaryContainer = core.a2:tone(90),
tertiary = core.a3:tone(80),
onTertiary = core.a3:tone(20),
tertiaryContainer = core.a3:tone(30),
onTertiaryContainer = core.a3:tone(90),
error = core.error:tone(80),
onError = core.error:tone(20),
errorContainer = core.error:tone(30),
onErrorContainer = core.error:tone(80),
background = core.n1:tone(10),
onBackground = core.n1:tone(90),
surface = core.n1:tone(10),
onSurface = core.n1:tone(90),
surfaceVariant = core.n2:tone(30),
onSurfaceVariant = core.n2:tone(80),
outline = core.n2:tone(60),
shadow = core.n1:tone(0),
inverseSurface = core.n1:tone(90),
inverseOnSurface = core.n1:tone(20),
inversePrimary = core.a1:tone(40),
}).Colors
end
end
local CustomColorGroup
do
CustomColorGroup = setmetatable({}, {
__tostring = function()
return "CustomColorGroup"
end,
})
CustomColorGroup.__index = CustomColorGroup
function CustomColorGroup.new(...)
local self = setmetatable({}, CustomColorGroup)
return self:constructor(...) or self
end
function CustomColorGroup:constructor(Colors)
self.Colors = Colors
end
function CustomColorGroup:light(color3)
declare(color3 or `Required Color3 property, got nil`)
local core = CorePalette:of(color3)
local tones = core.a1
return CustomColorGroup.new({
color = tones:tone(40),
onColor = tones:tone(100),
colorContainer = tones:tone(90),
onColorContainer = tones:tone(10),
})
end
function CustomColorGroup:dark(color3)
declare(color3 or `Required Color3 property, got nil`)
local core = CorePalette:of(color3)
local tones = core.a1
return CustomColorGroup.new({
color = tones:tone(80),
onColor = tones:tone(20),
colorContainer = tones:tone(30),
onColorContainer = tones:tone(90),
})
end
end
return {
default = Scheme,
CustomColorGroup = CustomColorGroup,
}
theme maker script:
Theme maker script which is only passed with an empty table ({})
local Dependencies = script.Parent.Parent.Parent.Dependencies
local Fusion = require(Dependencies.Fusion)
local function Theme(propertyTable: {fontFamily: number?, colorSchemeOf: Fusion.Value<Color3>?, contrast: Fusion.Value<string>?})
local Motion = require(script.Parent.Parent.Components.motion.motion)
local Bezier = Motion.bezier
local Theme = script.Parent.Parent.Theming
local material_color = require(Theme["material-color"])
local material_typography = require(Theme["material-type"])
if not propertyTable.colorSchemeOf then
propertyTable.colorSchemeOf = Fusion.Value(Color3.fromHex("#6750A4"))
end
if not propertyTable.contrast then
propertyTable.contrast = Fusion.Value("dark")
end
--so I can see the error
local to = material_color.default[propertyTable.contrast:get()](material_color.default, propertyTable.colorSchemeOf:get())
local ColorThemeDataState = Fusion.Computed(function()
local ok, msg = pcall(function()
material_color.default[propertyTable.contrast:get()](material_color.default, propertyTable.colorSchemeOf:get())
end)
if not ok then
-- warn(msg)
return nil;
end
return msg;
end)
local TypographyThemeDataState = Fusion.Computed(function()
return material_typography({fontFamily = propertyTable.fontFamily or 12187365364})
end)
local motionTheme = {
duration = {
short1 = 0.05,
short2 = 0.1,
short3 = 0.15,
short4 = 0.2,
medium1 = 0.25,
medium2 = 0.3,
medium3 = 0.35,
medium4 = 0.4,
long1 = 0.45,
long2 = 0.5,
long3 = 0.55,
long4 = 0.6,
extra_long1 = 0.7,
extra_long2 = 0.8,
extra_long3 = 0.9,
extra_long4 = 1,
},
easing = {
linear = Bezier(0,0,1,1),
standard = Bezier(0.2,0,0,1),
standard_accelerate = Bezier(0.3,0,1,1),
standard_decelerate = Bezier(0,0,0,1),
emphasized = Bezier(0.3,0,0,1),
emphasized_decelerate = Bezier(0.05,0.7,0.1,1),
emphasized_accelerate = Bezier(0.3,0,0.8,0.15),
legacy = Bezier(0.4,0,0.2,1),
legacy_decelerate = Bezier(0.0,0,0.2,1),
legacy_accelerate = Bezier(0.4,0,1.0,1),
}
}
return table.freeze {
textTheme = TypographyThemeDataState,
colorScheme = ColorThemeDataState,
materialMotionTheme = motionTheme
}
end
return Theme