diff --git a/public/demo/menu/menu.json b/public/demo/menu/menu.json
index b9a51b877..0444c4fc1 100644
--- a/public/demo/menu/menu.json
+++ b/public/demo/menu/menu.json
@@ -67,13 +67,18 @@
                     "to": "/theming"
                 },
                 {
-                    "name": "Theme Design",
+                    "name": "Theme Designer",
                     "href": "https://www.primefaces.org/designer/primevue"
                 },
                 {
                     "name": "Visual Editor",
                     "href": "https://www.primefaces.org/designer-vue"
                 },
+                {
+                    "name": "Colors",
+                    "to": "/colors",
+                    "badge": "New"
+                },
                 {
                     "name": "SASS API",
                     "href": "https://www.primefaces.org/designer/api/primevue/3.0.0"
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index d56f8519e..9984b66fd 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#64B5F6;
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #000000;
+  --surface-50: #030303;
+  --surface-100: #060606;
+  --surface-200: #0c0c0c;
+  --surface-300: #121212;
+  --surface-400: #181818;
+  --surface-500: #1e1e1e;
+  --surface-600: #4b4b4b;
+  --surface-700: #787878;
+  --surface-800: #a5a5a5;
+  --surface-900: #d2d2d2;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 1px #93cbf9;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.5rem;
 }
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 08e44aa36..cb183f7a3 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#81C784;
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #000000;
+  --surface-50: #030303;
+  --surface-100: #060606;
+  --surface-200: #0c0c0c;
+  --surface-300: #121212;
+  --surface-400: #181818;
+  --surface-500: #1e1e1e;
+  --surface-600: #4b4b4b;
+  --surface-700: #787878;
+  --surface-800: #a5a5a5;
+  --surface-900: #d2d2d2;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 1px #a7d8a9;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.5rem;
 }
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 4535796e5..f34da3b49 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#FFD54F;
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #000000;
+  --surface-50: #030303;
+  --surface-100: #060606;
+  --surface-200: #0c0c0c;
+  --surface-300: #121212;
+  --surface-400: #181818;
+  --surface-500: #1e1e1e;
+  --surface-600: #4b4b4b;
+  --surface-700: #787878;
+  --surface-800: #a5a5a5;
+  --surface-900: #d2d2d2;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 1px #ffe284;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.5rem;
 }
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 99dac42c4..3dd103d9b 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#BA68C8;
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #000000;
+  --surface-50: #030303;
+  --surface-100: #060606;
+  --surface-200: #0c0c0c;
+  --surface-300: #121212;
+  --surface-400: #181818;
+  --surface-500: #1e1e1e;
+  --surface-600: #4b4b4b;
+  --surface-700: #787878;
+  --surface-800: #a5a5a5;
+  --surface-900: #d2d2d2;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 1px #cf95d9;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.5rem;
 }
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 15589fc3b..58658a7b3 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#8dd0ff;
   --primary-color-text:#151515;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #000000;
+  --surface-50: #212529;
+  --surface-100: #343a40;
+  --surface-200: #495057;
+  --surface-300: #6c757d;
+  --surface-400: #adb5bd;
+  --surface-500: #ced4da;
+  --surface-600: #dee2e6;
+  --surface-700: #e9ecef;
+  --surface-800: #f8f9fa;
+  --surface-900: #f9fafb;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 1px #e3f3fe;
 }
 
+:root {
+  --blue-50:#f3f8ff;
+  --blue-100:#c5dcff;
+  --blue-200:#97c1fe;
+  --blue-300:#69a5fe;
+  --blue-400:#3b8afd;
+  --blue-500:#0d6efd;
+  --blue-600:#0b5ed7;
+  --blue-700:#094db1;
+  --blue-800:#073d8b;
+  --blue-900:#052c65;
+  --green-50:#f4f9f6;
+  --green-100:#c8e2d6;
+  --green-200:#9ccbb5;
+  --green-300:#70b595;
+  --green-400:#459e74;
+  --green-500:#198754;
+  --green-600:#157347;
+  --green-700:#125f3b;
+  --green-800:#0e4a2e;
+  --green-900:#0a3622;
+  --yellow-50:#fffcf3;
+  --yellow-100:#fff0c3;
+  --yellow-200:#ffe494;
+  --yellow-300:#ffd965;
+  --yellow-400:#ffcd36;
+  --yellow-500:#ffc107;
+  --yellow-600:#d9a406;
+  --yellow-700:#b38705;
+  --yellow-800:#8c6a04;
+  --yellow-900:#664d03;
+  --cyan-50:#f3fcfe;
+  --cyan-100:#c5f2fb;
+  --cyan-200:#97e8f9;
+  --cyan-300:#69def6;
+  --cyan-400:#3bd4f3;
+  --cyan-500:#0dcaf0;
+  --cyan-600:#0baccc;
+  --cyan-700:#098da8;
+  --cyan-800:#076f84;
+  --cyan-900:#055160;
+  --pink-50:#fdf5f9;
+  --pink-100:#f5cee1;
+  --pink-200:#eda7ca;
+  --pink-300:#e681b3;
+  --pink-400:#de5a9b;
+  --pink-500:#d63384;
+  --pink-600:#b62b70;
+  --pink-700:#96245c;
+  --pink-800:#761c49;
+  --pink-900:#561435;
+  --indigo-50:#f7f3fe;
+  --indigo-100:#dac6fc;
+  --indigo-200:#bd98f9;
+  --indigo-300:#a06bf7;
+  --indigo-400:#833df4;
+  --indigo-500:#6610f2;
+  --indigo-600:#570ece;
+  --indigo-700:#470ba9;
+  --indigo-800:#380985;
+  --indigo-900:#290661;
+  --teal-50:#f4fcfa;
+  --teal-100:#c9f2e6;
+  --teal-200:#9fe8d2;
+  --teal-300:#75debf;
+  --teal-400:#4ad3ab;
+  --teal-500:#20c997;
+  --teal-600:#1bab80;
+  --teal-700:#168d6a;
+  --teal-800:#126f53;
+  --teal-900:#0d503c;
+  --orange-50:#fff9f3;
+  --orange-100:#ffe0c7;
+  --orange-200:#fec89a;
+  --orange-300:#feaf6d;
+  --orange-400:#fd9741;
+  --orange-500:#fd7e14;
+  --orange-600:#d76b11;
+  --orange-700:#b1580e;
+  --orange-800:#8b450b;
+  --orange-900:#653208;
+  --bluegray-50:#f8f9fb;
+  --bluegray-100:#e0e4ea;
+  --bluegray-200:#c7ced9;
+  --bluegray-300:#aeb9c8;
+  --bluegray-400:#95a3b8;
+  --bluegray-500:#7c8ea7;
+  --bluegray-600:#69798e;
+  --bluegray-700:#576375;
+  --bluegray-800:#444e5c;
+  --bluegray-900:#323943;
+  --purple-50:#f8f6fc;
+  --purple-100:#dcd2f0;
+  --purple-200:#c1aee4;
+  --purple-300:#a68ad9;
+  --purple-400:#8a66cd;
+  --purple-500:#6f42c1;
+  --purple-600:#5e38a4;
+  --purple-700:#4e2e87;
+  --purple-800:#3d246a;
+  --purple-900:#2c1a4d;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.75rem;
 }
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 2d36b52cb..4d096edb4 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#c298d8;
   --primary-color-text:#151515;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #000000;
