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

"fix" theme preview

Browse source
This commit is contained in:
Henry Jameson 2024-07-04 03:20:26 +03:00
parent 80cbf29bdf
commit 8a41313bb4
6 changed files with 175 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
preview.style.js Normal file
View file

87
src/components/settings_modal/tabs/theme_tab/theme_tab.js
View file

@ -1,7 +1,8 @@
import { import {
rgb2hex, rgb2hex,
hex2rgb, hex2rgb,
getContrastRatioLayers getContrastRatioLayers,
relativeLuminance
} from 'src/services/color_convert/color_convert.js' } from 'src/services/color_convert/color_convert.js'
import { import {
getThemes getThemes
@ -23,10 +24,14 @@ import {
generateShadows, generateShadows,
generateRadii, generateRadii,
generateFonts, generateFonts,
composePreset,
shadows2to3, shadows2to3,
colors2to3 colors2to3
} from 'src/services/theme_data/theme_data.service.js' } from 'src/services/theme_data/theme_data.service.js'
import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
import { init } from 'src/services/theme_data/theme_data_3.service.js'
import { getCssRules } from 'src/services/theme_data/css_utils.js'
import ColorInput from 'src/components/color_input/color_input.vue' import ColorInput from 'src/components/color_input/color_input.vue'
import RangeInput from 'src/components/range_input/range_input.vue' import RangeInput from 'src/components/range_input/range_input.vue'
import OpacityInput from 'src/components/opacity_input/opacity_input.vue' import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
@ -62,6 +67,7 @@ const colorConvert = (color) => {
export default { export default {
data () { data () {
return { return {
themeV3Preview: [],
themeImporter: newImporter({ themeImporter: newImporter({
validator: this.importValidator, validator: this.importValidator,
onImport: this.onImport, onImport: this.onImport,
@ -78,10 +84,7 @@ export default {
tempImportFile: undefined, tempImportFile: undefined,
engineVersion: 0, engineVersion: 0,
previewShadows: {}, previewTheme: {},
previewColors: {},
previewRadii: {},
previewFonts: {},
shadowsInvalid: true, shadowsInvalid: true,
colorsInvalid: true, colorsInvalid: true,
@ -232,13 +235,6 @@ export default {
chatMessage: this.chatMessageRadiusLocal 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 // This needs optimization maybe
previewContrast () { previewContrast () {
try { try {
@ -306,14 +302,6 @@ export default {
return {} return {}
} }
}, },
previewRules () {
if (!this.preview.rules) return ''
return [
...Object.values(this.preview.rules),
'color: var(--text)',
'font-family: var(--interfaceFont, sans-serif)'
].join(';')
},
shadowsAvailable () { shadowsAvailable () {
return Object.keys(DEFAULT_SHADOWS).sort() return Object.keys(DEFAULT_SHADOWS).sort()
}, },
@ -532,16 +520,24 @@ export default {
} }
}) })
}, },
updatePreviewColorsAndShadows () { updatePreviewColors () {
this.previewColors = generateColors({ const result = generateColors({
opacity: this.currentOpacity, opacity: this.currentOpacity,
colors: this.currentColors colors: this.currentColors
}) })
this.previewShadows = generateShadows( this.previewTheme.colors = result.theme.colors
{ shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion }, this.previewTheme.opacity = result.theme.opacity
this.previewColors.theme.colors, },
this.previewColors.mod updatePreviewShadows () {
) this.previewTheme.shadows = generateShadows(
{
shadows: this.shadowsLocal,
opacity: this.previewTheme.opacity,
themeEngineVersion: this.engineVersion
},
this.previewTheme.colors,
relativeLuminance(this.previewTheme.colors.bg) < 0.5 ? 1 : -1
).theme.shadows
}, },
importTheme () { this.themeImporter.importData() }, importTheme () { this.themeImporter.importData() },
exportTheme () { this.themeExporter.exportData() }, exportTheme () { this.themeExporter.exportData() },
@ -692,6 +688,8 @@ export default {
} else { } else {
this.shadowsLocal = shadows this.shadowsLocal = shadows
} }
this.updatePreviewColors()
this.updatePreviewShadows()
this.shadowSelected = this.shadowsAvailable[0] this.shadowSelected = this.shadowsAvailable[0]
} }
@ -699,12 +697,32 @@ export default {
this.clearFonts() this.clearFonts()
this.fontsLocal = fonts this.fontsLocal = fonts
} }
},
updateTheme3Preview () {
console.log(this.previewTheme)
const theme2 = convertTheme2To3(this.previewTheme)
const theme3 = init({
extraRuleset: theme2,
ultimateBackgroundColor: '#000000',
liteMode: true
})
this.themeV3Preview = getCssRules(theme3.eager)
.map(x => {
if (x.startsWith('html')) {
return x.replace('html', '#theme-preview')
} else if (x.startsWith('#content')) {
return x.replace('#content', '#theme-preview')
} else {
return '#theme-preview > ' + x
}
})
.join('\n')
} }
}, },
watch: { watch: {
currentRadii () { currentRadii () {
try { try {
this.previewRadii = generateRadii({ radii: this.currentRadii }) this.previewTheme.radii = generateRadii({ radii: this.currentRadii }).theme
this.radiiInvalid = false this.radiiInvalid = false
} catch (e) { } catch (e) {
this.radiiInvalid = true this.radiiInvalid = true
@ -713,9 +731,8 @@ export default {
}, },
shadowsLocal: { shadowsLocal: {
handler () { handler () {
if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
try { try {
this.updatePreviewColorsAndShadows() this.updatePreviewShadows()
this.shadowsInvalid = false this.shadowsInvalid = false
} catch (e) { } catch (e) {
this.shadowsInvalid = true this.shadowsInvalid = true
@ -727,7 +744,7 @@ export default {
fontsLocal: { fontsLocal: {
handler () { handler () {
try { try {
this.previewFonts = generateFonts({ fonts: this.fontsLocal }) this.previewTheme.fonts = generateFonts({ fonts: this.fontsLocal }).theme
this.fontsInvalid = false this.fontsInvalid = false
} catch (e) { } catch (e) {
this.fontsInvalid = true this.fontsInvalid = true
@ -738,18 +755,16 @@ export default {
}, },
currentColors () { currentColors () {
try { try {
this.updatePreviewColorsAndShadows() this.updatePreviewColors()
this.colorsInvalid = false this.colorsInvalid = false
this.shadowsInvalid = false
} catch (e) { } catch (e) {
this.colorsInvalid = true this.colorsInvalid = true
this.shadowsInvalid = true
console.warn(e) console.warn(e)
} }
}, },
currentOpacity () { currentOpacity () {
try { try {
this.updatePreviewColorsAndShadows() this.updatePreviewColors()
} catch (e) { } catch (e) {
console.warn(e) console.warn(e)
} }

203
src/components/settings_modal/tabs/theme_tab/theme_tab.vue
View file

@ -1,5 +1,8 @@
<template> <template>
<div class="theme-tab"> <div class="theme-tab">
<div class="alert warning">
{{ $t("settings.style.themes2_outdated") }}
</div>
<div class="presets-container"> <div class="presets-container">
<div class="save-load"> <div class="save-load">
<div <div
@ -120,7 +123,19 @@
</div> </div>
</div> </div>
<preview :style="previewRules" /> <!-- eslint-disable vue/no-v-text-v-html-on-component -->
<component :is="'style'" v-html="themeV3Preview"/>
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
<preview id="theme-preview"/>
<div>
<button
class="btn button-default"
@click="updateTheme3Preview"
>
{{ $t("settings.style.update_preview") }}
</button>
</div>
<keep-alive> <keep-alive>
<tab-switcher key="style-tweak"> <tab-switcher key="style-tweak">
@ -156,7 +171,7 @@
<OpacityInput <OpacityInput
v-model="bgOpacityLocal" v-model="bgOpacityLocal"
name="bgOpacity" name="bgOpacity"
:fallback="previewTheme.opacity.bg" :fallback="previewTheme.opacity?.bg"
/> />
<ColorInput <ColorInput
v-model="textColorLocal" v-model="textColorLocal"
@ -167,14 +182,14 @@
<ColorInput <ColorInput
v-model="accentColorLocal" v-model="accentColorLocal"
name="accentColor" name="accentColor"
:fallback="previewTheme.colors.link" :fallback="previewTheme.colors?.link"
:label="$t('settings.accent')" :label="$t('settings.accent')"
:show-optional-tickbox="typeof linkColorLocal !== 'undefined'" :show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
/> />
<ColorInput <ColorInput
v-model="linkColorLocal" v-model="linkColorLocal"
name="linkColor" name="linkColor"
:fallback="previewTheme.colors.accent" :fallback="previewTheme.colors?.accent"
:label="$t('settings.links')" :label="$t('settings.links')"
:show-optional-tickbox="typeof accentColorLocal !== 'undefined'" :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
/> />
@ -190,13 +205,13 @@
v-model="fgTextColorLocal" v-model="fgTextColorLocal"
name="fgTextColor" name="fgTextColor"
:label="$t('settings.text')" :label="$t('settings.text')"
:fallback="previewTheme.colors.fgText" :fallback="previewTheme.colors?.fgText"
/> />
<ColorInput <ColorInput
v-model="fgLinkColorLocal" v-model="fgLinkColorLocal"
name="fgLinkColor" name="fgLinkColor"
:label="$t('settings.links')" :label="$t('settings.links')"
:fallback="previewTheme.colors.fgLink" :fallback="previewTheme.colors?.fgLink"
/> />
<p>{{ $t('settings.style.common_colors.foreground_hint') }}</p> <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
</div> </div>
@ -256,14 +271,14 @@
<ColorInput <ColorInput
v-model="postLinkColorLocal" v-model="postLinkColorLocal"
name="postLinkColor" name="postLinkColor"
:fallback="previewTheme.colors.accent" :fallback="previewTheme.colors?.accent"
:label="$t('settings.links')" :label="$t('settings.links')"
/> />
<ContrastRatio :contrast="previewContrast.postLink" /> <ContrastRatio :contrast="previewContrast.postLink" />
<ColorInput <ColorInput
v-model="postGreentextColorLocal" v-model="postGreentextColorLocal"
name="postGreentextColor" name="postGreentextColor"
:fallback="previewTheme.colors.cGreen" :fallback="previewTheme.colors?.cGreen"
:label="$t('settings.greentext')" :label="$t('settings.greentext')"
/> />
<ContrastRatio :contrast="previewContrast.postGreentext" /> <ContrastRatio :contrast="previewContrast.postGreentext" />
@ -272,13 +287,13 @@
v-model="alertErrorColorLocal" v-model="alertErrorColorLocal"
name="alertError" name="alertError"
:label="$t('settings.style.advanced_colors.alert_error')" :label="$t('settings.style.advanced_colors.alert_error')"
:fallback="previewTheme.colors.alertError" :fallback="previewTheme.colors?.alertError"
/> />
<ColorInput <ColorInput
v-model="alertErrorTextColorLocal" v-model="alertErrorTextColorLocal"
name="alertErrorText" name="alertErrorText"
:label="$t('settings.text')" :label="$t('settings.text')"
:fallback="previewTheme.colors.alertErrorText" :fallback="previewTheme.colors?.alertErrorText"
/> />
<ContrastRatio <ContrastRatio
:contrast="previewContrast.alertErrorText" :contrast="previewContrast.alertErrorText"
@ -288,13 +303,13 @@
v-model="alertWarningColorLocal" v-model="alertWarningColorLocal"
name="alertWarning" name="alertWarning"
:label="$t('settings.style.advanced_colors.alert_warning')" :label="$t('settings.style.advanced_colors.alert_warning')"
:fallback="previewTheme.colors.alertWarning" :fallback="previewTheme.colors?.alertWarning"
/> />
<ColorInput <ColorInput
v-model="alertWarningTextColorLocal" v-model="alertWarningTextColorLocal"
name="alertWarningText" name="alertWarningText"
:label="$t('settings.text')" :label="$t('settings.text')"
:fallback="previewTheme.colors.alertWarningText" :fallback="previewTheme.colors?.alertWarningText"
/> />
<ContrastRatio <ContrastRatio
:contrast="previewContrast.alertWarningText" :contrast="previewContrast.alertWarningText"
@ -304,13 +319,13 @@
v-model="alertNeutralColorLocal" v-model="alertNeutralColorLocal"
name="alertNeutral" name="alertNeutral"
:label="$t('settings.style.advanced_colors.alert_neutral')" :label="$t('settings.style.advanced_colors.alert_neutral')"
:fallback="previewTheme.colors.alertNeutral" :fallback="previewTheme.colors?.alertNeutral"
/> />
<ColorInput <ColorInput
v-model="alertNeutralTextColorLocal" v-model="alertNeutralTextColorLocal"
name="alertNeutralText" name="alertNeutralText"
:label="$t('settings.text')" :label="$t('settings.text')"
:fallback="previewTheme.colors.alertNeutralText" :fallback="previewTheme.colors?.alertNeutralText"
/> />
<ContrastRatio <ContrastRatio
:contrast="previewContrast.alertNeutralText" :contrast="previewContrast.alertNeutralText"
@ -319,7 +334,7 @@
<OpacityInput <OpacityInput
v-model="alertOpacityLocal" v-model="alertOpacityLocal"
name="alertOpacity" name="alertOpacity"
:fallback="previewTheme.opacity.alert" :fallback="previewTheme.opacity?.alert"
/> />
</div> </div>
<div class="color-item"> <div class="color-item">
@ -328,13 +343,13 @@
v-model="badgeNotificationColorLocal" v-model="badgeNotificationColorLocal"
name="badgeNotification" name="badgeNotification"
:label="$t('settings.style.advanced_colors.badge_notification')" :label="$t('settings.style.advanced_colors.badge_notification')"
:fallback="previewTheme.colors.badgeNotification" :fallback="previewTheme.colors?.badgeNotification"
/> />
<ColorInput <ColorInput
v-model="badgeNotificationTextColorLocal" v-model="badgeNotificationTextColorLocal"
name="badgeNotificationText" name="badgeNotificationText"
:label="$t('settings.text')" :label="$t('settings.text')"
:fallback="previewTheme.colors.badgeNotificationText" :fallback="previewTheme.colors?.badgeNotificationText"
/> />
<ContrastRatio <ContrastRatio
:contrast="previewContrast.badgeNotificationText" :contrast="previewContrast.badgeNotificationText"
@ -346,19 +361,19 @@
<ColorInput <ColorInput
v-model="panelColorLocal" v-model="panelColorLocal"
name="panelColor" name="panelColor"
:fallback="previewTheme.colors.panel" :fallback="previewTheme.colors?.panel"
:label="$t('settings.background')" :label="$t('settings.background')"
/> />
<OpacityInput <OpacityInput
v-model="panelOpacityLocal" v-model="panelOpacityLocal"
name="panelOpacity" name="panelOpacity"
:fallback="previewTheme.opacity.panel" :fallback="previewTheme.opacity?.panel"
:disabled="panelColorLocal === 'transparent'" :disabled="panelColorLocal === 'transparent'"
/> />
<ColorInput <ColorInput
v-model="panelTextColorLocal" v-model="panelTextColorLocal"
name="panelTextColor" name="panelTextColor"
:fallback="previewTheme.colors.panelText" :fallback="previewTheme.colors?.panelText"
:label="$t('settings.text')" :label="$t('settings.text')"
/> />
<ContrastRatio <ContrastRatio
@ -368,7 +383,7 @@
<ColorInput <ColorInput
v-model="panelLinkColorLocal" v-model="panelLinkColorLocal"
name="panelLinkColor" name="panelLinkColor"
:fallback="previewTheme.colors.panelLink" :fallback="previewTheme.colors?.panelLink"
:label="$t('settings.links')" :label="$t('settings.links')"
/> />
<ContrastRatio <ContrastRatio
@ -381,20 +396,20 @@
<ColorInput <ColorInput
v-model="topBarColorLocal" v-model="topBarColorLocal"
name="topBarColor" name="topBarColor"
:fallback="previewTheme.colors.topBar" :fallback="previewTheme.colors?.topBar"
:label="$t('settings.background')" :label="$t('settings.background')"
/> />
<ColorInput <ColorInput
v-model="topBarTextColorLocal" v-model="topBarTextColorLocal"
name="topBarTextColor" name="topBarTextColor"
:fallback="previewTheme.colors.topBarText" :fallback="previewTheme.colors?.topBarText"
:label="$t('settings.text')" :label="$t('settings.text')"
/> />
<ContrastRatio :contrast="previewContrast.topBarText" /> <ContrastRatio :contrast="previewContrast.topBarText" />
<ColorInput <ColorInput
v-model="topBarLinkColorLocal" v-model="topBarLinkColorLocal"
name="topBarLinkColor" name="topBarLinkColor"
:fallback="previewTheme.colors.topBarLink" :fallback="previewTheme.colors?.topBarLink"
:label="$t('settings.links')" :label="$t('settings.links')"
/> />
<ContrastRatio :contrast="previewContrast.topBarLink" /> <ContrastRatio :contrast="previewContrast.topBarLink" />
@ -404,19 +419,19 @@
<ColorInput <ColorInput
v-model="inputColorLocal" v-model="inputColorLocal"
name="inputColor" name="inputColor"
:fallback="previewTheme.colors.input" :fallback="previewTheme.colors?.input"
:label="$t('settings.background')" :label="$t('settings.background')"
/> />
<OpacityInput <OpacityInput
v-model="inputOpacityLocal" v-model="inputOpacityLocal"
name="inputOpacity" name="inputOpacity"
:fallback="previewTheme.opacity.input" :fallback="previewTheme.opacity?.input"
:disabled="inputColorLocal === 'transparent'" :disabled="inputColorLocal === 'transparent'"
/> />
<ColorInput <ColorInput
v-model="inputTextColorLocal" v-model="inputTextColorLocal"
name="inputTextColor" name="inputTextColor"
:fallback="previewTheme.colors.inputText" :fallback="previewTheme.colors?.inputText"
:label="$t('settings.text')" :label="$t('settings.text')"
/> />
<ContrastRatio :contrast="previewContrast.inputText" /> <ContrastRatio :contrast="previewContrast.inputText" />
@ -426,33 +441,33 @@
<ColorInput <ColorInput
v-model="btnColorLocal" v-model="btnColorLocal"
name="btnColor" name="btnColor"
:fallback="previewTheme.colors.btn" :fallback="previewTheme.colors?.btn"
:label="$t('settings.background')" :label="$t('settings.background')"
/> />
<OpacityInput <OpacityInput
v-model="btnOpacityLocal" v-model="btnOpacityLocal"
name="btnOpacity" name="btnOpacity"
:fallback="previewTheme.opacity.btn" :fallback="previewTheme.opacity?.btn"
:disabled="btnColorLocal === 'transparent'" :disabled="btnColorLocal === 'transparent'"
/> />
<ColorInput <ColorInput
v-model="btnTextColorLocal" v-model="btnTextColorLocal"
name="btnTextColor" name="btnTextColor"
:fallback="previewTheme.colors.btnText" :fallback="previewTheme.colors?.btnText"
:label="$t('settings.text')" :label="$t('settings.text')"
/> />
<ContrastRatio :contrast="previewContrast.btnText" /> <ContrastRatio :contrast="previewContrast.btnText" />
<ColorInput <ColorInput
v-model="btnPanelTextColorLocal" v-model="btnPanelTextColorLocal"
name="btnPanelTextColor" name="btnPanelTextColor"
:fallback="previewTheme.colors.btnPanelText" :fallback="previewTheme.colors?.btnPanelText"
:label="$t('settings.style.advanced_colors.panel_header')" :label="$t('settings.style.advanced_colors.panel_header')"
/> />
<ContrastRatio :contrast="previewContrast.btnPanelText" /> <ContrastRatio :contrast="previewContrast.btnPanelText" />
<ColorInput <ColorInput
v-model="btnTopBarTextColorLocal" v-model="btnTopBarTextColorLocal"
name="btnTopBarTextColor" name="btnTopBarTextColor"
:fallback="previewTheme.colors.btnTopBarText" :fallback="previewTheme.colors?.btnTopBarText"
:label="$t('settings.style.advanced_colors.top_bar')" :label="$t('settings.style.advanced_colors.top_bar')"
/> />
<ContrastRatio :contrast="previewContrast.btnTopBarText" /> <ContrastRatio :contrast="previewContrast.btnTopBarText" />
@ -460,27 +475,27 @@
<ColorInput <ColorInput
v-model="btnPressedColorLocal" v-model="btnPressedColorLocal"
name="btnPressedColor" name="btnPressedColor"
:fallback="previewTheme.colors.btnPressed" :fallback="previewTheme.colors?.btnPressed"
:label="$t('settings.background')" :label="$t('settings.background')"
/> />
<ColorInput <ColorInput
v-model="btnPressedTextColorLocal" v-model="btnPressedTextColorLocal"
name="btnPressedTextColor" name="btnPressedTextColor"
:fallback="previewTheme.colors.btnPressedText" :fallback="previewTheme.colors?.btnPressedText"
:label="$t('settings.text')" :label="$t('settings.text')"
/> />
<ContrastRatio :contrast="previewContrast.btnPressedText" /> <ContrastRatio :contrast="previewContrast.btnPressedText" />
<ColorInput <ColorInput
v-model="btnPressedPanelTextColorLocal" v-model="btnPressedPanelTextColorLocal"
name="btnPressedPanelTextColor" name="btnPressedPanelTextColor"
:fallback="previewTheme.colors.btnPressedPanelText" :fallback="previewTheme.colors?.btnPressedPanelText"
:label="$t('settings.style.advanced_colors.panel_header')" :label="$t('settings.style.advanced_colors.panel_header')"
/> />
<ContrastRatio :contrast="previewContrast.btnPressedPanelText" /> <ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
<ColorInput <ColorInput
v-model="btnPressedTopBarTextColorLocal" v-model="btnPressedTopBarTextColorLocal"
name="btnPressedTopBarTextColor" name="btnPressedTopBarTextColor"
:fallback="previewTheme.colors.btnPressedTopBarText" :fallback="previewTheme.colors?.btnPressedTopBarText"
:label="$t('settings.style.advanced_colors.top_bar')" :label="$t('settings.style.advanced_colors.top_bar')"
/> />
<ContrastRatio :contrast="previewContrast.btnPressedTopBarText" /> <ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
@ -488,52 +503,52 @@
<ColorInput <ColorInput
v-model="btnDisabledColorLocal" v-model="btnDisabledColorLocal"
name="btnDisabledColor" name="btnDisabledColor"
:fallback="previewTheme.colors.btnDisabled" :fallback="previewTheme.colors?.btnDisabled"
:label="$t('settings.background')" :label="$t('settings.background')"
/> />
<ColorInput <ColorInput
v-model="btnDisabledTextColorLocal" v-model="btnDisabledTextColorLocal"
name="btnDisabledTextColor" name="btnDisabledTextColor"
:fallback="previewTheme.colors.btnDisabledText" :fallback="previewTheme.colors?.btnDisabledText"
:label="$t('settings.text')" :label="$t('settings.text')"
/> />
<ColorInput <ColorInput
v-model="btnDisabledPanelTextColorLocal" v-model="btnDisabledPanelTextColorLocal"
name="btnDisabledPanelTextColor" name="btnDisabledPanelTextColor"
:fallback="previewTheme.colors.btnDisabledPanelText" :fallback="previewTheme.colors?.btnDisabledPanelText"
:label="$t('settings.style.advanced_colors.panel_header')" :label="$t('settings.style.advanced_colors.panel_header')"
/> />
<ColorInput <ColorInput
v-model="btnDisabledTopBarTextColorLocal" v-model="btnDisabledTopBarTextColorLocal"
name="btnDisabledTopBarTextColor" name="btnDisabledTopBarTextColor"
:fallback="previewTheme.colors.btnDisabledTopBarText" :fallback="previewTheme.colors?.btnDisabledTopBarText"
:label="$t('settings.style.advanced_colors.top_bar')" :label="$t('settings.style.advanced_colors.top_bar')"
/> />
<h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5> <h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
<ColorInput <ColorInput
v-model="btnToggledColorLocal" v-model="btnToggledColorLocal"
name="btnToggledColor" name="btnToggledColor"
:fallback="previewTheme.colors.btnToggled" :fallback="previewTheme.colors?.btnToggled"
:label="$t('settings.background')" :label="$t('settings.background')"
/> />
<ColorInput <ColorInput
v-model="btnToggledTextColorLocal" v-model="btnToggledTextColorLocal"
name="btnToggledTextColor" name="btnToggledTextColor"
:fallback="previewTheme.colors.btnToggledText" :fallback="previewTheme.colors?.btnToggledText"
:label="$t('settings.text')" :label="$t('settings.text')"
/> />
<ContrastRatio :contrast="previewContrast.btnToggledText" /> <ContrastRatio :contrast="previewContrast.btnToggledText" />
<ColorInput <ColorInput
v-model="btnToggledPanelTextColorLocal" v-model="btnToggledPanelTextColorLocal"
name="btnToggledPanelTextColor" name="btnToggledPanelTextColor"
:fallback="previewTheme.colors.btnToggledPanelText" :fallback="previewTheme.colors?.btnToggledPanelText"
:label="$t('settings.style.advanced_colors.panel_header')" :label="$t('settings.style.advanced_colors.panel_header')"
/> />
<ContrastRatio :contrast="previewContrast.btnToggledPanelText" /> <ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
<ColorInput <ColorInput
v-model="btnToggledTopBarTextColorLocal" v-model="btnToggledTopBarTextColorLocal"
name="btnToggledTopBarTextColor" name="btnToggledTopBarTextColor"
:fallback="previewTheme.colors.btnToggledTopBarText" :fallback="previewTheme.colors?.btnToggledTopBarText"
:label="$t('settings.style.advanced_colors.top_bar')" :label="$t('settings.style.advanced_colors.top_bar')"
/> />
<ContrastRatio :contrast="previewContrast.btnToggledTopBarText" /> <ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
@ -543,20 +558,20 @@
<ColorInput <ColorInput
v-model="tabColorLocal" v-model="tabColorLocal"
name="tabColor" name="tabColor"
:fallback="previewTheme.colors.tab" :fallback="previewTheme.colors?.tab"
:label="$t('settings.background')" :label="$t('settings.background')"
/> />
<ColorInput <ColorInput
v-model="tabTextColorLocal" v-model="tabTextColorLocal"
name="tabTextColor" name="tabTextColor"
:fallback="previewTheme.colors.tabText" :fallback="previewTheme.colors?.tabText"
:label="$t('settings.text')" :label="$t('settings.text')"
/> />
<ContrastRatio :contrast="previewContrast.tabText" /> <ContrastRatio :contrast="previewContrast.tabText" />
<ColorInput <ColorInput
v-model="tabActiveTextColorLocal" v-model="tabActiveTextColorLocal"
name="tabActiveTextColor" name="tabActiveTextColor"
:fallback="previewTheme.colors.tabActiveText" :fallback="previewTheme.colors?.tabActiveText"
:label="$t('settings.text')" :label="$t('settings.text')"
/> />
<ContrastRatio :contrast="previewContrast.tabActiveText" /> <ContrastRatio :contrast="previewContrast.tabActiveText" />
@ -566,13 +581,13 @@
<ColorInput <ColorInput
v-model="borderColorLocal" v-model="borderColorLocal"
name="borderColor" name="borderColor"
:fallback="previewTheme.colors.border" :fallback="previewTheme.colors?.border"
:label="$t('settings.style.common.color')" :label="$t('settings.style.common.color')"
/> />
<OpacityInput <OpacityInput
v-model="borderOpacityLocal" v-model="borderOpacityLocal"
name="borderOpacity" name="borderOpacity"
:fallback="previewTheme.opacity.border" :fallback="previewTheme.opacity?.border"
:disabled="borderColorLocal === 'transparent'" :disabled="borderColorLocal === 'transparent'"
/> />
</div> </div>
@ -581,25 +596,25 @@
<ColorInput <ColorInput
v-model="faintColorLocal" v-model="faintColorLocal"
name="faintColor" name="faintColor"
:fallback="previewTheme.colors.faint" :fallback="previewTheme.colors?.faint"
:label="$t('settings.text')" :label="$t('settings.text')"
/> />
<ColorInput <ColorInput
v-model="faintLinkColorLocal" v-model="faintLinkColorLocal"
name="faintLinkColor" name="faintLinkColor"
:fallback="previewTheme.colors.faintLink" :fallback="previewTheme.colors?.faintLink"
:label="$t('settings.links')" :label="$t('settings.links')"
/> />
<ColorInput <ColorInput
v-model="panelFaintColorLocal" v-model="panelFaintColorLocal"
name="panelFaintColor" name="panelFaintColor"
:fallback="previewTheme.colors.panelFaint" :fallback="previewTheme.colors?.panelFaint"
:label="$t('settings.style.advanced_colors.panel_header')" :label="$t('settings.style.advanced_colors.panel_header')"
/> />
<OpacityInput <OpacityInput
v-model="faintOpacityLocal" v-model="faintOpacityLocal"
name="faintOpacity" name="faintOpacity"
:fallback="previewTheme.opacity.faint" :fallback="previewTheme.opacity?.faint"
/> />
</div> </div>
<div class="color-item"> <div class="color-item">
@ -608,12 +623,12 @@
v-model="underlayColorLocal" v-model="underlayColorLocal"
name="underlay" name="underlay"
:label="$t('settings.style.advanced_colors.underlay')" :label="$t('settings.style.advanced_colors.underlay')"
:fallback="previewTheme.colors.underlay" :fallback="previewTheme.colors?.underlay"
/> />
<OpacityInput <OpacityInput
v-model="underlayOpacityLocal" v-model="underlayOpacityLocal"
name="underlayOpacity" name="underlayOpacity"
:fallback="previewTheme.opacity.underlay" :fallback="previewTheme.opacity?.underlay"
:disabled="underlayOpacityLocal === 'transparent'" :disabled="underlayOpacityLocal === 'transparent'"
/> />
</div> </div>
@ -623,7 +638,7 @@
v-model="wallpaperColorLocal" v-model="wallpaperColorLocal"
name="wallpaper" name="wallpaper"
:label="$t('settings.style.advanced_colors.wallpaper')" :label="$t('settings.style.advanced_colors.wallpaper')"
:fallback="previewTheme.colors.wallpaper" :fallback="previewTheme.colors?.wallpaper"
/> />
</div> </div>
<div class="color-item"> <div class="color-item">
@ -632,13 +647,13 @@
v-model="pollColorLocal" v-model="pollColorLocal"
name="poll" name="poll"
:label="$t('settings.background')" :label="$t('settings.background')"
:fallback="previewTheme.colors.poll" :fallback="previewTheme.colors?.poll"
/> />
<ColorInput <ColorInput
v-model="pollTextColorLocal" v-model="pollTextColorLocal"
name="pollText" name="pollText"
:label="$t('settings.text')" :label="$t('settings.text')"
:fallback="previewTheme.colors.pollText" :fallback="previewTheme.colors?.pollText"
/> />
</div> </div>
<div class="color-item"> <div class="color-item">
@ -647,7 +662,7 @@
v-model="iconColorLocal" v-model="iconColorLocal"
name="icon" name="icon"
:label="$t('settings.style.advanced_colors.icons')" :label="$t('settings.style.advanced_colors.icons')"
:fallback="previewTheme.colors.icon" :fallback="previewTheme.colors?.icon"
/> />
</div> </div>
<div class="color-item"> <div class="color-item">
@ -656,20 +671,20 @@
v-model="highlightColorLocal" v-model="highlightColorLocal"
name="highlight" name="highlight"
:label="$t('settings.background')" :label="$t('settings.background')"
:fallback="previewTheme.colors.highlight" :fallback="previewTheme.colors?.highlight"
/> />
<ColorInput <ColorInput
v-model="highlightTextColorLocal" v-model="highlightTextColorLocal"
name="highlightText" name="highlightText"
:label="$t('settings.text')" :label="$t('settings.text')"
:fallback="previewTheme.colors.highlightText" :fallback="previewTheme.colors?.highlightText"
/> />
<ContrastRatio :contrast="previewContrast.highlightText" /> <ContrastRatio :contrast="previewContrast.highlightText" />
<ColorInput <ColorInput
v-model="highlightLinkColorLocal" v-model="highlightLinkColorLocal"
name="highlightLink" name="highlightLink"
:label="$t('settings.links')" :label="$t('settings.links')"
:fallback="previewTheme.colors.highlightLink" :fallback="previewTheme.colors?.highlightLink"
/> />
<ContrastRatio :contrast="previewContrast.highlightLink" /> <ContrastRatio :contrast="previewContrast.highlightLink" />
</div> </div>
@ -679,26 +694,26 @@
v-model="popoverColorLocal" v-model="popoverColorLocal"
name="popover" name="popover"
:label="$t('settings.background')" :label="$t('settings.background')"
:fallback="previewTheme.colors.popover" :fallback="previewTheme.colors?.popover"
/> />
<OpacityInput <OpacityInput
v-model="popoverOpacityLocal" v-model="popoverOpacityLocal"
name="popoverOpacity" name="popoverOpacity"
:fallback="previewTheme.opacity.popover" :fallback="previewTheme.opacity?.popover"
:disabled="popoverOpacityLocal === 'transparent'" :disabled="popoverOpacityLocal === 'transparent'"
/> />
<ColorInput <ColorInput
v-model="popoverTextColorLocal" v-model="popoverTextColorLocal"
name="popoverText" name="popoverText"
:label="$t('settings.text')" :label="$t('settings.text')"
:fallback="previewTheme.colors.popoverText" :fallback="previewTheme.colors?.popoverText"
/> />
<ContrastRatio :contrast="previewContrast.popoverText" /> <ContrastRatio :contrast="previewContrast.popoverText" />
<ColorInput <ColorInput
v-model="popoverLinkColorLocal" v-model="popoverLinkColorLocal"
name="popoverLink" name="popoverLink"
:label="$t('settings.links')" :label="$t('settings.links')"
:fallback="previewTheme.colors.popoverLink" :fallback="previewTheme.colors?.popoverLink"
/> />
<ContrastRatio :contrast="previewContrast.popoverLink" /> <ContrastRatio :contrast="previewContrast.popoverLink" />
</div> </div>
@ -708,20 +723,20 @@
v-model="selectedPostColorLocal" v-model="selectedPostColorLocal"
name="selectedPost" name="selectedPost"
:label="$t('settings.background')" :label="$t('settings.background')"
:fallback="previewTheme.colors.selectedPost" :fallback="previewTheme.colors?.selectedPost"
/> />
<ColorInput <ColorInput
v-model="selectedPostTextColorLocal" v-model="selectedPostTextColorLocal"
name="selectedPostText" name="selectedPostText"
:label="$t('settings.text')" :label="$t('settings.text')"
:fallback="previewTheme.colors.selectedPostText" :fallback="previewTheme.colors?.selectedPostText"
/> />
<ContrastRatio :contrast="previewContrast.selectedPostText" /> <ContrastRatio :contrast="previewContrast.selectedPostText" />
<ColorInput <ColorInput
v-model="selectedPostLinkColorLocal" v-model="selectedPostLinkColorLocal"
name="selectedPostLink" name="selectedPostLink"
:label="$t('settings.links')" :label="$t('settings.links')"
:fallback="previewTheme.colors.selectedPostLink" :fallback="previewTheme.colors?.selectedPostLink"
/> />
<ContrastRatio :contrast="previewContrast.selectedPostLink" /> <ContrastRatio :contrast="previewContrast.selectedPostLink" />
</div> </div>
@ -731,20 +746,20 @@
v-model="selectedMenuColorLocal" v-model="selectedMenuColorLocal"
name="selectedMenu" name="selectedMenu"
:label="$t('settings.background')" :label="$t('settings.background')"
:fallback="previewTheme.colors.selectedMenu" :fallback="previewTheme.colors?.selectedMenu"
/> />
<ColorInput <ColorInput
v-model="selectedMenuTextColorLocal" v-model="selectedMenuTextColorLocal"
name="selectedMenuText" name="selectedMenuText"
:label="$t('settings.text')" :label="$t('settings.text')"
:fallback="previewTheme.colors.selectedMenuText" :fallback="previewTheme.colors?.selectedMenuText"
/> />
<ContrastRatio :contrast="previewContrast.selectedMenuText" /> <ContrastRatio :contrast="previewContrast.selectedMenuText" />
<ColorInput <ColorInput
v-model="selectedMenuLinkColorLocal" v-model="selectedMenuLinkColorLocal"
name="selectedMenuLink" name="selectedMenuLink"
:label="$t('settings.links')" :label="$t('settings.links')"
:fallback="previewTheme.colors.selectedMenuLink" :fallback="previewTheme.colors?.selectedMenuLink"
/> />
<ContrastRatio :contrast="previewContrast.selectedMenuLink" /> <ContrastRatio :contrast="previewContrast.selectedMenuLink" />
</div> </div>
@ -753,57 +768,57 @@
<ColorInput <ColorInput
v-model="chatBgColorLocal" v-model="chatBgColorLocal"
name="chatBgColor" name="chatBgColor"
:fallback="previewTheme.colors.bg" :fallback="previewTheme.colors?.bg"
:label="$t('settings.background')" :label="$t('settings.background')"
/> />
<h5>{{ $t('settings.style.advanced_colors.chat.incoming') }}</h5> <h5>{{ $t('settings.style.advanced_colors.chat.incoming') }}</h5>
<ColorInput <ColorInput
v-model="chatMessageIncomingBgColorLocal" v-model="chatMessageIncomingBgColorLocal"
name="chatMessageIncomingBgColor" name="chatMessageIncomingBgColor"
:fallback="previewTheme.colors.bg" :fallback="previewTheme.colors?.bg"
:label="$t('settings.background')" :label="$t('settings.background')"
/> />
<ColorInput <ColorInput
v-model="chatMessageIncomingTextColorLocal" v-model="chatMessageIncomingTextColorLocal"
name="chatMessageIncomingTextColor" name="chatMessageIncomingTextColor"
:fallback="previewTheme.colors.text" :fallback="previewTheme.colors?.text"
:label="$t('settings.text')" :label="$t('settings.text')"
/> />
<ColorInput <ColorInput
v-model="chatMessageIncomingLinkColorLocal" v-model="chatMessageIncomingLinkColorLocal"
name="chatMessageIncomingLinkColor" name="chatMessageIncomingLinkColor"
:fallback="previewTheme.colors.link" :fallback="previewTheme.colors?.link"
:label="$t('settings.links')" :label="$t('settings.links')"
/> />
<ColorInput <ColorInput
v-model="chatMessageIncomingBorderColorLocal" v-model="chatMessageIncomingBorderColorLocal"
name="chatMessageIncomingBorderLinkColor" name="chatMessageIncomingBorderLinkColor"
:fallback="previewTheme.colors.fg" :fallback="previewTheme.colors?.fg"
:label="$t('settings.style.advanced_colors.chat.border')" :label="$t('settings.style.advanced_colors.chat.border')"
/> />
<h5>{{ $t('settings.style.advanced_colors.chat.outgoing') }}</h5> <h5>{{ $t('settings.style.advanced_colors.chat.outgoing') }}</h5>
<ColorInput <ColorInput
v-model="chatMessageOutgoingBgColorLocal" v-model="chatMessageOutgoingBgColorLocal"
name="chatMessageOutgoingBgColor" name="chatMessageOutgoingBgColor"
:fallback="previewTheme.colors.bg" :fallback="previewTheme.colors?.bg"
:label="$t('settings.background')" :label="$t('settings.background')"
/> />
<ColorInput <ColorInput
v-model="chatMessageOutgoingTextColorLocal" v-model="chatMessageOutgoingTextColorLocal"
name="chatMessageOutgoingTextColor" name="chatMessageOutgoingTextColor"
:fallback="previewTheme.colors.text" :fallback="previewTheme.colors?.text"
:label="$t('settings.text')" :label="$t('settings.text')"
/> />
<ColorInput <ColorInput
v-model="chatMessageOutgoingLinkColorLocal" v-model="chatMessageOutgoingLinkColorLocal"
name="chatMessageOutgoingLinkColor" name="chatMessageOutgoingLinkColor"
:fallback="previewTheme.colors.link" :fallback="previewTheme.colors?.link"
:label="$t('settings.links')" :label="$t('settings.links')"
/> />
<ColorInput <ColorInput
v-model="chatMessageOutgoingBorderColorLocal" v-model="chatMessageOutgoingBorderColorLocal"
name="chatMessageOutgoingBorderLinkColor" name="chatMessageOutgoingBorderLinkColor"
:fallback="previewTheme.colors.bg" :fallback="previewTheme.colors?.bg"
:label="$t('settings.style.advanced_colors.chat.border')" :label="$t('settings.style.advanced_colors.chat.border')"
/> />
</div> </div>
@ -826,7 +841,7 @@
v-model="btnRadiusLocal" v-model="btnRadiusLocal"
name="btnRadius" name="btnRadius"
:label="$t('settings.btnRadius')" :label="$t('settings.btnRadius')"
:fallback="previewTheme.radii.btn" :fallback="previewTheme.radii?.btn"
max="16" max="16"
hard-min="0" hard-min="0"
/> />
@ -834,7 +849,7 @@
v-model="inputRadiusLocal" v-model="inputRadiusLocal"
name="inputRadius" name="inputRadius"
:label="$t('settings.inputRadius')" :label="$t('settings.inputRadius')"
:fallback="previewTheme.radii.input" :fallback="previewTheme.radii?.input"
max="9" max="9"
hard-min="0" hard-min="0"
/> />
@ -842,7 +857,7 @@
v-model="checkboxRadiusLocal" v-model="checkboxRadiusLocal"
name="checkboxRadius" name="checkboxRadius"
:label="$t('settings.checkboxRadius')" :label="$t('settings.checkboxRadius')"
:fallback="previewTheme.radii.checkbox" :fallback="previewTheme.radii?.checkbox"
max="16" max="16"
hard-min="0" hard-min="0"
/> />
@ -850,7 +865,7 @@
v-model="panelRadiusLocal" v-model="panelRadiusLocal"
name="panelRadius" name="panelRadius"
:label="$t('settings.panelRadius')" :label="$t('settings.panelRadius')"
:fallback="previewTheme.radii.panel" :fallback="previewTheme.radii?.panel"
max="50" max="50"
hard-min="0" hard-min="0"
/> />
@ -858,7 +873,7 @@
v-model="avatarRadiusLocal" v-model="avatarRadiusLocal"
name="avatarRadius" name="avatarRadius"
:label="$t('settings.avatarRadius')" :label="$t('settings.avatarRadius')"
:fallback="previewTheme.radii.avatar" :fallback="previewTheme.radii?.avatar"
max="28" max="28"
hard-min="0" hard-min="0"
/> />
@ -866,7 +881,7 @@
v-model="avatarAltRadiusLocal" v-model="avatarAltRadiusLocal"
name="avatarAltRadius" name="avatarAltRadius"
:label="$t('settings.avatarAltRadius')" :label="$t('settings.avatarAltRadius')"
:fallback="previewTheme.radii.avatarAlt" :fallback="previewTheme.radii?.avatarAlt"
max="28" max="28"
hard-min="0" hard-min="0"
/> />
@ -874,7 +889,7 @@
v-model="attachmentRadiusLocal" v-model="attachmentRadiusLocal"
name="attachmentRadius" name="attachmentRadius"
:label="$t('settings.attachmentRadius')" :label="$t('settings.attachmentRadius')"
:fallback="previewTheme.radii.attachment" :fallback="previewTheme.radii?.attachment"
max="50" max="50"
hard-min="0" hard-min="0"
/> />
@ -882,7 +897,7 @@
v-model="tooltipRadiusLocal" v-model="tooltipRadiusLocal"
name="tooltipRadius" name="tooltipRadius"
:label="$t('settings.tooltipRadius')" :label="$t('settings.tooltipRadius')"
:fallback="previewTheme.radii.tooltip" :fallback="previewTheme.radii?.tooltip"
max="50" max="50"
hard-min="0" hard-min="0"
/> />
@ -890,7 +905,7 @@
v-model="chatMessageRadiusLocal" v-model="chatMessageRadiusLocal"
name="chatMessageRadius" name="chatMessageRadius"
:label="$t('settings.chatMessageRadius')" :label="$t('settings.chatMessageRadius')"
:fallback="previewTheme.radii.chatMessage || 2" :fallback="previewTheme.radii?.chatMessage || 2"
max="50" max="50"
hard-min="0" hard-min="0"
/> />
@ -996,26 +1011,26 @@
v-model="fontsLocal.interface" v-model="fontsLocal.interface"
name="ui" name="ui"
:label="$t('settings.style.fonts.components.interface')" :label="$t('settings.style.fonts.components.interface')"
:fallback="previewTheme.fonts.interface" :fallback="previewTheme.fonts?.interface"
no-inherit="1" no-inherit="1"
/> />
<FontControl <FontControl
v-model="fontsLocal.input" v-model="fontsLocal.input"
name="input" name="input"
:label="$t('settings.style.fonts.components.input')" :label="$t('settings.style.fonts.components.input')"
:fallback="previewTheme.fonts.input" :fallback="previewTheme.fonts?.input"
/> />
<FontControl <FontControl
v-model="fontsLocal.post" v-model="fontsLocal.post"
name="post" name="post"
:label="$t('settings.style.fonts.components.post')" :label="$t('settings.style.fonts.components.post')"
:fallback="previewTheme.fonts.post" :fallback="previewTheme.fonts?.post"
/> />
<FontControl <FontControl
v-model="fontsLocal.postCode" v-model="fontsLocal.postCode"
name="postCode" name="postCode"
:label="$t('settings.style.fonts.components.postCode')" :label="$t('settings.style.fonts.components.postCode')"
:fallback="previewTheme.fonts.postCode" :fallback="previewTheme.fonts?.postCode"
/> />
</div> </div>
</tab-switcher> </tab-switcher>

2
src/i18n/en.json
View file

@ -745,6 +745,8 @@
"enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.", "enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
"more_settings": "More settings", "more_settings": "More settings",
"style": { "style": {
"themes2_outdated": "Editor for Themes V2 is no longer supported and presented here for sake of legacy.",
"update_preview": "Update preview",
"themes3": { "themes3": {
"define": "Override", "define": "Override",
"font": { "font": {

6
src/services/style_setter/style_setter.js
View file

@ -61,7 +61,11 @@ export const generateTheme = async (input, callbacks, debug) => {
} }
// Assuming that "worst case scenario background" is panel background since it's the most likely one // Assuming that "worst case scenario background" is panel background since it's the most likely one
const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim(), debug) const themes3 = init({
extraRules,
ultimateBackgroundColor: extraRules[0].directives['--bg'].split('|')[1].trim(),
debug
})
console.log('DEBUG 2 IS', debug) console.log('DEBUG 2 IS', debug)

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

@ -149,7 +149,13 @@ const ruleToSelector = genericRuleToSelector(components)
export const getEngineChecksum = () => engineChecksum export const getEngineChecksum = () => engineChecksum
export const init = (extraRuleset, ultimateBackgroundColor, debug) => { export const init = ({
extraRuleset,
ultimateBackgroundColor,
debug = false,
liteMode = false,
rootComponentName = 'Root'
}) => {
const staticVars = {} const staticVars = {}
const stacked = {} const stacked = {}
const computed = {} const computed = {}
@ -451,7 +457,7 @@ export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
} }
const t0 = performance.now() const t0 = performance.now()
const combinations = processInnerComponent(components.Root) const combinations = processInnerComponent(components[rootComponentName] ?? components.Root)
const t1 = performance.now() const t1 = performance.now()
console.debug('Tree traveral took ' + (t1 - t0) + ' ms') console.debug('Tree traveral took ' + (t1 - t0) + ' ms')