How to reuse duplicate styles from variants?

[mrlubos]

Hey! I'm wondering how could I go about further reducing my styles footprint by reducing the amount of duplicate styles in variants. Let's say I have the following theme.

const theme = {
  colors: {
    text: '#111',
  },
  variants: {
    body: {
      color: 'text',
      padding: 0,
    },
    text: {
      color: 'text',
      padding: '1rem',
    },
  },
};

Clearly, both variants.body and variants.text use the same color: 'text' definition. This isn't a big deal, but let's say I have a variant that is meant to fill the whole screen as an absolutely positioned element, or a variant visually hiding the element. Perhaps the most common use case is a text style containing the same color, fontSize, fontWeight, and lineHeight attributes, but varying in padding, display, or other attributes.

Is there a way to extend variants inside the theme? Or is my implementation of variants incorrect? Should I perhaps create one common variant and then extend it from individual components?

Thanks!

[jxnblk]

Should I perhaps create one common variant and then extend it from individual components?

Not the only way, and this example maybe isn't the best, but you can inherit variants from other variants:

variants: {
  textBase: {
    color: 'text',
  },
  body: {
    variant: 'variants.textBase',
    padding: 0,
  },
  text: {
    variant: 'variants.textBase',
    padding: 3,
  },
}

Hopefully we'll have support for merging multiple variants together in the sx prop land before v1, which would offer another approach

[mrlubos]

Hi @jxnblk! Thank you for the prompt reply, appreciate it. Your solution works for me, so I'll stick to that. I'm fairly new to Theme UI, so I have a few more questions if you don't mind.

1. What shouldn't go to the theme file? What's the heuristic I should use to decide whether to put something inside?
2. What does the theme file look like for larger projects? I'm only getting started with one page and my theme is already almost 500 lines of code. Majority of this are variants for individual components (images, typography, cards, etc.), the rest are colours, fonts, and other base values. At this pace, I can imagine this file getting very large very soon.

Thank you for your help!

[jxnblk]

Honestly, it could be worth opening these up as additional discussions to allow the community to answer, but for 1) the library isn't meant to be restrictive, so whatever your team finds helpful can go into the theme – since objects can't as easily be tree-shaken and React context is globally available, I recommend keeping that in mind as a consideration though; and 2) I'm sure there are larger examples out there, but this is the theme used for Gatsby (which parts of predate Theme UI IIRC): https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-design-tokens

[mrlubos]

Hey, just an update in case it's useful for anyone. At the moment, my theme file sits at 340 lines of code with maybe 320-330 lines being theme values and I have waaay more code written in the project. I had to answer the 2 questions I posed above and here are the decisions I took (for now).

1. The only things that go inside are design tokens. That means font definitions, spacing definitions, radii, stacking order, and shadows. My theme file currently contains buttons, sizes, and some miscellaneous stuff as well, but I don't find these particularly valuable and think they could be removed soon.

2. For reusing and composing styles, I define simple components like this.

export const ReusableComponent = (props: BoxProps) => (
  <Box backgroundColor="text" height="100%" variant="foo" {...props} />
);

These can be imported and extended as required without unnecessarily bloating up the bundle size. This is why I am thinking buttons could be removed from the theme soon, there could be a styled button component instead. In addition, it could have a better type checking support via props as there is nothing currently stopping me from writing variant="buttons.iDoNotExist" and nothing will catch that.

That's it for now!