diff options
Diffstat (limited to 'src/services/theme_data')
| -rw-r--r-- | src/services/theme_data/theme2_to_theme3.js | 87 | ||||
| -rw-r--r-- | src/services/theme_data/theme_data_3.service.js | 23 |
2 files changed, 96 insertions, 14 deletions
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js index 5ac87beb..0bc3b82d 100644 --- 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 index c4dfdc4c..8196415b 100644 --- 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 } } |