+  --surface-50: #212529;
+  --surface-100: #343a40;
+  --surface-200: #495057;
+  --surface-300: #6c757d;
+  --surface-400: #adb5bd;
+  --surface-500: #ced4da;
+  --surface-600: #dee2e6;
+  --surface-700: #e9ecef;
+  --surface-800: #f8f9fa;
+  --surface-900: #f9fafb;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 1px #f0e6f5;
 }
 
+:root {
+  --blue-50:#f3f8ff;
+  --blue-100:#c5dcff;
+  --blue-200:#97c1fe;
+  --blue-300:#69a5fe;
+  --blue-400:#3b8afd;
+  --blue-500:#0d6efd;
+  --blue-600:#0b5ed7;
+  --blue-700:#094db1;
+  --blue-800:#073d8b;
+  --blue-900:#052c65;
+  --green-50:#f4f9f6;
+  --green-100:#c8e2d6;
+  --green-200:#9ccbb5;
+  --green-300:#70b595;
+  --green-400:#459e74;
+  --green-500:#198754;
+  --green-600:#157347;
+  --green-700:#125f3b;
+  --green-800:#0e4a2e;
+  --green-900:#0a3622;
+  --yellow-50:#fffcf3;
+  --yellow-100:#fff0c3;
+  --yellow-200:#ffe494;
+  --yellow-300:#ffd965;
+  --yellow-400:#ffcd36;
+  --yellow-500:#ffc107;
+  --yellow-600:#d9a406;
+  --yellow-700:#b38705;
+  --yellow-800:#8c6a04;
+  --yellow-900:#664d03;
+  --cyan-50:#f3fcfe;
+  --cyan-100:#c5f2fb;
+  --cyan-200:#97e8f9;
+  --cyan-300:#69def6;
+  --cyan-400:#3bd4f3;
+  --cyan-500:#0dcaf0;
+  --cyan-600:#0baccc;
+  --cyan-700:#098da8;
+  --cyan-800:#076f84;
+  --cyan-900:#055160;
+  --pink-50:#fdf5f9;
+  --pink-100:#f5cee1;
+  --pink-200:#eda7ca;
+  --pink-300:#e681b3;
+  --pink-400:#de5a9b;
+  --pink-500:#d63384;
+  --pink-600:#b62b70;
+  --pink-700:#96245c;
+  --pink-800:#761c49;
+  --pink-900:#561435;
+  --indigo-50:#f7f3fe;
+  --indigo-100:#dac6fc;
+  --indigo-200:#bd98f9;
+  --indigo-300:#a06bf7;
+  --indigo-400:#833df4;
+  --indigo-500:#6610f2;
+  --indigo-600:#570ece;
+  --indigo-700:#470ba9;
+  --indigo-800:#380985;
+  --indigo-900:#290661;
+  --teal-50:#f4fcfa;
+  --teal-100:#c9f2e6;
+  --teal-200:#9fe8d2;
+  --teal-300:#75debf;
+  --teal-400:#4ad3ab;
+  --teal-500:#20c997;
+  --teal-600:#1bab80;
+  --teal-700:#168d6a;
+  --teal-800:#126f53;
+  --teal-900:#0d503c;
+  --orange-50:#fff9f3;
+  --orange-100:#ffe0c7;
+  --orange-200:#fec89a;
+  --orange-300:#feaf6d;
+  --orange-400:#fd9741;
+  --orange-500:#fd7e14;
+  --orange-600:#d76b11;
+  --orange-700:#b1580e;
+  --orange-800:#8b450b;
+  --orange-900:#653208;
+  --bluegray-50:#f8f9fb;
+  --bluegray-100:#e0e4ea;
+  --bluegray-200:#c7ced9;
+  --bluegray-300:#aeb9c8;
+  --bluegray-400:#95a3b8;
+  --bluegray-500:#7c8ea7;
+  --bluegray-600:#69798e;
+  --bluegray-700:#576375;
+  --bluegray-800:#444e5c;
+  --bluegray-900:#323943;
+  --purple-50:#f8f6fc;
+  --purple-100:#dcd2f0;
+  --purple-200:#c1aee4;
+  --purple-300:#a68ad9;
+  --purple-400:#8a66cd;
+  --purple-500:#6f42c1;
+  --purple-600:#5e38a4;
+  --purple-700:#4e2e87;
+  --purple-800:#3d246a;
+  --purple-900:#2c1a4d;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.75rem;
 }
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 3cbc7543a..4548819c0 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#007bff;
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f8f9fa;
+  --surface-200: #e9ecef;
+  --surface-300: #dee2e6;
+  --surface-400: #ced4da;
+  --surface-500: #adb5bd;
+  --surface-600: #6c757d;
+  --surface-700: #495057;
+  --surface-800: #343a40;
+  --surface-900: #212529;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
 }
 
