What is the difference?

[pharma-bros-lucas]

Hi

I tried applying the style in two ways below.

It works.

const StyledTest = styled(Test, {
  base: {
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    '& span': {
      '&.line': {
        backgroundColor: '{colors.neutral.neutral6}',
      },
      '&.description': {
        textStyle: 'admin.typography.body.medium',
        color: '{colors.neutral.neutral6}',
      },
    },
  },
})

It doesn't work.

const StyledTest = styled(Test, {
  base: {
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    '& span': {
      '&.line': {
        backgroundColor: token('colors.neutral.neutral6'),
      },
      '&.description': {
        textStyle: 'admin.typography.body.medium',
        color: token('colors.neutral.neutral6'),
      },
    },
  },
})

Can't I use the token function?

What is the difference?

I'm migrating template literals. Please help.

[segunadebayo]

You can effectively remove the token(...) fns since you're using the object syntax.

const StyledTest = styled(Test, {
  base: {
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    '& span': {
      '&.line': {
-        backgroundColor: token('colors.neutral.neutral6'),
+        backgroundColor: 'neutral.neutral6',
      },
      '&.description': {
        textStyle: 'admin.typography.body.medium',
-       color: token('colors.neutral.neutral6'),
+       color: 'neutral.neutral6',
      },
    },
  },
})

[pharma-bros-lucas]

But doesn't this reduce type safety? I can't autocomplete the values ​​defined in the token.

Is there a way to autocomplete and style the token values?

The same problem occurs when using non-type-safe string literals.

[segunadebayo]

No, it doesn't. You actually get proper autocomplete when you use backgroundColor: 'neutral.neutral6'

[pharma-bros-lucas]

@segunadebayo

I am migrating template literals.

I applied it as you suggested, but the style is not working.

If you look at the source below,

In the part where the style of the react-router-dom Link component is overridden, the behavior is different depending on whether the {} string is inserted into the token. Why is that?

working

const LogoLink = styled(Link, {
  base: {
    display: "flex",
    alignItems: "center",
    gap: "12px",
    "& span": {
      "&.line": {
        width: "1px",
        height: "10px",
        background: "{admin.colors.neutral.neutral6}"
      },
      "&.description": {
        textStyle: "admin.typography.body.medium",
        color: "{admin.colors.neutral.neutral6}"
      }
    }
  }
})

not working

const LogoLink = styled(Link, {
  base: {
    display: "flex",
    alignItems: "center",
    gap: "12px",
    "& span": {
      "&.line": {
        width: "1px",
        height: "10px",
        background: "admin.colors.neutral.neutral6"
      },
      "&.description": {
        textStyle: "admin.typography.body.medium",
        color: "admin.colors.neutral.neutral6"
      }
    }
  }
})

[pharma-bros-lucas]

And I defined the style as you said, but what should I look at if autocomplete is not working?