commit: 0285efadbb10ed68940a2aef2f320fbf65f841c9
parent 23dc2d1a5b6b3db7e5daa30c71eda1add2273e34
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 20:47:27 +0200
independence from themes3, converter/backwards compat WIP
Diffstat:
3 files changed, 106 insertions(+), 23 deletions(-)
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
@@ -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)
)
}
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
@@ -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()]
+}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -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
}
}
