themes 3 initial work
This commit is contained in:
parent
6391a6a4ea
commit
521d308a6c
18
src/components/button.style.js
Normal file
18
src/components/button.style.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
export default {
|
||||||
|
name: 'Button',
|
||||||
|
states: {
|
||||||
|
hover: ':hover',
|
||||||
|
disabled: ':disabled',
|
||||||
|
pressed: ':active',
|
||||||
|
toggled: '.toggled'
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
danger: '.danger',
|
||||||
|
unstyled: '.unstyled',
|
||||||
|
sublime: '.sublime'
|
||||||
|
},
|
||||||
|
validInnerComponents: [
|
||||||
|
'Text',
|
||||||
|
'Icon'
|
||||||
|
]
|
||||||
|
}
|
3
src/components/icon.style.js
Normal file
3
src/components/icon.style.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export default {
|
||||||
|
name: 'Icon'
|
||||||
|
}
|
8
src/components/panel.style.js
Normal file
8
src/components/panel.style.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export default {
|
||||||
|
name: 'Panel',
|
||||||
|
validInnerComponents: [
|
||||||
|
'Text',
|
||||||
|
'Icon',
|
||||||
|
'Button'
|
||||||
|
]
|
||||||
|
}
|
9
src/components/text.style.js
Normal file
9
src/components/text.style.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export default {
|
||||||
|
name: 'Text',
|
||||||
|
states: {
|
||||||
|
faint: '.faint'
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
green: '/.greentext'
|
||||||
|
}
|
||||||
|
}
|
6
src/components/underlay.style.js
Normal file
6
src/components/underlay.style.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
name: 'Panel',
|
||||||
|
validInnerComponents: [
|
||||||
|
'Panel'
|
||||||
|
]
|
||||||
|
}
|
66
src/services/theme_data/theme_data_3.service.js
Normal file
66
src/services/theme_data/theme_data_3.service.js
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
import Underlay from 'src/components/underlay.style.js'
|
||||||
|
import Panel from 'src/components/panel.style.js'
|
||||||
|
import Button from 'src/components/button.style.js'
|
||||||
|
import Text from 'src/components/text.style.js'
|
||||||
|
import Icon from 'src/components/icon.style.js'
|
||||||
|
|
||||||
|
const root = Underlay
|
||||||
|
const components = {
|
||||||
|
Underlay,
|
||||||
|
Panel,
|
||||||
|
Button,
|
||||||
|
Text,
|
||||||
|
Icon
|
||||||
|
}
|
||||||
|
|
||||||
|
// This gives you an array of arrays of all possible unique (i.e. order-insensitive) combinations
|
||||||
|
const getAllPossibleCombinations = (array) => {
|
||||||
|
const combos = [array.map(x => [x])]
|
||||||
|
for (let comboSize = 2; comboSize <= array.length; comboSize++) {
|
||||||
|
const previous = combos[combos.length - 1]
|
||||||
|
const selfSet = new Set()
|
||||||
|
const newCombos = previous.map(self => {
|
||||||
|
self.forEach(x => selfSet.add(x))
|
||||||
|
const nonSelf = array.filter(x => !selfSet.has(x))
|
||||||
|
return nonSelf.map(x => [...self, x])
|
||||||
|
})
|
||||||
|
const flatCombos = newCombos.reduce((acc, x) => [...acc, ...x], [])
|
||||||
|
combos.push(flatCombos)
|
||||||
|
}
|
||||||
|
return combos.reduce((acc, x) => [...acc, ...x], [])
|
||||||
|
}
|
||||||
|
|
||||||
|
export const init = () => {
|
||||||
|
const rootName = root.name
|
||||||
|
const rules = []
|
||||||
|
|
||||||
|
const processInnerComponent = (component, parent) => {
|
||||||
|
const {
|
||||||
|
validInnerComponents,
|
||||||
|
states: originalStates = {},
|
||||||
|
variants: originalVariants = {}
|
||||||
|
} = component
|
||||||
|
|
||||||
|
const states = { normal: '', ...originalStates }
|
||||||
|
const variants = { normal: '', ...originalVariants }
|
||||||
|
const innerComponents = validInnerComponents.map(name => components[name])
|
||||||
|
|
||||||
|
const stateCombinations = getAllPossibleCombinations(Object.keys(states))
|
||||||
|
const stateVariantCombination = Object.keys(variants).map(variant => {
|
||||||
|
return stateCombinations.map(state => ({ variant, state }))
|
||||||
|
}).reduce((acc, x) => [...acc, ...x], [])
|
||||||
|
|
||||||
|
stateVariantCombination.forEach(combination => {
|
||||||
|
rules.push(({
|
||||||
|
parent,
|
||||||
|
component: component.name,
|
||||||
|
state: combination.state,
|
||||||
|
variant: combination.variant
|
||||||
|
}))
|
||||||
|
|
||||||
|
innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, combination))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
processInnerComponent(components[rootName])
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user