opacity stuff, better debug mode

This commit is contained in:
Henry Jameson 2024-02-22 14:36:56 +02:00
parent 9e66c1184f
commit 09e0e53ad6
4 changed files with 104 additions and 30 deletions

View File

@ -22,7 +22,7 @@ export const applyTheme = (input) => {
} }
const t1 = performance.now() const t1 = performance.now()
const themes3 = init(extraRules) const themes3 = init(extraRules, '#FFFFFF')
const t2 = performance.now() const t2 = performance.now()
console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms') console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
const head = document.head const head = document.head

View File

@ -2,6 +2,11 @@ import { convert } from 'chromatism'
import { rgba2css } from '../color_convert/color_convert.js' import { 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
// generation and for when --stacked variable is used
const DEBUG = false
export const parseCssShadow = (text) => { export const parseCssShadow = (text) => {
const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0] const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0]
const inset = /inset/.exec(text)?.[0] const inset = /inset/.exec(text)?.[0]
@ -21,7 +26,7 @@ export const parseCssShadow = (text) => {
} }
} }
export const getCssColorString = (color, alpha) => rgba2css({ ...convert(color).rgb, a: alpha }) export const getCssColorString = (color, alpha = 1) => rgba2css({ ...convert(color).rgb, a: alpha })
export const getCssShadow = (input, usesDropShadow) => { export const getCssShadow = (input, usesDropShadow) => {
if (input.length === 0) { if (input.length === 0) {
@ -90,6 +95,12 @@ export const getCssRules = (rules) => rules.map(rule => {
].join(';\n ') ].join(';\n ')
} }
case 'background': { case 'background': {
if (DEBUG) {
return `
--background: ${getCssColorString(rule.dynamicVars.stacked)};
background-color: ${getCssColorString(rule.dynamicVars.stacked)};
`
}
if (v === 'transparent') { if (v === 'transparent') {
return [ return [
rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '', rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',

View File

@ -14,6 +14,20 @@ export const basePaletteKeys = new Set([
'cOrange' 'cOrange'
]) ])
export const opacityKeys = new Set([
'alert',
'alertPopup',
'bg',
'border',
'btn',
'faint',
'input',
'panel',
'popover',
'profileTint',
'underlay'
])
export const shadowsKeys = new Set([ export const shadowsKeys = new Set([
'panel', 'panel',
'topBar', 'topBar',
@ -111,6 +125,78 @@ export const convertTheme2To3 = (data) => {
} }
} }
const convertOpacity = () => {
const newRules = []
Object.keys(data.opacity).forEach(key => {
if (!opacityKeys.has(key) || data.opacity[key] === undefined) return null
const originalOpacity = data.opacity[key]
const rule = {}
switch (key) {
case 'alert':
rule.component = 'Alert'
break
case 'alertPopup':
rule.component = 'Alert'
rule.parent = { component: 'Popover' }
break
case 'bg':
rule.component = 'Panel'
break
case 'border':
rule.component = 'Border'
break
case 'btn':
rule.component = 'Button'
break
case 'faint':
rule.component = 'Text'
rule.state = ['faint']
break
case 'input':
rule.component = 'Input'
break
case 'panel':
rule.component = 'PanelHeader'
break
case 'popover':
rule.component = 'Popover'
break
case 'profileTint':
return null
case 'underlay':
rule.component = 'Underlay'
break
}
switch (key) {
case 'alert':
case 'alertPopup':
case 'bg':
case 'btn':
case 'input':
case 'panel':
case 'popover':
case 'underlay':
rule.directives = { opacity: originalOpacity }
break
case 'faint':
case 'border':
rule.directives = { textOpacity: originalOpacity }
break
}
newRules.push(rule)
if (rule.component === 'Button') {
newRules.push({ ...rule, component: 'ScrollbarElement' })
newRules.push({ ...rule, component: 'Tab' })
}
})
console.log(newRules)
return newRules
}
const convertRadii = () => { const convertRadii = () => {
const newRules = [] const newRules = []
Object.keys(data.radii).forEach(key => { Object.keys(data.radii).forEach(key => {
@ -372,5 +458,5 @@ export const convertTheme2To3 = (data) => {
const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x).reduce((acc, x) => [...acc, ...x], []) const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x).reduce((acc, x) => [...acc, ...x], [])
return [generateRoot(), ...convertShadows(), ...convertRadii(), ...flatExtRules] return [generateRoot(), ...convertShadows(), ...convertRadii(), ...convertOpacity(), ...flatExtRules]
} }

View File

@ -23,8 +23,6 @@ import {
} from './iss_utils.js' } from './iss_utils.js'
import { parseCssShadow } from './css_utils.js' import { parseCssShadow } from './css_utils.js'
const DEBUG = false
// Ensuring the order of components // Ensuring the order of components
const components = { const components = {
Root: null, Root: null,
@ -146,7 +144,7 @@ componentsContext.keys().forEach(key => {
const ruleToSelector = genericRuleToSelector(components) const ruleToSelector = genericRuleToSelector(components)
export const init = (extraRuleset) => { export const init = (extraRuleset, ultimateBackgroundColor) => {
const staticVars = {} const staticVars = {}
const stacked = {} const stacked = {}
const computed = {} const computed = {}
@ -338,32 +336,11 @@ export const init = (extraRuleset) => {
earlyLowerLevelRule.virtualDirectivesRaw = virtualDirectivesRaw earlyLowerLevelRule.virtualDirectivesRaw = virtualDirectivesRaw
computed[lowerLevelSelector].virtualDirectives = virtualDirectives computed[lowerLevelSelector].virtualDirectives = virtualDirectives
computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw
// Debug: lets you see what it think background color should be
if (!DEBUG) return
const directives = {
textColor,
background: convert(computed[lowerLevelSelector].background).hex,
...inheritedTextOpacity
}
addRule({
dynamicVars,
selector: cssSelector,
virtual: true,
component: component.name,
parent,
...combination,
directives,
virtualDirectives,
virtualDirectivesRaw
})
} else { } else {
computed[selector] = computed[selector] || {} computed[selector] = computed[selector] || {}
// TODO: DEFAULT TEXT COLOR // TODO: DEFAULT TEXT COLOR
const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert('#FF00FF').rgb const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert(ultimateBackgroundColor).rgb
if (computedDirectives.background) { if (computedDirectives.background) {
let inheritRule = null let inheritRule = null
@ -386,7 +363,7 @@ export const init = (extraRuleset) => {
if (!stacked[selector]) { if (!stacked[selector]) {
let blend let blend
const alpha = computedDirectives.opacity const alpha = computedDirectives.opacity ?? 1
if (alpha >= 1) { if (alpha >= 1) {
blend = rgb blend = rgb
} else if (alpha <= 0) { } else if (alpha <= 0) {
@ -410,7 +387,7 @@ export const init = (extraRuleset) => {
computed[selector].background = { ...lowerLevelStackedBackground, a: 0 } computed[selector].background = { ...lowerLevelStackedBackground, a: 0 }
} }
dynamicVars.stacked = lowerLevelStackedBackground dynamicVars.stacked = stacked[selector]
dynamicVars.background = computed[selector].background dynamicVars.background = computed[selector].background
const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--')) const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))