+:root {
+  --blue-50:#f3f8ff;
+  --blue-100:#c5dcff;
+  --blue-200:#97c1fe;
+  --blue-300:#69a5fe;
+  --blue-400:#3b8afd;
+  --blue-500:#0d6efd;
+  --blue-600:#0b5ed7;
+  --blue-700:#094db1;
+  --blue-800:#073d8b;
+  --blue-900:#052c65;
+  --green-50:#f4f9f6;
+  --green-100:#c8e2d6;
+  --green-200:#9ccbb5;
+  --green-300:#70b595;
+  --green-400:#459e74;
+  --green-500:#198754;
+  --green-600:#157347;
+  --green-700:#125f3b;
+  --green-800:#0e4a2e;
+  --green-900:#0a3622;
+  --yellow-50:#fffcf3;
+  --yellow-100:#fff0c3;
+  --yellow-200:#ffe494;
+  --yellow-300:#ffd965;
+  --yellow-400:#ffcd36;
+  --yellow-500:#ffc107;
+  --yellow-600:#d9a406;
+  --yellow-700:#b38705;
+  --yellow-800:#8c6a04;
+  --yellow-900:#664d03;
+  --cyan-50:#f3fcfe;
+  --cyan-100:#c5f2fb;
+  --cyan-200:#97e8f9;
+  --cyan-300:#69def6;
+  --cyan-400:#3bd4f3;
+  --cyan-500:#0dcaf0;
+  --cyan-600:#0baccc;
+  --cyan-700:#098da8;
+  --cyan-800:#076f84;
+  --cyan-900:#055160;
+  --pink-50:#fdf5f9;
+  --pink-100:#f5cee1;
+  --pink-200:#eda7ca;
+  --pink-300:#e681b3;
+  --pink-400:#de5a9b;
+  --pink-500:#d63384;
+  --pink-600:#b62b70;
+  --pink-700:#96245c;
+  --pink-800:#761c49;
+  --pink-900:#561435;
+  --indigo-50:#f7f3fe;
+  --indigo-100:#dac6fc;
+  --indigo-200:#bd98f9;
+  --indigo-300:#a06bf7;
+  --indigo-400:#833df4;
+  --indigo-500:#6610f2;
+  --indigo-600:#570ece;
+  --indigo-700:#470ba9;
+  --indigo-800:#380985;
+  --indigo-900:#290661;
+  --teal-50:#f4fcfa;
+  --teal-100:#c9f2e6;
+  --teal-200:#9fe8d2;
+  --teal-300:#75debf;
+  --teal-400:#4ad3ab;
+  --teal-500:#20c997;
+  --teal-600:#1bab80;
+  --teal-700:#168d6a;
+  --teal-800:#126f53;
+  --teal-900:#0d503c;
+  --orange-50:#fff9f3;
+  --orange-100:#ffe0c7;
+  --orange-200:#fec89a;
+  --orange-300:#feaf6d;
+  --orange-400:#fd9741;
+  --orange-500:#fd7e14;
+  --orange-600:#d76b11;
+  --orange-700:#b1580e;
+  --orange-800:#8b450b;
+  --orange-900:#653208;
+  --bluegray-50:#f8f9fb;
+  --bluegray-100:#e0e4ea;
+  --bluegray-200:#c7ced9;
+  --bluegray-300:#aeb9c8;
+  --bluegray-400:#95a3b8;
+  --bluegray-500:#7c8ea7;
+  --bluegray-600:#69798e;
+  --bluegray-700:#576375;
+  --bluegray-800:#444e5c;
+  --bluegray-900:#323943;
+  --purple-50:#f8f6fc;
+  --purple-100:#dcd2f0;
+  --purple-200:#c1aee4;
+  --purple-300:#a68ad9;
+  --purple-400:#8a66cd;
+  --purple-500:#6f42c1;
+  --purple-600:#5e38a4;
+  --purple-700:#4e2e87;
+  --purple-800:#3d246a;
+  --purple-900:#2c1a4d;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.75rem;
 }
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 547aff09e..f2240d373 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#883cae;
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f8f9fa;
+  --surface-200: #e9ecef;
+  --surface-300: #dee2e6;
+  --surface-400: #ced4da;
+  --surface-500: #adb5bd;
+  --surface-600: #6c757d;
+  --surface-700: #495057;
+  --surface-800: #343a40;
+  --surface-900: #212529;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 
+:root {
+  --blue-50:#f3f8ff;
+  --blue-100:#c5dcff;
+  --blue-200:#97c1fe;
+  --blue-300:#69a5fe;
+  --blue-400:#3b8afd;
+  --blue-500:#0d6efd;
+  --blue-600:#0b5ed7;
+  --blue-700:#094db1;
+  --blue-800:#073d8b;
+  --blue-900:#052c65;
+  --green-50:#f4f9f6;
+  --green-100:#c8e2d6;
+  --green-200:#9ccbb5;
+  --green-300:#70b595;
+  --green-400:#459e74;
+  --green-500:#198754;
+  --green-600:#157347;
+  --green-700:#125f3b;
+  --green-800:#0e4a2e;
+  --green-900:#0a3622;
+  --yellow-50:#fffcf3;
+  --yellow-100:#fff0c3;
+  --yellow-200:#ffe494;
+  --yellow-300:#ffd965;
+  --yellow-400:#ffcd36;
+  --yellow-500:#ffc107;
+  --yellow-600:#d9a406;
+  --yellow-700:#b38705;
+  --yellow-800:#8c6a04;
+  --yellow-900:#664d03;
+  --cyan-50:#f3fcfe;
+  --cyan-100:#c5f2fb;
+  --cyan-200:#97e8f9;
+  --cyan-300:#69def6;
+  --cyan-400:#3bd4f3;
+  --cyan-500:#0dcaf0;
+  --cyan-600:#0baccc;
+  --cyan-700:#098da8;
+  --cyan-800:#076f84;
+  --cyan-900:#055160;
+  --pink-50:#fdf5f9;
+  --pink-100:#f5cee1;
+  --pink-200:#eda7ca;
+  --pink-300:#e681b3;
+  --pink-400:#de5a9b;
+  --pink-500:#d63384;
+  --pink-600:#b62b70;
+  --pink-700:#96245c;
+  --pink-800:#761c49;
+  --pink-900:#561435;
+  --indigo-50:#f7f3fe;
+  --indigo-100:#dac6fc;
+  --indigo-200:#bd98f9;
+  --indigo-300:#a06bf7;
+  --indigo-400:#833df4;
+  --indigo-500:#6610f2;
+  --indigo-600:#570ece;
+  --indigo-700:#470ba9;
+  --indigo-800:#380985;
+  --indigo-900:#290661;
+  --teal-50:#f4fcfa;
+  --teal-100:#c9f2e6;
+  --teal-200:#9fe8d2;
+  --teal-300:#75debf;
+  --teal-400:#4ad3ab;
+  --teal-500:#20c997;
+  --teal-600:#1bab80;
+  --teal-700:#168d6a;
+  --teal-800:#126f53;
+  --teal-900:#0d503c;
+  --orange-50:#fff9f3;
+  --orange-100:#ffe0c7;
+  --orange-200:#fec89a;
+  --orange-300:#feaf6d;
+  --orange-400:#fd9741;
+  --orange-500:#fd7e14;
+  --orange-600:#d76b11;
+  --orange-700:#b1580e;
+  --orange-800:#8b450b;
+  --orange-900:#653208;
+  --bluegray-50:#f8f9fb;
+  --bluegray-100:#e0e4ea;
+  --bluegray-200:#c7ced9;
+  --bluegray-300:#aeb9c8;
+  --bluegray-400:#95a3b8;
+  --bluegray-500:#7c8ea7;
+  --bluegray-600:#69798e;
+  --bluegray-700:#576375;
+  --bluegray-800:#444e5c;
+  --bluegray-900:#323943;
+  --purple-50:#f8f6fc;
+  --purple-100:#dcd2f0;
+  --purple-200:#c1aee4;
+  --purple-300:#a68ad9;
+  --purple-400:#8a66cd;
+  --purple-500:#6f42c1;
+  --purple-600:#5e38a4;
+  --purple-700:#4e2e87;
+  --purple-800:#3d246a;
+  --purple-900:#2c1a4d;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.75rem;
 }
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 823ceae71..78cce18c3 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#0078d4;
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #ffffff;
+  --surface-50: #f3f2f1;
+  --surface-100: #e1dfdd;
+  --surface-200: #bebbb8;
+  --surface-300: #a19f9d;
+  --surface-400: #797775;
+  --surface-500: #484644;
+  --surface-600: #323130;
+  --surface-700: #252423;
+  --surface-800: #1b1a19;
+  --surface-900: #11100f;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: inset 0 0 0 1px #605e5c;
 }
 
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf3;
+  --green-100:#d9eac4;
+  --green-200:#bbda96;
+  --green-300:#9cca67;
+  --green-400:#7eb939;
+  --green-500:#60a90a;
+  --green-600:#529009;
+  --green-700:#437607;
+  --green-800:#355d06;
+  --green-900:#264404;
+  --yellow-50:#fffcf2;
+  --yellow-100:#ffeec2;
+  --yellow-200:#ffe191;
+  --yellow-300:#ffd461;
+  --yellow-400:#ffc630;
+  --yellow-500:#ffb900;
+  --yellow-600:#d99d00;
+  --yellow-700:#b38200;
+  --yellow-800:#8c6600;
+  --yellow-900:#664a00;
+  --cyan-50:#f2fbfc;
+  --cyan-100:#c2eef1;
+  --cyan-200:#91e0e5;
+  --cyan-300:#61d2da;
+  --cyan-400:#30c5ce;
+  --cyan-500:#00b7c3;
+  --cyan-600:#009ca6;
+  --cyan-700:#008089;
+  --cyan-800:#00656b;
+  --cyan-900:#00494e;
+  --pink-50:#fef2f9;
+  --pink-100:#f8c2e3;
+  --pink-200:#f391ce;
+  --pink-300:#ee61b8;
+  --pink-400:#e830a2;
+  --pink-500:#e3008c;
+  --pink-600:#c10077;
+  --pink-700:#9f0062;
+  --pink-800:#7d004d;
+  --pink-900:#5b0038;
+  --indigo-50:#f5f6fc;
+  --indigo-100:#cdd3f1;
+  --indigo-200:#a5b0e6;
+  --indigo-300:#7d8edc;
+  --indigo-400:#566bd1;
+  --indigo-500:#2e48c6;
+  --indigo-600:#273da8;
+  --indigo-700:#20328b;
+  --indigo-800:#19286d;
+  --indigo-900:#121d4f;
+  --teal-50:#f2f9f8;
+  --teal-100:#c2e1dd;
+  --teal-200:#91c9c2;
+  --teal-300:#61b2a8;
+  --teal-400:#309a8d;
+  --teal-500:#008272;
+  --teal-600:#006f61;
+  --teal-700:#005b50;
+  --teal-800:#00483f;
+  --teal-900:#00342e;
+  --orange-50:#fdf7f2;
+  --orange-100:#f5d8c2;
+  --orange-200:#edb991;
+  --orange-300:#e49a61;
+  --orange-400:#dc7b30;
+  --orange-500:#d45c00;
+  --orange-600:#b44e00;
+  --orange-700:#944000;
+  --orange-800:#753300;
+  --orange-900:#552500;
+  --bluegray-50:#f8f9fb;
+  --bluegray-100:#dee4ed;
+  --bluegray-200:#c4cfe0;
+  --bluegray-300:#a9bad2;
+  --bluegray-400:#8fa4c4;
+  --bluegray-500:#758fb6;
+  --bluegray-600:#637a9b;
+  --bluegray-700:#52647f;
+  --bluegray-800:#404f64;
+  --bluegray-900:#2f3949;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.5rem;
 }
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 1f837b5ca..83cf511b5 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -11,6 +11,17 @@
   --primary-color: #FFE082;
   --primary-color-text: #212529;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #000000;
