diff --git a/docs/public/static/colors-preview/amber-100-24x24.svg b/docs/public/static/colors-preview/amber-100-24x24.svg
new file mode 100644
index 00000000000000..ff5c4808deab5f
--- /dev/null
+++ b/docs/public/static/colors-preview/amber-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffecb3"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/amber-200-24x24.svg b/docs/public/static/colors-preview/amber-200-24x24.svg
new file mode 100644
index 00000000000000..a6e7740d41884f
--- /dev/null
+++ b/docs/public/static/colors-preview/amber-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffe082"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/amber-300-24x24.svg b/docs/public/static/colors-preview/amber-300-24x24.svg
new file mode 100644
index 00000000000000..46a034d3b44334
--- /dev/null
+++ b/docs/public/static/colors-preview/amber-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffd54f"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/amber-400-24x24.svg b/docs/public/static/colors-preview/amber-400-24x24.svg
new file mode 100644
index 00000000000000..d4fe90a46627fd
--- /dev/null
+++ b/docs/public/static/colors-preview/amber-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffca28"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/amber-50-24x24.svg b/docs/public/static/colors-preview/amber-50-24x24.svg
new file mode 100644
index 00000000000000..ab0a353065851c
--- /dev/null
+++ b/docs/public/static/colors-preview/amber-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#fff8e1"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/amber-500-24x24.svg b/docs/public/static/colors-preview/amber-500-24x24.svg
new file mode 100644
index 00000000000000..7fca9879d8d58c
--- /dev/null
+++ b/docs/public/static/colors-preview/amber-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffc107"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/amber-600-24x24.svg b/docs/public/static/colors-preview/amber-600-24x24.svg
new file mode 100644
index 00000000000000..4dc429e135c732
--- /dev/null
+++ b/docs/public/static/colors-preview/amber-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffb300"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/amber-700-24x24.svg b/docs/public/static/colors-preview/amber-700-24x24.svg
new file mode 100644
index 00000000000000..f1cb9c018059e6
--- /dev/null
+++ b/docs/public/static/colors-preview/amber-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffa000"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/amber-800-24x24.svg b/docs/public/static/colors-preview/amber-800-24x24.svg
new file mode 100644
index 00000000000000..35fa0881ff15e5
--- /dev/null
+++ b/docs/public/static/colors-preview/amber-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff8f00"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/amber-900-24x24.svg b/docs/public/static/colors-preview/amber-900-24x24.svg
new file mode 100644
index 00000000000000..467b8adaecfebb
--- /dev/null
+++ b/docs/public/static/colors-preview/amber-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff6f00"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/amber-A100-24x24.svg b/docs/public/static/colors-preview/amber-A100-24x24.svg
new file mode 100644
index 00000000000000..e245b2b9f5796c
--- /dev/null
+++ b/docs/public/static/colors-preview/amber-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffe57f"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/amber-A200-24x24.svg b/docs/public/static/colors-preview/amber-A200-24x24.svg
new file mode 100644
index 00000000000000..527cb5b069c47a
--- /dev/null
+++ b/docs/public/static/colors-preview/amber-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffd740"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/amber-A400-24x24.svg b/docs/public/static/colors-preview/amber-A400-24x24.svg
new file mode 100644
index 00000000000000..458e28f2e8a915
--- /dev/null
+++ b/docs/public/static/colors-preview/amber-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffc400"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/amber-A700-24x24.svg b/docs/public/static/colors-preview/amber-A700-24x24.svg
new file mode 100644
index 00000000000000..95f2508901ad58
--- /dev/null
+++ b/docs/public/static/colors-preview/amber-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffab00"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blue-100-24x24.svg b/docs/public/static/colors-preview/blue-100-24x24.svg
new file mode 100644
index 00000000000000..1147ec03911b9c
--- /dev/null
+++ b/docs/public/static/colors-preview/blue-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#bbdefb"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blue-200-24x24.svg b/docs/public/static/colors-preview/blue-200-24x24.svg
new file mode 100644
index 00000000000000..bf56a444fa215d
--- /dev/null
+++ b/docs/public/static/colors-preview/blue-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#90caf9"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blue-300-24x24.svg b/docs/public/static/colors-preview/blue-300-24x24.svg
new file mode 100644
index 00000000000000..11d2fe81072427
--- /dev/null
+++ b/docs/public/static/colors-preview/blue-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#64b5f6"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blue-400-24x24.svg b/docs/public/static/colors-preview/blue-400-24x24.svg
new file mode 100644
index 00000000000000..12d47b4019fb41
--- /dev/null
+++ b/docs/public/static/colors-preview/blue-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#42a5f5"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blue-50-24x24.svg b/docs/public/static/colors-preview/blue-50-24x24.svg
new file mode 100644
index 00000000000000..a9769cc81271dd
--- /dev/null
+++ b/docs/public/static/colors-preview/blue-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e3f2fd"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blue-500-24x24.svg b/docs/public/static/colors-preview/blue-500-24x24.svg
new file mode 100644
index 00000000000000..44943f47c46c63
--- /dev/null
+++ b/docs/public/static/colors-preview/blue-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#2196f3"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blue-600-24x24.svg b/docs/public/static/colors-preview/blue-600-24x24.svg
new file mode 100644
index 00000000000000..32709e09a0cfb2
--- /dev/null
+++ b/docs/public/static/colors-preview/blue-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#1e88e5"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blue-700-24x24.svg b/docs/public/static/colors-preview/blue-700-24x24.svg
new file mode 100644
index 00000000000000..017c09843f801d
--- /dev/null
+++ b/docs/public/static/colors-preview/blue-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#1976d2"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blue-800-24x24.svg b/docs/public/static/colors-preview/blue-800-24x24.svg
new file mode 100644
index 00000000000000..75c6a98d9e441c
--- /dev/null
+++ b/docs/public/static/colors-preview/blue-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#1565c0"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blue-900-24x24.svg b/docs/public/static/colors-preview/blue-900-24x24.svg
new file mode 100644
index 00000000000000..7cf9173c60cb7b
--- /dev/null
+++ b/docs/public/static/colors-preview/blue-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#0d47a1"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blue-A100-24x24.svg b/docs/public/static/colors-preview/blue-A100-24x24.svg
new file mode 100644
index 00000000000000..19022fd1bcfe5e
--- /dev/null
+++ b/docs/public/static/colors-preview/blue-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#82b1ff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blue-A200-24x24.svg b/docs/public/static/colors-preview/blue-A200-24x24.svg
new file mode 100644
index 00000000000000..2847def4c0c981
--- /dev/null
+++ b/docs/public/static/colors-preview/blue-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#448aff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blue-A400-24x24.svg b/docs/public/static/colors-preview/blue-A400-24x24.svg
new file mode 100644
index 00000000000000..8ea554a8db224b
--- /dev/null
+++ b/docs/public/static/colors-preview/blue-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#2979ff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blue-A700-24x24.svg b/docs/public/static/colors-preview/blue-A700-24x24.svg
new file mode 100644
index 00000000000000..b8711b34054c06
--- /dev/null
+++ b/docs/public/static/colors-preview/blue-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#2962ff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blueGrey-100-24x24.svg b/docs/public/static/colors-preview/blueGrey-100-24x24.svg
new file mode 100644
index 00000000000000..a6d7b6dc3e58f0
--- /dev/null
+++ b/docs/public/static/colors-preview/blueGrey-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#cfd8dc"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blueGrey-200-24x24.svg b/docs/public/static/colors-preview/blueGrey-200-24x24.svg
new file mode 100644
index 00000000000000..01881adcd22d87
--- /dev/null
+++ b/docs/public/static/colors-preview/blueGrey-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#b0bec5"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blueGrey-300-24x24.svg b/docs/public/static/colors-preview/blueGrey-300-24x24.svg
new file mode 100644
index 00000000000000..bb72dc7a714fc1
--- /dev/null
+++ b/docs/public/static/colors-preview/blueGrey-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#90a4ae"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blueGrey-400-24x24.svg b/docs/public/static/colors-preview/blueGrey-400-24x24.svg
new file mode 100644
index 00000000000000..09608eafabaf24
--- /dev/null
+++ b/docs/public/static/colors-preview/blueGrey-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#78909c"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blueGrey-50-24x24.svg b/docs/public/static/colors-preview/blueGrey-50-24x24.svg
new file mode 100644
index 00000000000000..f104811b592135
--- /dev/null
+++ b/docs/public/static/colors-preview/blueGrey-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#eceff1"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blueGrey-500-24x24.svg b/docs/public/static/colors-preview/blueGrey-500-24x24.svg
new file mode 100644
index 00000000000000..f7062c7d724a08
--- /dev/null
+++ b/docs/public/static/colors-preview/blueGrey-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#607d8b"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blueGrey-600-24x24.svg b/docs/public/static/colors-preview/blueGrey-600-24x24.svg
new file mode 100644
index 00000000000000..4a692438bbd58c
--- /dev/null
+++ b/docs/public/static/colors-preview/blueGrey-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#546e7a"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blueGrey-700-24x24.svg b/docs/public/static/colors-preview/blueGrey-700-24x24.svg
new file mode 100644
index 00000000000000..3ec58c5b4297e8
--- /dev/null
+++ b/docs/public/static/colors-preview/blueGrey-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#455a64"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blueGrey-800-24x24.svg b/docs/public/static/colors-preview/blueGrey-800-24x24.svg
new file mode 100644
index 00000000000000..648b67bb33edf2
--- /dev/null
+++ b/docs/public/static/colors-preview/blueGrey-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#37474f"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blueGrey-900-24x24.svg b/docs/public/static/colors-preview/blueGrey-900-24x24.svg
new file mode 100644
index 00000000000000..29ad536e356593
--- /dev/null
+++ b/docs/public/static/colors-preview/blueGrey-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#263238"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blueGrey-A100-24x24.svg b/docs/public/static/colors-preview/blueGrey-A100-24x24.svg
new file mode 100644
index 00000000000000..a6d7b6dc3e58f0
--- /dev/null
+++ b/docs/public/static/colors-preview/blueGrey-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#cfd8dc"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blueGrey-A200-24x24.svg b/docs/public/static/colors-preview/blueGrey-A200-24x24.svg
new file mode 100644
index 00000000000000..01881adcd22d87
--- /dev/null
+++ b/docs/public/static/colors-preview/blueGrey-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#b0bec5"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blueGrey-A400-24x24.svg b/docs/public/static/colors-preview/blueGrey-A400-24x24.svg
new file mode 100644
index 00000000000000..09608eafabaf24
--- /dev/null
+++ b/docs/public/static/colors-preview/blueGrey-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#78909c"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/blueGrey-A700-24x24.svg b/docs/public/static/colors-preview/blueGrey-A700-24x24.svg
new file mode 100644
index 00000000000000..3ec58c5b4297e8
--- /dev/null
+++ b/docs/public/static/colors-preview/blueGrey-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#455a64"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/brown-100-24x24.svg b/docs/public/static/colors-preview/brown-100-24x24.svg
new file mode 100644
index 00000000000000..cf211776b28479
--- /dev/null
+++ b/docs/public/static/colors-preview/brown-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#d7ccc8"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/brown-200-24x24.svg b/docs/public/static/colors-preview/brown-200-24x24.svg
new file mode 100644
index 00000000000000..a26f04bda4e39b
--- /dev/null
+++ b/docs/public/static/colors-preview/brown-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#bcaaa4"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/brown-300-24x24.svg b/docs/public/static/colors-preview/brown-300-24x24.svg
new file mode 100644
index 00000000000000..f4d787f09a7e88
--- /dev/null
+++ b/docs/public/static/colors-preview/brown-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#a1887f"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/brown-400-24x24.svg b/docs/public/static/colors-preview/brown-400-24x24.svg
new file mode 100644
index 00000000000000..e7ab252743a219
--- /dev/null
+++ b/docs/public/static/colors-preview/brown-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#8d6e63"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/brown-50-24x24.svg b/docs/public/static/colors-preview/brown-50-24x24.svg
new file mode 100644
index 00000000000000..3f04662f88e74b
--- /dev/null
+++ b/docs/public/static/colors-preview/brown-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#efebe9"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/brown-500-24x24.svg b/docs/public/static/colors-preview/brown-500-24x24.svg
new file mode 100644
index 00000000000000..1721b56bf84cfc
--- /dev/null
+++ b/docs/public/static/colors-preview/brown-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#795548"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/brown-600-24x24.svg b/docs/public/static/colors-preview/brown-600-24x24.svg
new file mode 100644
index 00000000000000..1efebc9f0bb92c
--- /dev/null
+++ b/docs/public/static/colors-preview/brown-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#6d4c41"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/brown-700-24x24.svg b/docs/public/static/colors-preview/brown-700-24x24.svg
new file mode 100644
index 00000000000000..494b22a3f10c03
--- /dev/null
+++ b/docs/public/static/colors-preview/brown-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#5d4037"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/brown-800-24x24.svg b/docs/public/static/colors-preview/brown-800-24x24.svg
new file mode 100644
index 00000000000000..660912aab475b0
--- /dev/null
+++ b/docs/public/static/colors-preview/brown-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#4e342e"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/brown-900-24x24.svg b/docs/public/static/colors-preview/brown-900-24x24.svg
new file mode 100644
index 00000000000000..ee47ca9a576d80
--- /dev/null
+++ b/docs/public/static/colors-preview/brown-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#3e2723"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/brown-A100-24x24.svg b/docs/public/static/colors-preview/brown-A100-24x24.svg
new file mode 100644
index 00000000000000..cf211776b28479
--- /dev/null
+++ b/docs/public/static/colors-preview/brown-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#d7ccc8"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/brown-A200-24x24.svg b/docs/public/static/colors-preview/brown-A200-24x24.svg
new file mode 100644
index 00000000000000..a26f04bda4e39b
--- /dev/null
+++ b/docs/public/static/colors-preview/brown-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#bcaaa4"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/brown-A400-24x24.svg b/docs/public/static/colors-preview/brown-A400-24x24.svg
new file mode 100644
index 00000000000000..e7ab252743a219
--- /dev/null
+++ b/docs/public/static/colors-preview/brown-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#8d6e63"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/brown-A700-24x24.svg b/docs/public/static/colors-preview/brown-A700-24x24.svg
new file mode 100644
index 00000000000000..494b22a3f10c03
--- /dev/null
+++ b/docs/public/static/colors-preview/brown-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#5d4037"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/common-black-24x24.svg b/docs/public/static/colors-preview/common-black-24x24.svg
new file mode 100644
index 00000000000000..09108ba9b91e4a
--- /dev/null
+++ b/docs/public/static/colors-preview/common-black-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#000"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/common-white-24x24.svg b/docs/public/static/colors-preview/common-white-24x24.svg
new file mode 100644
index 00000000000000..18205fb8e8d94f
--- /dev/null
+++ b/docs/public/static/colors-preview/common-white-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#fff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/cyan-100-24x24.svg b/docs/public/static/colors-preview/cyan-100-24x24.svg
new file mode 100644
index 00000000000000..06df0a1d0d5454
--- /dev/null
+++ b/docs/public/static/colors-preview/cyan-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#b2ebf2"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/cyan-200-24x24.svg b/docs/public/static/colors-preview/cyan-200-24x24.svg
new file mode 100644
index 00000000000000..77e52a6ffbe965
--- /dev/null
+++ b/docs/public/static/colors-preview/cyan-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#80deea"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/cyan-300-24x24.svg b/docs/public/static/colors-preview/cyan-300-24x24.svg
new file mode 100644
index 00000000000000..8740c1648159f0
--- /dev/null
+++ b/docs/public/static/colors-preview/cyan-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#4dd0e1"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/cyan-400-24x24.svg b/docs/public/static/colors-preview/cyan-400-24x24.svg
new file mode 100644
index 00000000000000..7d732237756667
--- /dev/null
+++ b/docs/public/static/colors-preview/cyan-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#26c6da"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/cyan-50-24x24.svg b/docs/public/static/colors-preview/cyan-50-24x24.svg
new file mode 100644
index 00000000000000..1be2b6ddfa74c5
--- /dev/null
+++ b/docs/public/static/colors-preview/cyan-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e0f7fa"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/cyan-500-24x24.svg b/docs/public/static/colors-preview/cyan-500-24x24.svg
new file mode 100644
index 00000000000000..f854bcf69f0488
--- /dev/null
+++ b/docs/public/static/colors-preview/cyan-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#00bcd4"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/cyan-600-24x24.svg b/docs/public/static/colors-preview/cyan-600-24x24.svg
new file mode 100644
index 00000000000000..2ff5b7c4d1d7c4
--- /dev/null
+++ b/docs/public/static/colors-preview/cyan-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#00acc1"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/cyan-700-24x24.svg b/docs/public/static/colors-preview/cyan-700-24x24.svg
new file mode 100644
index 00000000000000..9011c7367675ff
--- /dev/null
+++ b/docs/public/static/colors-preview/cyan-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#0097a7"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/cyan-800-24x24.svg b/docs/public/static/colors-preview/cyan-800-24x24.svg
new file mode 100644
index 00000000000000..3ad25385f9a00a
--- /dev/null
+++ b/docs/public/static/colors-preview/cyan-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#00838f"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/cyan-900-24x24.svg b/docs/public/static/colors-preview/cyan-900-24x24.svg
new file mode 100644
index 00000000000000..c051458c73b123
--- /dev/null
+++ b/docs/public/static/colors-preview/cyan-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#006064"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/cyan-A100-24x24.svg b/docs/public/static/colors-preview/cyan-A100-24x24.svg
new file mode 100644
index 00000000000000..34b67134be30f5
--- /dev/null
+++ b/docs/public/static/colors-preview/cyan-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#84ffff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/cyan-A200-24x24.svg b/docs/public/static/colors-preview/cyan-A200-24x24.svg
new file mode 100644
index 00000000000000..379fff7d4f9773
--- /dev/null
+++ b/docs/public/static/colors-preview/cyan-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#18ffff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/cyan-A400-24x24.svg b/docs/public/static/colors-preview/cyan-A400-24x24.svg
new file mode 100644
index 00000000000000..d19c9ff8b70b30
--- /dev/null
+++ b/docs/public/static/colors-preview/cyan-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#00e5ff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/cyan-A700-24x24.svg b/docs/public/static/colors-preview/cyan-A700-24x24.svg
new file mode 100644
index 00000000000000..c95101bf304537
--- /dev/null
+++ b/docs/public/static/colors-preview/cyan-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#00b8d4"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepOrange-100-24x24.svg b/docs/public/static/colors-preview/deepOrange-100-24x24.svg
new file mode 100644
index 00000000000000..6c28920f5a40ab
--- /dev/null
+++ b/docs/public/static/colors-preview/deepOrange-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffccbc"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepOrange-200-24x24.svg b/docs/public/static/colors-preview/deepOrange-200-24x24.svg
new file mode 100644
index 00000000000000..ab638f7ed4458e
--- /dev/null
+++ b/docs/public/static/colors-preview/deepOrange-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffab91"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepOrange-300-24x24.svg b/docs/public/static/colors-preview/deepOrange-300-24x24.svg
new file mode 100644
index 00000000000000..bc3721c0502419
--- /dev/null
+++ b/docs/public/static/colors-preview/deepOrange-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff8a65"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepOrange-400-24x24.svg b/docs/public/static/colors-preview/deepOrange-400-24x24.svg
new file mode 100644
index 00000000000000..a012070a043501
--- /dev/null
+++ b/docs/public/static/colors-preview/deepOrange-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff7043"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepOrange-50-24x24.svg b/docs/public/static/colors-preview/deepOrange-50-24x24.svg
new file mode 100644
index 00000000000000..96b9dda8061f86
--- /dev/null
+++ b/docs/public/static/colors-preview/deepOrange-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#fbe9e7"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepOrange-500-24x24.svg b/docs/public/static/colors-preview/deepOrange-500-24x24.svg
new file mode 100644
index 00000000000000..ed15ab62072417
--- /dev/null
+++ b/docs/public/static/colors-preview/deepOrange-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff5722"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepOrange-600-24x24.svg b/docs/public/static/colors-preview/deepOrange-600-24x24.svg
new file mode 100644
index 00000000000000..7f7256d5ac88ab
--- /dev/null
+++ b/docs/public/static/colors-preview/deepOrange-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f4511e"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepOrange-700-24x24.svg b/docs/public/static/colors-preview/deepOrange-700-24x24.svg
new file mode 100644
index 00000000000000..e1e6cc8ecbd833
--- /dev/null
+++ b/docs/public/static/colors-preview/deepOrange-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e64a19"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepOrange-800-24x24.svg b/docs/public/static/colors-preview/deepOrange-800-24x24.svg
new file mode 100644
index 00000000000000..a55d43d0a1226d
--- /dev/null
+++ b/docs/public/static/colors-preview/deepOrange-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#d84315"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepOrange-900-24x24.svg b/docs/public/static/colors-preview/deepOrange-900-24x24.svg
new file mode 100644
index 00000000000000..796e31c5f0ac38
--- /dev/null
+++ b/docs/public/static/colors-preview/deepOrange-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#bf360c"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepOrange-A100-24x24.svg b/docs/public/static/colors-preview/deepOrange-A100-24x24.svg
new file mode 100644
index 00000000000000..edb6a9f3ed2db5
--- /dev/null
+++ b/docs/public/static/colors-preview/deepOrange-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff9e80"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepOrange-A200-24x24.svg b/docs/public/static/colors-preview/deepOrange-A200-24x24.svg
new file mode 100644
index 00000000000000..af3e04b3afafcd
--- /dev/null
+++ b/docs/public/static/colors-preview/deepOrange-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff6e40"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepOrange-A400-24x24.svg b/docs/public/static/colors-preview/deepOrange-A400-24x24.svg
new file mode 100644
index 00000000000000..3dd1144db47287
--- /dev/null
+++ b/docs/public/static/colors-preview/deepOrange-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff3d00"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepOrange-A700-24x24.svg b/docs/public/static/colors-preview/deepOrange-A700-24x24.svg
new file mode 100644
index 00000000000000..25a826755e37c4
--- /dev/null
+++ b/docs/public/static/colors-preview/deepOrange-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#dd2c00"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepPurple-100-24x24.svg b/docs/public/static/colors-preview/deepPurple-100-24x24.svg
new file mode 100644
index 00000000000000..c9355ab2508e16
--- /dev/null
+++ b/docs/public/static/colors-preview/deepPurple-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#d1c4e9"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepPurple-200-24x24.svg b/docs/public/static/colors-preview/deepPurple-200-24x24.svg
new file mode 100644
index 00000000000000..b9cfa6a48a61af
--- /dev/null
+++ b/docs/public/static/colors-preview/deepPurple-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#b39ddb"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepPurple-300-24x24.svg b/docs/public/static/colors-preview/deepPurple-300-24x24.svg
new file mode 100644
index 00000000000000..6dd529cbc8ee60
--- /dev/null
+++ b/docs/public/static/colors-preview/deepPurple-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#9575cd"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepPurple-400-24x24.svg b/docs/public/static/colors-preview/deepPurple-400-24x24.svg
new file mode 100644
index 00000000000000..a154864b4fe854
--- /dev/null
+++ b/docs/public/static/colors-preview/deepPurple-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#7e57c2"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepPurple-50-24x24.svg b/docs/public/static/colors-preview/deepPurple-50-24x24.svg
new file mode 100644
index 00000000000000..315992509067af
--- /dev/null
+++ b/docs/public/static/colors-preview/deepPurple-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ede7f6"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepPurple-500-24x24.svg b/docs/public/static/colors-preview/deepPurple-500-24x24.svg
new file mode 100644
index 00000000000000..06e00bd880e57f
--- /dev/null
+++ b/docs/public/static/colors-preview/deepPurple-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#673ab7"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepPurple-600-24x24.svg b/docs/public/static/colors-preview/deepPurple-600-24x24.svg
new file mode 100644
index 00000000000000..09e10b95b9b7fe
--- /dev/null
+++ b/docs/public/static/colors-preview/deepPurple-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#5e35b1"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepPurple-700-24x24.svg b/docs/public/static/colors-preview/deepPurple-700-24x24.svg
new file mode 100644
index 00000000000000..05dcae84a3f107
--- /dev/null
+++ b/docs/public/static/colors-preview/deepPurple-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#512da8"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepPurple-800-24x24.svg b/docs/public/static/colors-preview/deepPurple-800-24x24.svg
new file mode 100644
index 00000000000000..f9683567591632
--- /dev/null
+++ b/docs/public/static/colors-preview/deepPurple-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#4527a0"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepPurple-900-24x24.svg b/docs/public/static/colors-preview/deepPurple-900-24x24.svg
new file mode 100644
index 00000000000000..83ae40127d7fba
--- /dev/null
+++ b/docs/public/static/colors-preview/deepPurple-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#311b92"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepPurple-A100-24x24.svg b/docs/public/static/colors-preview/deepPurple-A100-24x24.svg
new file mode 100644
index 00000000000000..e85cf8fa60eeb7
--- /dev/null
+++ b/docs/public/static/colors-preview/deepPurple-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#b388ff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepPurple-A200-24x24.svg b/docs/public/static/colors-preview/deepPurple-A200-24x24.svg
new file mode 100644
index 00000000000000..b4233821fa336b
--- /dev/null
+++ b/docs/public/static/colors-preview/deepPurple-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#7c4dff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepPurple-A400-24x24.svg b/docs/public/static/colors-preview/deepPurple-A400-24x24.svg
new file mode 100644
index 00000000000000..ec88f92952d1fa
--- /dev/null
+++ b/docs/public/static/colors-preview/deepPurple-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#651fff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/deepPurple-A700-24x24.svg b/docs/public/static/colors-preview/deepPurple-A700-24x24.svg
new file mode 100644
index 00000000000000..29c4fb785b4e21
--- /dev/null
+++ b/docs/public/static/colors-preview/deepPurple-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#6200ea"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/green-100-24x24.svg b/docs/public/static/colors-preview/green-100-24x24.svg
new file mode 100644
index 00000000000000..ca99021ba63d4e
--- /dev/null
+++ b/docs/public/static/colors-preview/green-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#c8e6c9"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/green-200-24x24.svg b/docs/public/static/colors-preview/green-200-24x24.svg
new file mode 100644
index 00000000000000..71e70932b3d376
--- /dev/null
+++ b/docs/public/static/colors-preview/green-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#a5d6a7"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/green-300-24x24.svg b/docs/public/static/colors-preview/green-300-24x24.svg
new file mode 100644
index 00000000000000..3a24ab3a78c927
--- /dev/null
+++ b/docs/public/static/colors-preview/green-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#81c784"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/green-400-24x24.svg b/docs/public/static/colors-preview/green-400-24x24.svg
new file mode 100644
index 00000000000000..082069bbe181d9
--- /dev/null
+++ b/docs/public/static/colors-preview/green-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#66bb6a"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/green-50-24x24.svg b/docs/public/static/colors-preview/green-50-24x24.svg
new file mode 100644
index 00000000000000..dc56cab50d7b2b
--- /dev/null
+++ b/docs/public/static/colors-preview/green-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e8f5e9"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/green-500-24x24.svg b/docs/public/static/colors-preview/green-500-24x24.svg
new file mode 100644
index 00000000000000..d85c627cb7e1c6
--- /dev/null
+++ b/docs/public/static/colors-preview/green-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#4caf50"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/green-600-24x24.svg b/docs/public/static/colors-preview/green-600-24x24.svg
new file mode 100644
index 00000000000000..4558e02597ad5f
--- /dev/null
+++ b/docs/public/static/colors-preview/green-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#43a047"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/green-700-24x24.svg b/docs/public/static/colors-preview/green-700-24x24.svg
new file mode 100644
index 00000000000000..b3470ccb135ffa
--- /dev/null
+++ b/docs/public/static/colors-preview/green-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#388e3c"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/green-800-24x24.svg b/docs/public/static/colors-preview/green-800-24x24.svg
new file mode 100644
index 00000000000000..ffac58da86327a
--- /dev/null
+++ b/docs/public/static/colors-preview/green-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#2e7d32"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/green-900-24x24.svg b/docs/public/static/colors-preview/green-900-24x24.svg
new file mode 100644
index 00000000000000..cb6f6ef31c8509
--- /dev/null
+++ b/docs/public/static/colors-preview/green-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#1b5e20"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/green-A100-24x24.svg b/docs/public/static/colors-preview/green-A100-24x24.svg
new file mode 100644
index 00000000000000..2ba01b322c3f30
--- /dev/null
+++ b/docs/public/static/colors-preview/green-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#b9f6ca"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/green-A200-24x24.svg b/docs/public/static/colors-preview/green-A200-24x24.svg
new file mode 100644
index 00000000000000..16ef6c83ec07b4
--- /dev/null
+++ b/docs/public/static/colors-preview/green-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#69f0ae"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/green-A400-24x24.svg b/docs/public/static/colors-preview/green-A400-24x24.svg
new file mode 100644
index 00000000000000..0f73fb3e753171
--- /dev/null
+++ b/docs/public/static/colors-preview/green-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#00e676"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/green-A700-24x24.svg b/docs/public/static/colors-preview/green-A700-24x24.svg
new file mode 100644
index 00000000000000..3cf2fec162d252
--- /dev/null
+++ b/docs/public/static/colors-preview/green-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#00c853"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/grey-100-24x24.svg b/docs/public/static/colors-preview/grey-100-24x24.svg
new file mode 100644
index 00000000000000..6dc0e8e5b6028b
--- /dev/null
+++ b/docs/public/static/colors-preview/grey-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f5f5f5"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/grey-200-24x24.svg b/docs/public/static/colors-preview/grey-200-24x24.svg
new file mode 100644
index 00000000000000..8650e8e580b3de
--- /dev/null
+++ b/docs/public/static/colors-preview/grey-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#eeeeee"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/grey-300-24x24.svg b/docs/public/static/colors-preview/grey-300-24x24.svg
new file mode 100644
index 00000000000000..5491a311bb026b
--- /dev/null
+++ b/docs/public/static/colors-preview/grey-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e0e0e0"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/grey-400-24x24.svg b/docs/public/static/colors-preview/grey-400-24x24.svg
new file mode 100644
index 00000000000000..549cde3b118d5c
--- /dev/null
+++ b/docs/public/static/colors-preview/grey-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#bdbdbd"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/grey-50-24x24.svg b/docs/public/static/colors-preview/grey-50-24x24.svg
new file mode 100644
index 00000000000000..33b664b437d6bc
--- /dev/null
+++ b/docs/public/static/colors-preview/grey-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#fafafa"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/grey-500-24x24.svg b/docs/public/static/colors-preview/grey-500-24x24.svg
new file mode 100644
index 00000000000000..dd3a46197a6ac2
--- /dev/null
+++ b/docs/public/static/colors-preview/grey-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#9e9e9e"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/grey-600-24x24.svg b/docs/public/static/colors-preview/grey-600-24x24.svg
new file mode 100644
index 00000000000000..5ae4e5f8adf29e
--- /dev/null
+++ b/docs/public/static/colors-preview/grey-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#757575"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/grey-700-24x24.svg b/docs/public/static/colors-preview/grey-700-24x24.svg
new file mode 100644
index 00000000000000..6d1b90c39909b2
--- /dev/null
+++ b/docs/public/static/colors-preview/grey-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#616161"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/grey-800-24x24.svg b/docs/public/static/colors-preview/grey-800-24x24.svg
new file mode 100644
index 00000000000000..d3f12795a721a1
--- /dev/null
+++ b/docs/public/static/colors-preview/grey-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#424242"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/grey-900-24x24.svg b/docs/public/static/colors-preview/grey-900-24x24.svg
new file mode 100644
index 00000000000000..ca47bea35b7f27
--- /dev/null
+++ b/docs/public/static/colors-preview/grey-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#212121"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/grey-A100-24x24.svg b/docs/public/static/colors-preview/grey-A100-24x24.svg
new file mode 100644
index 00000000000000..e776c1194608a9
--- /dev/null
+++ b/docs/public/static/colors-preview/grey-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#d5d5d5"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/grey-A200-24x24.svg b/docs/public/static/colors-preview/grey-A200-24x24.svg
new file mode 100644
index 00000000000000..819016d7e06156
--- /dev/null
+++ b/docs/public/static/colors-preview/grey-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#aaaaaa"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/grey-A400-24x24.svg b/docs/public/static/colors-preview/grey-A400-24x24.svg
new file mode 100644
index 00000000000000..39014c979ccec1
--- /dev/null
+++ b/docs/public/static/colors-preview/grey-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#303030"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/grey-A700-24x24.svg b/docs/public/static/colors-preview/grey-A700-24x24.svg
new file mode 100644
index 00000000000000..6d1b90c39909b2
--- /dev/null
+++ b/docs/public/static/colors-preview/grey-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#616161"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/indigo-100-24x24.svg b/docs/public/static/colors-preview/indigo-100-24x24.svg
new file mode 100644
index 00000000000000..acfc9703f64a56
--- /dev/null
+++ b/docs/public/static/colors-preview/indigo-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#c5cae9"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/indigo-200-24x24.svg b/docs/public/static/colors-preview/indigo-200-24x24.svg
new file mode 100644
index 00000000000000..7510487d48fc6b
--- /dev/null
+++ b/docs/public/static/colors-preview/indigo-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#9fa8da"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/indigo-300-24x24.svg b/docs/public/static/colors-preview/indigo-300-24x24.svg
new file mode 100644
index 00000000000000..bc0ae6da42dabf
--- /dev/null
+++ b/docs/public/static/colors-preview/indigo-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#7986cb"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/indigo-400-24x24.svg b/docs/public/static/colors-preview/indigo-400-24x24.svg
new file mode 100644
index 00000000000000..4e4247ee18a678
--- /dev/null
+++ b/docs/public/static/colors-preview/indigo-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#5c6bc0"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/indigo-50-24x24.svg b/docs/public/static/colors-preview/indigo-50-24x24.svg
new file mode 100644
index 00000000000000..7855094c2ca020
--- /dev/null
+++ b/docs/public/static/colors-preview/indigo-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e8eaf6"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/indigo-500-24x24.svg b/docs/public/static/colors-preview/indigo-500-24x24.svg
new file mode 100644
index 00000000000000..95d66f1719ddb0
--- /dev/null
+++ b/docs/public/static/colors-preview/indigo-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#3f51b5"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/indigo-600-24x24.svg b/docs/public/static/colors-preview/indigo-600-24x24.svg
new file mode 100644
index 00000000000000..883419ed4bf61c
--- /dev/null
+++ b/docs/public/static/colors-preview/indigo-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#3949ab"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/indigo-700-24x24.svg b/docs/public/static/colors-preview/indigo-700-24x24.svg
new file mode 100644
index 00000000000000..b50fdf16869e43
--- /dev/null
+++ b/docs/public/static/colors-preview/indigo-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#303f9f"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/indigo-800-24x24.svg b/docs/public/static/colors-preview/indigo-800-24x24.svg
new file mode 100644
index 00000000000000..5ff0998e806886
--- /dev/null
+++ b/docs/public/static/colors-preview/indigo-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#283593"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/indigo-900-24x24.svg b/docs/public/static/colors-preview/indigo-900-24x24.svg
new file mode 100644
index 00000000000000..c35dd0a66a74fa
--- /dev/null
+++ b/docs/public/static/colors-preview/indigo-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#1a237e"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/indigo-A100-24x24.svg b/docs/public/static/colors-preview/indigo-A100-24x24.svg
new file mode 100644
index 00000000000000..65ddf05749a374
--- /dev/null
+++ b/docs/public/static/colors-preview/indigo-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#8c9eff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/indigo-A200-24x24.svg b/docs/public/static/colors-preview/indigo-A200-24x24.svg
new file mode 100644
index 00000000000000..a5fbcfa55adb80
--- /dev/null
+++ b/docs/public/static/colors-preview/indigo-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#536dfe"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/indigo-A400-24x24.svg b/docs/public/static/colors-preview/indigo-A400-24x24.svg
new file mode 100644
index 00000000000000..83cadd31387762
--- /dev/null
+++ b/docs/public/static/colors-preview/indigo-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#3d5afe"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/indigo-A700-24x24.svg b/docs/public/static/colors-preview/indigo-A700-24x24.svg
new file mode 100644
index 00000000000000..2cc15c57bc6e65
--- /dev/null
+++ b/docs/public/static/colors-preview/indigo-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#304ffe"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightBlue-100-24x24.svg b/docs/public/static/colors-preview/lightBlue-100-24x24.svg
new file mode 100644
index 00000000000000..260a217732af12
--- /dev/null
+++ b/docs/public/static/colors-preview/lightBlue-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#b3e5fc"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightBlue-200-24x24.svg b/docs/public/static/colors-preview/lightBlue-200-24x24.svg
new file mode 100644
index 00000000000000..037b459e0c0477
--- /dev/null
+++ b/docs/public/static/colors-preview/lightBlue-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#81d4fa"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightBlue-300-24x24.svg b/docs/public/static/colors-preview/lightBlue-300-24x24.svg
new file mode 100644
index 00000000000000..624682dfb66770
--- /dev/null
+++ b/docs/public/static/colors-preview/lightBlue-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#4fc3f7"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightBlue-400-24x24.svg b/docs/public/static/colors-preview/lightBlue-400-24x24.svg
new file mode 100644
index 00000000000000..aaa011a734d031
--- /dev/null
+++ b/docs/public/static/colors-preview/lightBlue-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#29b6f6"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightBlue-50-24x24.svg b/docs/public/static/colors-preview/lightBlue-50-24x24.svg
new file mode 100644
index 00000000000000..0259e5bca32f9b
--- /dev/null
+++ b/docs/public/static/colors-preview/lightBlue-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e1f5fe"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightBlue-500-24x24.svg b/docs/public/static/colors-preview/lightBlue-500-24x24.svg
new file mode 100644
index 00000000000000..b2046adc7b3e49
--- /dev/null
+++ b/docs/public/static/colors-preview/lightBlue-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#03a9f4"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightBlue-600-24x24.svg b/docs/public/static/colors-preview/lightBlue-600-24x24.svg
new file mode 100644
index 00000000000000..cc8360b7ea97c2
--- /dev/null
+++ b/docs/public/static/colors-preview/lightBlue-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#039be5"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightBlue-700-24x24.svg b/docs/public/static/colors-preview/lightBlue-700-24x24.svg
new file mode 100644
index 00000000000000..914a4620b20ff4
--- /dev/null
+++ b/docs/public/static/colors-preview/lightBlue-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#0288d1"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightBlue-800-24x24.svg b/docs/public/static/colors-preview/lightBlue-800-24x24.svg
new file mode 100644
index 00000000000000..20116084efc769
--- /dev/null
+++ b/docs/public/static/colors-preview/lightBlue-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#0277bd"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightBlue-900-24x24.svg b/docs/public/static/colors-preview/lightBlue-900-24x24.svg
new file mode 100644
index 00000000000000..cb0c37c6ba54ff
--- /dev/null
+++ b/docs/public/static/colors-preview/lightBlue-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#01579b"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightBlue-A100-24x24.svg b/docs/public/static/colors-preview/lightBlue-A100-24x24.svg
new file mode 100644
index 00000000000000..61859ae453e72c
--- /dev/null
+++ b/docs/public/static/colors-preview/lightBlue-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#80d8ff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightBlue-A200-24x24.svg b/docs/public/static/colors-preview/lightBlue-A200-24x24.svg
new file mode 100644
index 00000000000000..7b69af3e82ef99
--- /dev/null
+++ b/docs/public/static/colors-preview/lightBlue-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#40c4ff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightBlue-A400-24x24.svg b/docs/public/static/colors-preview/lightBlue-A400-24x24.svg
new file mode 100644
index 00000000000000..fc6c768bf335a5
--- /dev/null
+++ b/docs/public/static/colors-preview/lightBlue-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#00b0ff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightBlue-A700-24x24.svg b/docs/public/static/colors-preview/lightBlue-A700-24x24.svg
new file mode 100644
index 00000000000000..2648f964773d21
--- /dev/null
+++ b/docs/public/static/colors-preview/lightBlue-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#0091ea"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightGreen-100-24x24.svg b/docs/public/static/colors-preview/lightGreen-100-24x24.svg
new file mode 100644
index 00000000000000..62bfaa8ac69551
--- /dev/null
+++ b/docs/public/static/colors-preview/lightGreen-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#dcedc8"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightGreen-200-24x24.svg b/docs/public/static/colors-preview/lightGreen-200-24x24.svg
new file mode 100644
index 00000000000000..89c8ebff005fcd
--- /dev/null
+++ b/docs/public/static/colors-preview/lightGreen-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#c5e1a5"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightGreen-300-24x24.svg b/docs/public/static/colors-preview/lightGreen-300-24x24.svg
new file mode 100644
index 00000000000000..e74fcf653d59aa
--- /dev/null
+++ b/docs/public/static/colors-preview/lightGreen-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#aed581"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightGreen-400-24x24.svg b/docs/public/static/colors-preview/lightGreen-400-24x24.svg
new file mode 100644
index 00000000000000..9f445b2a6c70af
--- /dev/null
+++ b/docs/public/static/colors-preview/lightGreen-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#9ccc65"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightGreen-50-24x24.svg b/docs/public/static/colors-preview/lightGreen-50-24x24.svg
new file mode 100644
index 00000000000000..ebe40ad38f4c87
--- /dev/null
+++ b/docs/public/static/colors-preview/lightGreen-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f1f8e9"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightGreen-500-24x24.svg b/docs/public/static/colors-preview/lightGreen-500-24x24.svg
new file mode 100644
index 00000000000000..94194cf45ba9ee
--- /dev/null
+++ b/docs/public/static/colors-preview/lightGreen-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#8bc34a"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightGreen-600-24x24.svg b/docs/public/static/colors-preview/lightGreen-600-24x24.svg
new file mode 100644
index 00000000000000..a9f0ac6f892abc
--- /dev/null
+++ b/docs/public/static/colors-preview/lightGreen-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#7cb342"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightGreen-700-24x24.svg b/docs/public/static/colors-preview/lightGreen-700-24x24.svg
new file mode 100644
index 00000000000000..32f36a59033ca3
--- /dev/null
+++ b/docs/public/static/colors-preview/lightGreen-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#689f38"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightGreen-800-24x24.svg b/docs/public/static/colors-preview/lightGreen-800-24x24.svg
new file mode 100644
index 00000000000000..eb6d91fb2c0609
--- /dev/null
+++ b/docs/public/static/colors-preview/lightGreen-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#558b2f"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightGreen-900-24x24.svg b/docs/public/static/colors-preview/lightGreen-900-24x24.svg
new file mode 100644
index 00000000000000..181c466357778e
--- /dev/null
+++ b/docs/public/static/colors-preview/lightGreen-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#33691e"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightGreen-A100-24x24.svg b/docs/public/static/colors-preview/lightGreen-A100-24x24.svg
new file mode 100644
index 00000000000000..b3bc10efa8a50f
--- /dev/null
+++ b/docs/public/static/colors-preview/lightGreen-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ccff90"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightGreen-A200-24x24.svg b/docs/public/static/colors-preview/lightGreen-A200-24x24.svg
new file mode 100644
index 00000000000000..3aeca3edb87ae0
--- /dev/null
+++ b/docs/public/static/colors-preview/lightGreen-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#b2ff59"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightGreen-A400-24x24.svg b/docs/public/static/colors-preview/lightGreen-A400-24x24.svg
new file mode 100644
index 00000000000000..1cead151ae33a5
--- /dev/null
+++ b/docs/public/static/colors-preview/lightGreen-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#76ff03"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lightGreen-A700-24x24.svg b/docs/public/static/colors-preview/lightGreen-A700-24x24.svg
new file mode 100644
index 00000000000000..d7e079dc0985b7
--- /dev/null
+++ b/docs/public/static/colors-preview/lightGreen-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#64dd17"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lime-100-24x24.svg b/docs/public/static/colors-preview/lime-100-24x24.svg
new file mode 100644
index 00000000000000..13b99c6db87566
--- /dev/null
+++ b/docs/public/static/colors-preview/lime-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f0f4c3"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lime-200-24x24.svg b/docs/public/static/colors-preview/lime-200-24x24.svg
new file mode 100644
index 00000000000000..0200e56a8d3980
--- /dev/null
+++ b/docs/public/static/colors-preview/lime-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e6ee9c"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lime-300-24x24.svg b/docs/public/static/colors-preview/lime-300-24x24.svg
new file mode 100644
index 00000000000000..fa4e0553d8d456
--- /dev/null
+++ b/docs/public/static/colors-preview/lime-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#dce775"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lime-400-24x24.svg b/docs/public/static/colors-preview/lime-400-24x24.svg
new file mode 100644
index 00000000000000..af9883068a5f4d
--- /dev/null
+++ b/docs/public/static/colors-preview/lime-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#d4e157"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lime-50-24x24.svg b/docs/public/static/colors-preview/lime-50-24x24.svg
new file mode 100644
index 00000000000000..30d99f25f640b2
--- /dev/null
+++ b/docs/public/static/colors-preview/lime-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f9fbe7"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lime-500-24x24.svg b/docs/public/static/colors-preview/lime-500-24x24.svg
new file mode 100644
index 00000000000000..b984581af8398b
--- /dev/null
+++ b/docs/public/static/colors-preview/lime-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#cddc39"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lime-600-24x24.svg b/docs/public/static/colors-preview/lime-600-24x24.svg
new file mode 100644
index 00000000000000..3f98965329c78a
--- /dev/null
+++ b/docs/public/static/colors-preview/lime-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#c0ca33"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lime-700-24x24.svg b/docs/public/static/colors-preview/lime-700-24x24.svg
new file mode 100644
index 00000000000000..35fde5b76e55b6
--- /dev/null
+++ b/docs/public/static/colors-preview/lime-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#afb42b"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lime-800-24x24.svg b/docs/public/static/colors-preview/lime-800-24x24.svg
new file mode 100644
index 00000000000000..1565cccb322eb4
--- /dev/null
+++ b/docs/public/static/colors-preview/lime-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#9e9d24"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lime-900-24x24.svg b/docs/public/static/colors-preview/lime-900-24x24.svg
new file mode 100644
index 00000000000000..b87fe11c4ad6b3
--- /dev/null
+++ b/docs/public/static/colors-preview/lime-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#827717"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lime-A100-24x24.svg b/docs/public/static/colors-preview/lime-A100-24x24.svg
new file mode 100644
index 00000000000000..ff5f2fd765015e
--- /dev/null
+++ b/docs/public/static/colors-preview/lime-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f4ff81"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lime-A200-24x24.svg b/docs/public/static/colors-preview/lime-A200-24x24.svg
new file mode 100644
index 00000000000000..bee60ddc46211c
--- /dev/null
+++ b/docs/public/static/colors-preview/lime-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#eeff41"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lime-A400-24x24.svg b/docs/public/static/colors-preview/lime-A400-24x24.svg
new file mode 100644
index 00000000000000..d533e4b5b53280
--- /dev/null
+++ b/docs/public/static/colors-preview/lime-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#c6ff00"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/lime-A700-24x24.svg b/docs/public/static/colors-preview/lime-A700-24x24.svg
new file mode 100644
index 00000000000000..9400c4ab542478
--- /dev/null
+++ b/docs/public/static/colors-preview/lime-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#aeea00"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/orange-100-24x24.svg b/docs/public/static/colors-preview/orange-100-24x24.svg
new file mode 100644
index 00000000000000..5d19f2dad4483d
--- /dev/null
+++ b/docs/public/static/colors-preview/orange-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffe0b2"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/orange-200-24x24.svg b/docs/public/static/colors-preview/orange-200-24x24.svg
new file mode 100644
index 00000000000000..f9d4d1caed80e7
--- /dev/null
+++ b/docs/public/static/colors-preview/orange-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffcc80"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/orange-300-24x24.svg b/docs/public/static/colors-preview/orange-300-24x24.svg
new file mode 100644
index 00000000000000..35b6e7b552d513
--- /dev/null
+++ b/docs/public/static/colors-preview/orange-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffb74d"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/orange-400-24x24.svg b/docs/public/static/colors-preview/orange-400-24x24.svg
new file mode 100644
index 00000000000000..0745cf6309e774
--- /dev/null
+++ b/docs/public/static/colors-preview/orange-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffa726"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/orange-50-24x24.svg b/docs/public/static/colors-preview/orange-50-24x24.svg
new file mode 100644
index 00000000000000..63ed72090e3085
--- /dev/null
+++ b/docs/public/static/colors-preview/orange-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#fff3e0"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/orange-500-24x24.svg b/docs/public/static/colors-preview/orange-500-24x24.svg
new file mode 100644
index 00000000000000..8623de7afa5285
--- /dev/null
+++ b/docs/public/static/colors-preview/orange-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff9800"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/orange-600-24x24.svg b/docs/public/static/colors-preview/orange-600-24x24.svg
new file mode 100644
index 00000000000000..9e6d8b13027be8
--- /dev/null
+++ b/docs/public/static/colors-preview/orange-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#fb8c00"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/orange-700-24x24.svg b/docs/public/static/colors-preview/orange-700-24x24.svg
new file mode 100644
index 00000000000000..6157886c2903e7
--- /dev/null
+++ b/docs/public/static/colors-preview/orange-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f57c00"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/orange-800-24x24.svg b/docs/public/static/colors-preview/orange-800-24x24.svg
new file mode 100644
index 00000000000000..726bd43feefbbb
--- /dev/null
+++ b/docs/public/static/colors-preview/orange-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ef6c00"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/orange-900-24x24.svg b/docs/public/static/colors-preview/orange-900-24x24.svg
new file mode 100644
index 00000000000000..17129c657fbf44
--- /dev/null
+++ b/docs/public/static/colors-preview/orange-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e65100"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/orange-A100-24x24.svg b/docs/public/static/colors-preview/orange-A100-24x24.svg
new file mode 100644
index 00000000000000..af47f071fedbab
--- /dev/null
+++ b/docs/public/static/colors-preview/orange-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffd180"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/orange-A200-24x24.svg b/docs/public/static/colors-preview/orange-A200-24x24.svg
new file mode 100644
index 00000000000000..03e6118e63ff5b
--- /dev/null
+++ b/docs/public/static/colors-preview/orange-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffab40"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/orange-A400-24x24.svg b/docs/public/static/colors-preview/orange-A400-24x24.svg
new file mode 100644
index 00000000000000..cbc659a97b749d
--- /dev/null
+++ b/docs/public/static/colors-preview/orange-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff9100"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/orange-A700-24x24.svg b/docs/public/static/colors-preview/orange-A700-24x24.svg
new file mode 100644
index 00000000000000..36a647d060e840
--- /dev/null
+++ b/docs/public/static/colors-preview/orange-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff6d00"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/pink-100-24x24.svg b/docs/public/static/colors-preview/pink-100-24x24.svg
new file mode 100644
index 00000000000000..a2bf918451c15f
--- /dev/null
+++ b/docs/public/static/colors-preview/pink-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f8bbd0"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/pink-200-24x24.svg b/docs/public/static/colors-preview/pink-200-24x24.svg
new file mode 100644
index 00000000000000..f781e404ab45fe
--- /dev/null
+++ b/docs/public/static/colors-preview/pink-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f48fb1"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/pink-300-24x24.svg b/docs/public/static/colors-preview/pink-300-24x24.svg
new file mode 100644
index 00000000000000..65bebc02b28b71
--- /dev/null
+++ b/docs/public/static/colors-preview/pink-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f06292"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/pink-400-24x24.svg b/docs/public/static/colors-preview/pink-400-24x24.svg
new file mode 100644
index 00000000000000..df05f4a48a7eef
--- /dev/null
+++ b/docs/public/static/colors-preview/pink-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ec407a"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/pink-50-24x24.svg b/docs/public/static/colors-preview/pink-50-24x24.svg
new file mode 100644
index 00000000000000..209c3f8e072bc6
--- /dev/null
+++ b/docs/public/static/colors-preview/pink-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#fce4ec"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/pink-500-24x24.svg b/docs/public/static/colors-preview/pink-500-24x24.svg
new file mode 100644
index 00000000000000..7b69639af7dc47
--- /dev/null
+++ b/docs/public/static/colors-preview/pink-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e91e63"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/pink-600-24x24.svg b/docs/public/static/colors-preview/pink-600-24x24.svg
new file mode 100644
index 00000000000000..20cfcde79e5e53
--- /dev/null
+++ b/docs/public/static/colors-preview/pink-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#d81b60"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/pink-700-24x24.svg b/docs/public/static/colors-preview/pink-700-24x24.svg
new file mode 100644
index 00000000000000..84b7297231177c
--- /dev/null
+++ b/docs/public/static/colors-preview/pink-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#c2185b"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/pink-800-24x24.svg b/docs/public/static/colors-preview/pink-800-24x24.svg
new file mode 100644
index 00000000000000..22f1c88aec834d
--- /dev/null
+++ b/docs/public/static/colors-preview/pink-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ad1457"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/pink-900-24x24.svg b/docs/public/static/colors-preview/pink-900-24x24.svg
new file mode 100644
index 00000000000000..af05344fe8a92e
--- /dev/null
+++ b/docs/public/static/colors-preview/pink-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#880e4f"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/pink-A100-24x24.svg b/docs/public/static/colors-preview/pink-A100-24x24.svg
new file mode 100644
index 00000000000000..1bc495bcecf711
--- /dev/null
+++ b/docs/public/static/colors-preview/pink-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff80ab"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/pink-A200-24x24.svg b/docs/public/static/colors-preview/pink-A200-24x24.svg
new file mode 100644
index 00000000000000..fa37ec08b3c9d5
--- /dev/null
+++ b/docs/public/static/colors-preview/pink-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff4081"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/pink-A400-24x24.svg b/docs/public/static/colors-preview/pink-A400-24x24.svg
new file mode 100644
index 00000000000000..dc85c0f6cb6dd9
--- /dev/null
+++ b/docs/public/static/colors-preview/pink-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f50057"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/pink-A700-24x24.svg b/docs/public/static/colors-preview/pink-A700-24x24.svg
new file mode 100644
index 00000000000000..3329289a2a232c
--- /dev/null
+++ b/docs/public/static/colors-preview/pink-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#c51162"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/purple-100-24x24.svg b/docs/public/static/colors-preview/purple-100-24x24.svg
new file mode 100644
index 00000000000000..847cf2e02d31db
--- /dev/null
+++ b/docs/public/static/colors-preview/purple-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e1bee7"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/purple-200-24x24.svg b/docs/public/static/colors-preview/purple-200-24x24.svg
new file mode 100644
index 00000000000000..d6703f9f437d89
--- /dev/null
+++ b/docs/public/static/colors-preview/purple-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ce93d8"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/purple-300-24x24.svg b/docs/public/static/colors-preview/purple-300-24x24.svg
new file mode 100644
index 00000000000000..e5c13242685088
--- /dev/null
+++ b/docs/public/static/colors-preview/purple-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ba68c8"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/purple-400-24x24.svg b/docs/public/static/colors-preview/purple-400-24x24.svg
new file mode 100644
index 00000000000000..98050632c2be7f
--- /dev/null
+++ b/docs/public/static/colors-preview/purple-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ab47bc"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/purple-50-24x24.svg b/docs/public/static/colors-preview/purple-50-24x24.svg
new file mode 100644
index 00000000000000..c65eff0a49a8f0
--- /dev/null
+++ b/docs/public/static/colors-preview/purple-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f3e5f5"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/purple-500-24x24.svg b/docs/public/static/colors-preview/purple-500-24x24.svg
new file mode 100644
index 00000000000000..d1994beafa7407
--- /dev/null
+++ b/docs/public/static/colors-preview/purple-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#9c27b0"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/purple-600-24x24.svg b/docs/public/static/colors-preview/purple-600-24x24.svg
new file mode 100644
index 00000000000000..38e633f9d9fac0
--- /dev/null
+++ b/docs/public/static/colors-preview/purple-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#8e24aa"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/purple-700-24x24.svg b/docs/public/static/colors-preview/purple-700-24x24.svg
new file mode 100644
index 00000000000000..b443cb2a26c212
--- /dev/null
+++ b/docs/public/static/colors-preview/purple-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#7b1fa2"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/purple-800-24x24.svg b/docs/public/static/colors-preview/purple-800-24x24.svg
new file mode 100644
index 00000000000000..417c6ee3382e6d
--- /dev/null
+++ b/docs/public/static/colors-preview/purple-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#6a1b9a"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/purple-900-24x24.svg b/docs/public/static/colors-preview/purple-900-24x24.svg
new file mode 100644
index 00000000000000..8fafebd64b46b5
--- /dev/null
+++ b/docs/public/static/colors-preview/purple-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#4a148c"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/purple-A100-24x24.svg b/docs/public/static/colors-preview/purple-A100-24x24.svg
new file mode 100644
index 00000000000000..bc06b4c36819a4
--- /dev/null
+++ b/docs/public/static/colors-preview/purple-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ea80fc"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/purple-A200-24x24.svg b/docs/public/static/colors-preview/purple-A200-24x24.svg
new file mode 100644
index 00000000000000..287db568a70288
--- /dev/null
+++ b/docs/public/static/colors-preview/purple-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e040fb"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/purple-A400-24x24.svg b/docs/public/static/colors-preview/purple-A400-24x24.svg
new file mode 100644
index 00000000000000..7cf3b5b5bd9c8e
--- /dev/null
+++ b/docs/public/static/colors-preview/purple-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#d500f9"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/purple-A700-24x24.svg b/docs/public/static/colors-preview/purple-A700-24x24.svg
new file mode 100644
index 00000000000000..507e95b9866aae
--- /dev/null
+++ b/docs/public/static/colors-preview/purple-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#aa00ff"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/red-100-24x24.svg b/docs/public/static/colors-preview/red-100-24x24.svg
new file mode 100644
index 00000000000000..3a9466fa8d726d
--- /dev/null
+++ b/docs/public/static/colors-preview/red-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffcdd2"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/red-200-24x24.svg b/docs/public/static/colors-preview/red-200-24x24.svg
new file mode 100644
index 00000000000000..776d8628a79be0
--- /dev/null
+++ b/docs/public/static/colors-preview/red-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ef9a9a"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/red-300-24x24.svg b/docs/public/static/colors-preview/red-300-24x24.svg
new file mode 100644
index 00000000000000..72c60dcbcbfc3d
--- /dev/null
+++ b/docs/public/static/colors-preview/red-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e57373"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/red-400-24x24.svg b/docs/public/static/colors-preview/red-400-24x24.svg
new file mode 100644
index 00000000000000..e13b2c2448c7f0
--- /dev/null
+++ b/docs/public/static/colors-preview/red-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ef5350"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/red-50-24x24.svg b/docs/public/static/colors-preview/red-50-24x24.svg
new file mode 100644
index 00000000000000..5a323e4193e2af
--- /dev/null
+++ b/docs/public/static/colors-preview/red-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffebee"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/red-500-24x24.svg b/docs/public/static/colors-preview/red-500-24x24.svg
new file mode 100644
index 00000000000000..97f16061877168
--- /dev/null
+++ b/docs/public/static/colors-preview/red-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f44336"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/red-600-24x24.svg b/docs/public/static/colors-preview/red-600-24x24.svg
new file mode 100644
index 00000000000000..df5fd1cb6d4768
--- /dev/null
+++ b/docs/public/static/colors-preview/red-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e53935"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/red-700-24x24.svg b/docs/public/static/colors-preview/red-700-24x24.svg
new file mode 100644
index 00000000000000..2c8c9623083488
--- /dev/null
+++ b/docs/public/static/colors-preview/red-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#d32f2f"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/red-800-24x24.svg b/docs/public/static/colors-preview/red-800-24x24.svg
new file mode 100644
index 00000000000000..b905606406a62a
--- /dev/null
+++ b/docs/public/static/colors-preview/red-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#c62828"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/red-900-24x24.svg b/docs/public/static/colors-preview/red-900-24x24.svg
new file mode 100644
index 00000000000000..2650be2b993266
--- /dev/null
+++ b/docs/public/static/colors-preview/red-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#b71c1c"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/red-A100-24x24.svg b/docs/public/static/colors-preview/red-A100-24x24.svg
new file mode 100644
index 00000000000000..88c758b3677758
--- /dev/null
+++ b/docs/public/static/colors-preview/red-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff8a80"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/red-A200-24x24.svg b/docs/public/static/colors-preview/red-A200-24x24.svg
new file mode 100644
index 00000000000000..f8e9c09fe72235
--- /dev/null
+++ b/docs/public/static/colors-preview/red-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff5252"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/red-A400-24x24.svg b/docs/public/static/colors-preview/red-A400-24x24.svg
new file mode 100644
index 00000000000000..ab824b084be87d
--- /dev/null
+++ b/docs/public/static/colors-preview/red-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ff1744"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/red-A700-24x24.svg b/docs/public/static/colors-preview/red-A700-24x24.svg
new file mode 100644
index 00000000000000..184db8011716fd
--- /dev/null
+++ b/docs/public/static/colors-preview/red-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#d50000"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/teal-100-24x24.svg b/docs/public/static/colors-preview/teal-100-24x24.svg
new file mode 100644
index 00000000000000..ac6d6245fe4188
--- /dev/null
+++ b/docs/public/static/colors-preview/teal-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#b2dfdb"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/teal-200-24x24.svg b/docs/public/static/colors-preview/teal-200-24x24.svg
new file mode 100644
index 00000000000000..9339b217c99caa
--- /dev/null
+++ b/docs/public/static/colors-preview/teal-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#80cbc4"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/teal-300-24x24.svg b/docs/public/static/colors-preview/teal-300-24x24.svg
new file mode 100644
index 00000000000000..3a939009576e95
--- /dev/null
+++ b/docs/public/static/colors-preview/teal-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#4db6ac"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/teal-400-24x24.svg b/docs/public/static/colors-preview/teal-400-24x24.svg
new file mode 100644
index 00000000000000..193b623d470821
--- /dev/null
+++ b/docs/public/static/colors-preview/teal-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#26a69a"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/teal-50-24x24.svg b/docs/public/static/colors-preview/teal-50-24x24.svg
new file mode 100644
index 00000000000000..8786f960abcd34
--- /dev/null
+++ b/docs/public/static/colors-preview/teal-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#e0f2f1"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/teal-500-24x24.svg b/docs/public/static/colors-preview/teal-500-24x24.svg
new file mode 100644
index 00000000000000..31a5c51a23215b
--- /dev/null
+++ b/docs/public/static/colors-preview/teal-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#009688"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/teal-600-24x24.svg b/docs/public/static/colors-preview/teal-600-24x24.svg
new file mode 100644
index 00000000000000..b4ae3ec036931c
--- /dev/null
+++ b/docs/public/static/colors-preview/teal-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#00897b"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/teal-700-24x24.svg b/docs/public/static/colors-preview/teal-700-24x24.svg
new file mode 100644
index 00000000000000..948b6c1aed1ecb
--- /dev/null
+++ b/docs/public/static/colors-preview/teal-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#00796b"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/teal-800-24x24.svg b/docs/public/static/colors-preview/teal-800-24x24.svg
new file mode 100644
index 00000000000000..50d701e9f2b8ef
--- /dev/null
+++ b/docs/public/static/colors-preview/teal-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#00695c"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/teal-900-24x24.svg b/docs/public/static/colors-preview/teal-900-24x24.svg
new file mode 100644
index 00000000000000..747dd06209b91f
--- /dev/null
+++ b/docs/public/static/colors-preview/teal-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#004d40"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/teal-A100-24x24.svg b/docs/public/static/colors-preview/teal-A100-24x24.svg
new file mode 100644
index 00000000000000..0401a7ccd8b1f3
--- /dev/null
+++ b/docs/public/static/colors-preview/teal-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#a7ffeb"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/teal-A200-24x24.svg b/docs/public/static/colors-preview/teal-A200-24x24.svg
new file mode 100644
index 00000000000000..a66a3d5fffbcbb
--- /dev/null
+++ b/docs/public/static/colors-preview/teal-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#64ffda"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/teal-A400-24x24.svg b/docs/public/static/colors-preview/teal-A400-24x24.svg
new file mode 100644
index 00000000000000..2d000ec9caa075
--- /dev/null
+++ b/docs/public/static/colors-preview/teal-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#1de9b6"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/teal-A700-24x24.svg b/docs/public/static/colors-preview/teal-A700-24x24.svg
new file mode 100644
index 00000000000000..f73b727633a551
--- /dev/null
+++ b/docs/public/static/colors-preview/teal-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#00bfa5"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/yellow-100-24x24.svg b/docs/public/static/colors-preview/yellow-100-24x24.svg
new file mode 100644
index 00000000000000..8bde84b3535201
--- /dev/null
+++ b/docs/public/static/colors-preview/yellow-100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#fff9c4"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/yellow-200-24x24.svg b/docs/public/static/colors-preview/yellow-200-24x24.svg
new file mode 100644
index 00000000000000..88130eae400ea5
--- /dev/null
+++ b/docs/public/static/colors-preview/yellow-200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#fff59d"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/yellow-300-24x24.svg b/docs/public/static/colors-preview/yellow-300-24x24.svg
new file mode 100644
index 00000000000000..134a3ccf3b41f3
--- /dev/null
+++ b/docs/public/static/colors-preview/yellow-300-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#fff176"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/yellow-400-24x24.svg b/docs/public/static/colors-preview/yellow-400-24x24.svg
new file mode 100644
index 00000000000000..1a06f3241600b7
--- /dev/null
+++ b/docs/public/static/colors-preview/yellow-400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffee58"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/yellow-50-24x24.svg b/docs/public/static/colors-preview/yellow-50-24x24.svg
new file mode 100644
index 00000000000000..474a59dca03e09
--- /dev/null
+++ b/docs/public/static/colors-preview/yellow-50-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#fffde7"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/yellow-500-24x24.svg b/docs/public/static/colors-preview/yellow-500-24x24.svg
new file mode 100644
index 00000000000000..c5f2b9be881a3d
--- /dev/null
+++ b/docs/public/static/colors-preview/yellow-500-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffeb3b"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/yellow-600-24x24.svg b/docs/public/static/colors-preview/yellow-600-24x24.svg
new file mode 100644
index 00000000000000..dca729f657e9c6
--- /dev/null
+++ b/docs/public/static/colors-preview/yellow-600-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#fdd835"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/yellow-700-24x24.svg b/docs/public/static/colors-preview/yellow-700-24x24.svg
new file mode 100644
index 00000000000000..989840e4750d2c
--- /dev/null
+++ b/docs/public/static/colors-preview/yellow-700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#fbc02d"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/yellow-800-24x24.svg b/docs/public/static/colors-preview/yellow-800-24x24.svg
new file mode 100644
index 00000000000000..d108e5138586fb
--- /dev/null
+++ b/docs/public/static/colors-preview/yellow-800-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f9a825"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/yellow-900-24x24.svg b/docs/public/static/colors-preview/yellow-900-24x24.svg
new file mode 100644
index 00000000000000..4ec9dd30cb09b4
--- /dev/null
+++ b/docs/public/static/colors-preview/yellow-900-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#f57f17"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/yellow-A100-24x24.svg b/docs/public/static/colors-preview/yellow-A100-24x24.svg
new file mode 100644
index 00000000000000..259cda31e74b19
--- /dev/null
+++ b/docs/public/static/colors-preview/yellow-A100-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffff8d"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/yellow-A200-24x24.svg b/docs/public/static/colors-preview/yellow-A200-24x24.svg
new file mode 100644
index 00000000000000..14c201c03e3b9d
--- /dev/null
+++ b/docs/public/static/colors-preview/yellow-A200-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffff00"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/yellow-A400-24x24.svg b/docs/public/static/colors-preview/yellow-A400-24x24.svg
new file mode 100644
index 00000000000000..617d90ea10f53b
--- /dev/null
+++ b/docs/public/static/colors-preview/yellow-A400-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffea00"/>
+</svg>
\ No newline at end of file
diff --git a/docs/public/static/colors-preview/yellow-A700-24x24.svg b/docs/public/static/colors-preview/yellow-A700-24x24.svg
new file mode 100644
index 00000000000000..fae654a05d6102
--- /dev/null
+++ b/docs/public/static/colors-preview/yellow-A700-24x24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="#ffd600"/>
+</svg>
\ No newline at end of file
diff --git a/package.json b/package.json
index 114f6727b5b0be..6c29a878917a86 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "docs:api": "rimraf ./docs/pages/api && cross-env BABEL_ENV=test __NEXT_EXPORT_TRAILING_SLASH=true babel-node ./docs/scripts/buildApi.js ./packages/material-ui/src ./docs/pages/api-docs && cross-env BABEL_ENV=test __NEXT_EXPORT_TRAILING_SLASH=true babel-node ./docs/scripts/buildApi.js ./packages/material-ui-lab/src ./docs/pages/api-docs",
     "docs:build": "yarn workspace docs build",
     "docs:build-sw": "yarn workspace docs build-sw",
