[colors] Add TypeScript interface for color constants

[acroyear]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Currently the files for the constants like "amber" are simply declare const amber: { 50: ..., ...etc }. This means they don't have an actual common type I can pass into a function or get back from a function. It would be great if there was an interface for the object to make it easier to make such declarations (just doing "typeof amber" doesn't auto-apply to the other constants like blue). Something like

interface MaterialStandardColorShades {
  50: string;
  100: string;
  200: string;
  300: string;
  400: string;
  500: string;
  600: string;
  700: string;
  800: string;
  900: string;
  A100: string;
  A200: string;
  A400: string;
  A700: string;
  [key: string | number]: string;
};

Examples 🌈

No response

Motivation 🔦

Trying to make a color picker type of thing, passing in the constants with keys and getting the full values back from the selector object. Until I added the above interface, I was forced to things which I'd prefer to avoid.

[acroyear]

Workaround: that interface in the summary works, and the colors will auto-match to it, so just add that to your own project.

[acroyear]

Updated the key - it'll take both string and number to support amber[500] as well as amber['500']. amber[500] === amber['500'] returned true as expected/hoped.