moved default rules to component style.js files, added some basic text inheritance
This commit is contained in:
parent
53a4b1f9a6
commit
d4795d2e3c
@ -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'
|
||||||
|
}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -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'
|
||||||
}
|
}
|
||||||
|
@ -7,5 +7,13 @@ export default {
|
|||||||
'Icon',
|
'Icon',
|
||||||
'Button',
|
'Button',
|
||||||
'PanelHeader'
|
'PanelHeader'
|
||||||
|
],
|
||||||
|
defaultRules: [
|
||||||
|
{
|
||||||
|
component: 'Panel',
|
||||||
|
directives: {
|
||||||
|
background: '--fg'
|
||||||
|
}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -6,5 +6,14 @@ export default {
|
|||||||
'Link',
|
'Link',
|
||||||
'Icon',
|
'Icon',
|
||||||
'Button'
|
'Button'
|
||||||
|
],
|
||||||
|
defaultRules: [
|
||||||
|
{
|
||||||
|
component: 'PanelHeader',
|
||||||
|
directives: {
|
||||||
|
background: '--fg'
|
||||||
|
// opacity: 0.9
|
||||||
|
}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
@ -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) {
|
||||||
|
Loading…
Reference in New Issue
Block a user