Несколько вариантов с Theme-UI

Question

Я пытаюсь научиться использовать Theme-UI (созданный тем же человеком, который создал Styled-System и Rebass ). Как и в Styled-System (и Rebass), существует файл темы, в котором есть возможность создания вариантов (подробности см. Здесь: https://theme -ui.com / theme-spec / # варианты ).

Так, например, я могу создать разные стилизованные кнопки, например:

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

Затем я могу использовать эти варианты следующим образом:

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

Проблема в том, что я хочу иметь возможность создавать несколько вариантов кнопок. Например, скажем, я хочу иметь следующие три варианта:

1. Размер (маленький, средний, большой и т. Д.).
2. Look (основной, дополнительный, отключенный и т. Д.).
3. Вид (по умолчанию, контур, текст и т. Д.).

Чтобы я мог создать такую ​​кнопку:

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

Это возможно со стилемсистема - вот пример:

• https://mathanpec.github.io/component-library/?path=/story/button--size-variant
• https://github.com/mathanpec/component-library/blob/basic-setup/src/theme/buttonStyle.ts

Но я не могу понять, как это сделать сTheme-UI.

Кто-нибудь знает, как это сделать с Theme-UI?