moved default rules to component style.js files, added some basic text inheritance

This commit is contained in:
Henry Jameson 2024-02-01 01:27:30 +02:00
parent 53a4b1f9a6
commit d4795d2e3c
8 changed files with 90 additions and 73 deletions

View File

@ -15,5 +15,20 @@ export default {
validInnerComponents: [ validInnerComponents: [
'Text', 'Text',
'Icon' 'Icon'
],
defaultRules: [
{
component: 'Button',
directives: {
background: '--fg'
}
},
{
component: 'Button',
state: ['hover'],
directives: {
background: '#FFFFFF'
}
}
] ]
} }

View File

@ -16,7 +16,6 @@ export default {
component: 'Link', component: 'Link',
state: ['faint'], state: ['faint'],
directives: { directives: {
textColor: '--link',
textOpacity: 0.5, textOpacity: 0.5,
textOpacityMode: 'fake' textOpacityMode: 'fake'
} }

View File

@ -7,5 +7,13 @@ export default {
'Icon', 'Icon',
'Button', 'Button',
'PanelHeader' 'PanelHeader'
],
defaultRules: [
{
component: 'Panel',
directives: {
background: '--fg'
}
}
] ]
} }

View File

@ -6,5 +6,14 @@ export default {
'Link', 'Link',
'Icon', 'Icon',
'Button' 'Button'
],
defaultRules: [
{
component: 'PanelHeader',
directives: {
background: '--fg'
// opacity: 0.9
}
}
] ]
} }

View File

@ -19,7 +19,6 @@ export default {
component: 'Text', component: 'Text',
state: ['faint'], state: ['faint'],
directives: { directives: {
textColor: '--text',
textOpacity: 0.5 textOpacity: 0.5
} }
}, },
@ -29,15 +28,6 @@ export default {
directives: { directives: {
textColor: '--cGreen' textColor: '--cGreen'
} }
},
{
component: 'Text',
variant: 'greentext',
state: ['faint'],
directives: {
textColor: '--cGreen',
textOpacity: 0.5
}
} }
] ]
} }

View File

@ -4,5 +4,16 @@ export default {
outOfTreeSelector: '.underlay', outOfTreeSelector: '.underlay',
validInnerComponents: [ validInnerComponents: [
'Panel' 'Panel'
],
defaultRules: [
{
component: 'Underlay',
// variant: 'normal',
// state: 'normal'
directives: {
background: '#000000',
opacity: 0.2
}
}
] ]
} }

View File

@ -1,40 +1,2 @@
export const sampleRules = [ export const sampleRules = [
{
component: 'Underlay',
// variant: 'normal',
// state: 'normal'
directives: {
background: '#000000',
opacity: 0.2
}
},
{
component: 'Panel',
directives: {
background: '--fg'
// opacity: 0.9
}
},
{
component: 'PanelHeader',
directives: {
background: '--fg'
// opacity: 0.9
}
},
{
component: 'Button',
directives: {
background: '--fg'
// opacity: 0.8
}
},
{
component: 'Button',
state: ['hover'],
directives: {
background: '#FFFFFF'
// opacity: 0.9
}
}
] ]

View File

