Button.tsx

const Button = styled('button', {
  // base styles

  variants: {
    color: {
      background: { backgroundColor: '$background' },
      surface50: { backgroundColor: '$surface50' },
      surface100: { backgroundColor: '$surface100' },
      surface250: { backgroundColor: '$surface250' },
      surface500: { backgroundColor: '$surface500' },
      secondary50: { backgroundColor: '$secondary50' },
      secondary100: { backgroundColor: '$secondary100' },
      secondary250: { backgroundColor: '$secondary250' },
      secondary500: { backgroundColor: '$secondary500' },
	  ...
    },
  },
});

() => <Button color="violet">Button</Button>;