+  --surface-50: #050505;
+  --surface-100: #0a0a0a;
+  --surface-200: #141414;
+  --surface-300: #1e1e1e;
+  --surface-400: #282828;
+  --surface-500: #323232;
+  --surface-600: #5b5b5b;
+  --surface-700: #848484;
+  --surface-800: #adadad;
+  --surface-900: #d6d6d6;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.429rem;
 }
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 3842807cf..b336957fb 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -11,6 +11,17 @@
   --primary-color: #81D4FA;
   --primary-color-text: #212529;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #000000;
+  --surface-50: #050505;
+  --surface-100: #0a0a0a;
+  --surface-200: #141414;
+  --surface-300: #1e1e1e;
+  --surface-400: #282828;
+  --surface-500: #323232;
+  --surface-600: #5b5b5b;
+  --surface-700: #848484;
+  --surface-800: #adadad;
+  --surface-900: #d6d6d6;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.429rem;
 }
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 475e356d2..8648b5c18 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -11,6 +11,17 @@
   --primary-color: #C5E1A5;
   --primary-color-text: #212529;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #000000;
+  --surface-50: #050505;
+  --surface-100: #0a0a0a;
+  --surface-200: #141414;
+  --surface-300: #1e1e1e;
+  --surface-400: #282828;
+  --surface-500: #323232;
+  --surface-600: #5b5b5b;
+  --surface-700: #848484;
+  --surface-800: #adadad;
+  --surface-900: #d6d6d6;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.429rem;
 }
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index a7dc8b929..8cfc4148f 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -11,6 +11,17 @@
   --primary-color: #F48FB1;
   --primary-color-text: #212529;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #000000;
+  --surface-50: #050505;
+  --surface-100: #0a0a0a;
+  --surface-200: #141414;
+  --surface-300: #1e1e1e;
+  --surface-400: #282828;
+  --surface-500: #323232;
+  --surface-600: #5b5b5b;
+  --surface-700: #848484;
+  --surface-800: #adadad;
+  --surface-900: #d6d6d6;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.429rem;
 }
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index fc8799a16..6a923ffee 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#CE93D8;
   --primary-color-text:#121212;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --surface-0: #000000;
+  --surface-50: #212121;
+  --surface-100: #424242;
+  --surface-200: #616161;
+  --surface-300: #757575;
+  --surface-400: #9E9E9E;
+  --surface-500: #BDBDBD;
+  --surface-600: #E0E0E0;
+  --surface-700: #EEEEEE;
+  --surface-800: #F5F5F5;
+  --surface-900: #FAFAFA;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -79,6 +90,109 @@
   box-shadow: none;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f7faf5;
+  --green-100:#dbe8cf;
+  --green-200:#bed6a9;
+  --green-300:#a1c384;
+  --green-400:#85b15e;
+  --green-500:#689f38;
+  --green-600:#588730;
+  --green-700:#496f27;
+  --green-800:#39571f;
+  --green-900:#2a4016;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f6f7fc;
+  --indigo-100:#d5d9ef;
+  --indigo-200:#b3bae2;
+  --indigo-300:#919cd5;
+  --indigo-400:#707dc8;
+  --indigo-500:#4e5fbb;
+  --indigo-600:#42519f;
+  --indigo-700:#374383;
+  --indigo-800:#2b3467;
+  --indigo-900:#1f264b;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fffaf2;
+  --orange-100:#ffe6c2;
+  --orange-200:#ffd391;
+  --orange-300:#ffbf61;
+  --orange-400:#ffac30;
+  --orange-500:#ff9800;
+  --orange-600:#d98100;
+  --orange-700:#b36a00;
+  --orange-800:#8c5400;
+  --orange-900:#663d00;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 1rem;
 }
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 2bddbe308..502275653 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#9FA8DA;
   --primary-color-text:#121212;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --surface-0: #000000;
+  --surface-50: #212121;
+  --surface-100: #424242;
+  --surface-200: #616161;
+  --surface-300: #757575;
+  --surface-400: #9E9E9E;
+  --surface-500: #BDBDBD;
+  --surface-600: #E0E0E0;
+  --surface-700: #EEEEEE;
+  --surface-800: #F5F5F5;
+  --surface-900: #FAFAFA;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -79,6 +90,109 @@
   box-shadow: none;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f7faf5;