@ -1,5 +1,6 @@
import { convert } from 'chromatism' import { convert, brightness } from 'chromatism'
import { alphaBlend, getTextColor, rgba2css, mixrgb } from '../color_convert/color_convert.js' import merge from 'lodash.merge'
import { alphaBlend, getTextColor, rgba2css, mixrgb, relativeLuminance } from '../color_convert/color_convert.js'
import Underlay from 'src/components/underlay.style.js' import Underlay from 'src/components/underlay.style.js'
import Panel from 'src/components/panel.style.js' import Panel from 'src/components/panel.style.js'
@ -87,27 +88,35 @@ export const init = (extraRuleset, palette) => {
rulesByComponent[rule.component].push(rule) rulesByComponent[rule.component].push(rule)
} }
const findRules = (combination, parent) => rule => { const findRules = (searchCombination, parent) => rule => {
// inexact search // inexact search
const doesCombinationMatch = () => { const doesCombinationMatch = () => {
if (combination.component !== rule.component) return false if (searchCombination.component !== rule.component) return false
if (Object.prototype.hasOwnProperty.call(rule, 'variant')) { const ruleVariant = Object.prototype.hasOwnProperty.call(rule, 'variant') ? rule.variant : 'normal'
if (combination.variant !== rule.variant) return false
} else { if (ruleVariant !== 'normal') {
if (combination.variant !== 'normal') return false if (searchCombination.variant !== rule.variant) return false
} }
if (Object.prototype.hasOwnProperty.call(rule, 'state')) { const ruleHasStateDefined = Object.prototype.hasOwnProperty.call(rule, 'state')
const ruleStatesSet = new Set(['normal', ...(rule.state || [])]) let ruleStateSet
const combinationSet = new Set(['normal', ...combination.state]) if (ruleHasStateDefined) {
const setsAreEqual = combination.state.every(state => ruleStatesSet.has(state)) && ruleStateSet = new Set(['normal', ...rule.state])
} else {
ruleStateSet = new Set(['normal'])
}
if (ruleStateSet.size > 1) {
const ruleStatesSet = ruleStateSet
const combinationSet = new Set(['normal', ...searchCombination.state])
const setsAreEqual = searchCombination.state.every(state => ruleStatesSet.has(state)) &&
[...ruleStatesSet].every(state => combinationSet.has(state)) [...ruleStatesSet].every(state => combinationSet.has(state))
return setsAreEqual return setsAreEqual
} else { } else {
if (combination.state.length !== 1 || combination.state[0] !== 'normal') return false
return true return true
} }
} }
const combinationMatches = doesCombinationMatch() const combinationMatches = doesCombinationMatch()
if (!parent || !combinationMatches) return combinationMatches if (!parent || !combinationMatches) return combinationMatches
@ -154,21 +163,31 @@ export const init = (extraRuleset, palette) => {
return filter(lowerLevelComponent) ? lowerLevelComponent : null return filter(lowerLevelComponent) ? lowerLevelComponent : null
} }
const findColor = (color) => { const findColor = (color, background) => {
if (typeof color === 'string' && color.startsWith('--')) { if (typeof color !== 'string' || !color.startsWith('--')) return color
const name = color.substring(2) let targetColor = null
return palette[name] // Color references other color
const [variable, modifier] = color.split(/,/g).map(str => str.trim())
const variableSlot = variable.substring(2)
targetColor = palette[variableSlot]
if (modifier) {
const effectiveBackground = background ?? targetColor
const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
const mod = isLightOnDark ? 1 : -1
targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
} }
return color
return targetColor
} }
const getTextColorAlpha = (rule, lowerRule, value) => { const getTextColorAlpha = (rule, lowerRule, value) => {
const opacity = rule.directives.textOpacity const opacity = rule.directives.textOpacity
const textColor = convert(findColor(value)).rgb const backgroundColor = convert(lowerRule.cache.background).rgb
const textColor = convert(findColor(value, backgroundColor)).rgb
if (opacity === null || opacity === undefined || opacity >= 1) { if (opacity === null || opacity === undefined || opacity >= 1) {
return convert(textColor).hex return convert(textColor).hex
} }
const backgroundColor = convert(lowerRule.cache.background).rgb
if (opacity === 0) { if (opacity === 0) {
return convert(backgroundColor).hex return convert(backgroundColor).hex
} }
@ -217,6 +236,7 @@ export const init = (extraRuleset, palette) => {
].join('') ].join('')
const lowerLevel = findLowerLevelRule(parent, (r) => { const lowerLevel = findLowerLevelRule(parent, (r) => {
if (!r) return false
if (components[r.component].validInnerComponents.indexOf(component.name) < 0) return false if (components[r.component].validInnerComponents.indexOf(component.name) < 0) return false
if (r.cache.background === undefined) return false if (r.cache.background === undefined) return false
if (r.cache.textDefined) { if (r.cache.textDefined) {
@ -234,15 +254,15 @@ export const init = (extraRuleset, palette) => {
if (!inheritedTextColorRule) { if (!inheritedTextColorRule) {
const generalTextColorRules = ruleset.filter(findRules({ component: component.name, ...combination }, null, true)) const generalTextColorRules = ruleset.filter(findRules({ component: component.name, ...combination }, null, true))
inheritedTextColorRule = generalTextColorRules[generalTextColorRules.length - 1] inheritedTextColorRule = generalTextColorRules.reduce((acc, rule) => merge(acc, rule), {})
} else { } else {
inheritedTextColorRule = inheritedTextColorRules[inheritedTextColorRules.length - 1] inheritedTextColorRule = inheritedTextColorRules.reduce((acc, rule) => merge(acc, rule), {})
} }
let inheritedTextColor let inheritedTextColor
let inheritedTextOpacity = {} let inheritedTextOpacity = {}
if (inheritedTextColorRule) { if (inheritedTextColorRule) {
inheritedTextColor = findColor(inheritedTextColorRule.directives.textColor) inheritedTextColor = findColor(inheritedTextColorRule.directives.textColor, convert(lowerLevel.cache.background).rgb)
// also inherit opacity settings // also inherit opacity settings
const { textOpacity, textOpacityMode } = inheritedTextColorRule.directives const { textOpacity, textOpacityMode } = inheritedTextColorRule.directives
inheritedTextOpacity = { textOpacity, textOpacityMode } inheritedTextOpacity = { textOpacity, textOpacityMode }
@ -284,8 +304,11 @@ export const init = (extraRuleset, palette) => {
// Global (general) rules // Global (general) rules
if (existingGlobalRules.length !== 0) { if (existingGlobalRules.length !== 0) {
const totalRule = existingGlobalRules.reduce((acc, rule) => merge(acc, rule), {})
const { directives } = totalRule
// last rule is used as a cache
const lastRule = existingGlobalRules[existingGlobalRules.length - 1] const lastRule = existingGlobalRules[existingGlobalRules.length - 1]
const { directives } = lastRule
lastRule.cache = lastRule.cache || {} lastRule.cache = lastRule.cache || {}
if (directives.background) { if (directives.background) {