No OneTemporary
Actions

Size

56 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
	index 3c70bd9f45..3812f894a4 100644
	--- a/src/components/menu_item.style.js
	+++ b/src/components/menu_item.style.js
	@@ -1,62 +1,89 @@
	export default {
	name: 'MenuItem',
	selector: '.menu-item',
	validInnerComponents: [
	'Text',
	'Icon',
	'Input',
	'Border',
	'ButtonUnstyled',
	'Badge'
	],
	states: {
	hover: ':hover',
	active: '.active'
	},
	defaultRules: [
	{
	directives: {
	background: '--bg',
	opacity: 0
	}
	},
	{
	state: ['hover'],
	directives: {
	background: '$mod(--bg, 5)',
	opacity: 1
	}
	},
	{
	state: ['active'],
	directives: {
	- background: '$mod(--bg, 5)',
	+ background: '$mod(--bg, 10)',
	+ opacity: 1
	+ }
	+ },
	+ {
	+ state: ['active', 'hover'],
	+ directives: {
	+ background: '$mod(--bg, 15)',
	opacity: 1
	}
	},
	{
	component: 'Text',
	- variant: 'normal',
	parent: {
	component: 'MenuItem',
	- state: ['normal', 'hover'],
	- variant: 'normal'
	+ state: ['hover']
	+ },
	+ directives: {
	+ textColor: '--link',
	+ textAuto: 'no-preserve'
	+ }
	+ },
	+ {
	+ component: 'Text',
	+ parent: {
	+ component: 'MenuItem',
	+ state: ['active']
	+ },
	+ directives: {
	+ textColor: '--link',
	+ textAuto: 'no-preserve'
	+ }
	+ },
	+ {
	+ component: 'Icon',
	+ parent: {
	+ component: 'MenuItem',
	+ state: ['active']
	},
	directives: {
	textColor: '--link',
	textAuto: 'no-preserve'
	}
	},
	{
	component: 'Icon',
	parent: {
	component: 'MenuItem',
	state: ['hover']
	},
	directives: {
	textColor: '--link',
	textAuto: 'no-preserve'
	}
	}
	]
	}
	diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
	index 1189f76d2f..ac4a0c4775 100644
	--- a/src/components/navigation/navigation_entry.vue
	+++ b/src/components/navigation/navigation_entry.vue
	@@ -1,108 +1,120 @@
	<template>
	<OptionalRouterLink
	v-slot="{ isActive, href, navigate } = {}"
	:to="routeTo"
	>
	<li
	class="NavigationEntry menu-item"
	:class="{ '-active': isActive }"
	v-bind="$attrs"
	>
	<component
	:is="routeTo ? 'a' : 'button'"
	- class="main-link button-unstyled"
	+ class="main-link"
	:href="href"
	@click="navigate"
	>
	<span>
	<FAIcon
	v-if="item.icon"
	fixed-width
	class="fa-scale-110 menu-icon"
	:icon="item.icon"
	/>
	</span>
	<span
	v-if="item.iconLetter"
	class="icon iconLetter fa-scale-110 menu-icon"
	>{{ item.iconLetter }}
	</span>
	<span class="label">
	{{ item.labelRaw \|\| $t(item.label) }}
	</span>
	</component>
	<slot />
	<div
	v-if="item.badgeGetter && getters[item.badgeGetter]"
	class="badge -notification"
	>
	{{ getters[item.badgeGetter] }}
	</div>
	<button
	v-if="showPin && currentUser"
	type="button"
	class="button-unstyled extra-button"
	:title="$t(isPinned ? 'general.unpin' : 'general.pin' )"
	:aria-pressed="!!isPinned"
	@click.stop.prevent="togglePin(item.name)"
	>
	<FAIcon
	v-if="showPin && currentUser"
	fixed-width
	class="fa-scale-110"
	:class="{ 'veryfaint': !isPinned(item.name) }"
	:transform="!isPinned(item.name) ? 'rotate-45' : ''"
	icon="thumbtack"
	/>
	</button>
	</li>
	</OptionalRouterLink>
	</template>

	<script src="./navigation_entry.js"></script>

	<style lang="scss">
	@import "../../variables";

	.NavigationEntry {
	display: flex;
	box-sizing: border-box;
	align-items: baseline;
	height: 3.5em;
	line-height: 3.5em;
	padding: 0;
	width: 100%;
	color: $fallback--link;
	color: var(--link, $fallback--link);

	&[aria-expanded] {
	padding-right: 1em;
	}

	.timelines-chevron {
	margin-right: 0;
	}

	.main-link {
	+ background: none;
	+ border: none;
	+ outline: none;
	+ display: inline;
	+ text-align: initial;
	+ font-size: 100%;
	+ font-family: inherit;
	+ line-height: unset;
	+ cursor: pointer;
	+ box-sizing: content-box;
	+ color: var(--text);
	flex: 1;
	padding: 0 1em;
	}

	.menu-icon {
	+ color: var(--icon);
	margin-right: 0.8em;
	}

	.extra-button {
	width: 3em;
	text-align: center;

	&:last-child {
	margin-right: -0.8em;
	}
	}

	.badge {
	margin: 0 0.8em;
	}
	}
	</style>
	diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	index dd5259200d..11c90b034d 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	@@ -1,796 +1,798 @@
	import {
	rgb2hex,
	hex2rgb,
	getContrastRatioLayers
	} from 'src/services/color_convert/color_convert.js'
	import {
	getThemes
	} from 'src/services/style_setter/style_setter.js'
	import {
	newImporter,
	newExporter
	} from 'src/services/export_import/export_import.js'
	import {
	SLOT_INHERITANCE
	} from 'src/services/theme_data/pleromafe.js'
	import {
	CURRENT_VERSION,
	OPACITIES,
	getLayers,
	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'
	import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
	import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
	import FontControl from 'src/components/font_control/font_control.vue'
	import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import Select from 'src/components/select/select.vue'

	import Preview from './preview.vue'

	// List of color values used in v1
	const v1OnlyNames = [
	'bg',
	'fg',
	'text',
	'link',
	'cRed',
	'cGreen',
	'cBlue',
	'cOrange'
	].map(_ => _ + 'ColorLocal')

	const colorConvert = (color) => {
	if (color.startsWith('--') \|\| color === 'transparent') {
	return color
	} else {
	return hex2rgb(color)
	}
	}

	export default {
	data () {
	return {
	themeImporter: newImporter({
	validator: this.importValidator,
	onImport: this.onImport,
	onImportFailure: this.onImportFailure
	}),
	themeExporter: newExporter({
	filename: 'pleroma_theme',
	getExportedObject: () => this.exportedTheme
	}),
	availableStyles: [],
	selected: '',
	selectedTheme: this.$store.getters.mergedConfig.theme,
	themeWarning: undefined,
	tempImportFile: undefined,
	engineVersion: 0,

	previewShadows: {},
	previewColors: {},
	previewRadii: {},
	previewFonts: {},

	shadowsInvalid: true,
	colorsInvalid: true,
	radiiInvalid: true,

	keepColor: false,
	keepShadows: false,
	keepOpacity: false,
	keepRoundness: false,
	keepFonts: false,

	...Object.keys(SLOT_INHERITANCE)
	.map(key => [key, ''])
	.reduce((acc, [key, val]) => ({ ...acc, [key + 'ColorLocal']: val }), {}),

	...Object.keys(OPACITIES)
	.map(key => [key, ''])
	.reduce((acc, [key, val]) => ({ ...acc, [key + 'OpacityLocal']: val }), {}),

	shadowSelected: undefined,
	shadowsLocal: {},
	fontsLocal: {},

	btnRadiusLocal: '',
	inputRadiusLocal: '',
	checkboxRadiusLocal: '',
	panelRadiusLocal: '',
	avatarRadiusLocal: '',
	avatarAltRadiusLocal: '',
	attachmentRadiusLocal: '',
	tooltipRadiusLocal: '',
	chatMessageRadiusLocal: ''
	}
	},
	created () {
	const self = this

	getThemes()
	.then((promises) => {
	return Promise.all(
	Object.entries(promises)
	.map(([k, v]) => v.then(res => [k, res]))
	)
	})
	.then(themes => themes.reduce((acc, [k, v]) => {
	if (v) {
	return {
	...acc,
	[k]: v
	}
	} else {
	return acc
	}
	}, {}))
	.then((themesComplete) => {
	self.availableStyles = themesComplete
	})
	},
	mounted () {
	this.loadThemeFromLocalStorage()
	if (typeof this.shadowSelected === 'undefined') {
	this.shadowSelected = this.shadowsAvailable[0]
	}
	},
	computed: {
	themeWarningHelp () {
	if (!this.themeWarning) return
	const t = this.$t
	const pre = 'settings.style.switcher.help.'
	const {
	origin,
	themeEngineVersion,
	type,
	noActionsPossible
	} = this.themeWarning
	if (origin === 'file') {
	// Loaded v2 theme from file
	if (themeEngineVersion === 2 && type === 'wrong_version') {
	return t(pre + 'v2_imported')
	}
	if (themeEngineVersion > CURRENT_VERSION) {
	return t(pre + 'future_version_imported') + ' ' +
	(
	noActionsPossible
	? t(pre + 'snapshot_missing')
	: t(pre + 'snapshot_present')
	)
	}
	if (themeEngineVersion < CURRENT_VERSION) {
	return t(pre + 'future_version_imported') + ' ' +
	(
	noActionsPossible
	? t(pre + 'snapshot_missing')
	: t(pre + 'snapshot_present')
	)
	}
	} else if (origin === 'localStorage') {
	if (type === 'snapshot_source_mismatch') {
	return t(pre + 'snapshot_source_mismatch')
	}
	// FE upgraded from v2
	if (themeEngineVersion === 2) {
	return t(pre + 'upgraded_from_v2')
	}
	// Admin downgraded FE
	if (themeEngineVersion > CURRENT_VERSION) {
	return t(pre + 'fe_downgraded') + ' ' +
	(
	noActionsPossible
	? t(pre + 'migration_snapshot_ok')
	: t(pre + 'migration_snapshot_gone')
	)
	}
	// Admin upgraded FE
	if (themeEngineVersion < CURRENT_VERSION) {
	return t(pre + 'fe_upgraded') + ' ' +
	(
	noActionsPossible
	? t(pre + 'migration_snapshot_ok')
	: t(pre + 'migration_snapshot_gone')
	)
	}
	}
	},
	selectedVersion () {
	return Array.isArray(this.selectedTheme) ? 1 : 2
	},
	currentColors () {
	return Object.keys(SLOT_INHERITANCE)
	.map(key => [key, this[key + 'ColorLocal']])
	.reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {})
	},
	currentOpacity () {
	return Object.keys(OPACITIES)
	.map(key => [key, this[key + 'OpacityLocal']])
	.reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {})
	},
	currentRadii () {
	return {
	btn: this.btnRadiusLocal,
	input: this.inputRadiusLocal,
	checkbox: this.checkboxRadiusLocal,
	panel: this.panelRadiusLocal,
	avatar: this.avatarRadiusLocal,
	avatarAlt: this.avatarAltRadiusLocal,
	tooltip: this.tooltipRadiusLocal,
	attachment: this.attachmentRadiusLocal,
	chatMessage: this.chatMessageRadiusLocal
	}
	},
	preview () {
	return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
	},
	previewTheme () {
	if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
	return this.preview.theme
	},
	// This needs optimization maybe
	previewContrast () {
	try {
	if (!this.previewTheme.colors.bg) return {}
	const colors = this.previewTheme.colors
	const opacity = this.previewTheme.opacity
	if (!colors.bg) return {}
	const hints = (ratio) => ({
	text: ratio.toPrecision(3) + ':1',
	// AA level, AAA level
	aa: ratio >= 4.5,
	aaa: ratio >= 7,
	// same but for 18pt+ texts
	laa: ratio >= 3,
	laaa: ratio >= 4.5
	})
	const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})

	const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
	const slotIsBaseText = key === 'text' \|\| key === 'link'
	const slotIsText = slotIsBaseText \|\| (
	typeof value === 'object' && value !== null && value.textColor
	)
	if (!slotIsText) return acc
	const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
	const background = variant \|\| layer
	const opacitySlot = getOpacitySlot(background)
	const textColors = [
	key,
	...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
	]

	const layers = getLayers(
	layer,
	variant \|\| layer,
	opacitySlot,
	colorsConverted,
	opacity
	)

	// Temporary patch for null-y value errors
	if (layers.flat().some(v => v == null)) return acc

	return {
	...acc,
	...textColors.reduce((acc, textColorKey) => {
	const newKey = slotIsBaseText
	? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
	: textColorKey
	return {
	...acc,
	[newKey]: getContrastRatioLayers(
	colorsConverted[textColorKey],
	layers,
	colorsConverted[textColorKey]
	)
	}
	}, {})
	}
	}, {})

	return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
	} catch (e) {
	console.warn('Failure computing contrasts', e)
	return {}
	}
	},
	previewRules () {
	if (!this.preview.rules) return ''
	return [
	...Object.values(this.preview.rules),
	'color: var(--text)',
	'font-family: var(--interfaceFont, sans-serif)'
	].join(';')
	},
	shadowsAvailable () {
	return Object.keys(DEFAULT_SHADOWS).sort()
	},
	currentShadowOverriden: {
	get () {
	return !!this.currentShadow
	},
	set (val) {
	if (val) {
	this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _))
	} else {
	delete this.shadowsLocal[this.shadowSelected]
	}
	}
	},
	currentShadowFallback () {
	return (this.previewTheme.shadows \|\| {})[this.shadowSelected]
	},
	currentShadow: {
	get () {
	return this.shadowsLocal[this.shadowSelected]
	},
	set (v) {
	this.shadowsLocal[this.shadowSelected] = v
	}
	},
	themeValid () {
	return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid
	},
	exportedTheme () {
	const saveEverything = (
	!this.keepFonts &&
	!this.keepShadows &&
	!this.keepOpacity &&
	!this.keepRoundness &&
	!this.keepColor
	)

	const source = {
	themeEngineVersion: CURRENT_VERSION
	}

	if (this.keepFonts \|\| saveEverything) {
	source.fonts = this.fontsLocal
	}
	if (this.keepShadows \|\| saveEverything) {
	source.shadows = this.shadowsLocal
	}
	if (this.keepOpacity \|\| saveEverything) {
	source.opacity = this.currentOpacity
	}
	if (this.keepColor \|\| saveEverything) {
	source.colors = this.currentColors
	}
	if (this.keepRoundness \|\| saveEverything) {
	source.radii = this.currentRadii
	}

	const theme = {
	themeEngineVersion: CURRENT_VERSION,
	...this.previewTheme
	}

	return {
	// To separate from other random JSON files and possible future source formats
	_pleroma_theme_version: 2, theme, source
	}
	},
	isActive () {
	const tabSwitcher = this.$parent
	return tabSwitcher ? tabSwitcher.isActive('theme') : false
	}
	},
	components: {
	ColorInput,
	OpacityInput,
	RangeInput,
	ContrastRatio,
	ShadowControl,
	FontControl,
	TabSwitcher,
	Preview,
	Checkbox,
	Select
	},
	methods: {
	loadTheme (
	{
	theme,
	source,
	_pleroma_theme_version: fileVersion
	},
	origin,
	forceUseSource = false
	) {
	this.dismissWarning()
	if (!source && !theme) {
	throw new Error('Can\'t load theme: empty')
	}
	const version = (origin === 'localStorage' && !theme.colors)
	? 'l1'
	: fileVersion
	const snapshotEngineVersion = (theme \|\| {}).themeEngineVersion
	const themeEngineVersion = (source \|\| {}).themeEngineVersion \|\| 2
	const versionsMatch = themeEngineVersion === CURRENT_VERSION
	const sourceSnapshotMismatch = (
	theme !== undefined &&
	source !== undefined &&
	themeEngineVersion !== snapshotEngineVersion
	)
	// Force loading of source if user requested it or if snapshot
	// is unavailable
	const forcedSourceLoad = (source && forceUseSource) \|\| !theme
	if (!(versionsMatch && !sourceSnapshotMismatch) &&
	!forcedSourceLoad &&
	version !== 'l1' &&
	origin !== 'defaults'
	) {
	if (sourceSnapshotMismatch && origin === 'localStorage') {
	this.themeWarning = {
	origin,
	themeEngineVersion,
	type: 'snapshot_source_mismatch'
	}
	} else if (!theme) {
	this.themeWarning = {
	origin,
	noActionsPossible: true,
	themeEngineVersion,
	type: 'no_snapshot_old_version'
	}
	} else if (!versionsMatch) {
	this.themeWarning = {
	origin,
	noActionsPossible: !source,
	themeEngineVersion,
	type: 'wrong_version'
	}
	}
	}
	this.normalizeLocalState(theme, version, source, forcedSourceLoad)
	},
	forceLoadLocalStorage () {
	this.loadThemeFromLocalStorage(true)
	},
	dismissWarning () {
	this.themeWarning = undefined
	this.tempImportFile = undefined
	},
	forceLoad () {
	const { origin } = this.themeWarning
	switch (origin) {
	case 'localStorage':
	this.loadThemeFromLocalStorage(true)
	break
	case 'file':
	this.onImport(this.tempImportFile, true)
	break
	}
	this.dismissWarning()
	},
	forceSnapshot () {
	const { origin } = this.themeWarning
	switch (origin) {
	case 'localStorage':
	this.loadThemeFromLocalStorage(false, true)
	break
	case 'file':
	console.error('Forcing snapshot from file is not supported yet')
	break
	}
	this.dismissWarning()
	},
	loadThemeFromLocalStorage (confirmLoadSource = false, forceSnapshot = false) {
	const {
	customTheme: theme,
	customThemeSource: source
	} = this.$store.getters.mergedConfig
	if (!theme && !source) {
	// Anon user or never touched themes
	this.loadTheme(
	this.$store.state.instance.themeData,
	'defaults',
	confirmLoadSource
	)
	} else {
	this.loadTheme(
	{
	theme,
	source: forceSnapshot ? theme : source
	},
	'localStorage',
	confirmLoadSource
	)
	}
	},
	setCustomTheme () {
	this.$store.dispatch('setOption', {
	name: 'customTheme',
	value: {
	+ themeFileVersion: this.selectedVersion,
	themeEngineVersion: CURRENT_VERSION,
	...this.previewTheme
	}
	})
	this.$store.dispatch('setOption', {
	name: 'customThemeSource',
	value: {
	+ themeFileVersion: this.selectedVersion,
	themeEngineVersion: CURRENT_VERSION,
	shadows: this.shadowsLocal,
	fonts: this.fontsLocal,
	opacity: this.currentOpacity,
	colors: this.currentColors,
	radii: this.currentRadii
	}
	})
	},
	updatePreviewColorsAndShadows () {
	this.previewColors = generateColors({
	opacity: this.currentOpacity,
	colors: this.currentColors
	})
	this.previewShadows = generateShadows(
	{ shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
	this.previewColors.theme.colors,
	this.previewColors.mod
	)
	},
	importTheme () { this.themeImporter.importData() },
	exportTheme () { this.themeExporter.exportData() },
	onImport (parsed, forceSource = false) {
	this.tempImportFile = parsed
	this.loadTheme(parsed, 'file', forceSource)
	},
	onImportFailure (result) {
	this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
	},
	importValidator (parsed) {
	const version = parsed._pleroma_theme_version
	return version >= 1 \|\| version <= 2
	},
	clearAll () {
	this.loadThemeFromLocalStorage()
	},

	// Clears all the extra stuff when loading V1 theme
	clearV1 () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('ColorLocal') \|\| _.endsWith('OpacityLocal'))
	.filter(_ => !v1OnlyNames.includes(_))
	.forEach(key => {
	this.$data[key] = undefined
	})
	},

	clearRoundness () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('RadiusLocal'))
	.forEach(key => {
	this.$data[key] = undefined
	})
	},

	clearOpacity () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('OpacityLocal'))
	.forEach(key => {
	this.$data[key] = undefined
	})
	},

	clearShadows () {
	this.shadowsLocal = {}
	},

	clearFonts () {
	this.fontsLocal = {}
	},

	/**
	* This applies stored theme data onto form. Supports three versions of data:
	* v3 (version >= 3) - newest version of themes which supports snapshots for better compatiblity
	* v2 (version = 2) - newer version of themes.
	* v1 (version = 1) - older version of themes (import from file)
	* v1l (version = l1) - older version of theme (load from local storage)
	* v1 and v1l differ because of way themes were stored/exported.
	* @param {Object} theme - theme data (snapshot)
	* @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
	* @param {Object} source - theme source - this will be used if compatible
	* @param {Boolean} source - by default source won't be used if version doesn't match since it might render differently
	* this allows importing source anyway
	*/
	normalizeLocalState (theme, version = 0, source, forceSource = false) {
	let input
	if (typeof source !== 'undefined') {
	if (forceSource \|\| source.themeEngineVersion === CURRENT_VERSION) {
	input = source
	version = source.themeEngineVersion
	} else {
	input = theme
	}
	} else {
	input = theme
	}

	const radii = input.radii \|\| input
	const opacity = input.opacity
	const shadows = input.shadows \|\| {}
	const fonts = input.fonts \|\| {}
	const colors = !input.themeEngineVersion
	? colors2to3(input.colors \|\| input)
	: input.colors \|\| input

	if (version === 0) {
	if (input.version) version = input.version
	// Old v1 naming: fg is text, btn is foreground
	if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
	version = 1
	}
	// New v2 naming: text is text, fg is foreground
	if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
	version = 2
	}
	}

	this.engineVersion = version

	// Stuff that differs between V1 and V2
	if (version === 1) {
	this.fgColorLocal = rgb2hex(colors.btn)
	this.textColorLocal = rgb2hex(colors.fg)
	}

	if (!this.keepColor) {
	this.clearV1()
	const keys = new Set(version !== 1 ? Object.keys(SLOT_INHERITANCE) : [])
	if (version === 1 \|\| version === 'l1') {
	keys
	.add('bg')
	.add('link')
	.add('cRed')
	.add('cBlue')
	.add('cGreen')
	.add('cOrange')
	}

	keys.forEach(key => {
	const color = colors[key]
	const hex = rgb2hex(colors[key])
	this[key + 'ColorLocal'] = hex === '#aN' ? color : hex
	})
	}

	if (opacity && !this.keepOpacity) {
	this.clearOpacity()
	Object.entries(opacity).forEach(([k, v]) => {
	if (typeof v === 'undefined' \|\| v === null \|\| Number.isNaN(v)) return
	this[k + 'OpacityLocal'] = v
	})
	}

	if (!this.keepRoundness) {
	this.clearRoundness()
	Object.entries(radii).forEach(([k, v]) => {
	// 'Radius' is kept mostly for v1->v2 localstorage transition
	const key = k.endsWith('Radius') ? k.split('Radius')[0] : k
	this[key + 'RadiusLocal'] = v
	})
	}

	if (!this.keepShadows) {
	this.clearShadows()
	if (version === 2) {
	this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity)
	} else {
	this.shadowsLocal = shadows
	}
	this.shadowSelected = this.shadowsAvailable[0]
	}

	if (!this.keepFonts) {
	this.clearFonts()
	this.fontsLocal = fonts
	}
	}
	},
	watch: {
	currentRadii () {
	try {
	this.previewRadii = generateRadii({ radii: this.currentRadii })
	this.radiiInvalid = false
	} catch (e) {
	this.radiiInvalid = true
	console.warn(e)
	}
	},
	shadowsLocal: {
	handler () {
	if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
	try {
	this.updatePreviewColorsAndShadows()
	this.shadowsInvalid = false
	} catch (e) {
	this.shadowsInvalid = true
	console.warn(e)
	}
	},
	deep: true
	},
	fontsLocal: {
	handler () {
	try {
	this.previewFonts = generateFonts({ fonts: this.fontsLocal })
	this.fontsInvalid = false
	} catch (e) {
	this.fontsInvalid = true
	console.warn(e)
	}
	},
	deep: true
	},
	currentColors () {
	try {
	this.updatePreviewColorsAndShadows()
	this.colorsInvalid = false
	this.shadowsInvalid = false
	} catch (e) {
	this.colorsInvalid = true
	this.shadowsInvalid = true
	console.warn(e)
	}
	},
	currentOpacity () {
	try {
	this.updatePreviewColorsAndShadows()
	} catch (e) {
	console.warn(e)
	}
	},
	selected () {
	this.selectedTheme = Object.entries(this.availableStyles).find(([k, s]) => {
	if (Array.isArray(s)) {
	return s[0] === this.selected
	} else {
	return s.name === this.selected
	}
	})[1]
	},
	selectedTheme () {
	this.dismissWarning()
	if (this.selectedVersion === 1) {
	if (!this.keepRoundness) {
	this.clearRoundness()
	}

	if (!this.keepShadows) {
	this.clearShadows()
	}

	if (!this.keepOpacity) {
	this.clearOpacity()
	}

	if (!this.keepColor) {
	this.clearV1()

	this.bgColorLocal = this.selectedTheme[1]
	this.fgColorLocal = this.selectedTheme[2]
	this.textColorLocal = this.selectedTheme[3]
	this.linkColorLocal = this.selectedTheme[4]
	this.cRedColorLocal = this.selectedTheme[5]
	this.cGreenColorLocal = this.selectedTheme[6]
	this.cBlueColorLocal = this.selectedTheme[7]
	this.cOrangeColorLocal = this.selectedTheme[8]
	}
	} else if (this.selectedVersion >= 2) {
	this.normalizeLocalState(this.selectedTheme.theme, 2, this.selectedTheme.source)
	}
	}
	}
	}
	diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
	index 52cf06edb2..74d745f056 100644
	--- a/src/services/style_setter/style_setter.js
	+++ b/src/services/style_setter/style_setter.js
	@@ -1,148 +1,148 @@
	import { hex2rgb } from '../color_convert/color_convert.js'
	import { generatePreset } from '../theme_data/theme_data.service.js'
	import { init } from '../theme_data/theme_data_3.service.js'
	import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
	import { getCssRules } from '../theme_data/css_utils.js'
	import { defaultState } from '../../modules/config.js'
	import { chunk } from 'lodash'

	export const applyTheme = async (input) => {
	let extraRules
	- if (input.themeType !== 1) {
	+ if (input.themeFileVersion === 1) {
	+ extraRules = convertTheme2To3(input)
	+ } else {
	const { theme } = generatePreset(input)
	extraRules = convertTheme2To3(theme)
	- } else {
	- extraRules = convertTheme2To3(input)
	}

	const themes3 = init(extraRules, '#FFFFFF')
	const head = document.head
	const body = document.body
	body.classList.add('hidden')

	const styleEl = document.createElement('style')
	head.appendChild(styleEl)
	const styleSheet = styleEl.sheet

	getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
	// Hack to support multiple selectors on same component
	if (rule.match(/::-webkit-scrollbar-button/)) {
	const parts = rule.split(/[{}]/g)
	const newRule = [
	parts[0],
	', ',
	parts[0].replace(/button/, 'thumb'),
	' {',
	parts[1],
	'}'
	].join('')
	styleSheet.insertRule(newRule, 'index-max')
	} else {
	styleSheet.insertRule(rule, 'index-max')
	}
	})

	body.classList.remove('hidden')

	// Optimization - instead of processing all lazy rules in one go, process them in small chunks
	// so that UI can do other things and be somewhat responsive while less important rules are being
	// processed
	chunk(themes3.lazy, 5).forEach(chunk => {
	setTimeout(() => {
	Promise.all(chunk.map(x => x())).then(result => {
	getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
	styleSheet.insertRule(rule, 'index-max')
	})
	})
	}, 50)
	})

	return Promise.resolve()
	}

	const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) =>
	({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale })

	const defaultConfigColumns = configColumns(defaultState)

	export const applyConfig = (config) => {
	const columns = configColumns(config)

	if (columns === defaultConfigColumns) {
	return
	}

	const head = document.head
	const body = document.body
	body.classList.add('hidden')

	const rules = Object
	.entries(columns)
	.filter(([k, v]) => v)
	.map(([k, v]) => `--${k}: ${v}`).join(';')

	const styleEl = document.createElement('style')
	head.appendChild(styleEl)
	const styleSheet = styleEl.sheet

	styleSheet.toString()
	styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
	body.classList.remove('hidden')
	}

	export const getThemes = () => {
	const cache = 'no-store'

	return window.fetch('/static/styles.json', { cache })
	.then((data) => data.json())
	.then((themes) => {
	return Object.entries(themes).map(([k, v]) => {
	let promise = null
	if (typeof v === 'object') {
	promise = Promise.resolve(v)
	} else if (typeof v === 'string') {
	promise = window.fetch(v, { cache })
	.then((data) => data.json())
	.catch((e) => {
	console.error(e)
	return null
	})
	}
	return [k, promise]
	})
	})
	.then((promises) => {
	return promises
	.reduce((acc, [k, v]) => {
	acc[k] = v
	return acc
	}, {})
	})
	}

	export const getPreset = (val) => {
	return getThemes()
	.then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
	.then((theme) => {
	const isV1 = Array.isArray(theme)
	- const data = isV1 ? { themeType: 1 } : theme.theme
	+ const data = isV1 ? {} : theme.theme

	if (isV1) {
	const bg = hex2rgb(theme[1])
	const fg = hex2rgb(theme[2])
	const text = hex2rgb(theme[3])
	const link = hex2rgb(theme[4])

	const cRed = hex2rgb(theme[5] \|\| '#FF0000')
	const cGreen = hex2rgb(theme[6] \|\| '#00FF00')
	const cBlue = hex2rgb(theme[7] \|\| '#0000FF')
	const cOrange = hex2rgb(theme[8] \|\| '#E3FF00')

	data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
	}

	return { theme: data, source: theme.source }
	})
	}

	export const setPreset = (val) => getPreset(val).then(data => applyTheme(data))
	diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
	index f04fed4258..321bc3e5aa 100644
	--- a/src/services/theme_data/css_utils.js
	+++ b/src/services/theme_data/css_utils.js
	@@ -1,163 +1,163 @@
	import { convert } from 'chromatism'

	import { hex2rgb, rgba2css } from '../color_convert/color_convert.js'

	// This changes what backgrounds are used to "stacked" solid colors so you can see
	// what theme engine "thinks" is actual background color is for purposes of text color
	// generation and for when --stacked variable is used
	const DEBUG = false

	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'
	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 = 1) => rgba2css({ ...convert(color).rgb, a: alpha })

	export const getCssShadow = (input, usesDropShadow) => {
	if (input.length === 0) {
	return 'none'
	}

	return input
	.filter(_ => usesDropShadow ? _.inset : _)
	.map((shad) => [
	shad.x,
	shad.y,
	shad.blur,
	shad.spread
	].map(_ => _ + 'px ').concat([
	getCssColorString(shad.color, shad.alpha),
	shad.inset ? 'inset' : ''
	]).join(' ')).join(', ')
	}

	export const getCssShadowFilter = (input) => {
	if (input.length === 0) {
	return 'none'
	}

	return input
	// drop-shadow doesn't support inset or spread
	.filter((shad) => !shad.inset && Number(shad.spread) === 0)
	.map((shad) => [
	shad.x,
	shad.y,
	// drop-shadow's blur is twice as strong compared to box-shadow
	shad.blur / 2
	].map(_ => _ + 'px').concat([
	getCssColorString(shad.color, shad.alpha)
	]).join(' '))
	.map(_ => `drop-shadow(${_})`)
	.join(' ')
	}

	export const getCssRules = (rules) => rules.map(rule => {
	let selector = rule.selector
	if (!selector) {
	selector = 'body'
	}
	const header = selector + ' {'
	const footer = '}'

	const virtualDirectives = Object.entries(rule.virtualDirectives \|\| {}).map(([k, v]) => {
	return ' ' + k + ': ' + v
	}).join(';\n')

	const directives = Object.entries(rule.directives).map(([k, v]) => {
	switch (k) {
	case 'roundness': {
	return ' ' + [
	'--roundness: ' + v + 'px'
	].join(';\n ')
	}
	case 'shadow': {
	return ' ' + [
	'--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
	'--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
	'--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
	].join(';\n ')
	}
	case 'background': {
	if (DEBUG) {
	return `
	--background: ${getCssColorString(rule.dynamicVars.stacked)};
	background-color: ${getCssColorString(rule.dynamicVars.stacked)};
	`
	}
	if (v === 'transparent') {
	if (rule.component === 'Root') return []
	return [
	rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
	' --background: ' + v
	].filter(x => x).join(';\n')
	}
	const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
	const cssDirectives = ['--background: ' + color]
	if (rule.directives.backgroundNoCssColor !== 'yes') {
	cssDirectives.push('background-color: ' + color)
	}
	return cssDirectives.filter(x => x).join(';\n')
	}
	case 'blur': {
	const cssDirectives = []
	if (rule.directives.opacity < 1) {
	cssDirectives.push(`--backdrop-filter: blur(${v}) `)
	if (rule.directives.backgroundNoCssColor !== 'yes') {
	cssDirectives.push(`backdrop-filter: blur(${v}) `)
	}
	}
	return cssDirectives.join(';\n')
	}
	case 'font': {
	return 'font-family: ' + v
	}
	case 'textColor': {
	if (rule.directives.textNoCssColor === 'yes') { return '' }
	return 'color: ' + v
	}
	default:
	if (k.startsWith('--')) {
	const [type, value] = v.split('\|').map(x => x.trim()) // woah, Extreme!
	switch (type) {
	case 'color': {
	const color = rule.dynamicVars[k]
	if (typeof color === 'string') {
	return k + ': ' + rgba2css(hex2rgb(color))
	} else {
	return k + ': ' + rgba2css(color)
	}
	}
	case 'generic':
	return k + ': ' + value
	default:
	return ''
	}
	}
	return ''
	}
	}).filter(x => x).map(x => ' ' + x).join(';\n')

	return [
	header,
	directives + ';',
	- (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? ' color: var(--text);' : '',
	+ (rule.component === 'Text' && rule.directives.textNoCssColor !== 'yes') ? ' color: var(--text);' : '',
	'',
	virtualDirectives,
	footer
	].join('\n')
	}).filter(x => x)
	diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
	index b3c4abf1e9..5fd16f1947 100644
	--- a/src/services/theme_data/theme_data_3.service.js
	+++ b/src/services/theme_data/theme_data_3.service.js
	@@ -1,464 +1,468 @@
	import { convert, brightness } from 'chromatism'
	import { flattenDeep } from 'lodash'
	import {
	alphaBlend,
	getTextColor,
	rgba2css,
	mixrgb,
	relativeLuminance
	} from '../color_convert/color_convert.js'

	import {
	colorFunctions,
	shadowFunctions,
	process
	} from './theme3_slot_functions.js'

	import {
	unroll,
	getAllPossibleCombinations,
	genericRuleToSelector,
	normalizeCombination,
	findRules
	} from './iss_utils.js'
	import { parseCssShadow } from './css_utils.js'

	// Ensuring the order of components
	const components = {
	Root: null,
	Text: null,
	FunText: null,
	Link: null,
	Icon: null,
	Border: null,
	Panel: null,
	Chat: null,
	ChatMessage: null
	}

	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('--')) {
	const [variable, modifier] = color.split(/,/g).map(str => str.trim())
	const variableSlot = variable.substring(2)
	if (variableSlot === 'stack') {
	const { r, g, b } = dynamicVars.stacked
	targetColor = { r, g, b }
	} else if (variableSlot.startsWith('parent')) {
	if (variableSlot === 'parent') {
	const { r, g, b } = dynamicVars.lowerLevelBackground
	targetColor = { r, g, b }
	} else {
	const virtualSlot = variableSlot.replace(/^parent/, '')
	targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb
	}
	} else {
	switch (variableSlot) {
	case 'inheritedBackground':
	targetColor = convert(dynamicVars.inheritedBackground).rgb
	break
	case 'background':
	targetColor = convert(dynamicVars.background).rgb
	break
	default:
	targetColor = convert(staticVars[variableSlot]).rgb
	}
	}

	if (modifier) {
	const effectiveBackground = dynamicVars.lowerLevelBackground ?? targetColor
	const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
	const mod = isLightOnDark ? 1 : -1
	targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
	}
	}

	if (color.startsWith('$')) {
	try {
	targetColor = process(color, colorFunctions, { findColor }, { dynamicVars, staticVars })
	} catch (e) {
	console.error('Failure executing color function', e)
	targetColor = '#FF00FF'
	}
	}
	// Color references other color
	return targetColor
	}

	const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVars) => {
	const opacity = directives.textOpacity
	const backgroundColor = convert(dynamicVars.lowerLevelBackground).rgb
	const textColor = convert(findColor(intendedTextColor, { dynamicVars, staticVars })).rgb
	if (opacity === null \|\| opacity === undefined \|\| opacity >= 1) {
	return convert(textColor).hex
	}
	if (opacity === 0) {
	return convert(backgroundColor).hex
	}
	const opacityMode = directives.textOpacityMode
	switch (opacityMode) {
	case 'fake':
	return convert(alphaBlend(textColor, opacity, backgroundColor)).hex
	case 'mixrgb':
	return convert(mixrgb(backgroundColor, textColor)).hex
	default:
	return rgba2css({ a: opacity, ...textColor })
	}
	}

	// Loading all style.js[on] files dynamically
	const componentsContext = require.context('src', true, /\.style.js(on)?$/)
	componentsContext.keys().forEach(key => {
	const component = componentsContext(key).default
	if (components[component.name] != null) {
	console.warn(`Component in file ${key} is trying to override existing component ${component.name}! You have collisions/duplicates!`)
	}
	components[component.name] = component
	})

	const ruleToSelector = genericRuleToSelector(components)

	export const init = (extraRuleset, ultimateBackgroundColor) => {
	const staticVars = {}
	const stacked = {}
	const computed = {}

	const rulesetUnsorted = [
	...Object.values(components)
	.map(c => (c.defaultRules \|\| []).map(r => ({ component: c.name, ...r })))
	.reduce((acc, arr) => [...acc, ...arr], []),
	...extraRuleset
	].map(rule => {
	normalizeCombination(rule)
	let currentParent = rule.parent
	while (currentParent) {
	normalizeCombination(currentParent)
	currentParent = currentParent.parent
	}

	return rule
	})

	const ruleset = rulesetUnsorted
	.map((data, index) => ({ data, index }))
	.sort(({ data: a, index: ai }, { data: b, index: bi }) => {
	const parentsA = unroll(a).length
	const parentsB = unroll(b).length

	if (parentsA === parentsB) {
	if (a.component === 'Text') return -1
	if (b.component === 'Text') return 1
	return ai - bi
	}
	if (parentsA === 0 && parentsB !== 0) return -1
	if (parentsB === 0 && parentsA !== 0) return 1
	return parentsA - parentsB
	})
	.map(({ data }) => data)

	const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))

	const processCombination = (combination) => {
	const selector = ruleToSelector(combination, true)
	const cssSelector = ruleToSelector(combination)

	const parentSelector = selector.split(/ /g).slice(0, -1).join(' ')
	const soloSelector = selector.split(/ /g).slice(-1)[0]

	const lowerLevelSelector = parentSelector
	const lowerLevelBackground = computed[lowerLevelSelector]?.background
	const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives
	const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw

	const dynamicVars = computed[selector] \|\| {
	lowerLevelBackground,
	lowerLevelVirtualDirectives,
	lowerLevelVirtualDirectivesRaw
	}

	// Inheriting all of the applicable rules
	const existingRules = ruleset.filter(findRules(combination))
	const computedDirectives = existingRules.map(r => r.directives).reduce((acc, directives) => ({ ...acc, ...directives }), {})
	const computedRule = {
	...combination,
	directives: computedDirectives
	}

	computed[selector] = computed[selector] \|\| {}
	computed[selector].computedRule = computedRule
	computed[selector].dynamicVars = dynamicVars

	if (virtualComponents.has(combination.component)) {
	const virtualName = [
	'--',
	combination.component.toLowerCase(),
	combination.variant === 'normal'
	? ''
	: combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
	...combination.state.filter(x => x !== 'normal').toSorted().map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
	].join('')

	let inheritedTextColor = computedDirectives.textColor
	let inheritedTextAuto = computedDirectives.textAuto
	let inheritedTextOpacity = computedDirectives.textOpacity
	let inheritedTextOpacityMode = computedDirectives.textOpacityMode
	const lowerLevelTextSelector = [...selector.split(/ /g).slice(0, -1), soloSelector].join(' ')
	const lowerLevelTextRule = computed[lowerLevelTextSelector]

	if (inheritedTextColor == null \|\| inheritedTextOpacity == null \|\| inheritedTextOpacityMode == null) {
	inheritedTextColor = computedDirectives.textColor ?? lowerLevelTextRule.textColor
	inheritedTextAuto = computedDirectives.textAuto ?? lowerLevelTextRule.textAuto
	inheritedTextOpacity = computedDirectives.textOpacity ?? lowerLevelTextRule.textOpacity
	inheritedTextOpacityMode = computedDirectives.textOpacityMode ?? lowerLevelTextRule.textOpacityMode
	}

	const newTextRule = {
	...computedRule,
	directives: {
	...computedRule.directives,
	textColor: inheritedTextColor,
	textAuto: inheritedTextAuto ?? 'preserve',
	textOpacity: inheritedTextOpacity,
	textOpacityMode: inheritedTextOpacityMode
	}
	}

	dynamicVars.inheritedBackground = lowerLevelBackground
	dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb

	const intendedTextColor = convert(findColor(inheritedTextColor, { dynamicVars, staticVars })).rgb
	const textColor = newTextRule.directives.textAuto === 'no-auto'
	? intendedTextColor
	: getTextColor(
	convert(stacked[lowerLevelSelector]).rgb,
	intendedTextColor,
	newTextRule.directives.textAuto === 'preserve'
	)
	const virtualDirectives = computed[lowerLevelSelector].virtualDirectives \|\| {}
	const virtualDirectivesRaw = computed[lowerLevelSelector].virtualDirectivesRaw \|\| {}

	// Storing color data in lower layer to use as custom css properties
	virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
	virtualDirectivesRaw[virtualName] = textColor

	computed[lowerLevelSelector].virtualDirectives = virtualDirectives
	computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw

	return {
	dynamicVars,
	selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
	...combination,
	directives: {},
	- virtualDirectives,
	- virtualDirectivesRaw
	+ virtualDirectives: {
	+ [virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
	+ },
	+ virtualDirectivesRaw: {
	+ [virtualName]: textColor
	+ }
	}
	} else {
	computed[selector] = computed[selector] \|\| {}

	// TODO: DEFAULT TEXT COLOR
	const lowerLevelStackedBackground = stacked[lowerLevelSelector] \|\| convert(ultimateBackgroundColor).rgb

	if (computedDirectives.background) {
	let inheritRule = null
	const variantRules = ruleset.filter(
	findRules({
	component: combination.component,
	variant: combination.variant,
	parent: combination.parent
	})
	)
	const lastVariantRule = variantRules[variantRules.length - 1]
	if (lastVariantRule) {
	inheritRule = lastVariantRule
	} else {
	const normalRules = ruleset.filter(findRules({
	component: combination.component,
	parent: combination.parent
	}))
	const lastNormalRule = normalRules[normalRules.length - 1]
	inheritRule = lastNormalRule
	}

	const inheritSelector = ruleToSelector({ ...inheritRule, parent: combination.parent }, true)
	const inheritedBackground = computed[inheritSelector].background

	dynamicVars.inheritedBackground = inheritedBackground

	const rgb = convert(findColor(computedDirectives.background, { dynamicVars, staticVars })).rgb

	if (!stacked[selector]) {
	let blend
	const alpha = computedDirectives.opacity ?? 1
	if (alpha >= 1) {
	blend = rgb
	} else if (alpha <= 0) {
	blend = lowerLevelStackedBackground
	} else {
	blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelStackedBackground)
	}
	stacked[selector] = blend
	computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
	}
	}

	if (computedDirectives.shadow) {
	dynamicVars.shadow = flattenDeep(findShadow(flattenDeep(computedDirectives.shadow), { dynamicVars, staticVars }))
	}

	if (!stacked[selector]) {
	computedDirectives.background = 'transparent'
	computedDirectives.opacity = 0
	stacked[selector] = lowerLevelStackedBackground
	computed[selector].background = { ...lowerLevelStackedBackground, a: 0 }
	}

	dynamicVars.stacked = stacked[selector]
	dynamicVars.background = computed[selector].background

	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!
	switch (type) {
	case 'color': {
	const color = findColor(value[0], { dynamicVars, staticVars })
	dynamicVars[k] = color
	if (combination.component === 'Root') {
	staticVars[k.substring(2)] = color
	}
	break
	}
	case 'shadow': {
	const shadow = value
	dynamicVars[k] = shadow
	if (combination.component === 'Root') {
	staticVars[k.substring(2)] = shadow
	}
	break
	}
	case 'generic': {
	dynamicVars[k] = value
	if (combination.component === 'Root') {
	staticVars[k.substring(2)] = value
	}
	break
	}
	}
	})

	const rule = {
	dynamicVars,
	selector: cssSelector,
	...combination,
	directives: computedDirectives
	}

	return rule
	}
	}

	const processInnerComponent = (component, parent) => {
	const combinations = []
	const {
	validInnerComponents = [],
	states: originalStates = {},
	variants: originalVariants = {}
	} = component

	// Normalizing states and variants to always include "normal"
	const states = { normal: '', ...originalStates }
	const variants = { normal: '', ...originalVariants }
	const innerComponents = (validInnerComponents).map(name => {
	const result = components[name]
	if (result === undefined) console.error(`Component ${component.name} references a component ${name} which does not exist!`)
	return result
	})

	// Optimization: we only really need combinations without "normal" because all states implicitly have it
	const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
	const stateCombinations = [
	['normal'],
	...getAllPossibleCombinations(permutationStateKeys)
	.map(combination => ['normal', ...combination])
	.filter(combo => {
	// Optimization: filter out some hard-coded combinations that don't make sense
	if (combo.indexOf('disabled') >= 0) {
	return !(
	combo.indexOf('hover') >= 0 \|\|
	combo.indexOf('focused') >= 0 \|\|
	combo.indexOf('pressed') >= 0
	)
	}
	return true
	})
	]

	const stateVariantCombination = Object.keys(variants).map(variant => {
	return stateCombinations.map(state => ({ variant, state }))
	}).reduce((acc, x) => [...acc, ...x], [])

	stateVariantCombination.forEach(combination => {
	combination.component = component.name
	combination.lazy = component.lazy \|\| parent?.lazy
	combination.parent = parent
	if (combination.state.indexOf('hover') >= 0) {
	combination.lazy = true
	}

	combinations.push(combination)

	innerComponents.forEach(innerComponent => {
	combinations.push(...processInnerComponent(innerComponent, combination))
	})
	})

	return combinations
	}

	const t0 = performance.now()
	const combinations = processInnerComponent(components.Root)
	const t1 = performance.now()
	console.debug('Tree tranveral took ' + (t1 - t0) + ' ms')

	const result = combinations.map((combination) => {
	if (combination.lazy) {
	return async () => processCombination(combination)
	} else {
	return processCombination(combination)
	}
	}).filter(x => x)
	const t2 = performance.now()
	console.debug('Eager processing took ' + (t2 - t1) + ' ms')

	return {
	lazy: result.filter(x => typeof x === 'function'),
	eager: result.filter(x => typeof x !== 'function'),
	staticVars
	}
	}

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 8, 7:16 PM (1 d, 17 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1723906
Default Alt Text: (56 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions