Getting theme values in CSS-in-JS lib

theme-values.js

const Component = styled(
  'div',
  {
    // a. Seamless
    backgroundColor: 'primary',
    padding: '0 1',

    // b. With a prefix
    backgroundColor: '$primary',
    padding: '$0 $1',

    // c. With a function
    backgroundColor: t.colors('primary'),
    padding: `${t.space('0')} ${t.space('1')}`,

    // d. Object notation
    backgroundColor: 'colors.primary',
    padding: 'space.0 space.1',

    // e. Object notation (with brackets for numbers)
    backgroundColor: 'colors.primary',
    padding: 'space[0] space[1]',

    // f. Object notation with prefix
    backgroundColor: '$colors.primary',
    padding: '$space[0] $space[1]',

    // g. With a theme object
    backgroundColor: t.colors.primary,
    padding: `${t.space[0]} ${t.space[1]}`,

    // h. With a function (passing a dot notation string)
    backgroundColor: t('colors.primary'),
    padding: `${t('space.0')} ${t('space.1')}`,
  }
);