hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add roundness, fix inputs

Browse source
This commit is contained in:
Henry Jameson 2024-02-13 02:09:43 +02:00
commit bcc5084409
33 changed files with 150 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/services/theme_data/theme_data_3.service.js
View file

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