commit: 09e0e53ad6bb2afd53baf5281290dcee4c20327a
parent 9e66c1184ff5e6228a40c75c20ecd00b9f550208
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 14:36:56 +0200
opacity stuff, better debug mode
Diffstat:
4 files changed, 104 insertions(+), 30 deletions(-)
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
@@ -22,7 +22,7 @@ export const applyTheme = (input) => {
}
const t1 = performance.now()
- const themes3 = init(extraRules)
+ const themes3 = init(extraRules, '#FFFFFF')
const t2 = performance.now()
console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
const head = document.head
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
@@ -2,6 +2,11 @@ import { convert } from 'chromatism'
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) => {
const dimensions = /(\d[a-z]*\s?){2,4}/.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) => {
if (input.length === 0) {
@@ -90,6 +95,12 @@ export const getCssRules = (rules) => rules.map(rule => {
].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) : '',
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
@@ -14,6 +14,20 @@ export const basePaletteKeys = new Set([
'cOrange'
])
+export const opacityKeys = new Set([
+ 'alert',
+ 'alertPopup',
+ 'bg',
+ 'border',
+ 'btn',
+ 'faint',
+ 'input',
+ 'panel',
+ 'popover',
+ 'profileTint',
+ 'underlay'
+])
+
export const shadowsKeys = new Set([
'panel',
'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 newRules = []
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], [])
- return [generateRoot(), ...convertShadows(), ...convertRadii(), ...flatExtRules]
+ return [generateRoot(), ...convertShadows(), ...convertRadii(), ...convertOpacity(), ...flatExtRules]
}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -23,8 +23,6 @@ import {
} from './iss_utils.js'
import { parseCssShadow } from './css_utils.js'
-const DEBUG = false
-
// Ensuring the order of components
const components = {
Root: null,
@@ -146,7 +144,7 @@ componentsContext.keys().forEach(key => {
const ruleToSelector = genericRuleToSelector(components)
-export const init = (extraRuleset) => {
+export const init = (extraRuleset, ultimateBackgroundColor) => {
const staticVars = {}
const stacked = {}
const computed = {}
@@ -338,32 +336,11 @@ export const init = (extraRuleset) => {
earlyLowerLevelRule.virtualDirectivesRaw = virtualDirectivesRaw
computed[lowerLevelSelector].virtualDirectives = virtualDirectives
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 {
computed[selector] = computed[selector] || {}
// TODO: DEFAULT TEXT COLOR
- const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert('#FF00FF').rgb
+ const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert(ultimateBackgroundColor).rgb
if (computedDirectives.background) {
let inheritRule = null
@@ -386,7 +363,7 @@ export const init = (extraRuleset) => {
if (!stacked[selector]) {
let blend
- const alpha = computedDirectives.opacity
+ const alpha = computedDirectives.opacity ?? 1
if (alpha >= 1) {
blend = rgb
} else if (alpha <= 0) {
@@ -410,7 +387,7 @@ export const init = (extraRuleset) => {
computed[selector].background = { ...lowerLevelStackedBackground, a: 0 }
}
- dynamicVars.stacked = lowerLevelStackedBackground
+ dynamicVars.stacked = stacked[selector]
dynamicVars.background = computed[selector].background
const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