+  --green-100:#dbe8cf;
+  --green-200:#bed6a9;
+  --green-300:#a1c384;
+  --green-400:#85b15e;
+  --green-500:#689f38;
+  --green-600:#588730;
+  --green-700:#496f27;
+  --green-800:#39571f;
+  --green-900:#2a4016;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f6f7fc;
+  --indigo-100:#d5d9ef;
+  --indigo-200:#b3bae2;
+  --indigo-300:#919cd5;
+  --indigo-400:#707dc8;
+  --indigo-500:#4e5fbb;
+  --indigo-600:#42519f;
+  --indigo-700:#374383;
+  --indigo-800:#2b3467;
+  --indigo-900:#1f264b;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fffaf2;
+  --orange-100:#ffe6c2;
+  --orange-200:#ffd391;
+  --orange-300:#ffbf61;
+  --orange-400:#ffac30;
+  --orange-500:#ff9800;
+  --orange-600:#d98100;
+  --orange-700:#b36a00;
+  --orange-800:#8c5400;
+  --orange-900:#663d00;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 1rem;
 }
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 68658640f..afadbb022 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#673AB7;
   --primary-color-text:#ffffff;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --surface-0: #ffffff;
+  --surface-50: #FAFAFA;
+  --surface-100: #F5F5F5;
+  --surface-200: #EEEEEE;
+  --surface-300: #E0E0E0;
+  --surface-400: #BDBDBD;
+  --surface-500: #9E9E9E;
+  --surface-600: #757575;
+  --surface-700: #616161;
+  --surface-800: #424242;
+  --surface-900: #212121;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -79,6 +90,109 @@
   box-shadow: none;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f7faf5;
+  --green-100:#dbe8cf;
+  --green-200:#bed6a9;
+  --green-300:#a1c384;
+  --green-400:#85b15e;
+  --green-500:#689f38;
+  --green-600:#588730;
+  --green-700:#496f27;
+  --green-800:#39571f;
+  --green-900:#2a4016;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f6f7fc;
+  --indigo-100:#d5d9ef;
+  --indigo-200:#b3bae2;
+  --indigo-300:#919cd5;
+  --indigo-400:#707dc8;
+  --indigo-500:#4e5fbb;
+  --indigo-600:#42519f;
+  --indigo-700:#374383;
+  --indigo-800:#2b3467;
+  --indigo-900:#1f264b;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fffaf2;
+  --orange-100:#ffe6c2;
+  --orange-200:#ffd391;
+  --orange-300:#ffbf61;
+  --orange-400:#ffac30;
+  --orange-500:#ff9800;
+  --orange-600:#d98100;
+  --orange-700:#b36a00;
+  --orange-800:#8c5400;
+  --orange-900:#663d00;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 1rem;
 }
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 35ab4896c..c3858d4e3 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#3F51B5;
   --primary-color-text:#ffffff;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --surface-0: #ffffff;
+  --surface-50: #FAFAFA;
+  --surface-100: #F5F5F5;
+  --surface-200: #EEEEEE;
+  --surface-300: #E0E0E0;
+  --surface-400: #BDBDBD;
+  --surface-500: #9E9E9E;
+  --surface-600: #757575;
+  --surface-700: #616161;
+  --surface-800: #424242;
+  --surface-900: #212121;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -79,6 +90,109 @@
   box-shadow: none;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f7faf5;
+  --green-100:#dbe8cf;
+  --green-200:#bed6a9;
+  --green-300:#a1c384;
+  --green-400:#85b15e;
+  --green-500:#689f38;
+  --green-600:#588730;
+  --green-700:#496f27;
+  --green-800:#39571f;
+  --green-900:#2a4016;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f6f7fc;
+  --indigo-100:#d5d9ef;
+  --indigo-200:#b3bae2;
+  --indigo-300:#919cd5;
+  --indigo-400:#707dc8;
+  --indigo-500:#4e5fbb;
+  --indigo-600:#42519f;
+  --indigo-700:#374383;
+  --indigo-800:#2b3467;
+  --indigo-900:#1f264b;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fffaf2;
+  --orange-100:#ffe6c2;
+  --orange-200:#ffd391;
+  --orange-300:#ffbf61;
+  --orange-400:#ffac30;
+  --orange-500:#ff9800;
+  --orange-600:#d98100;
+  --orange-700:#b36a00;
+  --orange-800:#8c5400;
+  --orange-900:#663d00;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 1rem;
 }
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index f3081716b..dbc579d26 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#673AB7;
   --primary-color-text:#ffffff;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --surface-0: #000000;
+  --surface-50: #212121;
+  --surface-100: #424242;
+  --surface-200: #616161;
+  --surface-300: #757575;
+  --surface-400: #9E9E9E;
+  --surface-500: #BDBDBD;
+  --surface-600: #E0E0E0;
+  --surface-700: #EEEEEE;
+  --surface-800: #F5F5F5;
+  --surface-900: #FAFAFA;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -79,6 +90,109 @@
   box-shadow: none;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f7faf5;
+  --green-100:#dbe8cf;
+  --green-200:#bed6a9;
+  --green-300:#a1c384;
+  --green-400:#85b15e;
+  --green-500:#689f38;
+  --green-600:#588730;
+  --green-700:#496f27;
+  --green-800:#39571f;
+  --green-900:#2a4016;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f6f7fc;
+  --indigo-100:#d5d9ef;
+  --indigo-200:#b3bae2;
+  --indigo-300:#919cd5;
+  --indigo-400:#707dc8;
+  --indigo-500:#4e5fbb;
+  --indigo-600:#42519f;
+  --indigo-700:#374383;
+  --indigo-800:#2b3467;
+  --indigo-900:#1f264b;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fffaf2;
+  --orange-100:#ffe6c2;
+  --orange-200:#ffd391;
+  --orange-300:#ffbf61;
+  --orange-400:#ffac30;
+  --orange-500:#ff9800;
+  --orange-600:#d98100;
+  --orange-700:#b36a00;
+  --orange-800:#8c5400;
+  --orange-900:#663d00;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.75rem;
 }
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index d6a75a296..ae2f15968 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#3F51B5;
   --primary-color-text:#ffffff;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --surface-0: #000000;
+  --surface-50: #212121;
+  --surface-100: #424242;
+  --surface-200: #616161;
+  --surface-300: #757575;
+  --surface-400: #9E9E9E;
+  --surface-500: #BDBDBD;
+  --surface-600: #E0E0E0;
+  --surface-700: #EEEEEE;
+  --surface-800: #F5F5F5;
+  --surface-900: #FAFAFA;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -79,6 +90,109 @@
   box-shadow: none;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f7faf5;
