Multiple Variants with Theme-UI

M

Moshe

Guest
I am trying to learn how to use Theme-UI (which is made by the same person who made Styled-System and Rebass). Like in Styled-System (and Rebass) there is a theme file which has the option for creating variants (see here for details: https://theme-ui.com/theme-spec/#variants).

So, for example, I can create different styled buttons -- like this:

buttons: {
primary: {
// you can reference other values defined in the theme
color: 'white',
bg: 'primary',
},
secondary: {
color: 'text',
bg: 'secondary',
},
}


I can then use those variants as follows:

<button
sx={{
variant: 'buttons.primary',
}}>


The problem is, I want to be able to create multiple variants for buttons. For example, let's say I want to have the following three variants:

  1. Size (small, medium, large, etc).
  2. Look (primary, secondary, disabled, etc).
  3. Kind (default, outline, text, etc).

So that I could style a button like this:

<button
sx={{
size="buttons.size.large"
kind="buttons.kind.outline"
look="buttons.look.secondary"
}}
/>


This IS possible with style system -- here is an example:


But I can't figure out how to do with with Theme-UI.

Does anyone know how to do this with Theme-UI?

Continue reading...
 
Top