|
|
|
@ -13,12 +13,6 @@ import {
|
|
|
|
|
process
|
|
|
|
|
} from './theme3_slot_functions.js'
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
getCssShadow,
|
|
|
|
|
getCssShadowFilter,
|
|
|
|
|
getCssColorString
|
|
|
|
|
} from './css_utils.js'
|
|
|
|
|
|
|
|
|
|
const DEBUG = false
|
|
|
|
|
|
|
|
|
|
// Ensuring the order of components
|
|
|
|
@ -105,78 +99,6 @@ const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVar
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export const getCssRules = (rules, staticVars) => rules.map(rule => {
|
|
|
|
|
let selector = rule.selector
|
|
|
|
|
if (!selector) {
|
|
|
|
|
selector = 'body'
|
|
|
|
|
}
|
|
|
|
|
const header = selector + ' {'
|
|
|
|
|
const footer = '}'
|
|
|
|
|
|
|
|
|
|
const virtualDirectives = Object.entries(rule.virtualDirectives || {}).map(([k, v]) => {
|
|
|
|
|
return ' ' + k + ': ' + v
|
|
|
|
|
}).join(';\n')
|
|
|
|
|
|
|
|
|
|
let directives
|
|
|
|
|
if (rule.component !== 'Root') {
|
|
|
|
|
directives = Object.entries(rule.directives).map(([k, v]) => {
|
|
|
|
|
switch (k) {
|
|
|
|
|
case 'roundness': {
|
|
|
|
|
return ' ' + [
|
|
|
|
|
'--roundness: ' + v + 'px'
|
|
|
|
|
].join(';\n ')
|
|
|
|
|
}
|
|
|
|
|
case 'shadow': {
|
|
|
|
|
return ' ' + [
|
|
|
|
|
'--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
|
|
|
|
|
'--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
|
|
|
|
|
'--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
|
|
|
|
|
].join(';\n ')
|
|
|
|
|
}
|
|
|
|
|
case 'background': {
|
|
|
|
|
if (v === 'transparent') {
|
|
|
|
|
return [
|
|
|
|
|
rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
|
|
|
|
|
' --background: ' + v
|
|
|
|
|
].filter(x => x).join(';\n')
|
|
|
|
|
}
|
|
|
|
|
const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
|
|
|
|
|
return [
|
|
|
|
|
rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
|
|
|
|
|
' --background: ' + color
|
|
|
|
|
].filter(x => x).join(';\n')
|
|
|
|
|
}
|
|
|
|
|
case 'textColor': {
|
|
|
|
|
if (rule.directives.textNoCssColor === 'yes') { return '' }
|
|
|
|
|
return 'color: ' + v
|
|
|
|
|
}
|
|
|
|
|
default:
|
|
|
|
|
if (k.startsWith('--')) {
|
|
|
|
|
const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
|
|
|
|
|
switch (type) {
|
|
|
|
|
case 'color':
|
|
|
|
|
return k + ': ' + rgba2css(findColor(value, rule.dynamicVars, staticVars))
|
|
|
|
|
default:
|
|
|
|
|
return ''
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return ''
|
|
|
|
|
}
|
|
|
|
|
}).filter(x => x).map(x => ' ' + x).join(';\n')
|
|
|
|
|
} else {
|
|
|
|
|
directives = {}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return [
|
|
|
|
|
header,
|
|
|
|
|
directives + ';',
|
|
|
|
|
(!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? ' color: var(--text);' : '',
|
|
|
|
|
'',
|
|
|
|
|
virtualDirectives,
|
|
|
|
|
footer
|
|
|
|
|
].join('\n')
|
|
|
|
|
}).filter(x => x)
|
|
|
|
|
|
|
|
|
|
// Loading all style.js[on] files dynamically
|
|
|
|
|
const componentsContext = require.context('src', true, /\.style.js(on)?$/)
|
|
|
|
|
componentsContext.keys().forEach(key => {
|
|
|
|
@ -587,6 +509,16 @@ export const init = (extraRuleset, palette) => {
|
|
|
|
|
dynamicVars.stacked = lowerLevelStackedBackground
|
|
|
|
|
dynamicVars.background = computed[selector].background
|
|
|
|
|
|
|
|
|
|
const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
|
|
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
addRule({
|
|
|
|
|
dynamicVars,
|
|
|
|
|
selector: cssSelector,
|
|
|
|
|