+  --green-100:#dbe8cf;
+  --green-200:#bed6a9;
+  --green-300:#a1c384;
+  --green-400:#85b15e;
+  --green-500:#689f38;
+  --green-600:#588730;
+  --green-700:#496f27;
+  --green-800:#39571f;
+  --green-900:#2a4016;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f6f7fc;
+  --indigo-100:#d5d9ef;
+  --indigo-200:#b3bae2;
+  --indigo-300:#919cd5;
+  --indigo-400:#707dc8;
+  --indigo-500:#4e5fbb;
+  --indigo-600:#42519f;
+  --indigo-700:#374383;
+  --indigo-800:#2b3467;
+  --indigo-900:#1f264b;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fffaf2;
+  --orange-100:#ffe6c2;
+  --orange-200:#ffd391;
+  --orange-300:#ffbf61;
+  --orange-400:#ffac30;
+  --orange-500:#ff9800;
+  --orange-600:#d98100;
+  --orange-700:#b36a00;
+  --orange-800:#8c5400;
+  --orange-900:#663d00;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.75rem;
 }
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 5116514c1..a4862cf94 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#673AB7;
   --primary-color-text:#ffffff;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --surface-0: #ffffff;
+  --surface-50: #FAFAFA;
+  --surface-100: #F5F5F5;
+  --surface-200: #EEEEEE;
+  --surface-300: #E0E0E0;
+  --surface-400: #BDBDBD;
+  --surface-500: #9E9E9E;
+  --surface-600: #757575;
+  --surface-700: #616161;
+  --surface-800: #424242;
+  --surface-900: #212121;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -79,6 +90,109 @@
   box-shadow: none;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f7faf5;
+  --green-100:#dbe8cf;
+  --green-200:#bed6a9;
+  --green-300:#a1c384;
+  --green-400:#85b15e;
+  --green-500:#689f38;
+  --green-600:#588730;
+  --green-700:#496f27;
+  --green-800:#39571f;
+  --green-900:#2a4016;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f6f7fc;
+  --indigo-100:#d5d9ef;
+  --indigo-200:#b3bae2;
+  --indigo-300:#919cd5;
+  --indigo-400:#707dc8;
+  --indigo-500:#4e5fbb;
+  --indigo-600:#42519f;
+  --indigo-700:#374383;
+  --indigo-800:#2b3467;
+  --indigo-900:#1f264b;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fffaf2;
+  --orange-100:#ffe6c2;
+  --orange-200:#ffd391;
+  --orange-300:#ffbf61;
+  --orange-400:#ffac30;
+  --orange-500:#ff9800;
+  --orange-600:#d98100;
+  --orange-700:#b36a00;
+  --orange-800:#8c5400;
+  --orange-900:#663d00;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.75rem;
 }
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index ce9e75aa8..60979ce94 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#3F51B5;
   --primary-color-text:#ffffff;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --surface-0: #ffffff;
+  --surface-50: #FAFAFA;
+  --surface-100: #F5F5F5;
+  --surface-200: #EEEEEE;
+  --surface-300: #E0E0E0;
+  --surface-400: #BDBDBD;
+  --surface-500: #9E9E9E;
+  --surface-600: #757575;
+  --surface-700: #616161;
+  --surface-800: #424242;
+  --surface-900: #212121;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -79,6 +90,109 @@
   box-shadow: none;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f7faf5;
+  --green-100:#dbe8cf;
+  --green-200:#bed6a9;
+  --green-300:#a1c384;
+  --green-400:#85b15e;
+  --green-500:#689f38;
+  --green-600:#588730;
+  --green-700:#496f27;
+  --green-800:#39571f;
+  --green-900:#2a4016;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f6f7fc;
+  --indigo-100:#d5d9ef;
+  --indigo-200:#b3bae2;
+  --indigo-300:#919cd5;
+  --indigo-400:#707dc8;
+  --indigo-500:#4e5fbb;
+  --indigo-600:#42519f;
+  --indigo-700:#374383;
+  --indigo-800:#2b3467;
+  --indigo-900:#1f264b;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fffaf2;
+  --orange-100:#ffe6c2;
+  --orange-200:#ffd391;
+  --orange-300:#ffbf61;
+  --orange-400:#ffac30;
+  --orange-500:#ff9800;
+  --orange-600:#d98100;
+  --orange-700:#b36a00;
+  --orange-800:#8c5400;
+  --orange-900:#663d00;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.75rem;
 }
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 8b5c32ac3..7ba470cbc 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -11,6 +11,17 @@
   --primary-color: #007ad9;
   --primary-color-text: #ffffff;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #ffffff;
+  --surface-50: #eef1f2;
+  --surface-100: #dde2e4;
+  --surface-200: #bbc5ca;
+  --surface-300: #98a8af;
+  --surface-400: #768b95;
+  --surface-500: #546e7a;
+  --surface-600: #435862;
+  --surface-700: #324249;
+  --surface-800: #222c31;
+  --surface-900: #111618;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.429rem;
 }
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 41b4c9e06..0e13e835a 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -11,6 +11,17 @@
   --primary-color: #007ad9;
   --primary-color-text: #ffffff;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #ffffff;
+  --surface-50: #eef1f2;
+  --surface-100: #dde2e4;
+  --surface-200: #bbc5ca;
+  --surface-300: #98a8af;
+  --surface-400: #768b95;
+  --surface-500: #546e7a;
+  --surface-600: #435862;
+  --surface-700: #324249;
+  --surface-800: #222c31;
+  --surface-900: #111618;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.429rem;
 }
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 234915af1..6a10ed1bf 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -11,6 +11,17 @@
   --primary-color: #41b883;
   --primary-color-text: #ffffff;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #ffffff;
+  --surface-50: #eef1f2;
+  --surface-100: #dde2e4;
+  --surface-200: #bbc5ca;
+  --surface-300: #98a8af;
+  --surface-400: #768b95;
+  --surface-500: #546e7a;
+  --surface-600: #435862;
+  --surface-700: #324249;
+  --surface-800: #222c31;
+  --surface-900: #111618;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.2rem #c2e9d8;
 }
 
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.429rem;
 }
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index a01291e9d..fbcb881ae 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -11,6 +11,17 @@
   --primary-color: #007ad9;
   --primary-color-text: #ffffff;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #ffffff;
+  --surface-50: #eef1f2;
+  --surface-100: #dde2e4;
+  --surface-200: #bbc5ca;
+  --surface-300: #98a8af;
+  --surface-400: #768b95;
+  --surface-500: #546e7a;
+  --surface-600: #435862;
+  --surface-700: #324249;
+  --surface-800: #222c31;
+  --surface-900: #111618;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.429rem;
 }
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index e1133e911..21fd93a68 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -11,6 +11,17 @@
   --primary-color: #7B95A3;
   --primary-color-text: #ffffff;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #ffffff;
+  --surface-50: #eef1f2;
+  --surface-100: #dde2e4;
+  --surface-200: #bbc5ca;
+  --surface-300: #98a8af;
+  --surface-400: #768b95;
+  --surface-500: #546e7a;
+  --surface-600: #435862;
+  --surface-700: #324249;
+  --surface-800: #222c31;
+  --surface-900: #111618;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.2rem #e4e9ec;
 }
 
