3

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

General Grievance
  • 4,555
  • 31
  • 31
  • 45
nnyath
  • 31
  • 2

0 Answers0