|
|
@ -484,9 +484,20 @@ export const init = (extraRuleset, palette) => {
|
|
|
|
})
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
computed[selector] = computed[selector] || {}
|
|
|
|
computed[selector] = computed[selector] || {}
|
|
|
|
|
|
|
|
let addRuleNeeded = false
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// TODO: DEFAULT TEXT COLOR
|
|
|
|
|
|
|
|
const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
|
|
|
computedDirectives.shadow != null ||
|
|
|
|
|
|
|
|
computedDirectives.roundness != null
|
|
|
|
|
|
|
|
) {
|
|
|
|
|
|
|
|
addRuleNeeded = true
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// TODO make background non-mandatory
|
|
|
|
|
|
|
|
if (computedDirectives.background) {
|
|
|
|
if (computedDirectives.background) {
|
|
|
|
|
|
|
|
addRuleNeeded = true
|
|
|
|
let inheritRule = null
|
|
|
|
let inheritRule = null
|
|
|
|
const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))
|
|
|
|
const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))
|
|
|
|
const lastVariantRule = variantRules[variantRules.length - 1]
|
|
|
|
const lastVariantRule = variantRules[variantRules.length - 1]
|
|
|
@ -501,9 +512,6 @@ export const init = (extraRuleset, palette) => {
|
|
|
|
const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true)
|
|
|
|
const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true)
|
|
|
|
const inheritedBackground = computed[inheritSelector].background
|
|
|
|
const inheritedBackground = computed[inheritSelector].background
|
|
|
|
|
|
|
|
|
|
|
|
// TODO: DEFAULT TEXT COLOR
|
|
|
|
|
|
|
|
const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
dynamicVars.inheritedBackground = inheritedBackground
|
|
|
|
dynamicVars.inheritedBackground = inheritedBackground
|
|
|
|
|
|
|
|
|
|
|
|
const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb
|
|
|
|
const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb
|
|
|
@ -520,7 +528,17 @@ export const init = (extraRuleset, palette) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
stacked[selector] = blend
|
|
|
|
stacked[selector] = blend
|
|
|
|
computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
|
|
|
|
computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!stacked[selector]) {
|
|
|
|
|
|
|
|
computedDirectives.background = 'transparent'
|
|
|
|
|
|
|
|
computedDirectives.opacity = 0
|
|
|
|
|
|
|
|
stacked[selector] = lowerLevelComputedBackground
|
|
|
|
|
|
|
|
computed[selector].background = { ...lowerLevelComputedBackground, a: 0 }
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (addRuleNeeded) {
|
|
|
|
addRule({
|
|
|
|
addRule({
|
|
|
|
selector,
|
|
|
|
selector,
|
|
|
|
component: component.name,
|
|
|
|
component: component.name,
|
|
|
@ -530,7 +548,6 @@ export const init = (extraRuleset, palette) => {
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
|
|
|
|
innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
|
|
|
|
// const tt1 = performance.now()
|
|
|
|
// const tt1 = performance.now()
|
|
|
@ -566,6 +583,11 @@ export const init = (extraRuleset, palette) => {
|
|
|
|
if (rule.component !== 'Root') {
|
|
|
|
if (rule.component !== 'Root') {
|
|
|
|
directives = Object.entries(rule.directives).map(([k, v]) => {
|
|
|
|
directives = Object.entries(rule.directives).map(([k, v]) => {
|
|
|
|
switch (k) {
|
|
|
|
switch (k) {
|
|
|
|
|
|
|
|
case 'roundness': {
|
|
|
|
|
|
|
|
return ' ' + [
|
|
|
|
|
|
|
|
'--roundness: ' + v + 'px'
|
|
|
|
|
|
|
|
].join(';\n ')
|
|
|
|
|
|
|
|
}
|
|
|
|
case 'shadow': {
|
|
|
|
case 'shadow': {
|
|
|
|
return ' ' + [
|
|
|
|
return ' ' + [
|
|
|
|
'--shadow: ' + getCssShadow(v),
|
|
|
|
'--shadow: ' + getCssShadow(v),
|
|
|
@ -574,6 +596,12 @@ export const init = (extraRuleset, palette) => {
|
|
|
|
].join(';\n ')
|
|
|
|
].join(';\n ')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
case 'background': {
|
|
|
|
case 'background': {
|
|
|
|
|
|
|
|
if (v === 'transparent') {
|
|
|
|
|
|
|
|
return [
|
|
|
|
|
|
|
|
'background-color: ' + v,
|
|
|
|
|
|
|
|
' --background: ' + v
|
|
|
|
|
|
|
|
].join(';\n')
|
|
|
|
|
|
|
|
}
|
|
|
|
const color = cssColorString(computed[ruleToSelector(rule, true)].background, rule.directives.opacity)
|
|
|
|
const color = cssColorString(computed[ruleToSelector(rule, true)].background, rule.directives.opacity)
|
|
|
|
return [
|
|
|
|
return [
|
|
|
|
'background-color: ' + color,
|
|
|
|
'background-color: ' + color,
|
|
|
|