simplify theme3 variable code and fix some issues

This commit is contained in:
Henry Jameson 2025-03-26 17:37:41 +02:00
parent 926f45df85
commit a2d9c4db6a
2 changed files with 14 additions and 16 deletions

View file

@ -112,10 +112,7 @@ export const colorFunctions = {
const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb
const amount = Number(amountArg) const amount = Number(amountArg)
const effectiveBackground = dynamicVars.lowerLevelBackground ?? const effectiveBackground = dynamicVars.lowerLevelBackground ?? color
dynamicVars.background ??
dynamicVars.inheritedBackground ??
staticVars[colorArg]
const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5 const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
const mod = isLightOnDark ? 1 : -1 const mod = isLightOnDark ? 1 : -1
return brightness(amount * mod, color).rgb return brightness(amount * mod, color).rgb

View file

@ -78,23 +78,24 @@ export const findColor = (color, { dynamicVars, staticVars }) => {
targetColor = { r, g, b } targetColor = { r, g, b }
} else if (variableSlot.startsWith('parent')) { } else if (variableSlot.startsWith('parent')) {
if (variableSlot === 'parent') { if (variableSlot === 'parent') {
const { r, g, b } = dynamicVars.lowerLevelBackground const { r, g, b } = dynamicVars.lowerLevelBackground ?? {}
targetColor = { r, g, b } targetColor = { r, g, b }
} else { } else {
const virtualSlot = variableSlot.replace(/^parent/, '') const virtualSlot = variableSlot.replace(/^parent/, '')
targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb
} }
} else { } else {
switch (variableSlot) { const staticVar = staticVars[variableSlot]
case 'inheritedBackground': const dynamicVar = dynamicVars[variableSlot]
targetColor = convert(dynamicVars.inheritedBackground).rgb if (!staticVar && !dynamicVar) {
break console.warn(dynamicVars, variableSlot, dynamicVars[variableSlot])
case 'background': console.warn(`Couldn't find variable "${variableSlot}", falling back to magenta. Variables are:
targetColor = convert(dynamicVars.background).rgb Static:
break ${JSON.stringify(staticVars, null, 2)}
default: Dynamic:
targetColor = convert(staticVars[variableSlot]).rgb ${JSON.stringify(dynamicVars, null, 2)}`)
} }
targetColor = convert(staticVar ?? dynamicVar ?? '#FF00FF').rgb
} }
if (modifier) { if (modifier) {
@ -120,7 +121,7 @@ export const findColor = (color, { dynamicVars, staticVars }) => {
Static: Static:
${JSON.stringify(staticVars, null, 2)} ${JSON.stringify(staticVars, null, 2)}
Dynamic: Dynamic:
${JSON.stringify(dynamicVars, null, 2)}`, e) ${JSON.stringify(dynamicVars, null, 2)}\nError: ${e}`)
} }
} }
@ -516,7 +517,7 @@ export const init = ({
.filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c)) .filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c))
} else if (liteMode) { } else if (liteMode) {
validInnerComponents = (component.validInnerComponentsLite || component.validInnerComponents || []) validInnerComponents = (component.validInnerComponentsLite || component.validInnerComponents || [])
} else if (component.name === 'Root' || component.states != null) { } else if (component.name === 'Root' || component.states != null || component.background?.includes('--parent')) {
validInnerComponents = component.validInnerComponents || [] validInnerComponents = component.validInnerComponents || []
} else { } else {
validInnerComponents = component validInnerComponents = component