Correct me if I'm wrong (or misusing the mapping) but I had a question about how/why variant group styles are merged between appearances?
I couldn't find much documentation on this specific behavior and have not dived into the source code yet but I would figure that isolating styles between appearances/variants would mean less repetition and more compact, easier to maintain style definitions.
Take the default Button mapping, for example
const theme = {
appearances: {
// The amount of code in filled.status is nice and compact
filled: {
mapping: { // ⬅ if i understand this correctly, mapping is like a "parent" style that applies to all variants?
textFontFamily: "text-font-family",
borderColor: 'transparent',
textColor: '$color-text-basic',
iconTintColor: '$color-text-basic',
},
variantGroups: {
status: {
primary: {
backgroundColor: '$color-primary-500',
state: {
hover: {
backgroundColor: '$color-primary-400',
},
focused: {
backgroundColor: '$color-primary-600',
},
active: {
backgroundColor: '$color-primary-600',
},
disabled: {
backgroundColor: '$color-primary-transparent-300',
},
},
}
},
size: { // ⬅ this is applied to all other appearances which is nice but ...
tiny: { ...tinyStyles },
small: { ...smallStyles },
medium: { ...medStyles },
large: { ...largeStyles },
},
},
},
outline: {
mapping: {
backgroundColor: 'transparent', // ⬅ I expected this be applied to all variantGroups under outline.*
},
variantGroups: {
status: {
primary: {
backgroundColor: 'transparent', // ⬅ or even here, I expected this to be applied to all states under outline.primary
borderColor: '$color-primary-500',
textColor: '$color-primary-500',
iconTintColor: '$color-primary-500',
state: {
hover: {
backgroundColor: 'transparent', // ⬅ Instead, I have to repeatedly define them to override it from filled.primary
borderColor: '$color-primary-400',
textColor: '$color-primary-400',
iconTintColor: '$color-primary-400',
},
focused: {
backgroundColor: 'transparent', // ⬅ Instead, I have to repeatedly define them to override it from filled.primary
borderColor: '$color-primary-600',
textColor: '$color-primary-600',
iconTintColor: '$color-primary-600',
},
active: {
backgroundColor: 'transparent', // ⬅ Instead, I have to repeatedly define them to override it from filled.primary
borderColor: '$color-primary-600',
textColor: '$color-primary-600',
iconTintColor: '$color-primary-600',
},
disabled: {
backgroundColor: 'transparent', // ⬅ Instead, I have to repeatedly define them to override it from filled.primary
borderColor: '$color-primary-transparent-300',
textColor: '$color-primary-300',
iconTintColor: '$color-primary-300',
},
},
},
},
},
},
},
}
If it's for performance reasons, I can make do, but generally I'm just curious about this behavior.
UI Kitten and Eva version
@eva-design/eva@5.0.0
@ui-kitten/components@5.0.0