fonts support, cleanup
This commit is contained in:
Henry Jameson
parent
779b3dc122
commit
7d2faccd4f
13 changed files with 161 additions and 121 deletions
|
|
@ -6,25 +6,22 @@ import { getCssRules } from '../theme_data/css_utils.js'
|
|||
import { defaultState } from '../../modules/config.js'
|
||||
|
||||
export const applyTheme = (input) => {
|
||||
console.log({ ...input })
|
||||
let extraRules
|
||||
let fonts
|
||||
if (input.themeType !== 1) {
|
||||
const t0 = performance.now()
|
||||
const { rules, theme } = generatePreset(input)
|
||||
fonts = rules.fonts
|
||||
const { theme } = generatePreset(input)
|
||||
const t1 = performance.now()
|
||||
console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
|
||||
console.debug('Themes 2 initialization took ' + (t1 - t0) + 'ms')
|
||||
extraRules = convertTheme2To3(theme)
|
||||
} else {
|
||||
console.log(input)
|
||||
console.debug(input)
|
||||
extraRules = convertTheme2To3(input)
|
||||
}
|
||||
|
||||
const t1 = performance.now()
|
||||
const themes3 = init(extraRules, '#FFFFFF')
|
||||
const t2 = performance.now()
|
||||
console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
|
||||
console.debug('Themes 3 (eager) initialization took ' + (t2 - t1) + 'ms')
|
||||
const head = document.head
|
||||
const body = document.body
|
||||
body.classList.add('hidden')
|
||||
|
|
@ -33,8 +30,6 @@ export const applyTheme = (input) => {
|
|||
head.appendChild(styleEl)
|
||||
const styleSheet = styleEl.sheet
|
||||
|
||||
styleSheet.toString()
|
||||
styleSheet.insertRule(`:root { ${fonts} }`, 'index-max')
|
||||
getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
|
||||
// Hack to support multiple selectors on same component
|
||||
if (rule.match(/::-webkit-scrollbar-button/)) {
|
||||
|
|
@ -58,7 +53,7 @@ export const applyTheme = (input) => {
|
|||
styleSheet.insertRule(rule, 'index-max')
|
||||
})
|
||||
const t3 = performance.now()
|
||||
console.log('Themes 3 finalization took ' + (t3 - t2) + 'ms')
|
||||
console.debug('Themes 3 finalization (lazy) took ' + (t3 - t2) + 'ms')
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { convert } from 'chromatism'
|
||||
|
||||
import { rgba2css } from '../color_convert/color_convert.js'
|
||||
import { hex2rgb, rgba2css } from '../color_convert/color_convert.js'
|
||||
|
||||
// This changes what backgrounds are used to "stacked" solid colors so you can see
|
||||
// what theme engine "thinks" is actual background color is for purposes of text color
|
||||
|
|
@ -78,72 +78,79 @@ export const getCssRules = (rules) => rules.map(rule => {
|
|||
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 (DEBUG) {
|
||||
return `
|
||||
--background: ${getCssColorString(rule.dynamicVars.stacked)};
|
||||
background-color: ${getCssColorString(rule.dynamicVars.stacked)};
|
||||
`
|
||||
}
|
||||
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)
|
||||
const cssDirectives = ['--background: ' + color]
|
||||
if (rule.directives.backgroundNoCssColor !== 'yes') {
|
||||
cssDirectives.push('background-color: ' + color)
|
||||
}
|
||||
return cssDirectives.filter(x => x).join(';\n')
|
||||
}
|
||||
case 'blur': {
|
||||
const cssDirectives = []
|
||||
if (rule.directives.opacity < 1) {
|
||||
cssDirectives.push(`--backdrop-filter: blur(${v}) `)
|
||||
if (rule.directives.backgroundNoCssColor !== 'yes') {
|
||||
cssDirectives.push(`backdrop-filter: blur(${v}) `)
|
||||
}
|
||||
}
|
||||
return cssDirectives.join(';\n')
|
||||
}
|
||||
case 'textColor': {
|
||||
if (rule.directives.textNoCssColor === 'yes') { return '' }
|
||||
return 'color: ' + v
|
||||
}
|
||||
default:
|
||||
if (k.startsWith('--')) {
|
||||
const [type] = v.split('|').map(x => x.trim()) // woah, Extreme!
|
||||
switch (type) {
|
||||
case 'color':
|
||||
return k + ': ' + rgba2css(rule.dynamicVars[k])
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
return ''
|
||||
const directives = Object.entries(rule.directives).map(([k, v]) => {
|
||||
switch (k) {
|
||||
case 'roundness': {
|
||||
return ' ' + [
|
||||
'--roundness: ' + v + 'px'
|
||||
].join(';\n ')
|
||||
}
|
||||
}).filter(x => x).map(x => ' ' + x).join(';\n')
|
||||
} else {
|
||||
directives = {}
|
||||
}
|
||||
case 'shadow': {
|
||||
return ' ' + [
|
||||
'--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
|
||||
'--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
|
||||
'--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
|
||||
].join(';\n ')
|
||||
}
|
||||
case 'background': {
|
||||
if (DEBUG) {
|
||||
return `
|
||||
--background: ${getCssColorString(rule.dynamicVars.stacked)};
|
||||
background-color: ${getCssColorString(rule.dynamicVars.stacked)};
|
||||
`
|
||||
}
|
||||
if (v === 'transparent') {
|
||||
if (rule.component === 'Root') return []
|
||||
return [
|
||||
rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
|
||||
' --background: ' + v
|
||||
].filter(x => x).join(';\n')
|
||||
}
|
||||
const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
|
||||
const cssDirectives = ['--background: ' + color]
|
||||
if (rule.directives.backgroundNoCssColor !== 'yes') {
|
||||
cssDirectives.push('background-color: ' + color)
|
||||
}
|
||||
return cssDirectives.filter(x => x).join(';\n')
|
||||
}
|
||||
case 'blur': {
|
||||
const cssDirectives = []
|
||||
if (rule.directives.opacity < 1) {
|
||||
cssDirectives.push(`--backdrop-filter: blur(${v}) `)
|
||||
if (rule.directives.backgroundNoCssColor !== 'yes') {
|
||||
cssDirectives.push(`backdrop-filter: blur(${v}) `)
|
||||
}
|
||||
}
|
||||
return cssDirectives.join(';\n')
|
||||
}
|
||||
case 'font': {
|
||||
return 'font-family: ' + v
|
||||
}
|
||||
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': {
|
||||
const color = rule.dynamicVars[k]
|
||||
if (typeof color === 'string') {
|
||||
return k + ': ' + rgba2css(hex2rgb(color))
|
||||
} else {
|
||||
return k + ': ' + rgba2css(color)
|
||||
}
|
||||
}
|
||||
case 'generic':
|
||||
return k + ': ' + value
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
return ''
|
||||
}
|
||||
}).filter(x => x).map(x => ' ' + x).join(';\n')
|
||||
|
||||
return [
|
||||
header,
|
||||
|
|
|
|||
|
|
@ -14,6 +14,13 @@ export const basePaletteKeys = new Set([
|
|||
'cOrange'
|
||||
])
|
||||
|
||||
export const fontsKeys = new Set([
|
||||
'interface',
|
||||
'input',
|
||||
'post',
|
||||
'postCode'
|
||||
])
|
||||
|
||||
export const opacityKeys = new Set([
|
||||
'alert',
|
||||
'alertPopup',
|
||||
|
|
@ -249,6 +256,40 @@ export const convertTheme2To3 = (data) => {
|
|||
return newRules
|
||||
}
|
||||
|
||||
const convertFonts = () => {
|
||||
const newRules = []
|
||||
Object.keys(data.fonts).forEach(key => {
|
||||
if (!fontsKeys.has(key)) return
|
||||
const originalFont = data.fonts[key].family
|
||||
const rule = {}
|
||||
|
||||
switch (key) {
|
||||
case 'interface':
|
||||
case 'postCode':
|
||||
rule.component = 'Root'
|
||||
break
|
||||
case 'input':
|
||||
rule.component = 'Input'
|
||||
break
|
||||
case 'post':
|
||||
rule.component = 'RichContent'
|
||||
break
|
||||
}
|
||||
switch (key) {
|
||||
case 'interface':
|
||||
case 'input':
|
||||
case 'post':
|
||||
rule.directives = { '--font': 'generic | ' + originalFont }
|
||||
break
|
||||
case 'postCode':
|
||||
rule.directives = { '--monoFont': 'generic | ' + originalFont }
|
||||
newRules.push({ ...rule, component: 'RichContent' })
|
||||
break
|
||||
}
|
||||
newRules.push(rule)
|
||||
})
|
||||
return newRules
|
||||
}
|
||||
const convertShadows = () => {
|
||||
const newRules = []
|
||||
Object.keys(data.shadows).forEach(key => {
|
||||
|
|
@ -457,5 +498,5 @@ export const convertTheme2To3 = (data) => {
|
|||
|
||||
const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x).reduce((acc, x) => [...acc, ...x], [])
|
||||
|
||||
return [generateRoot(), ...convertShadows(), ...convertRadii(), ...convertOpacity(), ...flatExtRules]
|
||||
return [generateRoot(), ...convertShadows(), ...convertRadii(), ...convertOpacity(), ...convertFonts(), ...flatExtRules]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -411,6 +411,13 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
|
|||
}
|
||||
break
|
||||
}
|
||||
case 'generic': {
|
||||
dynamicVars[k] = value
|
||||
if (component.name === 'Root') {
|
||||
staticVars[k.substring(2)] = value
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -454,9 +461,9 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
|
|||
}
|
||||
|
||||
processInnerComponent(components.Root, eagerRules)
|
||||
console.log('TOTAL COMBOS: ' + counter)
|
||||
console.debug('Eager combinations processed:' + counter)
|
||||
const lazyExec = Promise.all(promises).then(() => {
|
||||
console.log('TOTAL COMBOS: ' + counter)
|
||||
console.debug('Total combinations processed: ' + counter)
|
||||
}).then(() => lazyRules)
|
||||
|
||||
return {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue