[TypeScript] Fix color exporting (mui#7989)

* [TypeScript] Fix colors exported as types instead of const
* [TypeScript] Add a test case for color exporting

src/colors/amber.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/blue.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/blueGrey.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/brown.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/common.d.ts

@@ -1,17 +1,25 @@
-import { Color } from '..';
+declare const black: string;
+declare const white: string;
+declare const transparent: string;
+declare const fullBlack: string;
+declare const darkBlack: string;
+declare const lightBlack: string;
+declare const minBlack: string;
+declare const faintBlack: string;
+declare const fullWhite: string;
+declare const darkWhite: string;
+declare const lightWhite: string;
 
-interface CommonColors {
-  black: Color;
-  white: Color;
-  transparent: Color;
-  fullBlack: Color;
-  darkBlack: Color;
-  lightBlack: Color;
-  minBlack: Color;
-  faintBlack: Color;
-  fullWhite: Color;
-  darkWhite: Color;
-  lightWhite: Color;
-}
-
-export default CommonColors;
+export default {
+  black,
+  white,
+  transparent,
+  fullBlack,
+  darkBlack,
+  lightBlack,
+  minBlack,
+  faintBlack,
+  fullWhite,
+  darkWhite,
+  lightWhite
+};

src/colors/cyan.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/deepOrange.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/deepPurple.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/green.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/grey.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/indigo.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/lightBlue.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/lightGreen.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/lime.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/orange.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/pink.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/purple.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/red.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/teal.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

src/colors/yellow.d.ts

@@ -1,3 +1,5 @@
 import { Color } from '..';
 
-export default Color;
+declare const color: Color;
+
+export default color;

test/typescript/colors.ts

@@ -0,0 +1,56 @@
+import {
+    amber, blue, blueGrey,
+    brown, cyan, deepOrange,
+    deepPurple, green, grey,
+    indigo, lightBlue, lightGreen,
+    lime, orange, pink,
+    purple, red, teal,
+    yellow, common
+} from '../../src/colors';
+
+[
+    // Check if the color is usable as a variable
+    amber, blue, blueGrey,
+    brown, cyan, deepOrange,
+    deepPurple, green, grey,
+    indigo, lightBlue, lightGreen,
+    lime, orange, pink,
+    purple, red, teal,
+    yellow
+].forEach(color => {
+    // Check if each color is a string
+    color[50] as string;
+    color[100] as string;
+    color[200] as string;
+    color[300] as string;
+    color[400] as string;
+    color[500] as string;
+    color[600] as string;
+    color[700] as string;
+    color[800] as string;
+    color[900] as string;
+    color.A100 as string;
+    color.A200 as string;
+    color.A400 as string;
+    color.A700 as string;
+
+    // Check if contrastDefaultColor is a string too
+    color.contrastDefaultColor as string;
+});
+
+const {
+    black, white, transparent,
+    fullBlack, darkBlack, lightBlack,
+    minBlack, faintBlack,
+    fullWhite, darkWhite, lightWhite
+} = common;
+
+[
+    black, white, transparent,
+    fullBlack, darkBlack, lightBlack,
+    minBlack, faintBlack,
+    fullWhite, darkWhite, lightWhite
+].forEach(color => {
+    color as string;
+});
+