diff options
Diffstat (limited to 'src/services')
| -rw-r--r-- | src/services/style_setter/style_setter.js | 16 | ||||
| -rw-r--r-- | src/services/theme_data/theme_data_3.service.js | 33 |
2 files changed, 43 insertions, 6 deletions
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 3e420017..afc968c7 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -26,7 +26,21 @@ export const applyTheme = (input) => { styleSheet.toString() styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max') themes3.css(themes3.eager).forEach(rule => { - styleSheet.insertRule(rule, 'index-max') + // Hack to support multiple selectors on same component + if (rule.match(/::-webkit-scrollbar-button/)) { + const parts = rule.split(/[{}]/g) + const newRule = [ + parts[0], + ', ', + parts[0].replace(/button/, 'thumb'), + ' {', + parts[1], + '}' + ].join('') + styleSheet.insertRule(newRule, 'index-max') + } else { + styleSheet.insertRule(rule, 'index-max') + } }) body.classList.remove('hidden') themes3.lazy.then(lazyRules => { diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index f84a61c9..c301d148 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -201,9 +201,12 @@ export const init = (extraRuleset, palette) => { } else { // TODO add support for --current prefix switch (variableSlot) { - case 'background': + case 'inheritedBackground': targetColor = convert(dynamicVars.inheritedBackground).rgb break + case 'background': + targetColor = convert(dynamicVars.background).rgb + break default: targetColor = convert(palette[variableSlot]).rgb } @@ -222,6 +225,15 @@ export const init = (extraRuleset, palette) => { const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[a-zA-Z0-9-,.'"\s]*)\)/.exec(color).groups const args = argsString.split(/,/g).map(a => a.trim()) switch (funcName) { + case 'alpha': { + if (args.length !== 2) { + throw new Error(`$alpha requires 2 arguments, ${args.length} were provided`) + } + const colorArg = convert(findColor(args[0], dynamicVars)).rgb + const amount = Number(args[1]) + targetColor = { ...colorArg, a: amount } + break + } case 'blend': { if (args.length !== 3) { throw new Error(`$blend requires 3 arguments, ${args.length} were provided`) @@ -374,7 +386,9 @@ export const init = (extraRuleset, palette) => { combination.component = component.name const soloSelector = ruleToSelector(combination, true) + const soloCssSelector = ruleToSelector(combination) const selector = [parentSelector, soloSelector].filter(x => x).join(' ') + const cssSelector = [parentSelector, soloCssSelector].filter(x => x).join(' ') const lowerLevelSelector = parentSelector const lowerLevelBackground = computed[lowerLevelSelector]?.background @@ -399,6 +413,7 @@ export const init = (extraRuleset, palette) => { computed[selector] = computed[selector] || {} computed[selector].computedRule = computedRule + computed[selector].dynamicVars = dynamicVars if (virtualComponents.has(component.name)) { const virtualName = [ @@ -471,7 +486,7 @@ export const init = (extraRuleset, palette) => { } addRule({ - selector, + selector: cssSelector, virtual: true, component: component.name, parent, @@ -533,9 +548,11 @@ export const init = (extraRuleset, palette) => { computed[selector].background = { ...lowerLevelComputedBackground, a: 0 } } + computed[selector].dynamicVars.background = computed[selector].background + if (addRuleNeeded) { addRule({ - selector, + selector: cssSelector, component: component.name, ...combination, parent, @@ -597,6 +614,7 @@ export const init = (extraRuleset, palette) => { let directives if (rule.component !== 'Root') { directives = Object.entries(rule.directives).map(([k, v]) => { + const selector = ruleToSelector(rule, true) switch (k) { case 'roundness': { return ' ' + [ @@ -617,7 +635,7 @@ export const init = (extraRuleset, palette) => { ' --background: ' + v ].join(';\n') } - const color = cssColorString(computed[ruleToSelector(rule, true)].background, rule.directives.opacity) + const color = cssColorString(computed[selector].background, rule.directives.opacity) return [ 'background-color: ' + color, ' --background: ' + color @@ -627,7 +645,12 @@ export const init = (extraRuleset, palette) => { if (rule.directives.textNoCssColor === 'yes') { return '' } return 'color: ' + v } - default: return '' + default: + if (k.startsWith('--')) { + console.log('LOL', k, rgba2css(findColor(v, computed[selector].dynamicVars))) + return k + ': ' + rgba2css(findColor(v, computed[selector].dynamicVars)) + } + return '' } }).filter(x => x).map(x => ' ' + x).join(';\n') } else { |