+:root {
+  --blue-50:#f6fbfe;
+  --blue-100:#d4edfb;
+  --blue-200:#b2e0f7;
+  --blue-300:#91d2f4;
+  --blue-400:#6fc4f0;
+  --blue-500:#4db6ed;
+  --blue-600:#419bc9;
+  --blue-700:#367fa6;
+  --blue-800:#2a6482;
+  --blue-900:#1f495f;
+  --green-50:#f7fcf9;
+  --green-100:#daeee4;
+  --green-200:#bce1ce;
+  --green-300:#9fd4b8;
+  --green-400:#81c7a3;
+  --green-500:#64ba8d;
+  --green-600:#559e78;
+  --green-700:#468263;
+  --green-800:#37664e;
+  --green-900:#284a38;
+  --yellow-50:#fffdf6;
+  --yellow-100:#fef4d5;
+  --yellow-200:#fdecb4;
+  --yellow-300:#fce493;
+  --yellow-400:#fbdb71;
+  --yellow-500:#fad350;
+  --yellow-600:#d5b344;
+  --yellow-700:#af9438;
+  --yellow-800:#8a742c;
+  --yellow-900:#645420;
+  --cyan-50:#f7fefe;
+  --cyan-100:#daf8fa;
+  --cyan-200:#bdf3f6;
+  --cyan-300:#a0edf2;
+  --cyan-400:#83e8ee;
+  --cyan-500:#66e2ea;
+  --cyan-600:#57c0c7;
+  --cyan-700:#479ea4;
+  --cyan-800:#387c81;
+  --cyan-900:#295a5e;
+  --pink-50:#fef8fc;
+  --pink-100:#fadeef;
+  --pink-200:#f7c4e2;
+  --pink-300:#f3a9d5;
+  --pink-400:#f08fc9;
+  --pink-500:#ec75bc;
+  --pink-600:#c963a0;
+  --pink-700:#a55284;
+  --pink-800:#824067;
+  --pink-900:#5e2f4b;
+  --indigo-50:#f7f9fe;
+  --indigo-100:#d6e4f8;
+  --indigo-200:#b6cef2;
+  --indigo-300:#96b8ec;
+  --indigo-400:#75a3e7;
+  --indigo-500:#558de1;
+  --indigo-600:#4878bf;
+  --indigo-700:#3c639e;
+  --indigo-800:#2f4e7c;
+  --indigo-900:#22385a;
+  --teal-50:#f6fbfa;
+  --teal-100:#d4ebe7;
+  --teal-200:#b2dbd4;
+  --teal-300:#90ccc1;
+  --teal-400:#6ebcae;
+  --teal-500:#4cac9b;
+  --teal-600:#419284;
+  --teal-700:#35786d;
+  --teal-800:#2a5f55;
+  --teal-900:#1e453e;
+  --orange-50:#fefbf6;
+  --orange-100:#fbebd2;
+  --orange-200:#f9dbae;
+  --orange-300:#f6cb8a;
+  --orange-400:#f3bb67;
+  --orange-500:#f0ab43;
+  --orange-600:#cc9139;
+  --orange-700:#a8782f;
+  --orange-800:#845e25;
+  --orange-900:#60441b;
+  --bluegray-50:#f9fafa;
+  --bluegray-100:#e0e5e9;
+  --bluegray-200:#c8d1d7;
+  --bluegray-300:#b0bdc5;
+  --bluegray-400:#97a8b4;
+  --bluegray-500:#7f94a2;
+  --bluegray-600:#6c7e8a;
+  --bluegray-700:#596871;
+  --bluegray-800:#465159;
+  --bluegray-900:#333b41;
+  --purple-50:#fbf8fc;
+  --purple-100:#ecddf1;
+  --purple-200:#ddc2e6;
+  --purple-300:#cea7dc;
+  --purple-400:#bf8cd1;
+  --purple-500:#b071c6;
+  --purple-600:#9660a8;
+  --purple-700:#7b4f8b;
+  --purple-800:#613e6d;
+  --purple-900:#462d4f;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.429rem;
 }
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 9abe868b2..0a4d2f7f4 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#2196F3;
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #ffffff;
+  --surface-50: #FAFAFA;
+  --surface-100: #F5F5F5;
+  --surface-200: #EEEEEE;
+  --surface-300: #E0E0E0;
+  --surface-400: #BDBDBD;
+  --surface-500: #9E9E9E;
+  --surface-600: #757575;
+  --surface-700: #616161;
+  --surface-800: #424242;
+  --surface-900: #212121;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.2rem #a6d5fa;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.5rem;
 }
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 5b31a1fae..cb0ca958d 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#4CAF50;
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #ffffff;
+  --surface-50: #FAFAFA;
+  --surface-100: #F5F5F5;
+  --surface-200: #EEEEEE;
+  --surface-300: #E0E0E0;
+  --surface-400: #BDBDBD;
+  --surface-500: #9E9E9E;
+  --surface-600: #757575;
+  --surface-700: #616161;
+  --surface-800: #424242;
+  --surface-900: #212121;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.2rem #b7e0b8;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.5rem;
 }
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 22cde08e8..be127a5de 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#FFC107;
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #ffffff;
+  --surface-50: #FAFAFA;
+  --surface-100: #F5F5F5;
+  --surface-200: #EEEEEE;
+  --surface-300: #E0E0E0;
+  --surface-400: #BDBDBD;
+  --surface-500: #9E9E9E;
+  --surface-600: #757575;
+  --surface-700: #616161;
+  --surface-800: #424242;
+  --surface-900: #212121;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.2rem #ffe69c;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.5rem;
 }
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 6c3903c14..a0513e5ce 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#9C27B0;
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #ffffff;
+  --surface-50: #FAFAFA;
+  --surface-100: #F5F5F5;
+  --surface-200: #EEEEEE;
+  --surface-300: #E0E0E0;
+  --surface-400: #BDBDBD;
+  --surface-500: #9E9E9E;
+  --surface-600: #757575;
+  --surface-700: #616161;
+  --surface-800: #424242;
+  --surface-900: #212121;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 0.2rem #df9eea;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.5rem;
 }
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 891394412..94a54e993 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#64B5F6;
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #000000;
+  --surface-50: #030406;
+  --surface-100: #06090d;
+  --surface-200: #0c121a;
+  --surface-300: #131b26;
+  --surface-400: #192433;
+  --surface-500: #1f2d40;
+  --surface-600: #4c5766;
+  --surface-700: #79818c;
+  --surface-800: #a5abb3;
+  --surface-900: #d2d5d9;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 1px #93cbf9;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.5rem;
 }
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 57c83e058..1e7fc2eab 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#81C784;
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #000000;
+  --surface-50: #030406;
+  --surface-100: #06090d;
+  --surface-200: #0c121a;
+  --surface-300: #131b26;
+  --surface-400: #192433;
+  --surface-500: #1f2d40;
+  --surface-600: #4c5766;
+  --surface-700: #79818c;
+  --surface-800: #a5abb3;
+  --surface-900: #d2d5d9;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 1px #a7d8a9;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.5rem;
 }
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index b04fc00ad..97e10b5eb 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#FFD54F;
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #000000;
+  --surface-50: #030406;
+  --surface-100: #06090d;
+  --surface-200: #0c121a;
+  --surface-300: #131b26;
+  --surface-400: #192433;
+  --surface-500: #1f2d40;
+  --surface-600: #4c5766;
+  --surface-700: #79818c;
+  --surface-800: #a5abb3;
+  --surface-900: #d2d5d9;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 1px #ffe284;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.5rem;
 }
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 1d5945d45..2b9f2d4cb 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -11,6 +11,17 @@
   --primary-color:#BA68C8;
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #000000;
+  --surface-50: #030406;
+  --surface-100: #06090d;
+  --surface-200: #0c121a;
+  --surface-300: #131b26;
+  --surface-400: #192433;
+  --surface-500: #1f2d40;
+  --surface-600: #4c5766;
+  --surface-700: #79818c;
+  --surface-800: #a5abb3;
+  --surface-900: #d2d5d9;
 }
 
 * {
@@ -55,6 +66,109 @@
   box-shadow: 0 0 0 1px #cf95d9;
 }
 