+    "docs:build-color-preview": "babel-node scripts/buildColorTypes",
     "docs:deploy": "yarn workspace docs deploy",
     "docs:dev": "yarn workspace docs dev",
     "docs:export": "yarn workspace docs export",
diff --git a/packages/material-ui/src/colors/amber.d.ts b/packages/material-ui/src/colors/amber.d.ts
index ac89ca5571d147..43efe582e4f9cc 100644
--- a/packages/material-ui/src/colors/amber.d.ts
+++ b/packages/material-ui/src/colors/amber.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![amber 50](https://material-ui.com/static/colors-preview/amber-50-24x24.svg) ![amber 100](https://material-ui.com/static/colors-preview/amber-100-24x24.svg) ![amber 200](https://material-ui.com/static/colors-preview/amber-200-24x24.svg) ![amber 300](https://material-ui.com/static/colors-preview/amber-300-24x24.svg) ![amber 400](https://material-ui.com/static/colors-preview/amber-400-24x24.svg) ![amber 500](https://material-ui.com/static/colors-preview/amber-500-24x24.svg) ![amber 600](https://material-ui.com/static/colors-preview/amber-600-24x24.svg) ![amber 700](https://material-ui.com/static/colors-preview/amber-700-24x24.svg) ![amber 800](https://material-ui.com/static/colors-preview/amber-800-24x24.svg) ![amber 900](https://material-ui.com/static/colors-preview/amber-900-24x24.svg) ![amber A100](https://material-ui.com/static/colors-preview/amber-A100-24x24.svg) ![amber A200](https://material-ui.com/static/colors-preview/amber-A200-24x24.svg) ![amber A400](https://material-ui.com/static/colors-preview/amber-A400-24x24.svg) ![amber A700](https://material-ui.com/static/colors-preview/amber-A700-24x24.svg)
+ */
+declare const amber: {
+  /**
+   * Preview: ![amber 50](https://material-ui.com/static/colors-preview/amber-50-24x24.svg)
+   */
+  50: '#fff8e1';
+  /**
+   * Preview: ![amber 100](https://material-ui.com/static/colors-preview/amber-100-24x24.svg)
+   */
+  100: '#ffecb3';
+  /**
+   * Preview: ![amber 200](https://material-ui.com/static/colors-preview/amber-200-24x24.svg)
+   */
+  200: '#ffe082';
+  /**
+   * Preview: ![amber 300](https://material-ui.com/static/colors-preview/amber-300-24x24.svg)
+   */
+  300: '#ffd54f';
+  /**
+   * Preview: ![amber 400](https://material-ui.com/static/colors-preview/amber-400-24x24.svg)
+   */
+  400: '#ffca28';
+  /**
+   * Preview: ![amber 500](https://material-ui.com/static/colors-preview/amber-500-24x24.svg)
+   */
+  500: '#ffc107';
+  /**
+   * Preview: ![amber 600](https://material-ui.com/static/colors-preview/amber-600-24x24.svg)
+   */
+  600: '#ffb300';
+  /**
+   * Preview: ![amber 700](https://material-ui.com/static/colors-preview/amber-700-24x24.svg)
+   */
+  700: '#ffa000';
+  /**
+   * Preview: ![amber 800](https://material-ui.com/static/colors-preview/amber-800-24x24.svg)
+   */
+  800: '#ff8f00';
+  /**
+   * Preview: ![amber 900](https://material-ui.com/static/colors-preview/amber-900-24x24.svg)
+   */
+  900: '#ff6f00';
+  /**
+   * Preview: ![amber A100](https://material-ui.com/static/colors-preview/amber-A100-24x24.svg)
+   */
+  A100: '#ffe57f';
+  /**
+   * Preview: ![amber A200](https://material-ui.com/static/colors-preview/amber-A200-24x24.svg)
+   */
+  A200: '#ffd740';
+  /**
+   * Preview: ![amber A400](https://material-ui.com/static/colors-preview/amber-A400-24x24.svg)
+   */
+  A400: '#ffc400';
+  /**
+   * Preview: ![amber A700](https://material-ui.com/static/colors-preview/amber-A700-24x24.svg)
+   */
+  A700: '#ffab00';
+};
 
-declare const color: Color;
-
-export default color;
+export default amber;
diff --git a/packages/material-ui/src/colors/blue.d.ts b/packages/material-ui/src/colors/blue.d.ts
index ac89ca5571d147..56e47b7998129f 100644
--- a/packages/material-ui/src/colors/blue.d.ts
+++ b/packages/material-ui/src/colors/blue.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![blue 50](https://material-ui.com/static/colors-preview/blue-50-24x24.svg) ![blue 100](https://material-ui.com/static/colors-preview/blue-100-24x24.svg) ![blue 200](https://material-ui.com/static/colors-preview/blue-200-24x24.svg) ![blue 300](https://material-ui.com/static/colors-preview/blue-300-24x24.svg) ![blue 400](https://material-ui.com/static/colors-preview/blue-400-24x24.svg) ![blue 500](https://material-ui.com/static/colors-preview/blue-500-24x24.svg) ![blue 600](https://material-ui.com/static/colors-preview/blue-600-24x24.svg) ![blue 700](https://material-ui.com/static/colors-preview/blue-700-24x24.svg) ![blue 800](https://material-ui.com/static/colors-preview/blue-800-24x24.svg) ![blue 900](https://material-ui.com/static/colors-preview/blue-900-24x24.svg) ![blue A100](https://material-ui.com/static/colors-preview/blue-A100-24x24.svg) ![blue A200](https://material-ui.com/static/colors-preview/blue-A200-24x24.svg) ![blue A400](https://material-ui.com/static/colors-preview/blue-A400-24x24.svg) ![blue A700](https://material-ui.com/static/colors-preview/blue-A700-24x24.svg)
+ */
+declare const blue: {
+  /**
+   * Preview: ![blue 50](https://material-ui.com/static/colors-preview/blue-50-24x24.svg)
+   */
+  50: '#e3f2fd';
+  /**
+   * Preview: ![blue 100](https://material-ui.com/static/colors-preview/blue-100-24x24.svg)
+   */
+  100: '#bbdefb';
+  /**
+   * Preview: ![blue 200](https://material-ui.com/static/colors-preview/blue-200-24x24.svg)
+   */
+  200: '#90caf9';
+  /**
+   * Preview: ![blue 300](https://material-ui.com/static/colors-preview/blue-300-24x24.svg)
+   */
+  300: '#64b5f6';
+  /**
+   * Preview: ![blue 400](https://material-ui.com/static/colors-preview/blue-400-24x24.svg)
+   */
+  400: '#42a5f5';
+  /**
+   * Preview: ![blue 500](https://material-ui.com/static/colors-preview/blue-500-24x24.svg)
+   */
+  500: '#2196f3';
+  /**
+   * Preview: ![blue 600](https://material-ui.com/static/colors-preview/blue-600-24x24.svg)
+   */
+  600: '#1e88e5';
+  /**
+   * Preview: ![blue 700](https://material-ui.com/static/colors-preview/blue-700-24x24.svg)
+   */
+  700: '#1976d2';
+  /**
+   * Preview: ![blue 800](https://material-ui.com/static/colors-preview/blue-800-24x24.svg)
+   */
+  800: '#1565c0';
+  /**
+   * Preview: ![blue 900](https://material-ui.com/static/colors-preview/blue-900-24x24.svg)
+   */
+  900: '#0d47a1';
+  /**
+   * Preview: ![blue A100](https://material-ui.com/static/colors-preview/blue-A100-24x24.svg)
+   */
+  A100: '#82b1ff';
+  /**
+   * Preview: ![blue A200](https://material-ui.com/static/colors-preview/blue-A200-24x24.svg)
+   */
+  A200: '#448aff';
+  /**
+   * Preview: ![blue A400](https://material-ui.com/static/colors-preview/blue-A400-24x24.svg)
+   */
+  A400: '#2979ff';
+  /**
+   * Preview: ![blue A700](https://material-ui.com/static/colors-preview/blue-A700-24x24.svg)
+   */
+  A700: '#2962ff';
+};
 
-declare const color: Color;
-
-export default color;
+export default blue;
diff --git a/packages/material-ui/src/colors/blueGrey.d.ts b/packages/material-ui/src/colors/blueGrey.d.ts
index ac89ca5571d147..54e65d79a7f10b 100644
--- a/packages/material-ui/src/colors/blueGrey.d.ts
+++ b/packages/material-ui/src/colors/blueGrey.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![blueGrey 50](https://material-ui.com/static/colors-preview/blueGrey-50-24x24.svg) ![blueGrey 100](https://material-ui.com/static/colors-preview/blueGrey-100-24x24.svg) ![blueGrey 200](https://material-ui.com/static/colors-preview/blueGrey-200-24x24.svg) ![blueGrey 300](https://material-ui.com/static/colors-preview/blueGrey-300-24x24.svg) ![blueGrey 400](https://material-ui.com/static/colors-preview/blueGrey-400-24x24.svg) ![blueGrey 500](https://material-ui.com/static/colors-preview/blueGrey-500-24x24.svg) ![blueGrey 600](https://material-ui.com/static/colors-preview/blueGrey-600-24x24.svg) ![blueGrey 700](https://material-ui.com/static/colors-preview/blueGrey-700-24x24.svg) ![blueGrey 800](https://material-ui.com/static/colors-preview/blueGrey-800-24x24.svg) ![blueGrey 900](https://material-ui.com/static/colors-preview/blueGrey-900-24x24.svg) ![blueGrey A100](https://material-ui.com/static/colors-preview/blueGrey-A100-24x24.svg) ![blueGrey A200](https://material-ui.com/static/colors-preview/blueGrey-A200-24x24.svg) ![blueGrey A400](https://material-ui.com/static/colors-preview/blueGrey-A400-24x24.svg) ![blueGrey A700](https://material-ui.com/static/colors-preview/blueGrey-A700-24x24.svg)
+ */
+declare const blueGrey: {
+  /**
+   * Preview: ![blueGrey 50](https://material-ui.com/static/colors-preview/blueGrey-50-24x24.svg)
+   */
+  50: '#eceff1';
+  /**
+   * Preview: ![blueGrey 100](https://material-ui.com/static/colors-preview/blueGrey-100-24x24.svg)
+   */
+  100: '#cfd8dc';
+  /**
+   * Preview: ![blueGrey 200](https://material-ui.com/static/colors-preview/blueGrey-200-24x24.svg)
+   */
+  200: '#b0bec5';
+  /**
+   * Preview: ![blueGrey 300](https://material-ui.com/static/colors-preview/blueGrey-300-24x24.svg)
+   */
+  300: '#90a4ae';
+  /**
+   * Preview: ![blueGrey 400](https://material-ui.com/static/colors-preview/blueGrey-400-24x24.svg)
+   */
+  400: '#78909c';
+  /**
+   * Preview: ![blueGrey 500](https://material-ui.com/static/colors-preview/blueGrey-500-24x24.svg)
+   */
+  500: '#607d8b';
+  /**
+   * Preview: ![blueGrey 600](https://material-ui.com/static/colors-preview/blueGrey-600-24x24.svg)
+   */
+  600: '#546e7a';
+  /**
+   * Preview: ![blueGrey 700](https://material-ui.com/static/colors-preview/blueGrey-700-24x24.svg)
+   */
+  700: '#455a64';
+  /**
+   * Preview: ![blueGrey 800](https://material-ui.com/static/colors-preview/blueGrey-800-24x24.svg)
+   */
+  800: '#37474f';
+  /**
+   * Preview: ![blueGrey 900](https://material-ui.com/static/colors-preview/blueGrey-900-24x24.svg)
+   */
+  900: '#263238';
+  /**
+   * Preview: ![blueGrey A100](https://material-ui.com/static/colors-preview/blueGrey-A100-24x24.svg)
+   */
+  A100: '#cfd8dc';
+  /**
+   * Preview: ![blueGrey A200](https://material-ui.com/static/colors-preview/blueGrey-A200-24x24.svg)
+   */
+  A200: '#b0bec5';
+  /**
+   * Preview: ![blueGrey A400](https://material-ui.com/static/colors-preview/blueGrey-A400-24x24.svg)
+   */
+  A400: '#78909c';
+  /**
+   * Preview: ![blueGrey A700](https://material-ui.com/static/colors-preview/blueGrey-A700-24x24.svg)
+   */
+  A700: '#455a64';
+};
 
-declare const color: Color;
-
-export default color;
+export default blueGrey;
diff --git a/packages/material-ui/src/colors/brown.d.ts b/packages/material-ui/src/colors/brown.d.ts
index ac89ca5571d147..f0dfeb224d6345 100644
--- a/packages/material-ui/src/colors/brown.d.ts
+++ b/packages/material-ui/src/colors/brown.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![brown 50](https://material-ui.com/static/colors-preview/brown-50-24x24.svg) ![brown 100](https://material-ui.com/static/colors-preview/brown-100-24x24.svg) ![brown 200](https://material-ui.com/static/colors-preview/brown-200-24x24.svg) ![brown 300](https://material-ui.com/static/colors-preview/brown-300-24x24.svg) ![brown 400](https://material-ui.com/static/colors-preview/brown-400-24x24.svg) ![brown 500](https://material-ui.com/static/colors-preview/brown-500-24x24.svg) ![brown 600](https://material-ui.com/static/colors-preview/brown-600-24x24.svg) ![brown 700](https://material-ui.com/static/colors-preview/brown-700-24x24.svg) ![brown 800](https://material-ui.com/static/colors-preview/brown-800-24x24.svg) ![brown 900](https://material-ui.com/static/colors-preview/brown-900-24x24.svg) ![brown A100](https://material-ui.com/static/colors-preview/brown-A100-24x24.svg) ![brown A200](https://material-ui.com/static/colors-preview/brown-A200-24x24.svg) ![brown A400](https://material-ui.com/static/colors-preview/brown-A400-24x24.svg) ![brown A700](https://material-ui.com/static/colors-preview/brown-A700-24x24.svg)
+ */
+declare const brown: {
+  /**
+   * Preview: ![brown 50](https://material-ui.com/static/colors-preview/brown-50-24x24.svg)
+   */
+  50: '#efebe9';
+  /**
+   * Preview: ![brown 100](https://material-ui.com/static/colors-preview/brown-100-24x24.svg)
+   */
+  100: '#d7ccc8';
+  /**
+   * Preview: ![brown 200](https://material-ui.com/static/colors-preview/brown-200-24x24.svg)
+   */
+  200: '#bcaaa4';
+  /**
+   * Preview: ![brown 300](https://material-ui.com/static/colors-preview/brown-300-24x24.svg)
+   */
+  300: '#a1887f';
+  /**
+   * Preview: ![brown 400](https://material-ui.com/static/colors-preview/brown-400-24x24.svg)
+   */
+  400: '#8d6e63';
+  /**
+   * Preview: ![brown 500](https://material-ui.com/static/colors-preview/brown-500-24x24.svg)
+   */
+  500: '#795548';
+  /**
+   * Preview: ![brown 600](https://material-ui.com/static/colors-preview/brown-600-24x24.svg)
+   */
+  600: '#6d4c41';
+  /**
+   * Preview: ![brown 700](https://material-ui.com/static/colors-preview/brown-700-24x24.svg)
+   */
+  700: '#5d4037';
+  /**
+   * Preview: ![brown 800](https://material-ui.com/static/colors-preview/brown-800-24x24.svg)
+   */
+  800: '#4e342e';
+  /**
+   * Preview: ![brown 900](https://material-ui.com/static/colors-preview/brown-900-24x24.svg)
+   */
+  900: '#3e2723';
+  /**
+   * Preview: ![brown A100](https://material-ui.com/static/colors-preview/brown-A100-24x24.svg)
+   */
+  A100: '#d7ccc8';
+  /**
+   * Preview: ![brown A200](https://material-ui.com/static/colors-preview/brown-A200-24x24.svg)
+   */
+  A200: '#bcaaa4';
+  /**
+   * Preview: ![brown A400](https://material-ui.com/static/colors-preview/brown-A400-24x24.svg)
+   */
+  A400: '#8d6e63';
+  /**
+   * Preview: ![brown A700](https://material-ui.com/static/colors-preview/brown-A700-24x24.svg)
+   */
+  A700: '#5d4037';
+};
 
-declare const color: Color;
-
-export default color;
+export default brown;
diff --git a/packages/material-ui/src/colors/colors.spec.tsx b/packages/material-ui/src/colors/colors.spec.tsx
new file mode 100644
index 00000000000000..6ad001152f7f65
--- /dev/null
+++ b/packages/material-ui/src/colors/colors.spec.tsx
@@ -0,0 +1,34 @@
+import { Color, colors } from '@material-ui/core';
+
+type KeysEquivalent<T, U> = keyof T extends keyof U
+  ? keyof U extends keyof T
+    ? true
+    : false
+  : false;
+
+function colorTypeMatches(variants: keyof Color) {
+  // Checking that each color has the exact shape as Color
+  // we don't use the Color type for these to provide JSDOC for each color
+  // in which we preview the color
+  const amber: KeysEquivalent<Color, typeof colors.amber> = true;
+  const blue: KeysEquivalent<Color, typeof colors.blue> = true;
+  const blueGrey: KeysEquivalent<Color, typeof colors.blueGrey> = true;
+  const brown: KeysEquivalent<Color, typeof colors.brown> = true;
+  // common does not have the `Common` type (nice pun)
+  // const common: KeysEquivalent<Color, typeof colors.common> = true;
+  const cyan: KeysEquivalent<Color, typeof colors.cyan> = true;
+  const deepOrange: KeysEquivalent<Color, typeof colors.deepOrange> = true;
+  const deepPurple: KeysEquivalent<Color, typeof colors.deepPurple> = true;
+  const green: KeysEquivalent<Color, typeof colors.green> = true;
+  const grey: KeysEquivalent<Color, typeof colors.grey> = true;
+  const indigo: KeysEquivalent<Color, typeof colors.indigo> = true;
+  const lightBlue: KeysEquivalent<Color, typeof colors.lightBlue> = true;
+  const lightGreen: KeysEquivalent<Color, typeof colors.lightGreen> = true;
+  const lime: KeysEquivalent<Color, typeof colors.lime> = true;
+  const orange: KeysEquivalent<Color, typeof colors.orange> = true;
+  const pink: KeysEquivalent<Color, typeof colors.pink> = true;
+  const purple: KeysEquivalent<Color, typeof colors.purple> = true;
+  const red: KeysEquivalent<Color, typeof colors.red> = true;
+  const teal: KeysEquivalent<Color, typeof colors.teal> = true;
+  const yellow: KeysEquivalent<Color, typeof colors.yellow> = true;
+}
diff --git a/packages/material-ui/src/colors/common.d.ts b/packages/material-ui/src/colors/common.d.ts
index 736ffcbcfdd1ae..c45cd8aa70beba 100644
--- a/packages/material-ui/src/colors/common.d.ts
+++ b/packages/material-ui/src/colors/common.d.ts
@@ -1,7 +1,16 @@
-export interface CommonColors {
-  black: string;
-  white: string;
-}
+/* tslint:disable max-line-length */
+/**
+ * ![common black](https://material-ui.com/static/colors-preview/common-black-24x24.svg) ![common white](https://material-ui.com/static/colors-preview/common-white-24x24.svg)
+ */
+declare const common: {
+  /**
+   * Preview: ![common black](https://material-ui.com/static/colors-preview/common-black-24x24.svg)
+   */
+  black: '#000';
+  /**
+   * Preview: ![common white](https://material-ui.com/static/colors-preview/common-white-24x24.svg)
+   */
+  white: '#fff';
+};
 
-declare const common: CommonColors;
 export default common;
diff --git a/packages/material-ui/src/colors/cyan.d.ts b/packages/material-ui/src/colors/cyan.d.ts
index ac89ca5571d147..446121a222ba92 100644
--- a/packages/material-ui/src/colors/cyan.d.ts
+++ b/packages/material-ui/src/colors/cyan.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![cyan 50](https://material-ui.com/static/colors-preview/cyan-50-24x24.svg) ![cyan 100](https://material-ui.com/static/colors-preview/cyan-100-24x24.svg) ![cyan 200](https://material-ui.com/static/colors-preview/cyan-200-24x24.svg) ![cyan 300](https://material-ui.com/static/colors-preview/cyan-300-24x24.svg) ![cyan 400](https://material-ui.com/static/colors-preview/cyan-400-24x24.svg) ![cyan 500](https://material-ui.com/static/colors-preview/cyan-500-24x24.svg) ![cyan 600](https://material-ui.com/static/colors-preview/cyan-600-24x24.svg) ![cyan 700](https://material-ui.com/static/colors-preview/cyan-700-24x24.svg) ![cyan 800](https://material-ui.com/static/colors-preview/cyan-800-24x24.svg) ![cyan 900](https://material-ui.com/static/colors-preview/cyan-900-24x24.svg) ![cyan A100](https://material-ui.com/static/colors-preview/cyan-A100-24x24.svg) ![cyan A200](https://material-ui.com/static/colors-preview/cyan-A200-24x24.svg) ![cyan A400](https://material-ui.com/static/colors-preview/cyan-A400-24x24.svg) ![cyan A700](https://material-ui.com/static/colors-preview/cyan-A700-24x24.svg)
+ */
+declare const cyan: {
+  /**
+   * Preview: ![cyan 50](https://material-ui.com/static/colors-preview/cyan-50-24x24.svg)
+   */
+  50: '#e0f7fa';
+  /**
+   * Preview: ![cyan 100](https://material-ui.com/static/colors-preview/cyan-100-24x24.svg)
+   */
+  100: '#b2ebf2';
+  /**
+   * Preview: ![cyan 200](https://material-ui.com/static/colors-preview/cyan-200-24x24.svg)
+   */
+  200: '#80deea';
+  /**
+   * Preview: ![cyan 300](https://material-ui.com/static/colors-preview/cyan-300-24x24.svg)
+   */
+  300: '#4dd0e1';
+  /**
+   * Preview: ![cyan 400](https://material-ui.com/static/colors-preview/cyan-400-24x24.svg)
+   */
+  400: '#26c6da';
+  /**
+   * Preview: ![cyan 500](https://material-ui.com/static/colors-preview/cyan-500-24x24.svg)
+   */
+  500: '#00bcd4';
+  /**
+   * Preview: ![cyan 600](https://material-ui.com/static/colors-preview/cyan-600-24x24.svg)
+   */
+  600: '#00acc1';
+  /**
+   * Preview: ![cyan 700](https://material-ui.com/static/colors-preview/cyan-700-24x24.svg)
+   */
+  700: '#0097a7';
+  /**
+   * Preview: ![cyan 800](https://material-ui.com/static/colors-preview/cyan-800-24x24.svg)
+   */
+  800: '#00838f';
+  /**
+   * Preview: ![cyan 900](https://material-ui.com/static/colors-preview/cyan-900-24x24.svg)
+   */
+  900: '#006064';
+  /**
+   * Preview: ![cyan A100](https://material-ui.com/static/colors-preview/cyan-A100-24x24.svg)
+   */
+  A100: '#84ffff';
+  /**
+   * Preview: ![cyan A200](https://material-ui.com/static/colors-preview/cyan-A200-24x24.svg)
+   */
+  A200: '#18ffff';
+  /**
+   * Preview: ![cyan A400](https://material-ui.com/static/colors-preview/cyan-A400-24x24.svg)
+   */
+  A400: '#00e5ff';
+  /**
+   * Preview: ![cyan A700](https://material-ui.com/static/colors-preview/cyan-A700-24x24.svg)
+   */
+  A700: '#00b8d4';
+};
 
-declare const color: Color;
-
-export default color;
+export default cyan;
diff --git a/packages/material-ui/src/colors/deepOrange.d.ts b/packages/material-ui/src/colors/deepOrange.d.ts
index ac89ca5571d147..7c4a312247f31f 100644
--- a/packages/material-ui/src/colors/deepOrange.d.ts
+++ b/packages/material-ui/src/colors/deepOrange.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![deepOrange 50](https://material-ui.com/static/colors-preview/deepOrange-50-24x24.svg) ![deepOrange 100](https://material-ui.com/static/colors-preview/deepOrange-100-24x24.svg) ![deepOrange 200](https://material-ui.com/static/colors-preview/deepOrange-200-24x24.svg) ![deepOrange 300](https://material-ui.com/static/colors-preview/deepOrange-300-24x24.svg) ![deepOrange 400](https://material-ui.com/static/colors-preview/deepOrange-400-24x24.svg) ![deepOrange 500](https://material-ui.com/static/colors-preview/deepOrange-500-24x24.svg) ![deepOrange 600](https://material-ui.com/static/colors-preview/deepOrange-600-24x24.svg) ![deepOrange 700](https://material-ui.com/static/colors-preview/deepOrange-700-24x24.svg) ![deepOrange 800](https://material-ui.com/static/colors-preview/deepOrange-800-24x24.svg) ![deepOrange 900](https://material-ui.com/static/colors-preview/deepOrange-900-24x24.svg) ![deepOrange A100](https://material-ui.com/static/colors-preview/deepOrange-A100-24x24.svg) ![deepOrange A200](https://material-ui.com/static/colors-preview/deepOrange-A200-24x24.svg) ![deepOrange A400](https://material-ui.com/static/colors-preview/deepOrange-A400-24x24.svg) ![deepOrange A700](https://material-ui.com/static/colors-preview/deepOrange-A700-24x24.svg)
+ */
+declare const deepOrange: {
+  /**
+   * Preview: ![deepOrange 50](https://material-ui.com/static/colors-preview/deepOrange-50-24x24.svg)
+   */
+  50: '#fbe9e7';
+  /**
+   * Preview: ![deepOrange 100](https://material-ui.com/static/colors-preview/deepOrange-100-24x24.svg)
+   */
+  100: '#ffccbc';
+  /**
+   * Preview: ![deepOrange 200](https://material-ui.com/static/colors-preview/deepOrange-200-24x24.svg)
+   */
+  200: '#ffab91';
+  /**
+   * Preview: ![deepOrange 300](https://material-ui.com/static/colors-preview/deepOrange-300-24x24.svg)
+   */
+  300: '#ff8a65';
+  /**
+   * Preview: ![deepOrange 400](https://material-ui.com/static/colors-preview/deepOrange-400-24x24.svg)
+   */
+  400: '#ff7043';
+  /**
+   * Preview: ![deepOrange 500](https://material-ui.com/static/colors-preview/deepOrange-500-24x24.svg)
+   */
+  500: '#ff5722';
+  /**
+   * Preview: ![deepOrange 600](https://material-ui.com/static/colors-preview/deepOrange-600-24x24.svg)
+   */
+  600: '#f4511e';
+  /**
+   * Preview: ![deepOrange 700](https://material-ui.com/static/colors-preview/deepOrange-700-24x24.svg)
+   */
+  700: '#e64a19';
+  /**
+   * Preview: ![deepOrange 800](https://material-ui.com/static/colors-preview/deepOrange-800-24x24.svg)
+   */
+  800: '#d84315';
+  /**
+   * Preview: ![deepOrange 900](https://material-ui.com/static/colors-preview/deepOrange-900-24x24.svg)
+   */
+  900: '#bf360c';
+  /**
+   * Preview: ![deepOrange A100](https://material-ui.com/static/colors-preview/deepOrange-A100-24x24.svg)
+   */
+  A100: '#ff9e80';
+  /**
+   * Preview: ![deepOrange A200](https://material-ui.com/static/colors-preview/deepOrange-A200-24x24.svg)
+   */
+  A200: '#ff6e40';
+  /**
+   * Preview: ![deepOrange A400](https://material-ui.com/static/colors-preview/deepOrange-A400-24x24.svg)
+   */
+  A400: '#ff3d00';
+  /**
+   * Preview: ![deepOrange A700](https://material-ui.com/static/colors-preview/deepOrange-A700-24x24.svg)
+   */
+  A700: '#dd2c00';
+};
 
-declare const color: Color;
-
-export default color;
+export default deepOrange;
diff --git a/packages/material-ui/src/colors/deepPurple.d.ts b/packages/material-ui/src/colors/deepPurple.d.ts
index ac89ca5571d147..2902b731bd2112 100644
--- a/packages/material-ui/src/colors/deepPurple.d.ts
+++ b/packages/material-ui/src/colors/deepPurple.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![deepPurple 50](https://material-ui.com/static/colors-preview/deepPurple-50-24x24.svg) ![deepPurple 100](https://material-ui.com/static/colors-preview/deepPurple-100-24x24.svg) ![deepPurple 200](https://material-ui.com/static/colors-preview/deepPurple-200-24x24.svg) ![deepPurple 300](https://material-ui.com/static/colors-preview/deepPurple-300-24x24.svg) ![deepPurple 400](https://material-ui.com/static/colors-preview/deepPurple-400-24x24.svg) ![deepPurple 500](https://material-ui.com/static/colors-preview/deepPurple-500-24x24.svg) ![deepPurple 600](https://material-ui.com/static/colors-preview/deepPurple-600-24x24.svg) ![deepPurple 700](https://material-ui.com/static/colors-preview/deepPurple-700-24x24.svg) ![deepPurple 800](https://material-ui.com/static/colors-preview/deepPurple-800-24x24.svg) ![deepPurple 900](https://material-ui.com/static/colors-preview/deepPurple-900-24x24.svg) ![deepPurple A100](https://material-ui.com/static/colors-preview/deepPurple-A100-24x24.svg) ![deepPurple A200](https://material-ui.com/static/colors-preview/deepPurple-A200-24x24.svg) ![deepPurple A400](https://material-ui.com/static/colors-preview/deepPurple-A400-24x24.svg) ![deepPurple A700](https://material-ui.com/static/colors-preview/deepPurple-A700-24x24.svg)
+ */
+declare const deepPurple: {
+  /**
+   * Preview: ![deepPurple 50](https://material-ui.com/static/colors-preview/deepPurple-50-24x24.svg)
+   */
+  50: '#ede7f6';
+  /**
+   * Preview: ![deepPurple 100](https://material-ui.com/static/colors-preview/deepPurple-100-24x24.svg)
+   */
+  100: '#d1c4e9';
+  /**
+   * Preview: ![deepPurple 200](https://material-ui.com/static/colors-preview/deepPurple-200-24x24.svg)
+   */
+  200: '#b39ddb';
+  /**
+   * Preview: ![deepPurple 300](https://material-ui.com/static/colors-preview/deepPurple-300-24x24.svg)
+   */
+  300: '#9575cd';
+  /**
+   * Preview: ![deepPurple 400](https://material-ui.com/static/colors-preview/deepPurple-400-24x24.svg)
+   */
+  400: '#7e57c2';
+  /**
+   * Preview: ![deepPurple 500](https://material-ui.com/static/colors-preview/deepPurple-500-24x24.svg)
+   */
+  500: '#673ab7';
+  /**
+   * Preview: ![deepPurple 600](https://material-ui.com/static/colors-preview/deepPurple-600-24x24.svg)
+   */
+  600: '#5e35b1';
+  /**
+   * Preview: ![deepPurple 700](https://material-ui.com/static/colors-preview/deepPurple-700-24x24.svg)
+   */
+  700: '#512da8';
+  /**
+   * Preview: ![deepPurple 800](https://material-ui.com/static/colors-preview/deepPurple-800-24x24.svg)
+   */
+  800: '#4527a0';
+  /**
+   * Preview: ![deepPurple 900](https://material-ui.com/static/colors-preview/deepPurple-900-24x24.svg)
+   */
+  900: '#311b92';
+  /**
+   * Preview: ![deepPurple A100](https://material-ui.com/static/colors-preview/deepPurple-A100-24x24.svg)
+   */
+  A100: '#b388ff';
+  /**
+   * Preview: ![deepPurple A200](https://material-ui.com/static/colors-preview/deepPurple-A200-24x24.svg)
+   */
+  A200: '#7c4dff';
+  /**
+   * Preview: ![deepPurple A400](https://material-ui.com/static/colors-preview/deepPurple-A400-24x24.svg)
+   */
+  A400: '#651fff';
+  /**
+   * Preview: ![deepPurple A700](https://material-ui.com/static/colors-preview/deepPurple-A700-24x24.svg)
+   */
+  A700: '#6200ea';
+};
 
-declare const color: Color;
-
-export default color;
+export default deepPurple;
diff --git a/packages/material-ui/src/colors/green.d.ts b/packages/material-ui/src/colors/green.d.ts
index ac89ca5571d147..53bb501e98d035 100644
--- a/packages/material-ui/src/colors/green.d.ts
+++ b/packages/material-ui/src/colors/green.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![green 50](https://material-ui.com/static/colors-preview/green-50-24x24.svg) ![green 100](https://material-ui.com/static/colors-preview/green-100-24x24.svg) ![green 200](https://material-ui.com/static/colors-preview/green-200-24x24.svg) ![green 300](https://material-ui.com/static/colors-preview/green-300-24x24.svg) ![green 400](https://material-ui.com/static/colors-preview/green-400-24x24.svg) ![green 500](https://material-ui.com/static/colors-preview/green-500-24x24.svg) ![green 600](https://material-ui.com/static/colors-preview/green-600-24x24.svg) ![green 700](https://material-ui.com/static/colors-preview/green-700-24x24.svg) ![green 800](https://material-ui.com/static/colors-preview/green-800-24x24.svg) ![green 900](https://material-ui.com/static/colors-preview/green-900-24x24.svg) ![green A100](https://material-ui.com/static/colors-preview/green-A100-24x24.svg) ![green A200](https://material-ui.com/static/colors-preview/green-A200-24x24.svg) ![green A400](https://material-ui.com/static/colors-preview/green-A400-24x24.svg) ![green A700](https://material-ui.com/static/colors-preview/green-A700-24x24.svg)
+ */
+declare const green: {
+  /**
+   * Preview: ![green 50](https://material-ui.com/static/colors-preview/green-50-24x24.svg)
+   */
+  50: '#e8f5e9';
+  /**
+   * Preview: ![green 100](https://material-ui.com/static/colors-preview/green-100-24x24.svg)
+   */
+  100: '#c8e6c9';
+  /**
+   * Preview: ![green 200](https://material-ui.com/static/colors-preview/green-200-24x24.svg)
+   */
+  200: '#a5d6a7';
+  /**
+   * Preview: ![green 300](https://material-ui.com/static/colors-preview/green-300-24x24.svg)
+   */
+  300: '#81c784';
+  /**
+   * Preview: ![green 400](https://material-ui.com/static/colors-preview/green-400-24x24.svg)
+   */
+  400: '#66bb6a';
+  /**
+   * Preview: ![green 500](https://material-ui.com/static/colors-preview/green-500-24x24.svg)
+   */
+  500: '#4caf50';
+  /**
+   * Preview: ![green 600](https://material-ui.com/static/colors-preview/green-600-24x24.svg)
+   */
+  600: '#43a047';
+  /**
+   * Preview: ![green 700](https://material-ui.com/static/colors-preview/green-700-24x24.svg)
+   */
+  700: '#388e3c';
+  /**
+   * Preview: ![green 800](https://material-ui.com/static/colors-preview/green-800-24x24.svg)
+   */
+  800: '#2e7d32';
+  /**
+   * Preview: ![green 900](https://material-ui.com/static/colors-preview/green-900-24x24.svg)
+   */
+  900: '#1b5e20';
+  /**
+   * Preview: ![green A100](https://material-ui.com/static/colors-preview/green-A100-24x24.svg)
+   */
+  A100: '#b9f6ca';
+  /**
+   * Preview: ![green A200](https://material-ui.com/static/colors-preview/green-A200-24x24.svg)
+   */
+  A200: '#69f0ae';
+  /**
+   * Preview: ![green A400](https://material-ui.com/static/colors-preview/green-A400-24x24.svg)
+   */
+  A400: '#00e676';
+  /**
+   * Preview: ![green A700](https://material-ui.com/static/colors-preview/green-A700-24x24.svg)
+   */
+  A700: '#00c853';
+};
 
-declare const color: Color;
-
-export default color;
+export default green;
diff --git a/packages/material-ui/src/colors/grey.d.ts b/packages/material-ui/src/colors/grey.d.ts
index ac89ca5571d147..7c8c0f2ed37839 100644
--- a/packages/material-ui/src/colors/grey.d.ts
+++ b/packages/material-ui/src/colors/grey.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![grey 50](https://material-ui.com/static/colors-preview/grey-50-24x24.svg) ![grey 100](https://material-ui.com/static/colors-preview/grey-100-24x24.svg) ![grey 200](https://material-ui.com/static/colors-preview/grey-200-24x24.svg) ![grey 300](https://material-ui.com/static/colors-preview/grey-300-24x24.svg) ![grey 400](https://material-ui.com/static/colors-preview/grey-400-24x24.svg) ![grey 500](https://material-ui.com/static/colors-preview/grey-500-24x24.svg) ![grey 600](https://material-ui.com/static/colors-preview/grey-600-24x24.svg) ![grey 700](https://material-ui.com/static/colors-preview/grey-700-24x24.svg) ![grey 800](https://material-ui.com/static/colors-preview/grey-800-24x24.svg) ![grey 900](https://material-ui.com/static/colors-preview/grey-900-24x24.svg) ![grey A100](https://material-ui.com/static/colors-preview/grey-A100-24x24.svg) ![grey A200](https://material-ui.com/static/colors-preview/grey-A200-24x24.svg) ![grey A400](https://material-ui.com/static/colors-preview/grey-A400-24x24.svg) ![grey A700](https://material-ui.com/static/colors-preview/grey-A700-24x24.svg)
+ */
+declare const grey: {
+  /**
+   * Preview: ![grey 50](https://material-ui.com/static/colors-preview/grey-50-24x24.svg)
+   */
+  50: '#fafafa';
+  /**
+   * Preview: ![grey 100](https://material-ui.com/static/colors-preview/grey-100-24x24.svg)
+   */
+  100: '#f5f5f5';
+  /**
+   * Preview: ![grey 200](https://material-ui.com/static/colors-preview/grey-200-24x24.svg)
+   */
+  200: '#eeeeee';
+  /**
+   * Preview: ![grey 300](https://material-ui.com/static/colors-preview/grey-300-24x24.svg)
+   */
+  300: '#e0e0e0';
+  /**
+   * Preview: ![grey 400](https://material-ui.com/static/colors-preview/grey-400-24x24.svg)
+   */
+  400: '#bdbdbd';
+  /**
+   * Preview: ![grey 500](https://material-ui.com/static/colors-preview/grey-500-24x24.svg)
+   */
+  500: '#9e9e9e';
+  /**
+   * Preview: ![grey 600](https://material-ui.com/static/colors-preview/grey-600-24x24.svg)
+   */
+  600: '#757575';
+  /**
+   * Preview: ![grey 700](https://material-ui.com/static/colors-preview/grey-700-24x24.svg)
+   */
+  700: '#616161';
+  /**
+   * Preview: ![grey 800](https://material-ui.com/static/colors-preview/grey-800-24x24.svg)
+   */
+  800: '#424242';
+  /**
+   * Preview: ![grey 900](https://material-ui.com/static/colors-preview/grey-900-24x24.svg)
+   */
+  900: '#212121';
+  /**
+   * Preview: ![grey A100](https://material-ui.com/static/colors-preview/grey-A100-24x24.svg)
+   */
+  A100: '#d5d5d5';
+  /**
+   * Preview: ![grey A200](https://material-ui.com/static/colors-preview/grey-A200-24x24.svg)
+   */
+  A200: '#aaaaaa';
+  /**
+   * Preview: ![grey A400](https://material-ui.com/static/colors-preview/grey-A400-24x24.svg)
+   */
+  A400: '#303030';
+  /**
+   * Preview: ![grey A700](https://material-ui.com/static/colors-preview/grey-A700-24x24.svg)
+   */
+  A700: '#616161';
+};
 
-declare const color: Color;
-
-export default color;
+export default grey;
diff --git a/packages/material-ui/src/colors/indigo.d.ts b/packages/material-ui/src/colors/indigo.d.ts
index ac89ca5571d147..190fcb6e9251de 100644
--- a/packages/material-ui/src/colors/indigo.d.ts
+++ b/packages/material-ui/src/colors/indigo.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![indigo 50](https://material-ui.com/static/colors-preview/indigo-50-24x24.svg) ![indigo 100](https://material-ui.com/static/colors-preview/indigo-100-24x24.svg) ![indigo 200](https://material-ui.com/static/colors-preview/indigo-200-24x24.svg) ![indigo 300](https://material-ui.com/static/colors-preview/indigo-300-24x24.svg) ![indigo 400](https://material-ui.com/static/colors-preview/indigo-400-24x24.svg) ![indigo 500](https://material-ui.com/static/colors-preview/indigo-500-24x24.svg) ![indigo 600](https://material-ui.com/static/colors-preview/indigo-600-24x24.svg) ![indigo 700](https://material-ui.com/static/colors-preview/indigo-700-24x24.svg) ![indigo 800](https://material-ui.com/static/colors-preview/indigo-800-24x24.svg) ![indigo 900](https://material-ui.com/static/colors-preview/indigo-900-24x24.svg) ![indigo A100](https://material-ui.com/static/colors-preview/indigo-A100-24x24.svg) ![indigo A200](https://material-ui.com/static/colors-preview/indigo-A200-24x24.svg) ![indigo A400](https://material-ui.com/static/colors-preview/indigo-A400-24x24.svg) ![indigo A700](https://material-ui.com/static/colors-preview/indigo-A700-24x24.svg)
+ */
+declare const indigo: {
+  /**
+   * Preview: ![indigo 50](https://material-ui.com/static/colors-preview/indigo-50-24x24.svg)
+   */
+  50: '#e8eaf6';
+  /**
+   * Preview: ![indigo 100](https://material-ui.com/static/colors-preview/indigo-100-24x24.svg)
+   */
+  100: '#c5cae9';
+  /**
+   * Preview: ![indigo 200](https://material-ui.com/static/colors-preview/indigo-200-24x24.svg)
+   */
+  200: '#9fa8da';
+  /**
+   * Preview: ![indigo 300](https://material-ui.com/static/colors-preview/indigo-300-24x24.svg)
+   */
+  300: '#7986cb';
+  /**
+   * Preview: ![indigo 400](https://material-ui.com/static/colors-preview/indigo-400-24x24.svg)
+   */
+  400: '#5c6bc0';
+  /**
+   * Preview: ![indigo 500](https://material-ui.com/static/colors-preview/indigo-500-24x24.svg)
+   */
+  500: '#3f51b5';
+  /**
+   * Preview: ![indigo 600](https://material-ui.com/static/colors-preview/indigo-600-24x24.svg)
+   */
+  600: '#3949ab';
+  /**
+   * Preview: ![indigo 700](https://material-ui.com/static/colors-preview/indigo-700-24x24.svg)
+   */
+  700: '#303f9f';
+  /**
+   * Preview: ![indigo 800](https://material-ui.com/static/colors-preview/indigo-800-24x24.svg)
+   */
+  800: '#283593';
+  /**
+   * Preview: ![indigo 900](https://material-ui.com/static/colors-preview/indigo-900-24x24.svg)
+   */
+  900: '#1a237e';
+  /**
+   * Preview: ![indigo A100](https://material-ui.com/static/colors-preview/indigo-A100-24x24.svg)
+   */
+  A100: '#8c9eff';
+  /**
+   * Preview: ![indigo A200](https://material-ui.com/static/colors-preview/indigo-A200-24x24.svg)
+   */
+  A200: '#536dfe';
+  /**
+   * Preview: ![indigo A400](https://material-ui.com/static/colors-preview/indigo-A400-24x24.svg)
+   */
+  A400: '#3d5afe';
+  /**
+   * Preview: ![indigo A700](https://material-ui.com/static/colors-preview/indigo-A700-24x24.svg)
+   */
+  A700: '#304ffe';
+};
 
-declare const color: Color;
-
-export default color;
+export default indigo;
diff --git a/packages/material-ui/src/colors/lightBlue.d.ts b/packages/material-ui/src/colors/lightBlue.d.ts
index ac89ca5571d147..bc1ae4489c9ced 100644
--- a/packages/material-ui/src/colors/lightBlue.d.ts
+++ b/packages/material-ui/src/colors/lightBlue.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![lightBlue 50](https://material-ui.com/static/colors-preview/lightBlue-50-24x24.svg) ![lightBlue 100](https://material-ui.com/static/colors-preview/lightBlue-100-24x24.svg) ![lightBlue 200](https://material-ui.com/static/colors-preview/lightBlue-200-24x24.svg) ![lightBlue 300](https://material-ui.com/static/colors-preview/lightBlue-300-24x24.svg) ![lightBlue 400](https://material-ui.com/static/colors-preview/lightBlue-400-24x24.svg) ![lightBlue 500](https://material-ui.com/static/colors-preview/lightBlue-500-24x24.svg) ![lightBlue 600](https://material-ui.com/static/colors-preview/lightBlue-600-24x24.svg) ![lightBlue 700](https://material-ui.com/static/colors-preview/lightBlue-700-24x24.svg) ![lightBlue 800](https://material-ui.com/static/colors-preview/lightBlue-800-24x24.svg) ![lightBlue 900](https://material-ui.com/static/colors-preview/lightBlue-900-24x24.svg) ![lightBlue A100](https://material-ui.com/static/colors-preview/lightBlue-A100-24x24.svg) ![lightBlue A200](https://material-ui.com/static/colors-preview/lightBlue-A200-24x24.svg) ![lightBlue A400](https://material-ui.com/static/colors-preview/lightBlue-A400-24x24.svg) ![lightBlue A700](https://material-ui.com/static/colors-preview/lightBlue-A700-24x24.svg)
+ */
+declare const lightBlue: {
+  /**
+   * Preview: ![lightBlue 50](https://material-ui.com/static/colors-preview/lightBlue-50-24x24.svg)
+   */
+  50: '#e1f5fe';
+  /**
+   * Preview: ![lightBlue 100](https://material-ui.com/static/colors-preview/lightBlue-100-24x24.svg)
+   */
+  100: '#b3e5fc';
+  /**
+   * Preview: ![lightBlue 200](https://material-ui.com/static/colors-preview/lightBlue-200-24x24.svg)
+   */
+  200: '#81d4fa';
+  /**
+   * Preview: ![lightBlue 300](https://material-ui.com/static/colors-preview/lightBlue-300-24x24.svg)
+   */
+  300: '#4fc3f7';
+  /**
+   * Preview: ![lightBlue 400](https://material-ui.com/static/colors-preview/lightBlue-400-24x24.svg)
+   */
+  400: '#29b6f6';
+  /**
+   * Preview: ![lightBlue 500](https://material-ui.com/static/colors-preview/lightBlue-500-24x24.svg)
+   */
+  500: '#03a9f4';
+  /**
+   * Preview: ![lightBlue 600](https://material-ui.com/static/colors-preview/lightBlue-600-24x24.svg)
+   */
+  600: '#039be5';
+  /**
+   * Preview: ![lightBlue 700](https://material-ui.com/static/colors-preview/lightBlue-700-24x24.svg)
+   */
+  700: '#0288d1';
+  /**
+   * Preview: ![lightBlue 800](https://material-ui.com/static/colors-preview/lightBlue-800-24x24.svg)
+   */
+  800: '#0277bd';
+  /**
+   * Preview: ![lightBlue 900](https://material-ui.com/static/colors-preview/lightBlue-900-24x24.svg)
+   */
+  900: '#01579b';
+  /**
+   * Preview: ![lightBlue A100](https://material-ui.com/static/colors-preview/lightBlue-A100-24x24.svg)
+   */
+  A100: '#80d8ff';
+  /**
+   * Preview: ![lightBlue A200](https://material-ui.com/static/colors-preview/lightBlue-A200-24x24.svg)
+   */
+  A200: '#40c4ff';
+  /**
+   * Preview: ![lightBlue A400](https://material-ui.com/static/colors-preview/lightBlue-A400-24x24.svg)
+   */
+  A400: '#00b0ff';
+  /**
+   * Preview: ![lightBlue A700](https://material-ui.com/static/colors-preview/lightBlue-A700-24x24.svg)
+   */
+  A700: '#0091ea';
+};
 
-declare const color: Color;
-
-export default color;
+export default lightBlue;
diff --git a/packages/material-ui/src/colors/lightGreen.d.ts b/packages/material-ui/src/colors/lightGreen.d.ts
index ac89ca5571d147..86b73764371f54 100644
--- a/packages/material-ui/src/colors/lightGreen.d.ts
+++ b/packages/material-ui/src/colors/lightGreen.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![lightGreen 50](https://material-ui.com/static/colors-preview/lightGreen-50-24x24.svg) ![lightGreen 100](https://material-ui.com/static/colors-preview/lightGreen-100-24x24.svg) ![lightGreen 200](https://material-ui.com/static/colors-preview/lightGreen-200-24x24.svg) ![lightGreen 300](https://material-ui.com/static/colors-preview/lightGreen-300-24x24.svg) ![lightGreen 400](https://material-ui.com/static/colors-preview/lightGreen-400-24x24.svg) ![lightGreen 500](https://material-ui.com/static/colors-preview/lightGreen-500-24x24.svg) ![lightGreen 600](https://material-ui.com/static/colors-preview/lightGreen-600-24x24.svg) ![lightGreen 700](https://material-ui.com/static/colors-preview/lightGreen-700-24x24.svg) ![lightGreen 800](https://material-ui.com/static/colors-preview/lightGreen-800-24x24.svg) ![lightGreen 900](https://material-ui.com/static/colors-preview/lightGreen-900-24x24.svg) ![lightGreen A100](https://material-ui.com/static/colors-preview/lightGreen-A100-24x24.svg) ![lightGreen A200](https://material-ui.com/static/colors-preview/lightGreen-A200-24x24.svg) ![lightGreen A400](https://material-ui.com/static/colors-preview/lightGreen-A400-24x24.svg) ![lightGreen A700](https://material-ui.com/static/colors-preview/lightGreen-A700-24x24.svg)
+ */
+declare const lightGreen: {
+  /**
+   * Preview: ![lightGreen 50](https://material-ui.com/static/colors-preview/lightGreen-50-24x24.svg)
+   */
+  50: '#f1f8e9';
+  /**
+   * Preview: ![lightGreen 100](https://material-ui.com/static/colors-preview/lightGreen-100-24x24.svg)
+   */
+  100: '#dcedc8';
+  /**
+   * Preview: ![lightGreen 200](https://material-ui.com/static/colors-preview/lightGreen-200-24x24.svg)
+   */
+  200: '#c5e1a5';
+  /**
+   * Preview: ![lightGreen 300](https://material-ui.com/static/colors-preview/lightGreen-300-24x24.svg)
+   */
+  300: '#aed581';
+  /**
+   * Preview: ![lightGreen 400](https://material-ui.com/static/colors-preview/lightGreen-400-24x24.svg)
+   */
+  400: '#9ccc65';
+  /**
+   * Preview: ![lightGreen 500](https://material-ui.com/static/colors-preview/lightGreen-500-24x24.svg)
+   */
+  500: '#8bc34a';
+  /**
+   * Preview: ![lightGreen 600](https://material-ui.com/static/colors-preview/lightGreen-600-24x24.svg)
+   */
+  600: '#7cb342';
+  /**
+   * Preview: ![lightGreen 700](https://material-ui.com/static/colors-preview/lightGreen-700-24x24.svg)
+   */
+  700: '#689f38';
+  /**
+   * Preview: ![lightGreen 800](https://material-ui.com/static/colors-preview/lightGreen-800-24x24.svg)
+   */
+  800: '#558b2f';
+  /**
+   * Preview: ![lightGreen 900](https://material-ui.com/static/colors-preview/lightGreen-900-24x24.svg)
+   */
+  900: '#33691e';
+  /**
+   * Preview: ![lightGreen A100](https://material-ui.com/static/colors-preview/lightGreen-A100-24x24.svg)
+   */
+  A100: '#ccff90';
+  /**
+   * Preview: ![lightGreen A200](https://material-ui.com/static/colors-preview/lightGreen-A200-24x24.svg)
+   */
+  A200: '#b2ff59';
+  /**
+   * Preview: ![lightGreen A400](https://material-ui.com/static/colors-preview/lightGreen-A400-24x24.svg)
+   */
+  A400: '#76ff03';
+  /**
+   * Preview: ![lightGreen A700](https://material-ui.com/static/colors-preview/lightGreen-A700-24x24.svg)
+   */
+  A700: '#64dd17';
+};
 
-declare const color: Color;
-
-export default color;
+export default lightGreen;
diff --git a/packages/material-ui/src/colors/lime.d.ts b/packages/material-ui/src/colors/lime.d.ts
index ac89ca5571d147..b13881db736c4e 100644
--- a/packages/material-ui/src/colors/lime.d.ts
+++ b/packages/material-ui/src/colors/lime.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![lime 50](https://material-ui.com/static/colors-preview/lime-50-24x24.svg) ![lime 100](https://material-ui.com/static/colors-preview/lime-100-24x24.svg) ![lime 200](https://material-ui.com/static/colors-preview/lime-200-24x24.svg) ![lime 300](https://material-ui.com/static/colors-preview/lime-300-24x24.svg) ![lime 400](https://material-ui.com/static/colors-preview/lime-400-24x24.svg) ![lime 500](https://material-ui.com/static/colors-preview/lime-500-24x24.svg) ![lime 600](https://material-ui.com/static/colors-preview/lime-600-24x24.svg) ![lime 700](https://material-ui.com/static/colors-preview/lime-700-24x24.svg) ![lime 800](https://material-ui.com/static/colors-preview/lime-800-24x24.svg) ![lime 900](https://material-ui.com/static/colors-preview/lime-900-24x24.svg) ![lime A100](https://material-ui.com/static/colors-preview/lime-A100-24x24.svg) ![lime A200](https://material-ui.com/static/colors-preview/lime-A200-24x24.svg) ![lime A400](https://material-ui.com/static/colors-preview/lime-A400-24x24.svg) ![lime A700](https://material-ui.com/static/colors-preview/lime-A700-24x24.svg)
+ */
+declare const lime: {
+  /**
+   * Preview: ![lime 50](https://material-ui.com/static/colors-preview/lime-50-24x24.svg)
+   */
+  50: '#f9fbe7';
+  /**
+   * Preview: ![lime 100](https://material-ui.com/static/colors-preview/lime-100-24x24.svg)
+   */
+  100: '#f0f4c3';
+  /**
+   * Preview: ![lime 200](https://material-ui.com/static/colors-preview/lime-200-24x24.svg)
+   */
+  200: '#e6ee9c';
+  /**
+   * Preview: ![lime 300](https://material-ui.com/static/colors-preview/lime-300-24x24.svg)
+   */
+  300: '#dce775';
+  /**
+   * Preview: ![lime 400](https://material-ui.com/static/colors-preview/lime-400-24x24.svg)
+   */
+  400: '#d4e157';
+  /**
+   * Preview: ![lime 500](https://material-ui.com/static/colors-preview/lime-500-24x24.svg)
+   */
+  500: '#cddc39';
+  /**
+   * Preview: ![lime 600](https://material-ui.com/static/colors-preview/lime-600-24x24.svg)
+   */
+  600: '#c0ca33';
+  /**
+   * Preview: ![lime 700](https://material-ui.com/static/colors-preview/lime-700-24x24.svg)
+   */
+  700: '#afb42b';
+  /**
+   * Preview: ![lime 800](https://material-ui.com/static/colors-preview/lime-800-24x24.svg)
+   */
+  800: '#9e9d24';
+  /**
+   * Preview: ![lime 900](https://material-ui.com/static/colors-preview/lime-900-24x24.svg)
+   */
+  900: '#827717';
+  /**
+   * Preview: ![lime A100](https://material-ui.com/static/colors-preview/lime-A100-24x24.svg)
+   */
+  A100: '#f4ff81';
+  /**
+   * Preview: ![lime A200](https://material-ui.com/static/colors-preview/lime-A200-24x24.svg)
+   */
+  A200: '#eeff41';
+  /**
+   * Preview: ![lime A400](https://material-ui.com/static/colors-preview/lime-A400-24x24.svg)
+   */
+  A400: '#c6ff00';
+  /**
+   * Preview: ![lime A700](https://material-ui.com/static/colors-preview/lime-A700-24x24.svg)
+   */
+  A700: '#aeea00';
+};
 
-declare const color: Color;
-
-export default color;
+export default lime;
diff --git a/packages/material-ui/src/colors/orange.d.ts b/packages/material-ui/src/colors/orange.d.ts
index ac89ca5571d147..52f34aa9f57f4b 100644
--- a/packages/material-ui/src/colors/orange.d.ts
+++ b/packages/material-ui/src/colors/orange.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![orange 50](https://material-ui.com/static/colors-preview/orange-50-24x24.svg) ![orange 100](https://material-ui.com/static/colors-preview/orange-100-24x24.svg) ![orange 200](https://material-ui.com/static/colors-preview/orange-200-24x24.svg) ![orange 300](https://material-ui.com/static/colors-preview/orange-300-24x24.svg) ![orange 400](https://material-ui.com/static/colors-preview/orange-400-24x24.svg) ![orange 500](https://material-ui.com/static/colors-preview/orange-500-24x24.svg) ![orange 600](https://material-ui.com/static/colors-preview/orange-600-24x24.svg) ![orange 700](https://material-ui.com/static/colors-preview/orange-700-24x24.svg) ![orange 800](https://material-ui.com/static/colors-preview/orange-800-24x24.svg) ![orange 900](https://material-ui.com/static/colors-preview/orange-900-24x24.svg) ![orange A100](https://material-ui.com/static/colors-preview/orange-A100-24x24.svg) ![orange A200](https://material-ui.com/static/colors-preview/orange-A200-24x24.svg) ![orange A400](https://material-ui.com/static/colors-preview/orange-A400-24x24.svg) ![orange A700](https://material-ui.com/static/colors-preview/orange-A700-24x24.svg)
+ */
+declare const orange: {
+  /**
+   * Preview: ![orange 50](https://material-ui.com/static/colors-preview/orange-50-24x24.svg)
+   */
+  50: '#fff3e0';
+  /**
+   * Preview: ![orange 100](https://material-ui.com/static/colors-preview/orange-100-24x24.svg)
+   */
+  100: '#ffe0b2';
+  /**
+   * Preview: ![orange 200](https://material-ui.com/static/colors-preview/orange-200-24x24.svg)
+   */
+  200: '#ffcc80';
+  /**
+   * Preview: ![orange 300](https://material-ui.com/static/colors-preview/orange-300-24x24.svg)
+   */
+  300: '#ffb74d';
+  /**
+   * Preview: ![orange 400](https://material-ui.com/static/colors-preview/orange-400-24x24.svg)
+   */
+  400: '#ffa726';
+  /**
+   * Preview: ![orange 500](https://material-ui.com/static/colors-preview/orange-500-24x24.svg)
+   */
+  500: '#ff9800';
+  /**
+   * Preview: ![orange 600](https://material-ui.com/static/colors-preview/orange-600-24x24.svg)
+   */
+  600: '#fb8c00';
+  /**
+   * Preview: ![orange 700](https://material-ui.com/static/colors-preview/orange-700-24x24.svg)
+   */
+  700: '#f57c00';
+  /**
+   * Preview: ![orange 800](https://material-ui.com/static/colors-preview/orange-800-24x24.svg)
+   */
+  800: '#ef6c00';
+  /**
+   * Preview: ![orange 900](https://material-ui.com/static/colors-preview/orange-900-24x24.svg)
+   */
+  900: '#e65100';
+  /**
+   * Preview: ![orange A100](https://material-ui.com/static/colors-preview/orange-A100-24x24.svg)
+   */
+  A100: '#ffd180';
+  /**
+   * Preview: ![orange A200](https://material-ui.com/static/colors-preview/orange-A200-24x24.svg)
+   */
+  A200: '#ffab40';
+  /**
+   * Preview: ![orange A400](https://material-ui.com/static/colors-preview/orange-A400-24x24.svg)
+   */
+  A400: '#ff9100';
+  /**
+   * Preview: ![orange A700](https://material-ui.com/static/colors-preview/orange-A700-24x24.svg)
+   */
+  A700: '#ff6d00';
+};
 
-declare const color: Color;
-
-export default color;
+export default orange;
diff --git a/packages/material-ui/src/colors/pink.d.ts b/packages/material-ui/src/colors/pink.d.ts
index ac89ca5571d147..74a1b2a6bba235 100644
--- a/packages/material-ui/src/colors/pink.d.ts
+++ b/packages/material-ui/src/colors/pink.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![pink 50](https://material-ui.com/static/colors-preview/pink-50-24x24.svg) ![pink 100](https://material-ui.com/static/colors-preview/pink-100-24x24.svg) ![pink 200](https://material-ui.com/static/colors-preview/pink-200-24x24.svg) ![pink 300](https://material-ui.com/static/colors-preview/pink-300-24x24.svg) ![pink 400](https://material-ui.com/static/colors-preview/pink-400-24x24.svg) ![pink 500](https://material-ui.com/static/colors-preview/pink-500-24x24.svg) ![pink 600](https://material-ui.com/static/colors-preview/pink-600-24x24.svg) ![pink 700](https://material-ui.com/static/colors-preview/pink-700-24x24.svg) ![pink 800](https://material-ui.com/static/colors-preview/pink-800-24x24.svg) ![pink 900](https://material-ui.com/static/colors-preview/pink-900-24x24.svg) ![pink A100](https://material-ui.com/static/colors-preview/pink-A100-24x24.svg) ![pink A200](https://material-ui.com/static/colors-preview/pink-A200-24x24.svg) ![pink A400](https://material-ui.com/static/colors-preview/pink-A400-24x24.svg) ![pink A700](https://material-ui.com/static/colors-preview/pink-A700-24x24.svg)
+ */
+declare const pink: {
+  /**
+   * Preview: ![pink 50](https://material-ui.com/static/colors-preview/pink-50-24x24.svg)
+   */
+  50: '#fce4ec';
+  /**
+   * Preview: ![pink 100](https://material-ui.com/static/colors-preview/pink-100-24x24.svg)
+   */
+  100: '#f8bbd0';
+  /**
+   * Preview: ![pink 200](https://material-ui.com/static/colors-preview/pink-200-24x24.svg)
+   */
+  200: '#f48fb1';
+  /**
+   * Preview: ![pink 300](https://material-ui.com/static/colors-preview/pink-300-24x24.svg)
+   */
+  300: '#f06292';
+  /**
+   * Preview: ![pink 400](https://material-ui.com/static/colors-preview/pink-400-24x24.svg)
+   */
+  400: '#ec407a';
+  /**
+   * Preview: ![pink 500](https://material-ui.com/static/colors-preview/pink-500-24x24.svg)
+   */
+  500: '#e91e63';
+  /**
+   * Preview: ![pink 600](https://material-ui.com/static/colors-preview/pink-600-24x24.svg)
+   */
+  600: '#d81b60';
+  /**
+   * Preview: ![pink 700](https://material-ui.com/static/colors-preview/pink-700-24x24.svg)
+   */
+  700: '#c2185b';
+  /**
+   * Preview: ![pink 800](https://material-ui.com/static/colors-preview/pink-800-24x24.svg)
+   */
+  800: '#ad1457';
+  /**
+   * Preview: ![pink 900](https://material-ui.com/static/colors-preview/pink-900-24x24.svg)
+   */
+  900: '#880e4f';
+  /**
+   * Preview: ![pink A100](https://material-ui.com/static/colors-preview/pink-A100-24x24.svg)
+   */
+  A100: '#ff80ab';
+  /**
+   * Preview: ![pink A200](https://material-ui.com/static/colors-preview/pink-A200-24x24.svg)
+   */
+  A200: '#ff4081';
+  /**
+   * Preview: ![pink A400](https://material-ui.com/static/colors-preview/pink-A400-24x24.svg)
+   */
+  A400: '#f50057';
+  /**
+   * Preview: ![pink A700](https://material-ui.com/static/colors-preview/pink-A700-24x24.svg)
+   */
+  A700: '#c51162';
+};
 
-declare const color: Color;
-
-export default color;
+export default pink;
diff --git a/packages/material-ui/src/colors/purple.d.ts b/packages/material-ui/src/colors/purple.d.ts
index ac89ca5571d147..017fdd71caeb90 100644
--- a/packages/material-ui/src/colors/purple.d.ts
+++ b/packages/material-ui/src/colors/purple.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![purple 50](https://material-ui.com/static/colors-preview/purple-50-24x24.svg) ![purple 100](https://material-ui.com/static/colors-preview/purple-100-24x24.svg) ![purple 200](https://material-ui.com/static/colors-preview/purple-200-24x24.svg) ![purple 300](https://material-ui.com/static/colors-preview/purple-300-24x24.svg) ![purple 400](https://material-ui.com/static/colors-preview/purple-400-24x24.svg) ![purple 500](https://material-ui.com/static/colors-preview/purple-500-24x24.svg) ![purple 600](https://material-ui.com/static/colors-preview/purple-600-24x24.svg) ![purple 700](https://material-ui.com/static/colors-preview/purple-700-24x24.svg) ![purple 800](https://material-ui.com/static/colors-preview/purple-800-24x24.svg) ![purple 900](https://material-ui.com/static/colors-preview/purple-900-24x24.svg) ![purple A100](https://material-ui.com/static/colors-preview/purple-A100-24x24.svg) ![purple A200](https://material-ui.com/static/colors-preview/purple-A200-24x24.svg) ![purple A400](https://material-ui.com/static/colors-preview/purple-A400-24x24.svg) ![purple A700](https://material-ui.com/static/colors-preview/purple-A700-24x24.svg)
+ */
+declare const purple: {
+  /**
+   * Preview: ![purple 50](https://material-ui.com/static/colors-preview/purple-50-24x24.svg)
+   */
+  50: '#f3e5f5';
+  /**
+   * Preview: ![purple 100](https://material-ui.com/static/colors-preview/purple-100-24x24.svg)
+   */
+  100: '#e1bee7';
+  /**
+   * Preview: ![purple 200](https://material-ui.com/static/colors-preview/purple-200-24x24.svg)
+   */
+  200: '#ce93d8';
+  /**
+   * Preview: ![purple 300](https://material-ui.com/static/colors-preview/purple-300-24x24.svg)
+   */
+  300: '#ba68c8';
+  /**
+   * Preview: ![purple 400](https://material-ui.com/static/colors-preview/purple-400-24x24.svg)
+   */
+  400: '#ab47bc';
+  /**
+   * Preview: ![purple 500](https://material-ui.com/static/colors-preview/purple-500-24x24.svg)
+   */
+  500: '#9c27b0';
+  /**
+   * Preview: ![purple 600](https://material-ui.com/static/colors-preview/purple-600-24x24.svg)
+   */
+  600: '#8e24aa';
+  /**
+   * Preview: ![purple 700](https://material-ui.com/static/colors-preview/purple-700-24x24.svg)
+   */
+  700: '#7b1fa2';
+  /**
+   * Preview: ![purple 800](https://material-ui.com/static/colors-preview/purple-800-24x24.svg)
+   */
+  800: '#6a1b9a';
+  /**
+   * Preview: ![purple 900](https://material-ui.com/static/colors-preview/purple-900-24x24.svg)
+   */
+  900: '#4a148c';
+  /**
+   * Preview: ![purple A100](https://material-ui.com/static/colors-preview/purple-A100-24x24.svg)
+   */
+  A100: '#ea80fc';
+  /**
+   * Preview: ![purple A200](https://material-ui.com/static/colors-preview/purple-A200-24x24.svg)
+   */
+  A200: '#e040fb';
+  /**
+   * Preview: ![purple A400](https://material-ui.com/static/colors-preview/purple-A400-24x24.svg)
+   */
+  A400: '#d500f9';
+  /**
+   * Preview: ![purple A700](https://material-ui.com/static/colors-preview/purple-A700-24x24.svg)
+   */
+  A700: '#aa00ff';
+};
 
-declare const color: Color;
-
-export default color;
+export default purple;
diff --git a/packages/material-ui/src/colors/red.d.ts b/packages/material-ui/src/colors/red.d.ts
index ac89ca5571d147..ead3eca7082fbb 100644
--- a/packages/material-ui/src/colors/red.d.ts
+++ b/packages/material-ui/src/colors/red.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![red 50](https://material-ui.com/static/colors-preview/red-50-24x24.svg) ![red 100](https://material-ui.com/static/colors-preview/red-100-24x24.svg) ![red 200](https://material-ui.com/static/colors-preview/red-200-24x24.svg) ![red 300](https://material-ui.com/static/colors-preview/red-300-24x24.svg) ![red 400](https://material-ui.com/static/colors-preview/red-400-24x24.svg) ![red 500](https://material-ui.com/static/colors-preview/red-500-24x24.svg) ![red 600](https://material-ui.com/static/colors-preview/red-600-24x24.svg) ![red 700](https://material-ui.com/static/colors-preview/red-700-24x24.svg) ![red 800](https://material-ui.com/static/colors-preview/red-800-24x24.svg) ![red 900](https://material-ui.com/static/colors-preview/red-900-24x24.svg) ![red A100](https://material-ui.com/static/colors-preview/red-A100-24x24.svg) ![red A200](https://material-ui.com/static/colors-preview/red-A200-24x24.svg) ![red A400](https://material-ui.com/static/colors-preview/red-A400-24x24.svg) ![red A700](https://material-ui.com/static/colors-preview/red-A700-24x24.svg)
+ */
+declare const red: {
+  /**
+   * Preview: ![red 50](https://material-ui.com/static/colors-preview/red-50-24x24.svg)
+   */
+  50: '#ffebee';
+  /**
+   * Preview: ![red 100](https://material-ui.com/static/colors-preview/red-100-24x24.svg)
+   */
+  100: '#ffcdd2';
+  /**
+   * Preview: ![red 200](https://material-ui.com/static/colors-preview/red-200-24x24.svg)
+   */
+  200: '#ef9a9a';
+  /**
+   * Preview: ![red 300](https://material-ui.com/static/colors-preview/red-300-24x24.svg)
+   */
+  300: '#e57373';
+  /**
+   * Preview: ![red 400](https://material-ui.com/static/colors-preview/red-400-24x24.svg)
+   */
+  400: '#ef5350';
+  /**
+   * Preview: ![red 500](https://material-ui.com/static/colors-preview/red-500-24x24.svg)
+   */
+  500: '#f44336';
+  /**
+   * Preview: ![red 600](https://material-ui.com/static/colors-preview/red-600-24x24.svg)
+   */
+  600: '#e53935';
+  /**
+   * Preview: ![red 700](https://material-ui.com/static/colors-preview/red-700-24x24.svg)
+   */
+  700: '#d32f2f';
+  /**
+   * Preview: ![red 800](https://material-ui.com/static/colors-preview/red-800-24x24.svg)
+   */
+  800: '#c62828';
+  /**
+   * Preview: ![red 900](https://material-ui.com/static/colors-preview/red-900-24x24.svg)
+   */
+  900: '#b71c1c';
+  /**
+   * Preview: ![red A100](https://material-ui.com/static/colors-preview/red-A100-24x24.svg)
+   */
+  A100: '#ff8a80';
+  /**
+   * Preview: ![red A200](https://material-ui.com/static/colors-preview/red-A200-24x24.svg)
+   */
+  A200: '#ff5252';
+  /**
+   * Preview: ![red A400](https://material-ui.com/static/colors-preview/red-A400-24x24.svg)
+   */
+  A400: '#ff1744';
+  /**
+   * Preview: ![red A700](https://material-ui.com/static/colors-preview/red-A700-24x24.svg)
+   */
+  A700: '#d50000';
+};
 
-declare const color: Color;
-
-export default color;
+export default red;
diff --git a/packages/material-ui/src/colors/teal.d.ts b/packages/material-ui/src/colors/teal.d.ts
index ac89ca5571d147..101cc8f49aed47 100644
--- a/packages/material-ui/src/colors/teal.d.ts
+++ b/packages/material-ui/src/colors/teal.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![teal 50](https://material-ui.com/static/colors-preview/teal-50-24x24.svg) ![teal 100](https://material-ui.com/static/colors-preview/teal-100-24x24.svg) ![teal 200](https://material-ui.com/static/colors-preview/teal-200-24x24.svg) ![teal 300](https://material-ui.com/static/colors-preview/teal-300-24x24.svg) ![teal 400](https://material-ui.com/static/colors-preview/teal-400-24x24.svg) ![teal 500](https://material-ui.com/static/colors-preview/teal-500-24x24.svg) ![teal 600](https://material-ui.com/static/colors-preview/teal-600-24x24.svg) ![teal 700](https://material-ui.com/static/colors-preview/teal-700-24x24.svg) ![teal 800](https://material-ui.com/static/colors-preview/teal-800-24x24.svg) ![teal 900](https://material-ui.com/static/colors-preview/teal-900-24x24.svg) ![teal A100](https://material-ui.com/static/colors-preview/teal-A100-24x24.svg) ![teal A200](https://material-ui.com/static/colors-preview/teal-A200-24x24.svg) ![teal A400](https://material-ui.com/static/colors-preview/teal-A400-24x24.svg) ![teal A700](https://material-ui.com/static/colors-preview/teal-A700-24x24.svg)
+ */
+declare const teal: {
+  /**
+   * Preview: ![teal 50](https://material-ui.com/static/colors-preview/teal-50-24x24.svg)
+   */
+  50: '#e0f2f1';
+  /**
+   * Preview: ![teal 100](https://material-ui.com/static/colors-preview/teal-100-24x24.svg)
+   */
+  100: '#b2dfdb';
+  /**
+   * Preview: ![teal 200](https://material-ui.com/static/colors-preview/teal-200-24x24.svg)
+   */
+  200: '#80cbc4';
+  /**
+   * Preview: ![teal 300](https://material-ui.com/static/colors-preview/teal-300-24x24.svg)
+   */
+  300: '#4db6ac';
+  /**
+   * Preview: ![teal 400](https://material-ui.com/static/colors-preview/teal-400-24x24.svg)
+   */
+  400: '#26a69a';
+  /**
+   * Preview: ![teal 500](https://material-ui.com/static/colors-preview/teal-500-24x24.svg)
+   */
+  500: '#009688';
+  /**
+   * Preview: ![teal 600](https://material-ui.com/static/colors-preview/teal-600-24x24.svg)
+   */
+  600: '#00897b';
+  /**
+   * Preview: ![teal 700](https://material-ui.com/static/colors-preview/teal-700-24x24.svg)
+   */
+  700: '#00796b';
+  /**
+   * Preview: ![teal 800](https://material-ui.com/static/colors-preview/teal-800-24x24.svg)
+   */
+  800: '#00695c';
+  /**
+   * Preview: ![teal 900](https://material-ui.com/static/colors-preview/teal-900-24x24.svg)
+   */
+  900: '#004d40';
+  /**
+   * Preview: ![teal A100](https://material-ui.com/static/colors-preview/teal-A100-24x24.svg)
+   */
+  A100: '#a7ffeb';
+  /**
+   * Preview: ![teal A200](https://material-ui.com/static/colors-preview/teal-A200-24x24.svg)
+   */
+  A200: '#64ffda';
+  /**
+   * Preview: ![teal A400](https://material-ui.com/static/colors-preview/teal-A400-24x24.svg)
+   */
+  A400: '#1de9b6';
+  /**
+   * Preview: ![teal A700](https://material-ui.com/static/colors-preview/teal-A700-24x24.svg)
+   */
+  A700: '#00bfa5';
+};
 
-declare const color: Color;
-
-export default color;
+export default teal;
diff --git a/packages/material-ui/src/colors/yellow.d.ts b/packages/material-ui/src/colors/yellow.d.ts
index ac89ca5571d147..18c833c3205037 100644
--- a/packages/material-ui/src/colors/yellow.d.ts
+++ b/packages/material-ui/src/colors/yellow.d.ts
@@ -1,5 +1,64 @@
-import { Color } from '..';
+/* tslint:disable max-line-length */
+/**
+ * ![yellow 50](https://material-ui.com/static/colors-preview/yellow-50-24x24.svg) ![yellow 100](https://material-ui.com/static/colors-preview/yellow-100-24x24.svg) ![yellow 200](https://material-ui.com/static/colors-preview/yellow-200-24x24.svg) ![yellow 300](https://material-ui.com/static/colors-preview/yellow-300-24x24.svg) ![yellow 400](https://material-ui.com/static/colors-preview/yellow-400-24x24.svg) ![yellow 500](https://material-ui.com/static/colors-preview/yellow-500-24x24.svg) ![yellow 600](https://material-ui.com/static/colors-preview/yellow-600-24x24.svg) ![yellow 700](https://material-ui.com/static/colors-preview/yellow-700-24x24.svg) ![yellow 800](https://material-ui.com/static/colors-preview/yellow-800-24x24.svg) ![yellow 900](https://material-ui.com/static/colors-preview/yellow-900-24x24.svg) ![yellow A100](https://material-ui.com/static/colors-preview/yellow-A100-24x24.svg) ![yellow A200](https://material-ui.com/static/colors-preview/yellow-A200-24x24.svg) ![yellow A400](https://material-ui.com/static/colors-preview/yellow-A400-24x24.svg) ![yellow A700](https://material-ui.com/static/colors-preview/yellow-A700-24x24.svg)
+ */
+declare const yellow: {
+  /**
+   * Preview: ![yellow 50](https://material-ui.com/static/colors-preview/yellow-50-24x24.svg)
+   */
+  50: '#fffde7';
+  /**
+   * Preview: ![yellow 100](https://material-ui.com/static/colors-preview/yellow-100-24x24.svg)
+   */
+  100: '#fff9c4';
+  /**
+   * Preview: ![yellow 200](https://material-ui.com/static/colors-preview/yellow-200-24x24.svg)
+   */
+  200: '#fff59d';
+  /**
+   * Preview: ![yellow 300](https://material-ui.com/static/colors-preview/yellow-300-24x24.svg)
+   */
+  300: '#fff176';
+  /**
+   * Preview: ![yellow 400](https://material-ui.com/static/colors-preview/yellow-400-24x24.svg)
+   */
+  400: '#ffee58';
+  /**
+   * Preview: ![yellow 500](https://material-ui.com/static/colors-preview/yellow-500-24x24.svg)
+   */
+  500: '#ffeb3b';
+  /**
+   * Preview: ![yellow 600](https://material-ui.com/static/colors-preview/yellow-600-24x24.svg)
+   */
+  600: '#fdd835';
+  /**
+   * Preview: ![yellow 700](https://material-ui.com/static/colors-preview/yellow-700-24x24.svg)
+   */
+  700: '#fbc02d';
+  /**
+   * Preview: ![yellow 800](https://material-ui.com/static/colors-preview/yellow-800-24x24.svg)
+   */
+  800: '#f9a825';
+  /**
+   * Preview: ![yellow 900](https://material-ui.com/static/colors-preview/yellow-900-24x24.svg)
+   */
+  900: '#f57f17';
+  /**
+   * Preview: ![yellow A100](https://material-ui.com/static/colors-preview/yellow-A100-24x24.svg)
+   */
+  A100: '#ffff8d';
+  /**
+   * Preview: ![yellow A200](https://material-ui.com/static/colors-preview/yellow-A200-24x24.svg)
+   */
+  A200: '#ffff00';
+  /**
+   * Preview: ![yellow A400](https://material-ui.com/static/colors-preview/yellow-A400-24x24.svg)
+   */
+  A400: '#ffea00';
+  /**
+   * Preview: ![yellow A700](https://material-ui.com/static/colors-preview/yellow-A700-24x24.svg)
+   */
+  A700: '#ffd600';
+};
 
-declare const color: Color;
-
-export default color;
+export default yellow;
diff --git a/packages/material-ui/src/styles/createPalette.d.ts b/packages/material-ui/src/styles/createPalette.d.ts
index 762a52fa061214..01876d291e8e4c 100644
--- a/packages/material-ui/src/styles/createPalette.d.ts
+++ b/packages/material-ui/src/styles/createPalette.d.ts
@@ -1,5 +1,8 @@
 import { Color, PaletteType } from '..';
-import { CommonColors } from '../colors/common';
+import common from '../colors/common';
+
+export {};
+type CommonColors = Record<keyof typeof common, string>;
 
 export type ColorPartial = Partial<Color>;
 
diff --git a/scripts/buildColorTypes.js b/scripts/buildColorTypes.js
new file mode 100644
index 00000000000000..374ce0d22d3179
--- /dev/null
+++ b/scripts/buildColorTypes.js
@@ -0,0 +1,80 @@
+import * as colors from '@material-ui/core/colors';
+import * as fse from 'fs-extra';
+import * as path from 'path';
+
+// use netlify deploy preview if you want to test changes
+const HOST = 'https://material-ui.com/';
+
+function getColorHref(name, variant) {
+  return `static/colors-preview/${name}-${variant}-24x24.svg`;
+}
+
+function buildColorType(name, variants) {
+  const typesFilename = path.resolve(__dirname, `../packages/material-ui/src/colors/${name}.d.ts`);
+
+  const typescript = `/* tslint:disable max-line-length */
+/**
+ * ${Object.entries(variants)
+   .map(entry => {
+     const [variant] = entry;
+
+     return `![${name} ${variant}](${HOST}${getColorHref(name, variant)})`;
+   })
+   .join(' ')}
+ */
+declare const ${name}: {
+${Object.entries(variants)
+  .map(entry => {
+    const [variant, color] = entry;
+
+    return `  /**
+   * Preview: ![${name} ${variant}](${HOST}${getColorHref(name, variant)})
+   */
+  ${variant}: '${color}';`;
+  })
+  .join('\n')}
+};
+
+export default ${name};
+`;
+
+  return fse.writeFile(typesFilename, typescript, { encoding: 'utf8' });
+}
+
+function buildColorPreviews(name, variants) {
+  const nextPublicPath = path.resolve(__dirname, '../docs/public/');
+
+  return Promise.all(
+    Object.entries(variants).map(async variantEntry => {
+      const [variant, color] = variantEntry;
+
+      const svg = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+<rect width="100%" height="100%" fill="${color}"/>
+</svg>`;
+      const filename = path.resolve(nextPublicPath, getColorHref(name, variant));
+      await fse.writeFile(filename, svg, { encoding: 'utf8' });
+    }),
+  );
+}
+
+/**
+ * The goal is to have a preview of the actual color and the color string in IntelliSense
+ * We create for each color an svg that is filled with that color and reference
+ * that svg in the corresponding JSDOC.
+ * Since we use https://material-ui.com as a reference changes are only visible
+ * after release
+ */
+async function main() {
+  await Promise.all(
+    Object.entries(colors).map(async entry => {
+      const [name, variants] = entry;
+
+      await Promise.all([buildColorPreviews(name, variants), buildColorType(name, variants)]);
+    }),
+  );
+}
+
+main().catch(error => {
+  console.error(error);
+  process.exit(error.code || 1);
+});