How to make the Typescript Intelisense to Work based on theme props values?

[ebellumat]

Hello guys, first, thank you for this great work.

I have a simple question, how to make the Intelisense of configured props of themes on Vscode?

Heres my component.

import styled from 'styled-components/native';
import { color, space, SpaceProps, ColorProps } from "styled-system";

export type BoxProps = SpaceProps &
  ColorProps;

export const Box = styled.View<BoxProps>`
  ${color}
  ${space}
`

My small theme

import * as tokens from '../tokens';

export const theme = {
    colors: {
        red: tokens.primary,
        green: tokens.secondary
    }
} as const;

Even with this, this color props not appear when i use my component to complete. I want to make my job easier.

What i'm doing wrong?

[shawngustaw]

I believe you can accomplish this by doing the following:

type ThemeType = typeof theme

export type BoxProps = SpaceProps<ThemeType> &
  ColorProps<ThemeType>;

export const Box = styled.View<BoxProps>`
  ${color}
  ${space}
`