+:root {
+  --blue-50:#f4fafe;
+  --blue-100:#cae6fc;
+  --blue-200:#a0d2fa;
+  --blue-300:#75bef8;
+  --blue-400:#4baaf5;
+  --blue-500:#2196f3;
+  --blue-600:#1c80cf;
+  --blue-700:#1769aa;
+  --blue-800:#125386;
+  --blue-900:#0d3c61;
+  --green-50:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fef0cd;
+  --yellow-200:#fde4a5;
+  --yellow-300:#fdd87d;
+  --yellow-400:#fccc55;
+  --yellow-500:#fbc02d;
+  --yellow-600:#d5a326;
+  --yellow-700:#b08620;
+  --yellow-800:#8a6a19;
+  --yellow-900:#644d12;
+  --cyan-50:#f2fcfd;
+  --cyan-100:#c2eff5;
+  --cyan-200:#91e2ed;
+  --cyan-300:#61d5e4;
+  --cyan-400:#30c9dc;
+  --cyan-500:#00bcd4;
+  --cyan-600:#00a0b4;
+  --cyan-700:#008494;
+  --cyan-800:#006775;
+  --cyan-900:#004b55;
+  --pink-50:#fef4f7;
+  --pink-100:#fac9da;
+  --pink-200:#f69ebc;
+  --pink-300:#f1749e;
+  --pink-400:#ed4981;
+  --pink-500:#e91e63;
+  --pink-600:#c61a54;
+  --pink-700:#a31545;
+  --pink-800:#801136;
+  --pink-900:#5d0c28;
+  --indigo-50:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --teal-50:#f2faf9;
+  --teal-100:#c2e6e2;
+  --teal-200:#91d2cc;
+  --teal-300:#61beb5;
+  --teal-400:#30aa9f;
+  --teal-500:#009688;
+  --teal-600:#008074;
+  --teal-700:#00695f;
+  --teal-800:#00534b;
+  --teal-900:#003c36;
+  --orange-50:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --bluegray-50:#f7f9f9;
+  --bluegray-100:#d9e0e3;
+  --bluegray-200:#bbc7cd;
+  --bluegray-300:#9caeb7;
+  --bluegray-400:#7e96a1;
+  --bluegray-500:#607d8b;
+  --bluegray-600:#526a76;
+  --bluegray-700:#435861;
+  --bluegray-800:#35454c;
+  --bluegray-900:#263238;
+  --purple-50:#faf4fb;
+  --purple-100:#e7cbec;
+  --purple-200:#d4a2dd;
+  --purple-300:#c279ce;
+  --purple-400:#af50bf;
+  --purple-500:#9c27b0;
+  --purple-600:#852196;
+  --purple-700:#6d1b7b;
+  --purple-800:#561561;
+  --purple-900:#3e1046;
+}
+
 .p-autocomplete .p-autocomplete-loader {
   right: 0.5rem;
 }
diff --git a/src/router/index.js b/src/router/index.js
index 661c75ea6..c5b7aa18a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -62,6 +62,11 @@ const routes = [
         name: 'chip',
         component: () => import('../views/chip/ChipDemo.vue')
     },
+    {
+        path: '/colors',
+        name: 'colors',
+        component: () => import('../views/colors/ColorsDemo.vue')
+    },
     {
         path: '/blockui',
         name: 'blockui',
diff --git a/src/views/colors/ColorsDemo.vue b/src/views/colors/ColorsDemo.vue
new file mode 100644
index 000000000..159ee2309
--- /dev/null
+++ b/src/views/colors/ColorsDemo.vue
@@ -0,0 +1,115 @@
+<template>
+     <div>
+        <div class="content-section documentation">
+            <h1>Colors</h1>
+            <p>Each PrimeVue theme exports its own color palette as css variables.</p>
+        
+            <h5>Getting Started</h5>
+            <p>Colors are exported as CSS variables and used with the standard <i>var</i> syntax such as <i>var(--text-color)</i>.</p>
+
+<pre v-code><code>
+&lt;span :style="{color:var(--text-color)}"&gt;&lt;/span&gt;
+
+</code></pre>
+
+            <h5>General Colors</h5>
+            <p>These are common variables to used throughout the theme.</p>
+
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Variable</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><i>--text-color</i></td>
+                            <td>Font text color.</td>
+                        </tr>
+                        <tr>
+                            <td><i>--text-secondary-color</i></td>
+                            <td>Muted font text color with a secondary level.</td>
+                        </tr>
+                        <tr>
+                            <td><i>--primary-color</i></td>
+                            <td>Primary color of the theme.</td>
+                        </tr>
+                        <tr>
+                            <td><i>--primary-color-text</i></td>
+                            <td>Text color when background is primary color.</td>
+                        </tr>
+                        <tr>
+                            <td><i>--font-family</i></td>
+                            <td>Font family of the theme.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h5>Color Palette</h5>
+            <p>A palette consists of 9 colors where each color provide tints/shades from 50 to 900.</p>
+
+            <pre v-code><code>
+&lt;div :style="{backgroundColor:var(--blue-500)}"&gt;&lt;/div&gt;
+
+</code></pre>
+
+            <div class="card"> 
+                <div class="p-d-flex p-flex-wrap">
+                    <div v-for="color of colors" :key="color" class="color-stack p-mr-6 p-mb-6">
+                        <template v-for="shade of shades" :key="shade">
+                            <div v-if="shade !== 0" class="color-box"
+                                :style="{backgroundColor:`var(--${color}-${shade})`, color: (shade > 500 ? '#fff': '#000')}">
+                                {{color}}-{{shade}}
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+
+            <h5>Surfaces</h5>
+            <p>In addition, a theme exports a special palette called surfaces that can be used as the base when designing the surface layers and separators.</p>
+            <div class="card">
+                <div class="color-stack">
+                    <div v-for="shade in shades" :key="shade" class="color-box" 
+                        :style="{backgroundColor:`var(--surface-${shade})`, color: (shade > 500 ? '#fff': '#000')}">
+                        surface-{{shade}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            colors: ['blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple'],
+            shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.color-stack {
+    display: flex;
+    flex-direction: column;
+}
+
+.color-box {
+    width: 2.5rem;
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    width: 250px;
+    font-weight: bold;
+}
+
+.sample-layout {
+    width: 375px;
+}
+</style>
\ No newline at end of file