commit: 2172529dd06cb03be6341b3ae5cb2a74187e8e03
parent 0285efadbb10ed68940a2aef2f320fbf65f841c9
Author: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Feb 2024 01:05:17 +0200
backwards compat WORKING
Diffstat:
2 files changed, 214 insertions(+), 10 deletions(-)
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
@@ -4,9 +4,6 @@ import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/th
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 {
- sampleRules
-} from 'src/services/theme_data/pleromafe.t3.js'
import { defaultState } from '../../modules/config.js'
export const applyTheme = (input) => {
@@ -16,7 +13,8 @@ export const applyTheme = (input) => {
const t1 = performance.now()
console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
const extraRules = convertTheme2To3(theme)
- const themes3 = init([...sampleRules, ...extraRules])
+ console.log(extraRules)
+ const themes3 = init(extraRules)
const t2 = performance.now()
console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
const head = document.head
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
@@ -27,6 +27,18 @@ export const shadowsKeys = new Set([
'input'
])
+export const radiiKeys = new Set([
+ 'btn',
+ 'input',
+ // 'checkbox',
+ 'panel',
+ 'avatar',
+ 'avatarAlt',
+ 'tooltip',
+ 'attachment',
+ 'chatMessage'
+])
+
// Keys that are not available in editor and never meant to be edited
export const hiddenKeys = new Set([
'profileBg',
@@ -43,12 +55,13 @@ export const extendedBasePrefixes = [
'panel',
'topBar',
- 'tab',
+ // 'tab', // TODO: not implemented yet
'btn',
'input',
'selectedMenu',
'alert',
+ 'alertPopup',
'badge',
'post',
@@ -56,15 +69,31 @@ export const extendedBasePrefixes = [
'poll',
'chatBg',
- 'chatMessageIncoming',
- 'chatMessageOutgoing'
+ 'chatMessage'
]
+export const nonComponentPrefixes = new Set([
+ 'border',
+ 'icon',
+ 'highlight',
+ 'lightText',
+ 'chatBg'
+])
-export const extendedBaseKeys = Object.fromEntries(extendedBasePrefixes.map(prefix => [prefix, allKeys.filter(k => k.startsWith(prefix))]))
+export const extendedBaseKeys = Object.fromEntries(
+ extendedBasePrefixes.map(prefix => [
+ prefix,
+ allKeys.filter(k => {
+ if (prefix === 'alert') {
+ return k.startsWith(prefix) && !k.startsWith('alertPopup')
+ }
+ return k.startsWith(prefix)
+ })
+ ])
+)
// Keysets that are only really used intermideately, i.e. to generate other colors
export const temporary = new Set([
- 'border',
+ '',
'highlight'
])
@@ -80,6 +109,51 @@ export const convertTheme2To3 = (data) => {
}
}
+ const convertRadii = () => {
+ const newRules = []
+ radiiKeys.forEach(key => {
+ const originalRadius = data.radii[key]
+ const rule = {}
+
+ switch (key) {
+ case 'btn':
+ rule.component = 'Button'
+ break
+ case 'input':
+ rule.component = 'Input'
+ break
+ // TODO: missing feature?
+ // case 'checkbox':
+ // rule.component = 'Input'
+ // break
+ case 'panel':
+ rule.component = 'Panel'
+ break
+ case 'avatar':
+ rule.component = 'Avatar'
+ break
+ case 'avatarAlt':
+ rule.component = 'Avatar'
+ rule.variant = 'compact'
+ break
+ case 'tooltip':
+ rule.component = 'Popover'
+ break
+ case 'attachment':
+ rule.component = 'Attachment'
+ break
+ case 'ChatMessage':
+ rule.component = 'Button'
+ break
+ }
+ rule.directives = {
+ roundness: originalRadius
+ }
+ newRules.push(rule)
+ })
+ return newRules
+ }
+
const convertShadows = () => {
const newRules = []
shadowsKeys.forEach(key => {
@@ -129,5 +203,137 @@ export const convertTheme2To3 = (data) => {
return newRules
}
- return [generateRoot(), ...convertShadows()]
+ const extendedRules = Object.entries(extendedBaseKeys).map(([prefix, keys]) => {
+ if (nonComponentPrefixes.has(prefix)) return null
+ const rule = {}
+ if (prefix === 'alertPopup') {
+ rule.component = 'Alert'
+ rule.parent = { component: 'Popover' }
+ } else if (prefix === 'selectedPost') {
+ rule.component = 'Post'
+ rule.state = ['selected']
+ } else if (prefix === 'selectedMenu') {
+ rule.component = 'MenuItem'
+ rule.state = ['hover']
+ } else if (prefix === 'chatMessageIncoming') {
+ rule.component = 'ChatMessage'
+ } else if (prefix === 'chatMessageOutgoing') {
+ rule.component = 'ChatMessage'
+ rule.variant = 'outgoing'
+ } else if (prefix === 'panel') {
+ rule.component = 'PanelHeader'
+ } else if (prefix === 'topbar') {
+ rule.component = 'TopBar'
+ } else if (prefix === 'chatMessage') {
+ rule.component = 'ChatMessage'
+ } else if (prefix === 'poll') {
+ rule.component = 'PollGraph'
+ } else {
+ rule.component = prefix[0].toUpperCase() + prefix.slice(1).toLowerCase()
+ }
+ return keys.map((key) => {
+ const leftoverKey = key.replace(prefix, '')
+ const parts = (leftoverKey || 'Bg').match(/[A-Z][a-z]*/g)
+ const last = parts.slice(-1)[0]
+ let newRule = { directives: {} }
+ let variantArray = []
+
+ switch (last) {
+ case 'Text':
+ case 'Faint': // typo
+ case 'Link':
+ case 'Icon':
+ case 'Greentext':
+ case 'Cyantext':
+ case 'Border':
+ newRule.parent = rule
+ newRule.directives.textColor = data.colors[key]
+ variantArray = parts.slice(0, -1)
+ break
+ default:
+ newRule = { ...rule, directives: {} }
+ newRule.directives.background = data.colors[key]
+ variantArray = parts
+ break
+ }
+
+ if (last === 'Text' || last === 'Link') {
+ const secondLast = parts.slice(-2)[0]
+ if (secondLast === 'Light') {
+ return null // unsupported
+ } else if (secondLast === 'Faint') {
+ newRule.state = ['faint']
+ variantArray = parts.slice(0, -2)
+ }
+ }
+
+ switch (last) {
+ case 'Text':
+ case 'Link':
+ case 'Icon':
+ case 'Border':
+ newRule.component = last
+ break
+ case 'Greentext':
+ case 'Cyantext':
+ newRule.component = 'FunText'
+ newRule.variant = last.toLowerCase()
+ break
+ case 'Faint':
+ newRule.component = 'Text'
+ newRule.state = ['faint']
+ break
+ }
+
+ variantArray = variantArray.filter(x => x !== 'Bg')
+
+ if (last === 'Link' && prefix === 'selectedPost') {
+ // selectedPost has typo - duplicate 'Post'
+ variantArray = variantArray.filter(x => x !== 'Post')
+ }
+
+ if (prefix === 'popover' && variantArray[0] === 'Post') {
+ newRule.component = 'Post'
+ newRule.parent = { component: 'Popover' }
+ variantArray = variantArray.filter(x => x !== 'Post')
+ }
+
+ if (prefix === 'selectedMenu' && variantArray[0] === 'Popover') {
+ newRule.parent = { component: 'Popover' }
+ variantArray = variantArray.filter(x => x !== 'Popover')
+ }
+
+ switch (prefix) {
+ case 'btn':
+ case 'input':
+ case 'alert': {
+ const hasPanel = variantArray.find(x => x === 'Panel')
+ if (hasPanel) {
+ rule.parent = { component: 'PanelHeader' }
+ variantArray = variantArray.filter(x => x !== 'Panel')
+ }
+ const hasTop = variantArray.find(x => x === 'Top') // TopBar
+ if (hasTop) {
+ rule.parent = { component: 'TopBar' }
+ variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar')
+ }
+ break
+ }
+ }
+
+ if (variantArray.length > 0) {
+ if (prefix === 'btn') {
+ newRule.state = variantArray.map(x => x.toLowerCase())
+ } else {
+ newRule.variant = variantArray[0].toLowerCase()
+ }
+ }
+ console.log(key, newRule)
+ return newRule
+ })
+ })
+
+ const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x)
+
+ return [generateRoot(), ...convertShadows(), ...convertRadii(), ...flatExtRules]
}
