[Enhancement] Improve StyledComponents theme Autocomplete for React Client Code

[rishabhrathod01]

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.

[parul5sahoo]

@Rishabh-Rathod @somangshu hey I would like to take up this issue.

[rishabhrathod01]

Greetings @parul5sahoo, thanks for showing interest 🎉 , This is all yours. Assigning this to you now.

Please don't forget to read the Contribution Guidelines. Would appreciate it if you can open a PR within the next 4 days.

[parul5sahoo]

Thanks @Rishabh-Rathod ! Given this issue begins with a [Task] tag should I name the new branch that I commit changes to as "Task/ImproveStyledComponentsthemeAutocomplete" or something of the sort? Or should it begin with "/fix" or "/feature"?

[rishabhrathod01]

@parul5sahoo you can name it

chore/theme-autocomplete-enhancement-6843

[parul5sahoo]

@Rishabh-Rathod Hey, I have created a PR with a possible solution and that enables autocomplete features and subsequently solves the second part of the issue as well. Do let me know if this looks fine.

[Tallon66]

@Rishabh-Rathod could I please be assigned to this?

[Bisht13]

Can I pick up this issue?

[somangshu]

@Tallon66 sorry we are late looking at your comment; If you are available please raise a PR for this in the next 2 days and let us know here.

@Bisht13 I see you have a few other issue assigned, If the above person does not get back in 48hrs, Ill assign this to you

[somangshu]

@Bisht13 are you willing to pick the issue up?

[abhisheksharma010]

Hello, I would like to work on this, can it be assigned to me

[somangshu]

@abhisheksharma886 please pick this up. Apologies for the late response here. Assigning this to you. Please raise the PR soon and let us know here, we will take it ahead for a review

[Thackermahima]

Hey, is anyone working on this issue? @somangshu

[somangshu]

Greetings @Thackermahima, thanks for showing interest 🎉 , This is all your. Assigning this to you now.

Please don't forget to read the Contribution Guidelines. Would appreciate if you can open a PR within the next 2 days and let me know here.

[razelos]

Hello, can I pick up this issue?