[Enhancement] Improve StyledComponents theme Autocomplete for React Client Code

check the code here - https://github.com/appsmithorg/appsmith/blob/release/app/client/src/constants/DefaultTheme.tsx#L345

Problem

Currently, for generic type value in theme for example colors: any, when we need to add something like color: ${props.theme.colors.dropdown.header.text}; using styled-components

We do not get an auto-complete prediction for such cases and also if wrote theme objects value reference incorrectly no error is generated.

Expected

1. To see predictions when referring to theme objects value :

Example

`props.theme.colors.dropdown.hea`
                          -- header 
                          -- heading

2. See error when incorrectly used theme object

Example

const theme = {
  colors: {
      primary: "#FFFFFF"
  }
};

// demo component
const Wrapper = styled.div`
color: ${props => props.theme.colors.incorrectPrimary}; // Should show error - no incorrectPrimary is defined
`

Solution

Ideally, we could generate the Colors type from the union of theme object's colors value & dark and light theme's color values.