independence from themes3, converter/backwards compat WIP

This commit is contained in:
Henry Jameson 2024-02-19 20:47:27 +02:00
parent 23dc2d1a5b
commit 0285efadbb
3 changed files with 106 additions and 23 deletions

View File

@ -2,6 +2,7 @@ import { convert } from 'chromatism'
import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
import { getColors, computeDynamicColor, getOpacitySlot } 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 {
sampleRules
@ -10,10 +11,12 @@ import { defaultState } from '../../modules/config.js'
export const applyTheme = (input) => {
const t0 = performance.now()
const { rules, t3b } = generatePreset(input)
const { rules, theme } = generatePreset(input)
console.log(rules, theme)
const t1 = performance.now()
console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
const themes3 = init(sampleRules, t3b)
const extraRules = convertTheme2To3(theme)
const themes3 = init([...sampleRules, ...extraRules])
const t2 = performance.now()
console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
const head = document.head
@ -26,7 +29,7 @@ export const applyTheme = (input) => {
styleSheet.toString()
styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
getCssRules(themes3.eager, t3b).forEach(rule => {
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)
@ -45,7 +48,7 @@ export const applyTheme = (input) => {
})
body.classList.remove('hidden')
themes3.lazy.then(lazyRules => {
getCssRules(lazyRules, t3b).forEach(rule => {
getCssRules(lazyRules, themes3.staticVars).forEach(rule => {
styleSheet.insertRule(rule, 'index-max')
})
const t3 = performance.now()
@ -358,7 +361,7 @@ export const generateShadows = (input, colors) => {
}
}
export const composePreset = (colors, radii, shadows, fonts, t3b) => {
export const composePreset = (colors, radii, shadows, fonts) => {
return {
rules: {
...shadows.rules,
@ -371,8 +374,7 @@ export const composePreset = (colors, radii, shadows, fonts, t3b) => {
...colors.theme,
...radii.theme,
...fonts.theme
},
t3b
}
}
}
@ -382,8 +384,7 @@ export const generatePreset = (input) => {
colors,
generateRadii(input),
generateShadows(input, colors.theme.colors, colors.mod),
generateFonts(input),
colors.theme.colors
generateFonts(input)
)
}

View File

@ -1,7 +1,7 @@
import allKeys from './theme2_keys'
// keys that are meant to be used globally, i.e. what's the rest of the theme is based upon.
const basePaletteKeys = new Set([
export const basePaletteKeys = new Set([
'bg',
'fg',
'text',
@ -14,13 +14,26 @@ const basePaletteKeys = new Set([
'cOrange'
])
export const shadowsKeys = new Set([
'panel',
'topBar',
'popup',
'avatar',
'avatarStatus',
'panelHeader',
'button',
'buttonHover',
'buttonPressed',
'input'
])
// Keys that are not available in editor and never meant to be edited
const hiddenKeys = new Set([
export const hiddenKeys = new Set([
'profileBg',
'profileTint'
])
const extendedBasePrefixes = [
export const extendedBasePrefixes = [
'border',
'icon',
'highlight',
@ -47,12 +60,74 @@ const extendedBasePrefixes = [
'chatMessageOutgoing'
]
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 => k.startsWith(prefix))]))
// Keysets that are only really used intermideately, i.e. to generate other colors
const temporary = new Set([
export const temporary = new Set([
'border',
'highlight'
])
const temporaryColors = {}
export const temporaryColors = {}
export const convertTheme2To3 = (data) => {
const generateRoot = () => {
const directives = {}
basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + data.colors[key] })
return {
component: 'Root',
directives
}
}
const convertShadows = () => {
const newRules = []
shadowsKeys.forEach(key => {
const originalShadow = data.shadows[key]
const rule = {}
switch (key) {
case 'panel':
rule.component = 'Panel'
break
case 'topBar':
rule.component = 'TopBar'
break
case 'popup':
rule.component = 'Popover'
break
case 'avatar':
rule.component = 'Avatar'
break
case 'avatarStatus':
rule.component = 'Avatar'
rule.parent = { component: 'Post' }
break
case 'panelHeader':
rule.component = 'PanelHeader'
break
case 'button':
rule.component = 'Button'
break
case 'buttonHover':
rule.component = 'Button'
rule.state = ['hover']
break
case 'buttonPressed':
rule.component = 'Button'
rule.state = ['pressed']
break
case 'input':
rule.component = 'Input'
break
}
rule.directives = {
shadow: originalShadow
}
newRules.push(rule)
})
return newRules
}
return [generateRoot(), ...convertShadows()]
}

View File

@ -119,7 +119,8 @@ componentsContext.keys().forEach(key => {
const ruleToSelector = genericRuleToSelector(components)
export const init = (extraRuleset, palette) => {
export const init = (extraRuleset) => {
const staticVars = {}
const stacked = {}
const computed = {}
@ -287,7 +288,7 @@ export const init = (extraRuleset, palette) => {
dynamicVars.inheritedBackground = lowerLevelBackground
dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars, palette)).rgb
const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars, staticVars)).rgb
const textColor = newTextRule.directives.textAuto === 'no-auto'
? intendedTextColor
: getTextColor(
@ -354,7 +355,7 @@ export const init = (extraRuleset, palette) => {
dynamicVars.inheritedBackground = inheritedBackground
const rgb = convert(findColor(computedDirectives.background, dynamicVars, palette)).rgb
const rgb = convert(findColor(computedDirectives.background, dynamicVars, staticVars)).rgb
if (!stacked[selector]) {
let blend
@ -376,7 +377,7 @@ export const init = (extraRuleset, palette) => {
let targetShadow
if (typeof shadow === 'string') {
if (shadow.startsWith('$')) {
targetShadow = process(shadow, shadowFunctions, findColor, dynamicVars, palette)
targetShadow = process(shadow, shadowFunctions, findColor, dynamicVars, staticVars)
}
} else {
targetShadow = shadow
@ -384,7 +385,7 @@ export const init = (extraRuleset, palette) => {
return {
...targetShadow,
color: findColor(targetShadow.color, dynamicVars, palette)
color: findColor(targetShadow.color, dynamicVars, staticVars)
}
})
}
@ -404,8 +405,13 @@ export const init = (extraRuleset, palette) => {
dynamicSlots.forEach(([k, v]) => {
const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
switch (type) {
case 'color':
dynamicVars[k] = findColor(value, dynamicVars, palette)
case 'color': {
const color = findColor(value, dynamicVars, staticVars)
dynamicVars[k] = color
if (component.name === 'Root') {
staticVars[k.substring(2)] = color
}
}
}
})
@ -456,6 +462,7 @@ export const init = (extraRuleset, palette) => {
return {
lazy: lazyExec,
eager: eagerRules
eager: eagerRules,
staticVars
}
}