import { createSystem, color, space } from 'system-props';
import styled, { ThemeProvider } from 'styled-components';

const theme = {
  space: ['0px', '4px', '8px', '16px', '32px'],
  colors: {
    blue100: 'lightblue',
    blue200: 'blue',
    //...etc
  },
};

const system = createSystem({
  strict, // default: false
  pseudoSelectors, // default: { _hover: '&:hover', ...etc }
});

const Box = styled.div(system({ ...color, ...space }));

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Box
        bg="$blue500"
        margin="$1 $2 $3 $4"
        border="1px solid $blue200"
        borderBottom={(theme) => `3px dotted ${theme.colors.blue200}`}
        _hover={{
          bg: '$blue700',
        }}
      />
    </ThemeProvider>
  );
};