moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

shadow slots work + minor fixes

This commit is contained in:
Henry Jameson 2024-02-21 22:18:56 +02:00
parent 7041d29ede
commit 8a21594dbc
10 changed files with 153 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/boot/after_store.js
View File

@ -359,6 +359,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
const { theme } = store.state.instance
const customThemePresent = customThemeSource || customTheme
console.log({ ...customThemeSource }, { ...customTheme })
if (customThemePresent) {
if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
applyTheme(customThemeSource)

43
src/components/button.style.js
View File

@ -1,23 +1,3 @@
const buttonInsetFakeBorders = ['$borderSide(#FFFFFF, top, 0.2)', '$borderSide(#000000, bottom, 0.2)']
const inputInsetFakeBorders = ['$borderSide(#FFFFFF, bottom, 0.2)', '$borderSide(#000000, top, 0.2)']
const buttonOuterShadow = {
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
}
const hoverGlow = {
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '--text',
alpha: 1
}
export default {
name: 'Button', // Name of the component
selector: '.button-default', // CSS selector/prefix
@ -49,52 +29,61 @@ export default {
],
// Default rules, used as "default theme", essentially.
defaultRules: [
{
component: 'Root',
directives: {
'--defaultButtonHoverGlow': 'shadow | 0 0 4 --text',
'--defaultButtonShadow': 'shadow | 0 0 2 #000000',
'--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF, top, 0.2) | $borderSide(#000000, bottom, 0.2)',
'--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
}
},
{
// component: 'Button', // no need to specify components every time unless you're specifying how other component should look
// like within it
directives: {
background: '--fg',
shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
roundness: 3
}
},
{
state: ['hover'],
directives: {
shadow: [hoverGlow, ...buttonInsetFakeBorders]
shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
}
},
{
state: ['pressed'],
directives: {
shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
}
},
{
state: ['hover', 'pressed'],
directives: {
shadow: [hoverGlow, ...inputInsetFakeBorders]
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
}
},
{
state: ['toggled'],
directives: {
background: '--inheritedBackground,-24.2',
shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
}
},
{
state: ['toggled', 'hover'],
directives: {
background: '--inheritedBackground,-24.2',
shadow: [hoverGlow, ...inputInsetFakeBorders]
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
}
},
{
state: ['disabled'],
directives: {
background: '$blend(--inheritedBackground, 0.25, --parent)',
shadow: [...buttonInsetFakeBorders]
shadow: ['--defaultButtonBevel']
}
},
{

12
src/components/input.style.js
View File

@ -1,5 +1,3 @@
const inputInsetFakeBorders = ['$borderSide(#FFFFFF, bottom, 0.2)', '$borderSide(#000000, top, 0.2)']
const hoverGlow = {
x: 0,
y: 0,
@ -25,6 +23,12 @@ export default {
'Text'
],
defaultRules: [
{
component: 'Root',
directives: {
'--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
}
},
{
variant: 'checkbox',
directives: {
@ -42,13 +46,13 @@ export default {
spread: 0,
color: '#000000',
alpha: 1
}, ...inputInsetFakeBorders]
}, '--defaultInputBevel']
}
},
{
state: ['hover'],
directives: {
shadow: [hoverGlow, ...inputInsetFakeBorders]
shadow: [hoverGlow, '--defaultInputBevel']
}
}
]

20
src/components/settings_modal/tabs/theme_tab/theme_tab.js
View File

@ -4,15 +4,7 @@ import {
getContrastRatioLayers
} from 'src/services/color_convert/color_convert.js'
import {
DEFAULT_SHADOWS,
generateColors,
generateShadows,
generateRadii,
generateFonts,
composePreset,
getThemes,
shadows2to3,
colors2to3
getThemes
} from 'src/services/style_setter/style_setter.js'
import {
newImporter,
@ -25,7 +17,15 @@ import {
CURRENT_VERSION,
OPACITIES,
getLayers,
getOpacitySlot
getOpacitySlot,
DEFAULT_SHADOWS,
generateColors,
generateShadows,
generateRadii,
generateFonts,
composePreset,
shadows2to3,
colors2to3
} from 'src/services/theme_data/theme_data.service.js'
import ColorInput from 'src/components/color_input/color_input.vue'
import RangeInput from 'src/components/range_input/range_input.vue'

2
src/components/shadow_control/shadow_control.js
View File

@ -1,7 +1,7 @@
import ColorInput from '../color_input/color_input.vue'
import OpacityInput from '../opacity_input/opacity_input.vue'
import Select from '../select/select.vue'
import { getCssShadow } from '../../services/style_setter/style_setter.js'
import { getCssShadow } from '../../services/theme_data/theme_data.service.js'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {

26
src/services/style_setter/style_setter.js
View File

@ -6,12 +6,22 @@ import { getCssRules } from '../theme_data/css_utils.js'
import { defaultState } from '../../modules/config.js'
export const applyTheme = (input) => {
const t0 = performance.now()
const { rules, theme } = generatePreset(input)
console.log(rules, theme)
const { version, theme: inputTheme } = input
let extraRules
let fonts
if (version === 2) {
const t0 = performance.now()
const { rules, theme } = generatePreset(inputTheme)
fonts = rules.fonts
const t1 = performance.now()
console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
extraRules = convertTheme2To3(theme)
} else {
console.log(input)
extraRules = convertTheme2To3(input)
}
const t1 = performance.now()
console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
const extraRules = convertTheme2To3(theme)
const themes3 = init(extraRules)
const t2 = performance.now()
console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
@ -24,7 +34,7 @@ export const applyTheme = (input) => {
const styleSheet = styleEl.sheet
styleSheet.toString()
styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
styleSheet.insertRule(`:root { ${fonts} }`, 'index-max')
getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
// Hack to support multiple selectors on same component
if (rule.match(/::-webkit-scrollbar-button/)) {
@ -133,8 +143,8 @@ export const getPreset = (val) => {
data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
}
return { theme: data, source: theme.source }
return { theme: data, source: theme.source, version: isV1 ? 1 : 2 }
})
}
export const setPreset = (val) => getPreset(val).then(data => applyTheme(data.theme))
export const setPreset = (val) => getPreset(val).then(data => applyTheme(data))

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
}
}
})