gistfile1.txt

import styled from 'styled-components'

const variants = ({ variant }) => {
  const allVariants = {
    danger: {
      backgroundColor: 'red',
    },
    warning: {
      backgroundColor: 'orange',
    },
    success: {
      backgroundColor: 'green',
    }
  }
  
  return allVariants[variant]
}

export const Tag = styled('div', {
  fontSize: props => props.theme.fontSizes[0],
}, variants)

// Usage
<Tag variant="warning" />
<Tag variant="danger" />
<Tag variant="success" />

// This will inject styles like this into the head - essentially styles are duplicated and not able to be cached
<style>
  .Tag-asdfaeaef {
    font-size: 12px;
  }
  .Tag-lkjlkvjjo {
    font-size: 12px;
    background-color: red;
  }
  .Tag-134asdfaf {
    font-size: 12px;
    background-color: orange;
  }
  .Tag-gadhcxbfg {
    font-size: 12px;
    background-color: green;
  }
</style>

gistfile2.txt

import { styled } from '~design'

export const Tag = styled('div', {
  fontSize: '$0',
  variants: {
    danger: {
      backgroundColor: '$red100',
    },
    warning: {
      backgroundColor: '$orange100',
    },
    success: {
      backgroundColor: '$green100',
    },
  }
})

// Usage
<Tag variant="warning" />
<Tag variant="danger" />
<Tag variant="success" />

// This will inject styles like this into the head
<style>
  .Tag-asdfasdf {
    font-size: var(--font-size-3);
  }
  .Tag-asdfasdf--danger {
    background-color: var(--colors-red-100);
  }
  .Tag-asdfasdf--warning {
    background-color: var(--colors-orange-100);
  }
  .Tag-asdfasdf--success {
    background-color: var(--colors-green-100);
  }
</style>