yarn add @animus-ui/core @emotion/styled @emotion/react

const animus = createAnimus()
  .addGroup('space', {
    m: { property: 'margin' },
    p: { property: 'padding' },
  })
  .build();

const FlexBox = animus
  .styles({ display: 'flex' })
  .states({
    inline: {
      display: 'inline-flex',
    },
  })
  .groups({
    space: true,
  })
  .props({
    gap: {
      property: 'gap',
      scale: {
        md: 12,
        lg: 24,
      },
    },
  })
  .asElement('div');

<Box p="2rem" gap="md" inline />;

const theme = createTheme({
  breakpoint: {
    xs: 480,
    sm: 767,
    md: 1024,
    lg: 1200,
    xl: 1440,
  },
  font: {
    body: '"Open Sans", sans serif',
    heading: '"Raleway", seirf',
  },
  fontSize: [12, 14, 32, 44, 64],
})
  .addColors({
    black: '#000000',
    white: '#ffffff',
  })
  .addColorModes('light', {
    light: {
      text: 'black',
      background: 'white',
    },
    dark: {
      text: 'white',
      background: 'black',
    },
  })
  .build();