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

shadow slots work + minor fixes

Browse source
This commit is contained in:
Henry Jameson 2024-02-21 22:18:56 +02:00
commit 8a21594dbc
10 changed files with 153 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/services/theme_data/css_utils.js
View file

@ -2,6 +2,26 @@ import { convert } from 'chromatism'
import { rgba2css } from '../color_convert/color_convert.js'
export const parseCssShadow = (text) => {
const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0]
const inset = /inset/.exec(text)?.[0]
const color = text.replace(dimensions, '').replace(inset, '')
const [x, y, blur = 0, spread = 0] = dimensions.split(/ /).filter(x => x).map(x => x.trim())
const isInset = inset?.trim() === 'inset'
console.log(color.trim())
const colorString = color.split(/ /).filter(x => x).map(x => x.trim())[0]
return {
x,
y,
blur,
spread,
inset: isInset,
color: colorString
}
}
export const getCssColorString = (color, alpha) => rgba2css({ ...convert(color).rgb, a: alpha })
export const getCssShadow = (input, usesDropShadow) => {

29
src/services/theme_data/theme2_to_theme3.js
View file

@ -100,6 +100,8 @@ export const temporary = new Set([
export const temporaryColors = {}
export const convertTheme2To3 = (data) => {
data.colors.accent = data.colors.accent || data.colors.link
data.colors.link = data.colors.link || data.colors.accent
const generateRoot = () => {
const directives = {}
basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + data.colors[key] })
@ -111,7 +113,8 @@ export const convertTheme2To3 = (data) => {
const convertRadii = () => {
const newRules = []
radiiKeys.forEach(key => {
Object.keys(data.radii).forEach(key => {
if (!radiiKeys.has(key) || data.radii[key] === undefined) return null
const originalRadius = data.radii[key]
const rule = {}
@ -150,13 +153,17 @@ export const convertTheme2To3 = (data) => {
roundness: originalRadius
}
newRules.push(rule)
if (rule.component === 'Button') {
newRules.push({ ...rule, component: 'ScrollbarElement' })
}
})
return newRules
}
const convertShadows = () => {
const newRules = []
shadowsKeys.forEach(key => {
Object.keys(data.shadows).forEach(key => {
if (!shadowsKeys.has(key)) return
const originalShadow = data.shadows[key]
const rule = {}
@ -205,6 +212,10 @@ export const convertTheme2To3 = (data) => {
if (key === 'buttonPressed') {
newRules.push({ ...rule, state: ['toggled'] })
}
if (rule.component === 'Button') {
newRules.push({ ...rule, component: 'ScrollbarElement' })
}
})
return newRules
}
@ -234,10 +245,13 @@ export const convertTheme2To3 = (data) => {
rule.component = 'ChatMessage'
} else if (prefix === 'poll') {
rule.component = 'PollGraph'
} else if (prefix === 'btn') {
rule.component = 'Button'
} else {
rule.component = prefix[0].toUpperCase() + prefix.slice(1).toLowerCase()
}
return keys.map((key) => {
if (!data.colors[key]) return null
const leftoverKey = key.replace(prefix, '')
const parts = (leftoverKey || 'Bg').match(/[A-Z][a-z]*/g)
const last = parts.slice(-1)[0]
@ -335,12 +349,17 @@ export const convertTheme2To3 = (data) => {
newRule.variant = variantArray[0].toLowerCase()
}
}
console.log(key, newRule)
return newRule
if (newRule.component === 'Button') {
console.log([newRule, { ...newRule, component: 'ScrollbarElement' }])
return [newRule, { ...newRule, component: 'ScrollbarElement' }]
} else {
return [newRule]
}
})
})
const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x)
const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x).reduce((acc, x) => [...acc, ...x], [])
return [generateRoot(), ...convertShadows(), ...convertRadii(), ...flatExtRules]
}

22
src/services/theme_data/theme3_slot_functions.js
View file

@ -1,7 +1,7 @@
import { convert, brightness } from 'chromatism'
import { alphaBlend, relativeLuminance } from '../color_convert/color_convert.js'
export const process = (text, functions, findColor, dynamicVars, staticVars) => {
export const process = (text, functions, { findColor, findShadow }, { dynamicVars, staticVars }) => {
const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[#a-zA-Z0-9-,.'"\s]*)\)/.exec(text).groups
const args = argsString.split(/,/g).map(a => a.trim())
@ -9,27 +9,27 @@ export const process = (text, functions, findColor, dynamicVars, staticVars) =>
if (args.length < func.argsNeeded) {
throw new Error(`$${funcName} requires at least ${func.argsNeeded} arguments, but ${args.length} were provided`)
}
return func.exec(args, findColor, dynamicVars, staticVars)
return func.exec(args, { findColor, findShadow }, { dynamicVars, staticVars })
}
export const colorFunctions = {
alpha: {
argsNeeded: 2,
exec: (args, findColor, dynamicVars, staticVars) => {
exec: (args, { findColor }, { dynamicVars, staticVars }) => {
const [color, amountArg] = args
const colorArg = convert(findColor(color, dynamicVars, staticVars)).rgb
const colorArg = convert(findColor(color, { dynamicVars, staticVars })).rgb
const amount = Number(amountArg)
return { ...colorArg, a: amount }
}
},
blend: {
argsNeeded: 3,
exec: (args, findColor, dynamicVars, staticVars) => {
exec: (args, { findColor }, { dynamicVars, staticVars }) => {
const [backgroundArg, amountArg, foregroundArg] = args
const background = convert(findColor(backgroundArg, dynamicVars, staticVars)).rgb
const foreground = convert(findColor(foregroundArg, dynamicVars, staticVars)).rgb
const background = convert(findColor(backgroundArg, { dynamicVars, staticVars })).rgb
const foreground = convert(findColor(foregroundArg, { dynamicVars, staticVars })).rgb
const amount = Number(amountArg)
return alphaBlend(background, amount, foreground)
@ -37,10 +37,10 @@ export const colorFunctions = {
},
mod: {
argsNeeded: 2,
exec: (args, findColor, dynamicVars, staticVars) => {
exec: (args, { findColor }, { dynamicVars, staticVars }) => {
const [colorArg, amountArg] = args
const color = convert(findColor(colorArg, dynamicVars, staticVars)).rgb
const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb
const amount = Number(amountArg)
const effectiveBackground = dynamicVars.lowerLevelBackground
@ -54,7 +54,7 @@ export const colorFunctions = {
export const shadowFunctions = {
borderSide: {
argsNeeded: 3,
exec: (args, findColor, dynamicVars, staticVars) => {
exec: (args, { findColor }) => {
const [color, side, alpha = '1', widthArg = '1', inset = 'inset'] = args
const width = Number(widthArg)
@ -86,7 +86,7 @@ export const shadowFunctions = {
break
}
})
return targetShadow
return [targetShadow]
}
}
}

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

@ -1,4 +1,5 @@
import { convert, brightness } from 'chromatism'
import { flattenDeep } from 'lodash'
import {
alphaBlend,
getTextColor,
@ -20,6 +21,7 @@ import {
normalizeCombination,
findRules
} from './iss_utils.js'
import { parseCssShadow } from './css_utils.js'
const DEBUG = false
@ -36,7 +38,32 @@ const components = {
ChatMessage: null
}
const findColor = (color, dynamicVars, staticVars) => {
const findShadow = (shadows, { dynamicVars, staticVars }) => {
return (shadows || []).map(shadow => {
let targetShadow
if (typeof shadow === 'string') {
if (shadow.startsWith('$')) {
targetShadow = process(shadow, shadowFunctions, { findColor, findShadow }, { dynamicVars, staticVars })
} else if (shadow.startsWith('--')) {
const [variable] = shadow.split(/,/g).map(str => str.trim()) // discarding modifier since it's not supported
const variableSlot = variable.substring(2)
return findShadow(staticVars[variableSlot], { dynamicVars, staticVars })
} else {
targetShadow = parseCssShadow(shadow)
}
} else {
targetShadow = shadow
}
const shadowArray = Array.isArray(targetShadow) ? targetShadow : [targetShadow]
return shadowArray.map(s => ({
...s,
color: findColor(s.color, { dynamicVars, staticVars })
}))
})
}
const findColor = (color, { dynamicVars, staticVars }) => {
if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
let targetColor = null
if (color.startsWith('--')) {
@ -76,7 +103,7 @@ const findColor = (color, dynamicVars, staticVars) => {
if (color.startsWith('$')) {
try {
targetColor = process(color, colorFunctions, findColor, dynamicVars, staticVars)
targetColor = process(color, colorFunctions, { findColor }, { dynamicVars, staticVars })
} catch (e) {
console.error('Failure executing color function', e)
targetColor = '#FF00FF'
@ -89,7 +116,7 @@ const findColor = (color, dynamicVars, staticVars) => {
const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVars) => {
const opacity = directives.textOpacity
const backgroundColor = convert(dynamicVars.lowerLevelBackground).rgb
const textColor = convert(findColor(intendedTextColor, dynamicVars, staticVars)).rgb
const textColor = convert(findColor(intendedTextColor, { dynamicVars, staticVars })).rgb
if (opacity === null || opacity === undefined || opacity >= 1) {
return convert(textColor).hex
}
@ -288,7 +315,7 @@ export const init = (extraRuleset) => {
dynamicVars.inheritedBackground = lowerLevelBackground
dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars, staticVars)).rgb
const intendedTextColor = convert(findColor(inheritedTextColor, { dynamicVars, staticVars })).rgb
const textColor = newTextRule.directives.textAuto === 'no-auto'
? intendedTextColor
: getTextColor(
@ -355,7 +382,7 @@ export const init = (extraRuleset) => {
dynamicVars.inheritedBackground = inheritedBackground
const rgb = convert(findColor(computedDirectives.background, dynamicVars, staticVars)).rgb
const rgb = convert(findColor(computedDirectives.background, { dynamicVars, staticVars })).rgb
if (!stacked[selector]) {
let blend
@ -373,21 +400,7 @@ export const init = (extraRuleset) => {
}
if (computedDirectives.shadow) {
dynamicVars.shadow = (computedDirectives.shadow || []).map(shadow => {
let targetShadow
if (typeof shadow === 'string') {
if (shadow.startsWith('$')) {
targetShadow = process(shadow, shadowFunctions, findColor, dynamicVars, staticVars)
}
} else {
targetShadow = shadow
}
return {
...targetShadow,
color: findColor(targetShadow.color, dynamicVars, staticVars)
}
})
dynamicVars.shadow = flattenDeep(findShadow(flattenDeep(computedDirectives.shadow), { dynamicVars, staticVars }))
}
if (!stacked[selector]) {
@ -403,14 +416,23 @@ export const init = (extraRuleset) => {
const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
dynamicSlots.forEach(([k, v]) => {
const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
const [type, ...value] = v.split('|').map(x => x.trim()) // woah, Extreme!
switch (type) {
case 'color': {
const color = findColor(value, dynamicVars, staticVars)
const color = findColor(value[0], { dynamicVars, staticVars })
dynamicVars[k] = color
if (component.name === 'Root') {
staticVars[k.substring(2)] = color
}
break
}
case 'shadow': {
const shadow = value
dynamicVars[k] = shadow
if (component.name === 'Root') {
staticVars[k.substring(2)] = shadow
}
break
}
}
})