Using tokens in custom components

[PabloFNK]

I have seen on the documentation the recommended way to create custom components with Styled Components.

import {styled, css} from '@twilio-paste/styling-library';

const custom = styled.div(
  css({
    backgroundColor: 'colorBackgroundPrimary',
    padding: 'spacing20',
  })
);

But I would like to know why is this the preferred way over:

import {colorBackgroundPrimary, spacing20} from '@twilio-paste/design-tokens';

const custom = styled.div`
  backgroundColor: ${colorBackgroundPrimary};
  padding: ${spacing20}
`;

The second one looks cleaner to me but maybe I am missing something and I would like to have your input on this.

[TheSisb]

Hello @PabloFNK,

[edit]: Follow up response provides an updated answer.

[TheSisb]

Hey @PabloFNK,

After further thought, there may be a slight issue with your approach in that it doesn't allow for theme switching as easily. Here's a codesandbox showing the different styling options: https://codesandbox.io/s/custom-component-styles-and-themes-ihim8?file=/src/index.tsx

I want to revise my recommendation to prefer using the Paste css() function approach.