@messaia/cdk 17.1.5 → 18.0.0-rc02

package/lib/common/styles/colors/_colors-light.scss

@@ -1,904 +1,3232 @@
-// @use '~@angular/material' as mat;
-@import '../theme-functions';
+@use '@angular/material' as mat;
 
 @mixin vd-colors-light() {
-  // Text color
 
   // Inherit
-  .tc-inherit                 {   color: inherit !important;                       }
+  .tc-inherit {
+    color: inherit !important;
+  }
 
   // 50
-  .tc-red-50                  {   color: mat.get-color-from-palette(mat.$red-palette, 50) !important;                       }
-  .tc-pink-50                 {   color: mat.get-color-from-palette(mat.$pink-palette, 50) !important;                      }
-  .tc-purple-50               {   color: mat.get-color-from-palette(mat.$purple-palette, 50) !important;                    }
-  .tc-deep-purple-50          {   color: mat.get-color-from-palette(mat.$deep-purple-palette, 50) !important;               }
-  .tc-indigo-50               {   color: mat.get-color-from-palette(mat.$indigo-palette, 50) !important;                    }
-  .tc-blue-50                 {   color: mat.get-color-from-palette(mat.$blue-palette, 50) !important;                      }
-  .tc-light-blue-50           {   color: mat.get-color-from-palette(mat.$light-blue-palette, 50) !important;                }
-  .tc-cyan-50                 {   color: mat.get-color-from-palette(mat.$cyan-palette, 50) !important;                      }
-  .tc-teal-50                 {   color: mat.get-color-from-palette(mat.$teal-palette, 50) !important;                      }
-  .tc-green-50                {   color: mat.get-color-from-palette(mat.$green-palette, 50) !important;                     }
-  .tc-light-green-50          {   color: mat.get-color-from-palette(mat.$light-green-palette, 50) !important;               }
-  .tc-lime-50                 {   color: mat.get-color-from-palette(mat.$lime-palette, 50) !important;                      }
-  .tc-yellow-50               {   color: mat.get-color-from-palette(mat.$yellow-palette, 50) !important;                    }
-  .tc-amber-50                {   color: mat.get-color-from-palette(mat.$amber-palette, 50) !important;                     }
-  .tc-orange-50               {   color: mat.get-color-from-palette(mat.$orange-palette, 50) !important;                    }
-  .tc-deep-orange-50          {   color: mat.get-color-from-palette(mat.$deep-orange-palette, 50) !important;               }
-  .tc-brown-50                {   color: mat.get-color-from-palette(mat.$brown-palette, 50) !important;                     }
-  .tc-grey-50                 {   color: mat.get-color-from-palette(mat.$grey-palette, 50) !important;                      }
-  .tc-blue-grey-50            {   color: mat.get-color-from-palette(mat.$blue-grey-palette, 50) !important;                 }
+  .tc-red-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 50) !important;
+  }
+
+  .tc-pink-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 50) !important;
+  }
+
+  .tc-purple-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 50) !important;
+  }
+
+  .tc-deep-purple-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 50) !important;
+  }
+
+  .tc-indigo-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 50) !important;
+  }
+
+  .tc-blue-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 50) !important;
+  }
+
+  .tc-light-blue-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 50) !important;
+  }
+
+  .tc-cyan-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 50) !important;
+  }
+
+  .tc-teal-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 50) !important;
+  }
+
+  .tc-green-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 50) !important;
+  }
+
+  .tc-light-green-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 50) !important;
+  }
+
+  .tc-lime-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 50) !important;
+  }
+
+  .tc-yellow-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 50) !important;
+  }
+
+  .tc-amber-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 50) !important;
+  }
+
+  .tc-orange-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 50) !important;
+  }
+
+  .tc-deep-orange-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 50) !important;
+  }
+
+  .tc-brown-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 50) !important;
+  }
+
+  .tc-grey-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 50) !important;
+  }
+
+  .tc-blue-grey-50 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 50) !important;
+  }
+
+  // 100
+  .tc-red-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 100) !important;
+  }
+
+  .tc-pink-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 100) !important;
+  }
+
+  .tc-purple-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 100) !important;
+  }
+
+  .tc-deep-purple-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 100) !important;
+  }
+
+  .tc-indigo-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 100) !important;
+  }
+
+  .tc-blue-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 100) !important;
+  }
+
+  .tc-light-blue-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 100) !important;
+  }
+
+  .tc-cyan-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 100) !important;
+  }
+
+  .tc-teal-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 100) !important;
+  }
+
+  .tc-green-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 100) !important;
+  }
+
+  .tc-light-green-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 100) !important;
+  }
+
+  .tc-lime-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 100) !important;
+  }
+
+  .tc-yellow-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 100) !important;
+  }
+
+  .tc-amber-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 100) !important;
+  }
+
+  .tc-orange-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 100) !important;
+  }
+
+  .tc-deep-orange-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 100) !important;
+  }
+
+  .tc-brown-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 100) !important;
+  }
+
+  .tc-grey-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 100) !important;
+  }
+
+  .tc-blue-grey-100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 100) !important;
+  }
+
+  // 200
+  .tc-red-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 200) !important;
+  }
+
+  .tc-pink-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 200) !important;
+  }
+
+  .tc-purple-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 200) !important;
+  }
+
+  .tc-deep-purple-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 200) !important;
+  }
+
+  .tc-indigo-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 200) !important;
+  }
+
+  .tc-blue-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 200) !important;
+  }
+
+  .tc-light-blue-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 200) !important;
+  }
+
+  .tc-cyan-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 200) !important;
+  }
+
+  .tc-teal-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 200) !important;
+  }
+
+  .tc-green-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 200) !important;
+  }
+
+  .tc-light-green-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 200) !important;
+  }
+
+  .tc-lime-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 200) !important;
+  }
+
+  .tc-yellow-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 200) !important;
+  }
+
+  .tc-amber-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 200) !important;
+  }
+
+  .tc-orange-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 200) !important;
+  }
+
+  .tc-deep-orange-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 200) !important;
+  }
+
+  .tc-brown-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 200) !important;
+  }
+
+  .tc-grey-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 200) !important;
+  }
+
+  .tc-blue-grey-200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 200) !important;
+  }
+
+  // 300
+  .tc-red-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 300) !important;
+  }
+
+  .tc-pink-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 300) !important;
+  }
+
+  .tc-purple-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 300) !important;
+  }
+
+  .tc-deep-purple-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 300) !important;
+  }
+
+  .tc-indigo-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 300) !important;
+  }
+
+  .tc-blue-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 300) !important;
+  }
+
+  .tc-light-blue-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 300) !important;
+  }
+
+  .tc-cyan-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 300) !important;
+  }
+
+  .tc-teal-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 300) !important;
+  }
+
+  .tc-green-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 300) !important;
+  }
+
+  .tc-light-green-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 300) !important;
+  }
+
+  .tc-lime-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 300) !important;
+  }
+
+  .tc-yellow-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 300) !important;
+  }
+
+  .tc-amber-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 300) !important;
+  }
+
+  .tc-orange-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 300) !important;
+  }
+
+  .tc-deep-orange-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 300) !important;
+  }
+
+  .tc-brown-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 300) !important;
+  }
+
+  .tc-grey-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 300) !important;
+  }
+
+  .tc-blue-grey-300 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 300) !important;
+  }
+
+  // 400
+  .tc-red-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 400) !important;
+  }
+
+  .tc-pink-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 400) !important;
+  }
+
+  .tc-purple-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 400) !important;
+  }
+
+  .tc-deep-purple-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 400) !important;
+  }
+
+  .tc-indigo-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 400) !important;
+  }
+
+  .tc-blue-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 400) !important;
+  }
+
+  .tc-light-blue-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 400) !important;
+  }
+
+  .tc-cyan-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 400) !important;
+  }
+
+  .tc-teal-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 400) !important;
+  }
+
+  .tc-green-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 400) !important;
+  }
+
+  .tc-light-green-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 400) !important;
+  }
+
+  .tc-lime-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 400) !important;
+  }
+
+  .tc-yellow-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 400) !important;
+  }
+
+  .tc-amber-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 400) !important;
+  }
+
+  .tc-orange-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 400) !important;
+  }
+
+  .tc-deep-orange-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 400) !important;
+  }
+
+  .tc-brown-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 400) !important;
+  }
+
+  .tc-grey-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 400) !important;
+  }
+
+  .tc-blue-grey-400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 400) !important;
+  }
+
+  // 500
+  .tc-red-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 500) !important;
+  }
+
+  .tc-pink-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 500) !important;
+  }
+
+  .tc-purple-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 500) !important;
+  }
+
+  .tc-deep-purple-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 500) !important;
+  }
+
+  .tc-indigo-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 500) !important;
+  }
+
+  .tc-blue-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 500) !important;
+  }
+
+  .tc-light-blue-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 500) !important;
+  }
+
+  .tc-cyan-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 500) !important;
+  }
+
+  .tc-teal-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 500) !important;
+  }
+
+  .tc-green-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 500) !important;
+  }
+
+  .tc-light-green-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 500) !important;
+  }
+
+  .tc-lime-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 500) !important;
+  }
+
+  .tc-yellow-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 500) !important;
+  }
+
+  .tc-amber-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 500) !important;
+  }
+
+  .tc-orange-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 500) !important;
+  }
+
+  .tc-deep-orange-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 500) !important;
+  }
+
+  .tc-brown-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 500) !important;
+  }
+
+  .tc-grey-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 500) !important;
+  }
+
+  .tc-blue-grey-500 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 500) !important;
+  }
+
+  // 600
+  .tc-red-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 600) !important;
+  }
+
+  .tc-pink-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 600) !important;
+  }
+
+  .tc-purple-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 600) !important;
+  }
+
+  .tc-deep-purple-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 600) !important;
+  }
+
+  .tc-indigo-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 600) !important;
+  }
+
+  .tc-blue-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 600) !important;
+  }
+
+  .tc-light-blue-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 600) !important;
+  }
+
+  .tc-cyan-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 600) !important;
+  }
+
+  .tc-teal-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 600) !important;
+  }
+
+  .tc-green-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 600) !important;
+  }
+
+  .tc-light-green-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 600) !important;
+  }
+
+  .tc-lime-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 600) !important;
+  }
+
+  .tc-yellow-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 600) !important;
+  }
+
+  .tc-amber-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 600) !important;
+  }
+
+  .tc-orange-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 600) !important;
+  }
+
+  .tc-deep-orange-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 600) !important;
+  }
+
+  .tc-brown-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 600) !important;
+  }
+
+  .tc-grey-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 600) !important;
+  }
+
+  .tc-blue-grey-600 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 600) !important;
+  }
+
+  // 700
+  .tc-red-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 700) !important;
+  }
+
+  .tc-pink-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 700) !important;
+  }
+
+  .tc-purple-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 700) !important;
+  }
+
+  .tc-deep-purple-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 700) !important;
+  }
+
+  .tc-indigo-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 700) !important;
+  }
+
+  .tc-blue-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 700) !important;
+  }
+
+  .tc-light-blue-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 700) !important;
+  }
+
+  .tc-cyan-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 700) !important;
+  }
+
+  .tc-teal-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 700) !important;
+  }
+
+  .tc-green-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 700) !important;
+  }
+
+  .tc-light-green-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 700) !important;
+  }
+
+  .tc-lime-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 700) !important;
+  }
+
+  .tc-yellow-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 700) !important;
+  }
+
+  .tc-amber-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 700) !important;
+  }
+
+  .tc-orange-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 700) !important;
+  }
+
+  .tc-deep-orange-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 700) !important;
+  }
+
+  .tc-brown-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 700) !important;
+  }
+
+  .tc-grey-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 700) !important;
+  }
+
+  .tc-blue-grey-700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 700) !important;
+  }
+
+  // 800
+  .tc-red-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 800) !important;
+  }
+
+  .tc-pink-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 800) !important;
+  }
+
+  .tc-purple-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 800) !important;
+  }
+
+  .tc-deep-purple-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 800) !important;
+  }
+
+  .tc-indigo-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 800) !important;
+  }
+
+  .tc-blue-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 800) !important;
+  }
+
+  .tc-light-blue-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 800) !important;
+  }
+
+  .tc-cyan-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 800) !important;
+  }
+
+  .tc-teal-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 800) !important;
+  }
+
+  .tc-green-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 800) !important;
+  }
+
+  .tc-light-green-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 800) !important;
+  }
+
+  .tc-lime-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 800) !important;
+  }
+
+  .tc-yellow-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 800) !important;
+  }
+
+  .tc-amber-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 800) !important;
+  }
+
+  .tc-orange-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 800) !important;
+  }
+
+  .tc-deep-orange-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 800) !important;
+  }
+
+  .tc-brown-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 800) !important;
+  }
+
+  .tc-grey-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 800) !important;
+  }
+
+  .tc-blue-grey-800 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 800) !important;
+  }
+
+  // 900
+  .tc-red-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 900) !important;
+  }
+
+  .tc-pink-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 900) !important;
+  }
+
+  .tc-purple-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 900) !important;
+  }
+
+  .tc-deep-purple-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 900) !important;
+  }
+
+  .tc-indigo-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 900) !important;
+  }
+
+  .tc-blue-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 900) !important;
+  }
+
+  .tc-light-blue-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 900) !important;
+  }
+
+  .tc-cyan-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 900) !important;
+  }
+
+  .tc-teal-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 900) !important;
+  }
+
+  .tc-green-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 900) !important;
+  }
+
+  .tc-light-green-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 900) !important;
+  }
+
+  .tc-lime-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 900) !important;
+  }
+
+  .tc-yellow-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 900) !important;
+  }
+
+  .tc-amber-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 900) !important;
+  }
+
+  .tc-orange-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 900) !important;
+  }
+
+  .tc-deep-orange-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 900) !important;
+  }
+
+  .tc-brown-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 900) !important;
+  }
+
+  .tc-grey-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 900) !important;
+  }
+
+  .tc-blue-grey-900 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 900) !important;
+  }
+
+  // A100
+  .tc-red-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-red-palette, A100) !important;
+  }
+
+  .tc-pink-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, A100) !important;
+  }
+
+  .tc-purple-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, A100) !important;
+  }
+
+  .tc-deep-purple-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, A100) !important;
+  }
+
+  .tc-indigo-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, A100) !important;
+  }
+
+  .tc-blue-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, A100) !important;
+  }
+
+  .tc-light-blue-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, A100) !important;
+  }
+
+  .tc-cyan-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, A100) !important;
+  }
+
+  .tc-teal-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, A100) !important;
+  }
+
+  .tc-green-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-green-palette, A100) !important;
+  }
+
+  .tc-light-green-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, A100) !important;
+  }
+
+  .tc-lime-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, A100) !important;
+  }
+
+  .tc-yellow-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, A100) !important;
+  }
+
+  .tc-amber-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, A100) !important;
+  }
+
+  .tc-orange-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, A100) !important;
+  }
+
+  .tc-deep-orange-A100 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, A100) !important;
+  }
+
+  // A200
+  .tc-red-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-red-palette, A200) !important;
+  }
+
+  .tc-pink-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, A200) !important;
+  }
+
+  .tc-purple-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, A200) !important;
+  }
+
+  .tc-deep-purple-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, A200) !important;
+  }
+
+  .tc-indigo-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, A200) !important;
+  }
+
+  .tc-blue-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, A200) !important;
+  }
+
+  .tc-light-blue-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, A200) !important;
+  }
+
+  .tc-cyan-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, A200) !important;
+  }
+
+  .tc-teal-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, A200) !important;
+  }
+
+  .tc-green-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-green-palette, A200) !important;
+  }
+
+  .tc-light-green-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, A200) !important;
+  }
+
+  .tc-lime-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, A200) !important;
+  }
+
+  .tc-yellow-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, A200) !important;
+  }
+
+  .tc-amber-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, A200) !important;
+  }
+
+  .tc-orange-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, A200) !important;
+  }
+
+  .tc-deep-orange-A200 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, A200) !important;
+  }
+
+  // A400
+  .tc-red-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-red-palette, A400) !important;
+  }
+
+  .tc-pink-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, A400) !important;
+  }
+
+  .tc-purple-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, A400) !important;
+  }
+
+  .tc-deep-purple-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, A400) !important;
+  }
+
+  .tc-indigo-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, A400) !important;
+  }
+
+  .tc-blue-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, A400) !important;
+  }
+
+  .tc-light-blue-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, A400) !important;
+  }
+
+  .tc-cyan-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, A400) !important;
+  }
+
+  .tc-teal-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, A400) !important;
+  }
+
+  .tc-green-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-green-palette, A400) !important;
+  }
+
+  .tc-light-green-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, A400) !important;
+  }
+
+  .tc-lime-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, A400) !important;
+  }
+
+  .tc-yellow-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, A400) !important;
+  }
+
+  .tc-amber-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, A400) !important;
+  }
+
+  .tc-orange-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, A400) !important;
+  }
+
+  .tc-deep-orange-A400 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, A400) !important;
+  }
+
+  // A700
+  .tc-red-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-red-palette, A700) !important;
+  }
+
+  .tc-pink-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, A700) !important;
+  }
+
+  .tc-purple-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, A700) !important;
+  }
+
+  .tc-deep-purple-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, A700) !important;
+  }
+
+  .tc-indigo-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, A700) !important;
+  }
+
+  .tc-blue-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, A700) !important;
+  }
+
+  .tc-light-blue-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, A700) !important;
+  }
+
+  .tc-cyan-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, A700) !important;
+  }
+
+  .tc-teal-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, A700) !important;
+  }
+
+  .tc-green-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-green-palette, A700) !important;
+  }
+
+  .tc-light-green-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, A700) !important;
+  }
+
+  .tc-lime-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, A700) !important;
+  }
+
+  .tc-yellow-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, A700) !important;
+  }
+
+  .tc-amber-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, A700) !important;
+  }
+
+  .tc-orange-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, A700) !important;
+  }
+
+  .tc-deep-orange-A700 {
+    color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, A700) !important;
+  }
+
+  // Black
+  .tc-black {
+    color: rgba(black, 87) !important;
+  }
+
+  .tc-black-1 {
+    color: rgba(black, 54) !important;
+  }
+
+  .tc-black-2 {
+    color: rgba(black, 38) !important;
+  }
+
+  .tc-black-3 {
+    color: rgba(black, 0.12) !important;
+  }
+
+  .tc-black-4 {
+    color: black !important;
+  }
+
+  // White
+  .tc-white {
+    color: rgba(white, 0.7) !important;
+  }
+
+  .tc-white-1 {
+    color: rgba(white, 0.3) !important;
+  }
+
+  .tc-white-2 {
+    color: rgba(white, 0.3) !important;
+  }
+
+  .tc-white-3 {
+    color: rgba(white, 0.12) !important;
+  }
+
+  .tc-white-4 {
+    color: white !important;
+  }
+
+
+  // Background color
+
+  // 50
+  .bgc-red-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 50) !important;
+  }
+
+  .bgc-pink-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 50) !important;
+  }
+
+  .bgc-purple-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 50) !important;
+  }
+
+  .bgc-deep-purple-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 50) !important;
+  }
+
+  .bgc-indigo-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 50) !important;
+  }
+
+  .bgc-blue-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 50) !important;
+  }
+
+  .bgc-light-blue-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 50) !important;
+  }
+
+  .bgc-cyan-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 50) !important;
+  }
+
+  .bgc-teal-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 50) !important;
+  }
+
+  .bgc-green-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 50) !important;
+  }
+
+  .bgc-light-green-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 50) !important;
+  }
+
+  .bgc-lime-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 50) !important;
+  }
+
+  .bgc-yellow-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 50) !important;
+  }
+
+  .bgc-amber-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 50) !important;
+  }
+
+  .bgc-orange-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 50) !important;
+  }
+
+  .bgc-deep-orange-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 50) !important;
+  }
+
+  .bgc-brown-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 50) !important;
+  }
+
+  .bgc-grey-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 50) !important;
+  }
+
+  .bgc-blue-grey-50 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 50) !important;
+  }
 
   // 100
-  .tc-red-100                 {   color: mat.get-color-from-palette(mat.$red-palette, 100) !important;                      }
-  .tc-pink-100                {   color: mat.get-color-from-palette(mat.$pink-palette, 100) !important;                     }
-  .tc-purple-100              {   color: mat.get-color-from-palette(mat.$purple-palette, 100) !important;                   }
-  .tc-deep-purple-100         {   color: mat.get-color-from-palette(mat.$deep-purple-palette, 100) !important;              }
-  .tc-indigo-100              {   color: mat.get-color-from-palette(mat.$indigo-palette, 100) !important;                   }
-  .tc-blue-100                {   color: mat.get-color-from-palette(mat.$blue-palette, 100) !important;                     }
-  .tc-light-blue-100          {   color: mat.get-color-from-palette(mat.$light-blue-palette, 100) !important;               }
-  .tc-cyan-100                {   color: mat.get-color-from-palette(mat.$cyan-palette, 100) !important;                     }
-  .tc-teal-100                {   color: mat.get-color-from-palette(mat.$teal-palette, 100) !important;                     }
-  .tc-green-100               {   color: mat.get-color-from-palette(mat.$green-palette, 100) !important;                    }
-  .tc-light-green-100         {   color: mat.get-color-from-palette(mat.$light-green-palette, 100) !important;              }
-  .tc-lime-100                {   color: mat.get-color-from-palette(mat.$lime-palette, 100) !important;                     }
-  .tc-yellow-100              {   color: mat.get-color-from-palette(mat.$yellow-palette, 100) !important;                   }
-  .tc-amber-100               {   color: mat.get-color-from-palette(mat.$amber-palette, 100) !important;                    }
-  .tc-orange-100              {   color: mat.get-color-from-palette(mat.$orange-palette, 100) !important;                   }
-  .tc-deep-orange-100         {   color: mat.get-color-from-palette(mat.$deep-orange-palette, 100) !important;              }
-  .tc-brown-100               {   color: mat.get-color-from-palette(mat.$brown-palette, 100) !important;                    }
-  .tc-grey-100                {   color: mat.get-color-from-palette(mat.$grey-palette, 100) !important;                     }
-  .tc-blue-grey-100           {   color: mat.get-color-from-palette(mat.$blue-grey-palette, 100) !important;                }
+  .bgc-red-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 100) !important;
+  }
+
+  .bgc-pink-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 100) !important;
+  }
+
+  .bgc-purple-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 100) !important;
+  }
+
+  .bgc-deep-purple-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 100) !important;
+  }
+
+  .bgc-indigo-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 100) !important;
+  }
+
+  .bgc-blue-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 100) !important;
+  }
+
+  .bgc-light-blue-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 100) !important;
+  }
+
+  .bgc-cyan-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 100) !important;
+  }
+
+  .bgc-teal-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 100) !important;
+  }
+
+  .bgc-green-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 100) !important;
+  }
+
+  .bgc-light-green-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 100) !important;
+  }
+
+  .bgc-lime-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 100) !important;
+  }
+
+  .bgc-yellow-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 100) !important;
+  }
+
+  .bgc-amber-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 100) !important;
+  }
+
+  .bgc-orange-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 100) !important;
+  }
+
+  .bgc-deep-orange-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 100) !important;
+  }
+
+  .bgc-brown-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 100) !important;
+  }
+
+  .bgc-grey-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 100) !important;
+  }
+
+  .bgc-blue-grey-100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 100) !important;
+  }
+
+  // 200
+  .bgc-red-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 200) !important;
+  }
+
+  .bgc-pink-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 200) !important;
+  }
+
+  .bgc-purple-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 200) !important;
+  }
+
+  .bgc-deep-purple-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 200) !important;
+  }
+
+  .bgc-indigo-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 200) !important;
+  }
+
+  .bgc-blue-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 200) !important;
+  }
+
+  .bgc-light-blue-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 200) !important;
+  }
+
+  .bgc-cyan-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 200) !important;
+  }
+
+  .bgc-teal-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 200) !important;
+  }
+
+  .bgc-green-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 200) !important;
+  }
+
+  .bgc-light-green-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 200) !important;
+  }
+
+  .bgc-lime-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 200) !important;
+  }
+
+  .bgc-yellow-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 200) !important;
+  }
+
+  .bgc-amber-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 200) !important;
+  }
+
+  .bgc-orange-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 200) !important;
+  }
+
+  .bgc-deep-orange-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 200) !important;
+  }
+
+  .bgc-brown-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 200) !important;
+  }
+
+  .bgc-grey-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 200) !important;
+  }
+
+  .bgc-blue-grey-200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 200) !important;
+  }
+
+  // 300
+  .bgc-red-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 300) !important;
+  }
+
+  .bgc-pink-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 300) !important;
+  }
+
+  .bgc-purple-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 300) !important;
+  }
+
+  .bgc-deep-purple-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 300) !important;
+  }
+
+  .bgc-indigo-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 300) !important;
+  }
+
+  .bgc-blue-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 300) !important;
+  }
+
+  .bgc-light-blue-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 300) !important;
+  }
+
+  .bgc-cyan-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 300) !important;
+  }
+
+  .bgc-teal-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 300) !important;
+  }
+
+  .bgc-green-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 300) !important;
+  }
+
+  .bgc-light-green-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 300) !important;
+  }
+
+  .bgc-lime-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 300) !important;
+  }
+
+  .bgc-yellow-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 300) !important;
+  }
+
+  .bgc-amber-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 300) !important;
+  }
+
+  .bgc-orange-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 300) !important;
+  }
+
+  .bgc-deep-orange-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 300) !important;
+  }
+
+  .bgc-brown-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 300) !important;
+  }
+
+  .bgc-grey-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 300) !important;
+  }
+
+  .bgc-blue-grey-300 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 300) !important;
+  }
+
+  // 400
+  .bgc-red-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 400) !important;
+  }
+
+  .bgc-pink-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 400) !important;
+  }
+
+  .bgc-purple-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 400) !important;
+  }
+
+  .bgc-deep-purple-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 400) !important;
+  }
+
+  .bgc-indigo-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 400) !important;
+  }
+
+  .bgc-blue-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 400) !important;
+  }
+
+  .bgc-light-blue-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 400) !important;
+  }
+
+  .bgc-cyan-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 400) !important;
+  }
+
+  .bgc-teal-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 400) !important;
+  }
+
+  .bgc-green-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 400) !important;
+  }
+
+  .bgc-light-green-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 400) !important;
+  }
+
+  .bgc-lime-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 400) !important;
+  }
+
+  .bgc-yellow-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 400) !important;
+  }
+
+  .bgc-amber-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 400) !important;
+  }
+
+  .bgc-orange-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 400) !important;
+  }
+
+  .bgc-deep-orange-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 400) !important;
+  }
+
+  .bgc-brown-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 400) !important;
+  }
+
+  .bgc-grey-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 400) !important;
+  }
+
+  .bgc-blue-grey-400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 400) !important;
+  }
+
+  // 500
+  .bgc-red-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 500) !important;
+  }
+
+  .bgc-pink-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 500) !important;
+  }
+
+  .bgc-purple-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 500) !important;
+  }
+
+  .bgc-deep-purple-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 500) !important;
+  }
+
+  .bgc-indigo-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 500) !important;
+  }
+
+  .bgc-blue-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 500) !important;
+  }
+
+  .bgc-light-blue-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 500) !important;
+  }
+
+  .bgc-cyan-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 500) !important;
+  }
+
+  .bgc-teal-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 500) !important;
+  }
+
+  .bgc-green-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 500) !important;
+  }
+
+  .bgc-light-green-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 500) !important;
+  }
+
+  .bgc-lime-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 500) !important;
+  }
+
+  .bgc-yellow-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 500) !important;
+  }
+
+  .bgc-amber-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 500) !important;
+  }
+
+  .bgc-orange-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 500) !important;
+  }
+
+  .bgc-deep-orange-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 500) !important;
+  }
+
+  .bgc-brown-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 500) !important;
+  }
+
+  .bgc-grey-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 500) !important;
+  }
+
+  .bgc-blue-grey-500 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 500) !important;
+  }
+
+  // 600
+  .bgc-red-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 600) !important;
+  }
+
+  .bgc-pink-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 600) !important;
+  }
+
+  .bgc-purple-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 600) !important;
+  }
+
+  .bgc-deep-purple-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 600) !important;
+  }
+
+  .bgc-indigo-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 600) !important;
+  }
+
+  .bgc-blue-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 600) !important;
+  }
+
+  .bgc-light-blue-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 600) !important;
+  }
+
+  .bgc-cyan-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 600) !important;
+  }
+
+  .bgc-teal-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 600) !important;
+  }
+
+  .bgc-green-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 600) !important;
+  }
+
+  .bgc-light-green-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 600) !important;
+  }
+
+  .bgc-lime-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 600) !important;
+  }
+
+  .bgc-yellow-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 600) !important;
+  }
+
+  .bgc-amber-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 600) !important;
+  }
+
+  .bgc-orange-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 600) !important;
+  }
+
+  .bgc-deep-orange-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 600) !important;
+  }
+
+  .bgc-brown-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 600) !important;
+  }
+
+  .bgc-grey-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 600) !important;
+  }
+
+  .bgc-blue-grey-600 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 600) !important;
+  }
+
+  // 700
+  .bgc-red-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 700) !important;
+  }
+
+  .bgc-pink-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 700) !important;
+  }
+
+  .bgc-purple-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 700) !important;
+  }
+
+  .bgc-deep-purple-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 700) !important;
+  }
+
+  .bgc-indigo-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 700) !important;
+  }
+
+  .bgc-blue-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 700) !important;
+  }
+
+  .bgc-light-blue-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 700) !important;
+  }
+
+  .bgc-cyan-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 700) !important;
+  }
+
+  .bgc-teal-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 700) !important;
+  }
+
+  .bgc-green-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 700) !important;
+  }
+
+  .bgc-light-green-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 700) !important;
+  }
+
+  .bgc-lime-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 700) !important;
+  }
+
+  .bgc-yellow-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 700) !important;
+  }
+
+  .bgc-amber-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 700) !important;
+  }
+
+  .bgc-orange-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 700) !important;
+  }
+
+  .bgc-deep-orange-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 700) !important;
+  }
+
+  .bgc-brown-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 700) !important;
+  }
+
+  .bgc-grey-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 700) !important;
+  }
+
+  .bgc-blue-grey-700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 700) !important;
+  }
+
+  // 800
+  .bgc-red-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 800) !important;
+  }
+
+  .bgc-pink-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 800) !important;
+  }
+
+  .bgc-purple-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 800) !important;
+  }
+
+  .bgc-deep-purple-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 800) !important;
+  }
+
+  .bgc-indigo-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 800) !important;
+  }
+
+  .bgc-blue-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 800) !important;
+  }
+
+  .bgc-light-blue-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 800) !important;
+  }
+
+  .bgc-cyan-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 800) !important;
+  }
+
+  .bgc-teal-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 800) !important;
+  }
+
+  .bgc-green-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 800) !important;
+  }
+
+  .bgc-light-green-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 800) !important;
+  }
+
+  .bgc-lime-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 800) !important;
+  }
+
+  .bgc-yellow-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 800) !important;
+  }
+
+  .bgc-amber-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 800) !important;
+  }
+
+  .bgc-orange-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 800) !important;
+  }
+
+  .bgc-deep-orange-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 800) !important;
+  }
+
+  .bgc-brown-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 800) !important;
+  }
+
+  .bgc-grey-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 800) !important;
+  }
+
+  .bgc-blue-grey-800 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 800) !important;
+  }
+
+  // 900
+  .bgc-red-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 900) !important;
+  }
+
+  .bgc-pink-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 900) !important;
+  }
+
+  .bgc-purple-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 900) !important;
+  }
+
+  .bgc-deep-purple-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 900) !important;
+  }
+
+  .bgc-indigo-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 900) !important;
+  }
+
+  .bgc-blue-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 900) !important;
+  }
+
+  .bgc-light-blue-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 900) !important;
+  }
+
+  .bgc-cyan-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 900) !important;
+  }
+
+  .bgc-teal-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 900) !important;
+  }
+
+  .bgc-green-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 900) !important;
+  }
+
+  .bgc-light-green-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 900) !important;
+  }
+
+  .bgc-lime-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 900) !important;
+  }
+
+  .bgc-yellow-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 900) !important;
+  }
+
+  .bgc-amber-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 900) !important;
+  }
+
+  .bgc-orange-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 900) !important;
+  }
+
+  .bgc-deep-orange-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 900) !important;
+  }
+
+  .bgc-brown-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 900) !important;
+  }
+
+  .bgc-grey-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 900) !important;
+  }
+
+  .bgc-blue-grey-900 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 900) !important;
+  }
+
+  // A100
+  .bgc-red-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, A100) !important;
+  }
+
+  .bgc-pink-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, A100) !important;
+  }
+
+  .bgc-purple-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, A100) !important;
+  }
+
+  .bgc-deep-purple-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, A100) !important;
+  }
+
+  .bgc-indigo-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, A100) !important;
+  }
+
+  .bgc-blue-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, A100) !important;
+  }
+
+  .bgc-light-blue-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, A100) !important;
+  }
+
+  .bgc-cyan-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, A100) !important;
+  }
+
+  .bgc-teal-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, A100) !important;
+  }
+
+  .bgc-green-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, A100) !important;
+  }
+
+  .bgc-light-green-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, A100) !important;
+  }
+
+  .bgc-lime-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, A100) !important;
+  }
+
+  .bgc-yellow-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, A100) !important;
+  }
+
+  .bgc-amber-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, A100) !important;
+  }
+
+  .bgc-orange-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, A100) !important;
+  }
+
+  .bgc-deep-orange-A100 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, A100) !important;
+  }
+
+  // A200
+  .bgc-red-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, A200) !important;
+  }
+
+  .bgc-pink-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, A200) !important;
+  }
+
+  .bgc-purple-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, A200) !important;
+  }
+
+  .bgc-deep-purple-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, A200) !important;
+  }
+
+  .bgc-indigo-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, A200) !important;
+  }
+
+  .bgc-blue-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, A200) !important;
+  }
+
+  .bgc-light-blue-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, A200) !important;
+  }
+
+  .bgc-cyan-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, A200) !important;
+  }
+
+  .bgc-teal-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, A200) !important;
+  }
+
+  .bgc-green-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, A200) !important;
+  }
+
+  .bgc-light-green-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, A200) !important;
+  }
+
+  .bgc-lime-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, A200) !important;
+  }
+
+  .bgc-yellow-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, A200) !important;
+  }
+
+  .bgc-amber-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, A200) !important;
+  }
+
+  .bgc-orange-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, A200) !important;
+  }
+
+  .bgc-deep-orange-A200 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, A200) !important;
+  }
+
+  // A400
+  .bgc-red-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, A400) !important;
+  }
+
+  .bgc-pink-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, A400) !important;
+  }
+
+  .bgc-purple-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, A400) !important;
+  }
+
+  .bgc-deep-purple-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, A400) !important;
+  }
+
+  .bgc-indigo-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, A400) !important;
+  }
+
+  .bgc-blue-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, A400) !important;
+  }
+
+  .bgc-light-blue-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, A400) !important;
+  }
+
+  .bgc-cyan-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, A400) !important;
+  }
+
+  .bgc-teal-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, A400) !important;
+  }
+
+  .bgc-green-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, A400) !important;
+  }
+
+  .bgc-light-green-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, A400) !important;
+  }
+
+  .bgc-lime-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, A400) !important;
+  }
+
+  .bgc-yellow-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, A400) !important;
+  }
+
+  .bgc-amber-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, A400) !important;
+  }
+
+  .bgc-orange-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, A400) !important;
+  }
+
+  .bgc-deep-orange-A400 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, A400) !important;
+  }
+
+  // A700
+  .bgc-red-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, A700) !important;
+  }
+
+  .bgc-pink-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, A700) !important;
+  }
+
+  .bgc-purple-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-purple-palette, A700) !important;
+  }
+
+  .bgc-deep-purple-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, A700) !important;
+  }
+
+  .bgc-indigo-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, A700) !important;
+  }
+
+  .bgc-blue-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, A700) !important;
+  }
+
+  .bgc-light-blue-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, A700) !important;
+  }
+
+  .bgc-cyan-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, A700) !important;
+  }
+
+  .bgc-teal-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, A700) !important;
+  }
+
+  .bgc-green-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, A700) !important;
+  }
+
+  .bgc-light-green-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, A700) !important;
+  }
+
+  .bgc-lime-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-lime-palette, A700) !important;
+  }
+
+  .bgc-yellow-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, A700) !important;
+  }
+
+  .bgc-amber-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, A700) !important;
+  }
+
+  .bgc-orange-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, A700) !important;
+  }
+
+  .bgc-deep-orange-A700 {
+    background-color: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, A700) !important;
+  }
+
+  // Black
+  .bgc-black {
+    background-color: rgba(black, 87) !important;
+  }
+
+  .bgc-black-1 {
+    background-color: rgba(black, 54) !important;
+  }
+
+  .bgc-black-2 {
+    background-color: rgba(black, 38) !important;
+  }
+
+  .bgc-black-3 {
+    background-color: rgba(black, 0.12) !important;
+  }
+
+  .bgc-black-4 {
+    background-color: black !important;
+  }
+
+  // White
+  .bgc-white {
+    background-color: rgba(white, 0.7) !important;
+  }
 
-  // 200
-  .tc-red-200                 {   color: mat.get-color-from-palette(mat.$red-palette, 200) !important;                      }
-  .tc-pink-200                {   color: mat.get-color-from-palette(mat.$pink-palette, 200) !important;                     }
-  .tc-purple-200              {   color: mat.get-color-from-palette(mat.$purple-palette, 200) !important;                   }
-  .tc-deep-purple-200         {   color: mat.get-color-from-palette(mat.$deep-purple-palette, 200) !important;              }
-  .tc-indigo-200              {   color: mat.get-color-from-palette(mat.$indigo-palette, 200) !important;                   }
-  .tc-blue-200                {   color: mat.get-color-from-palette(mat.$blue-palette, 200) !important;                     }
-  .tc-light-blue-200          {   color: mat.get-color-from-palette(mat.$light-blue-palette, 200) !important;               }
-  .tc-cyan-200                {   color: mat.get-color-from-palette(mat.$cyan-palette, 200) !important;                     }
-  .tc-teal-200                {   color: mat.get-color-from-palette(mat.$teal-palette, 200) !important;                     }
-  .tc-green-200               {   color: mat.get-color-from-palette(mat.$green-palette, 200) !important;                    }
-  .tc-light-green-200         {   color: mat.get-color-from-palette(mat.$light-green-palette, 200) !important;              }
-  .tc-lime-200                {   color: mat.get-color-from-palette(mat.$lime-palette, 200) !important;                     }
-  .tc-yellow-200              {   color: mat.get-color-from-palette(mat.$yellow-palette, 200) !important;                   }
-  .tc-amber-200               {   color: mat.get-color-from-palette(mat.$amber-palette, 200) !important;                    }
-  .tc-orange-200              {   color: mat.get-color-from-palette(mat.$orange-palette, 200) !important;                   }
-  .tc-deep-orange-200         {   color: mat.get-color-from-palette(mat.$deep-orange-palette, 200) !important;              }
-  .tc-brown-200               {   color: mat.get-color-from-palette(mat.$brown-palette, 200) !important;                    }
-  .tc-grey-200                {   color: mat.get-color-from-palette(mat.$grey-palette, 200) !important;                     }
-  .tc-blue-grey-200           {   color: mat.get-color-from-palette(mat.$blue-grey-palette, 200) !important;                }
+  .bgc-white-1 {
+    background-color: rgba(white, 0.3) !important;
+  }
 
-  // 300
-  .tc-red-300                 {   color: mat.get-color-from-palette(mat.$red-palette, 300) !important;                      }
-  .tc-pink-300                {   color: mat.get-color-from-palette(mat.$pink-palette, 300) !important;                     }
-  .tc-purple-300              {   color: mat.get-color-from-palette(mat.$purple-palette, 300) !important;                   }
-  .tc-deep-purple-300         {   color: mat.get-color-from-palette(mat.$deep-purple-palette, 300) !important;              }
-  .tc-indigo-300              {   color: mat.get-color-from-palette(mat.$indigo-palette, 300) !important;                   }
-  .tc-blue-300                {   color: mat.get-color-from-palette(mat.$blue-palette, 300) !important;                     }
-  .tc-light-blue-300          {   color: mat.get-color-from-palette(mat.$light-blue-palette, 300) !important;               }
-  .tc-cyan-300                {   color: mat.get-color-from-palette(mat.$cyan-palette, 300) !important;                     }
-  .tc-teal-300                {   color: mat.get-color-from-palette(mat.$teal-palette, 300) !important;                     }
-  .tc-green-300               {   color: mat.get-color-from-palette(mat.$green-palette, 300) !important;                    }
-  .tc-light-green-300         {   color: mat.get-color-from-palette(mat.$light-green-palette, 300) !important;              }
-  .tc-lime-300                {   color: mat.get-color-from-palette(mat.$lime-palette, 300) !important;                     }
-  .tc-yellow-300              {   color: mat.get-color-from-palette(mat.$yellow-palette, 300) !important;                   }
-  .tc-amber-300               {   color: mat.get-color-from-palette(mat.$amber-palette, 300) !important;                    }
-  .tc-orange-300              {   color: mat.get-color-from-palette(mat.$orange-palette, 300) !important;                   }
-  .tc-deep-orange-300         {   color: mat.get-color-from-palette(mat.$deep-orange-palette, 300) !important;              }
-  .tc-brown-300               {   color: mat.get-color-from-palette(mat.$brown-palette, 300) !important;                    }
-  .tc-grey-300                {   color: mat.get-color-from-palette(mat.$grey-palette, 300) !important;                     }
-  .tc-blue-grey-300           {   color: mat.get-color-from-palette(mat.$blue-grey-palette, 300) !important;                }
+  .bgc-white-2 {
+    background-color: rgba(white, 0.3) !important;
+  }
 
-  // 400
-  .tc-red-400                 {   color: mat.get-color-from-palette(mat.$red-palette, 400) !important;                      }
-  .tc-pink-400                {   color: mat.get-color-from-palette(mat.$pink-palette, 400) !important;                     }
-  .tc-purple-400              {   color: mat.get-color-from-palette(mat.$purple-palette, 400) !important;                   }
-  .tc-deep-purple-400         {   color: mat.get-color-from-palette(mat.$deep-purple-palette, 400) !important;              }
-  .tc-indigo-400              {   color: mat.get-color-from-palette(mat.$indigo-palette, 400) !important;                   }
-  .tc-blue-400                {   color: mat.get-color-from-palette(mat.$blue-palette, 400) !important;                     }
-  .tc-light-blue-400          {   color: mat.get-color-from-palette(mat.$light-blue-palette, 400) !important;               }
-  .tc-cyan-400                {   color: mat.get-color-from-palette(mat.$cyan-palette, 400) !important;                     }
-  .tc-teal-400                {   color: mat.get-color-from-palette(mat.$teal-palette, 400) !important;                     }
-  .tc-green-400               {   color: mat.get-color-from-palette(mat.$green-palette, 400) !important;                    }
-  .tc-light-green-400         {   color: mat.get-color-from-palette(mat.$light-green-palette, 400) !important;              }
-  .tc-lime-400                {   color: mat.get-color-from-palette(mat.$lime-palette, 400) !important;                     }
-  .tc-yellow-400              {   color: mat.get-color-from-palette(mat.$yellow-palette, 400) !important;                   }
-  .tc-amber-400               {   color: mat.get-color-from-palette(mat.$amber-palette, 400) !important;                    }
-  .tc-orange-400              {   color: mat.get-color-from-palette(mat.$orange-palette, 400) !important;                   }
-  .tc-deep-orange-400         {   color: mat.get-color-from-palette(mat.$deep-orange-palette, 400) !important;              }
-  .tc-brown-400               {   color: mat.get-color-from-palette(mat.$brown-palette, 400) !important;                    }
-  .tc-grey-400                {   color: mat.get-color-from-palette(mat.$grey-palette, 400) !important;                     }
-  .tc-blue-grey-400           {   color: mat.get-color-from-palette(mat.$blue-grey-palette, 400) !important;                }
+  .bgc-white-3 {
+    background-color: rgba(white, 0.12) !important;
+  }
 
-  // 500
-  .tc-red-500                 {   color: mat.get-color-from-palette(mat.$red-palette, 500) !important;                      }
-  .tc-pink-500                {   color: mat.get-color-from-palette(mat.$pink-palette, 500) !important;                     }
-  .tc-purple-500              {   color: mat.get-color-from-palette(mat.$purple-palette, 500) !important;                   }
-  .tc-deep-purple-500         {   color: mat.get-color-from-palette(mat.$deep-purple-palette, 500) !important;              }
-  .tc-indigo-500              {   color: mat.get-color-from-palette(mat.$indigo-palette, 500) !important;                   }
-  .tc-blue-500                {   color: mat.get-color-from-palette(mat.$blue-palette, 500) !important;                     }
-  .tc-light-blue-500          {   color: mat.get-color-from-palette(mat.$light-blue-palette, 500) !important;               }
-  .tc-cyan-500                {   color: mat.get-color-from-palette(mat.$cyan-palette, 500) !important;                     }
-  .tc-teal-500                {   color: mat.get-color-from-palette(mat.$teal-palette, 500) !important;                     }
-  .tc-green-500               {   color: mat.get-color-from-palette(mat.$green-palette, 500) !important;                    }
-  .tc-light-green-500         {   color: mat.get-color-from-palette(mat.$light-green-palette, 500) !important;              }
-  .tc-lime-500                {   color: mat.get-color-from-palette(mat.$lime-palette, 500) !important;                     }
-  .tc-yellow-500              {   color: mat.get-color-from-palette(mat.$yellow-palette, 500) !important;                   }
-  .tc-amber-500               {   color: mat.get-color-from-palette(mat.$amber-palette, 500) !important;                    }
-  .tc-orange-500              {   color: mat.get-color-from-palette(mat.$orange-palette, 500) !important;                   }
-  .tc-deep-orange-500         {   color: mat.get-color-from-palette(mat.$deep-orange-palette, 500) !important;              }
-  .tc-brown-500               {   color: mat.get-color-from-palette(mat.$brown-palette, 500) !important;                    }
-  .tc-grey-500                {   color: mat.get-color-from-palette(mat.$grey-palette, 500) !important;                     }
-  .tc-blue-grey-500           {   color: mat.get-color-from-palette(mat.$blue-grey-palette, 500) !important;                }
+  .bgc-white-4 {
+    background-color: white !important;
+  }
 
-  // 600
-  .tc-red-600                 {   color: mat.get-color-from-palette(mat.$red-palette, 600) !important;                      }
-  .tc-pink-600                {   color: mat.get-color-from-palette(mat.$pink-palette, 600) !important;                     }
-  .tc-purple-600              {   color: mat.get-color-from-palette(mat.$purple-palette, 600) !important;                   }
-  .tc-deep-purple-600         {   color: mat.get-color-from-palette(mat.$deep-purple-palette, 600) !important;              }
-  .tc-indigo-600              {   color: mat.get-color-from-palette(mat.$indigo-palette, 600) !important;                   }
-  .tc-blue-600                {   color: mat.get-color-from-palette(mat.$blue-palette, 600) !important;                     }
-  .tc-light-blue-600          {   color: mat.get-color-from-palette(mat.$light-blue-palette, 600) !important;               }
-  .tc-cyan-600                {   color: mat.get-color-from-palette(mat.$cyan-palette, 600) !important;                     }
-  .tc-teal-600                {   color: mat.get-color-from-palette(mat.$teal-palette, 600) !important;                     }
-  .tc-green-600               {   color: mat.get-color-from-palette(mat.$green-palette, 600) !important;                    }
-  .tc-light-green-600         {   color: mat.get-color-from-palette(mat.$light-green-palette, 600) !important;              }
-  .tc-lime-600                {   color: mat.get-color-from-palette(mat.$lime-palette, 600) !important;                     }
-  .tc-yellow-600              {   color: mat.get-color-from-palette(mat.$yellow-palette, 600) !important;                   }
-  .tc-amber-600               {   color: mat.get-color-from-palette(mat.$amber-palette, 600) !important;                    }
-  .tc-orange-600              {   color: mat.get-color-from-palette(mat.$orange-palette, 600) !important;                   }
-  .tc-deep-orange-600         {   color: mat.get-color-from-palette(mat.$deep-orange-palette, 600) !important;              }
-  .tc-brown-600               {   color: mat.get-color-from-palette(mat.$brown-palette, 600) !important;                    }
-  .tc-grey-600                {   color: mat.get-color-from-palette(mat.$grey-palette, 600) !important;                     }
-  .tc-blue-grey-600           {   color: mat.get-color-from-palette(mat.$blue-grey-palette, 600) !important;                }
 
-  // 700
-  .tc-red-700                 {   color: mat.get-color-from-palette(mat.$red-palette, 700) !important;                      }
-  .tc-pink-700                {   color: mat.get-color-from-palette(mat.$pink-palette, 700) !important;                     }
-  .tc-purple-700              {   color: mat.get-color-from-palette(mat.$purple-palette, 700) !important;                   }
-  .tc-deep-purple-700         {   color: mat.get-color-from-palette(mat.$deep-purple-palette, 700) !important;              }
-  .tc-indigo-700              {   color: mat.get-color-from-palette(mat.$indigo-palette, 700) !important;                   }
-  .tc-blue-700                {   color: mat.get-color-from-palette(mat.$blue-palette, 700) !important;                     }
-  .tc-light-blue-700          {   color: mat.get-color-from-palette(mat.$light-blue-palette, 700) !important;               }
-  .tc-cyan-700                {   color: mat.get-color-from-palette(mat.$cyan-palette, 700) !important;                     }
-  .tc-teal-700                {   color: mat.get-color-from-palette(mat.$teal-palette, 700) !important;                     }
-  .tc-green-700               {   color: mat.get-color-from-palette(mat.$green-palette, 700) !important;                    }
-  .tc-light-green-700         {   color: mat.get-color-from-palette(mat.$light-green-palette, 700) !important;              }
-  .tc-lime-700                {   color: mat.get-color-from-palette(mat.$lime-palette, 700) !important;                     }
-  .tc-yellow-700              {   color: mat.get-color-from-palette(mat.$yellow-palette, 700) !important;                   }
-  .tc-amber-700               {   color: mat.get-color-from-palette(mat.$amber-palette, 700) !important;                    }
-  .tc-orange-700              {   color: mat.get-color-from-palette(mat.$orange-palette, 700) !important;                   }
-  .tc-deep-orange-700         {   color: mat.get-color-from-palette(mat.$deep-orange-palette, 700) !important;              }
-  .tc-brown-700               {   color: mat.get-color-from-palette(mat.$brown-palette, 700) !important;                    }
-  .tc-grey-700                {   color: mat.get-color-from-palette(mat.$grey-palette, 700) !important;                     }
-  .tc-blue-grey-700           {   color: mat.get-color-from-palette(mat.$blue-grey-palette, 700) !important;                }
+  // Fill color
 
-  // 800
-  .tc-red-800                 {   color: mat.get-color-from-palette(mat.$red-palette, 800) !important;                      }
-  .tc-pink-800                {   color: mat.get-color-from-palette(mat.$pink-palette, 800) !important;                     }
-  .tc-purple-800              {   color: mat.get-color-from-palette(mat.$purple-palette, 800) !important;                   }
-  .tc-deep-purple-800         {   color: mat.get-color-from-palette(mat.$deep-purple-palette, 800) !important;              }
-  .tc-indigo-800              {   color: mat.get-color-from-palette(mat.$indigo-palette, 800) !important;                   }
-  .tc-blue-800                {   color: mat.get-color-from-palette(mat.$blue-palette, 800) !important;                     }
-  .tc-light-blue-800          {   color: mat.get-color-from-palette(mat.$light-blue-palette, 800) !important;               }
-  .tc-cyan-800                {   color: mat.get-color-from-palette(mat.$cyan-palette, 800) !important;                     }
-  .tc-teal-800                {   color: mat.get-color-from-palette(mat.$teal-palette, 800) !important;                     }
-  .tc-green-800               {   color: mat.get-color-from-palette(mat.$green-palette, 800) !important;                    }
-  .tc-light-green-800         {   color: mat.get-color-from-palette(mat.$light-green-palette, 800) !important;              }
-  .tc-lime-800                {   color: mat.get-color-from-palette(mat.$lime-palette, 800) !important;                     }
-  .tc-yellow-800              {   color: mat.get-color-from-palette(mat.$yellow-palette, 800) !important;                   }
-  .tc-amber-800               {   color: mat.get-color-from-palette(mat.$amber-palette, 800) !important;                    }
-  .tc-orange-800              {   color: mat.get-color-from-palette(mat.$orange-palette, 800) !important;                   }
-  .tc-deep-orange-800         {   color: mat.get-color-from-palette(mat.$deep-orange-palette, 800) !important;              }
-  .tc-brown-800               {   color: mat.get-color-from-palette(mat.$brown-palette, 800) !important;                    }
-  .tc-grey-800                {   color: mat.get-color-from-palette(mat.$grey-palette, 800) !important;                     }
-  .tc-blue-grey-800           {   color: mat.get-color-from-palette(mat.$blue-grey-palette, 800) !important;                }
+  // 50
+  .fill-red-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-red-palette, 50) !important;
+  }
 
-  // 900
-  .tc-red-900                 {   color: mat.get-color-from-palette(mat.$red-palette, 900) !important;                      }
-  .tc-pink-900                {   color: mat.get-color-from-palette(mat.$pink-palette, 900) !important;                     }
-  .tc-purple-900              {   color: mat.get-color-from-palette(mat.$purple-palette, 900) !important;                   }
-  .tc-deep-purple-900         {   color: mat.get-color-from-palette(mat.$deep-purple-palette, 900) !important;              }
-  .tc-indigo-900              {   color: mat.get-color-from-palette(mat.$indigo-palette, 900) !important;                   }
-  .tc-blue-900                {   color: mat.get-color-from-palette(mat.$blue-palette, 900) !important;                     }
-  .tc-light-blue-900          {   color: mat.get-color-from-palette(mat.$light-blue-palette, 900) !important;               }
-  .tc-cyan-900                {   color: mat.get-color-from-palette(mat.$cyan-palette, 900) !important;                     }
-  .tc-teal-900                {   color: mat.get-color-from-palette(mat.$teal-palette, 900) !important;                     }
-  .tc-green-900               {   color: mat.get-color-from-palette(mat.$green-palette, 900) !important;                    }
-  .tc-light-green-900         {   color: mat.get-color-from-palette(mat.$light-green-palette, 900) !important;              }
-  .tc-lime-900                {   color: mat.get-color-from-palette(mat.$lime-palette, 900) !important;                     }
-  .tc-yellow-900              {   color: mat.get-color-from-palette(mat.$yellow-palette, 900) !important;                   }
-  .tc-amber-900               {   color: mat.get-color-from-palette(mat.$amber-palette, 900) !important;                    }
-  .tc-orange-900              {   color: mat.get-color-from-palette(mat.$orange-palette, 900) !important;                   }
-  .tc-deep-orange-900         {   color: mat.get-color-from-palette(mat.$deep-orange-palette, 900) !important;              }
-  .tc-brown-900               {   color: mat.get-color-from-palette(mat.$brown-palette, 900) !important;                    }
-  .tc-grey-900                {   color: mat.get-color-from-palette(mat.$grey-palette, 900) !important;                     }
-  .tc-blue-grey-900           {   color: mat.get-color-from-palette(mat.$blue-grey-palette, 900) !important;                }
+  .fill-pink-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 50) !important;
+  }
 
-  // A100
-  .tc-red-A100                {   color: mat.get-color-from-palette(mat.$red-palette, A100) !important;                     }
-  .tc-pink-A100               {   color: mat.get-color-from-palette(mat.$pink-palette, A100) !important;                    }
-  .tc-purple-A100             {   color: mat.get-color-from-palette(mat.$purple-palette, A100) !important;                  }
-  .tc-deep-purple-A100        {   color: mat.get-color-from-palette(mat.$deep-purple-palette, A100) !important;             }
-  .tc-indigo-A100             {   color: mat.get-color-from-palette(mat.$indigo-palette, A100) !important;                  }
-  .tc-blue-A100               {   color: mat.get-color-from-palette(mat.$blue-palette, A100) !important;                    }
-  .tc-light-blue-A100         {   color: mat.get-color-from-palette(mat.$light-blue-palette, A100) !important;              }
-  .tc-cyan-A100               {   color: mat.get-color-from-palette(mat.$cyan-palette, A100) !important;                    }
-  .tc-teal-A100               {   color: mat.get-color-from-palette(mat.$teal-palette, A100) !important;                    }
-  .tc-green-A100              {   color: mat.get-color-from-palette(mat.$green-palette, A100) !important;                   }
-  .tc-light-green-A100        {   color: mat.get-color-from-palette(mat.$light-green-palette, A100) !important;             }
-  .tc-lime-A100               {   color: mat.get-color-from-palette(mat.$lime-palette, A100) !important;                    }
-  .tc-yellow-A100             {   color: mat.get-color-from-palette(mat.$yellow-palette, A100) !important;                  }
-  .tc-amber-A100              {   color: mat.get-color-from-palette(mat.$amber-palette, A100) !important;                   }
-  .tc-orange-A100             {   color: mat.get-color-from-palette(mat.$orange-palette, A100) !important;                  }
-  .tc-deep-orange-A100        {   color: mat.get-color-from-palette(mat.$deep-orange-palette, A100) !important;             }
+  .fill-purple-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 50) !important;
+  }
 
-  // A200
-  .tc-red-A200                {   color: mat.get-color-from-palette(mat.$red-palette, A200) !important;                     }
-  .tc-pink-A200               {   color: mat.get-color-from-palette(mat.$pink-palette, A200) !important;                    }
-  .tc-purple-A200             {   color: mat.get-color-from-palette(mat.$purple-palette, A200) !important;                  }
-  .tc-deep-purple-A200        {   color: mat.get-color-from-palette(mat.$deep-purple-palette, A200) !important;             }
-  .tc-indigo-A200             {   color: mat.get-color-from-palette(mat.$indigo-palette, A200) !important;                  }
-  .tc-blue-A200               {   color: mat.get-color-from-palette(mat.$blue-palette, A200) !important;                    }
-  .tc-light-blue-A200         {   color: mat.get-color-from-palette(mat.$light-blue-palette, A200) !important;              }
-  .tc-cyan-A200               {   color: mat.get-color-from-palette(mat.$cyan-palette, A200) !important;                    }
-  .tc-teal-A200               {   color: mat.get-color-from-palette(mat.$teal-palette, A200) !important;                    }
-  .tc-green-A200              {   color: mat.get-color-from-palette(mat.$green-palette, A200) !important;                   }
-  .tc-light-green-A200        {   color: mat.get-color-from-palette(mat.$light-green-palette, A200) !important;             }
-  .tc-lime-A200               {   color: mat.get-color-from-palette(mat.$lime-palette, A200) !important;                    }
-  .tc-yellow-A200             {   color: mat.get-color-from-palette(mat.$yellow-palette, A200) !important;                  }
-  .tc-amber-A200              {   color: mat.get-color-from-palette(mat.$amber-palette, A200) !important;                   }
-  .tc-orange-A200             {   color: mat.get-color-from-palette(mat.$orange-palette, A200) !important;                  }
-  .tc-deep-orange-A200        {   color: mat.get-color-from-palette(mat.$deep-orange-palette, A200) !important;             }
+  .fill-deep-purple-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 50) !important;
+  }
 
-  // A400
-  .tc-red-A400                {   color: mat.get-color-from-palette(mat.$red-palette, A400) !important;                     }
-  .tc-pink-A400               {   color: mat.get-color-from-palette(mat.$pink-palette, A400) !important;                    }
-  .tc-purple-A400             {   color: mat.get-color-from-palette(mat.$purple-palette, A400) !important;                  }
-  .tc-deep-purple-A400        {   color: mat.get-color-from-palette(mat.$deep-purple-palette, A400) !important;             }
-  .tc-indigo-A400             {   color: mat.get-color-from-palette(mat.$indigo-palette, A400) !important;                  }
-  .tc-blue-A400               {   color: mat.get-color-from-palette(mat.$blue-palette, A400) !important;                    }
-  .tc-light-blue-A400         {   color: mat.get-color-from-palette(mat.$light-blue-palette, A400) !important;              }
-  .tc-cyan-A400               {   color: mat.get-color-from-palette(mat.$cyan-palette, A400) !important;                    }
-  .tc-teal-A400               {   color: mat.get-color-from-palette(mat.$teal-palette, A400) !important;                    }
-  .tc-green-A400              {   color: mat.get-color-from-palette(mat.$green-palette, A400) !important;                   }
-  .tc-light-green-A400        {   color: mat.get-color-from-palette(mat.$light-green-palette, A400) !important;             }
-  .tc-lime-A400               {   color: mat.get-color-from-palette(mat.$lime-palette, A400) !important;                    }
-  .tc-yellow-A400             {   color: mat.get-color-from-palette(mat.$yellow-palette, A400) !important;                  }
-  .tc-amber-A400              {   color: mat.get-color-from-palette(mat.$amber-palette, A400) !important;                   }
-  .tc-orange-A400             {   color: mat.get-color-from-palette(mat.$orange-palette, A400) !important;                  }
-  .tc-deep-orange-A400        {   color: mat.get-color-from-palette(mat.$deep-orange-palette, A400) !important;             }
+  .fill-indigo-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 50) !important;
+  }
 
-  // A700
-  .tc-red-A700                {   color: mat.get-color-from-palette(mat.$red-palette, A700) !important;                     }
-  .tc-pink-A700               {   color: mat.get-color-from-palette(mat.$pink-palette, A700) !important;                    }
-  .tc-purple-A700             {   color: mat.get-color-from-palette(mat.$purple-palette, A700) !important;                  }
-  .tc-deep-purple-A700        {   color: mat.get-color-from-palette(mat.$deep-purple-palette, A700) !important;             }
-  .tc-indigo-A700             {   color: mat.get-color-from-palette(mat.$indigo-palette, A700) !important;                  }
-  .tc-blue-A700               {   color: mat.get-color-from-palette(mat.$blue-palette, A700) !important;                    }
-  .tc-light-blue-A700         {   color: mat.get-color-from-palette(mat.$light-blue-palette, A700) !important;              }
-  .tc-cyan-A700               {   color: mat.get-color-from-palette(mat.$cyan-palette, A700) !important;                    }
-  .tc-teal-A700               {   color: mat.get-color-from-palette(mat.$teal-palette, A700) !important;                    }
-  .tc-green-A700              {   color: mat.get-color-from-palette(mat.$green-palette, A700) !important;                   }
-  .tc-light-green-A700        {   color: mat.get-color-from-palette(mat.$light-green-palette, A700) !important;             }
-  .tc-lime-A700               {   color: mat.get-color-from-palette(mat.$lime-palette, A700) !important;                    }
-  .tc-yellow-A700             {   color: mat.get-color-from-palette(mat.$yellow-palette, A700) !important;                  }
-  .tc-amber-A700              {   color: mat.get-color-from-palette(mat.$amber-palette, A700) !important;                   }
-  .tc-orange-A700             {   color: mat.get-color-from-palette(mat.$orange-palette, A700) !important;                  }
-  .tc-deep-orange-A700        {   color: mat.get-color-from-palette(mat.$deep-orange-palette, A700) !important;             }
+  .fill-blue-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 50) !important;
+  }
 
-  // Black
-  .tc-black                   {   color: rgba(black, 87) !important;                        }
-  .tc-black-1                 {   color: rgba(black, 54) !important;                      }
-  .tc-black-2                 {   color: rgba(black, 38) !important;                      }
-  .tc-black-3                 {   color: rgba(black, 0.12) !important;                      }
-  .tc-black-4                 {   color: black !important;                      }
+  .fill-light-blue-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 50) !important;
+  }
 
-  // White
-  .tc-white                   {   color: rgba(white, 0.7) !important;                        }
-  .tc-white-1                 {   color: rgba(white, 0.3) !important;                      }
-  .tc-white-2                 {   color: rgba(white, 0.3) !important;                      }
-  .tc-white-3                 {   color: rgba(white, 0.12) !important;                      }
-  .tc-white-4                 {   color: white !important;                      }
+  .fill-cyan-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 50) !important;
+  }
 
+  .fill-teal-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 50) !important;
+  }
 
-  // Background color
+  .fill-green-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-green-palette, 50) !important;
+  }
 
-  // 50
-  .bgc-red-50                  {   background-color: mat.get-color-from-palette(mat.$red-palette, 50) !important;            }
-  .bgc-pink-50                 {   background-color: mat.get-color-from-palette(mat.$pink-palette, 50) !important;           }
-  .bgc-purple-50               {   background-color: mat.get-color-from-palette(mat.$purple-palette, 50) !important;         }
-  .bgc-deep-purple-50          {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, 50) !important;    }
-  .bgc-indigo-50               {   background-color: mat.get-color-from-palette(mat.$indigo-palette, 50) !important;         }
-  .bgc-blue-50                 {   background-color: mat.get-color-from-palette(mat.$blue-palette, 50) !important;           }
-  .bgc-light-blue-50           {   background-color: mat.get-color-from-palette(mat.$light-blue-palette, 50) !important;     }
-  .bgc-cyan-50                 {   background-color: mat.get-color-from-palette(mat.$cyan-palette, 50) !important;           }
-  .bgc-teal-50                 {   background-color: mat.get-color-from-palette(mat.$teal-palette, 50) !important;           }
-  .bgc-green-50                {   background-color: mat.get-color-from-palette(mat.$green-palette, 50) !important;          }
-  .bgc-light-green-50          {   background-color: mat.get-color-from-palette(mat.$light-green-palette, 50) !important;    }
-  .bgc-lime-50                 {   background-color: mat.get-color-from-palette(mat.$lime-palette, 50) !important;           }
-  .bgc-yellow-50               {   background-color: mat.get-color-from-palette(mat.$yellow-palette, 50) !important;         }
-  .bgc-amber-50                {   background-color: mat.get-color-from-palette(mat.$amber-palette, 50) !important;          }
-  .bgc-orange-50               {   background-color: mat.get-color-from-palette(mat.$orange-palette, 50) !important;         }
-  .bgc-deep-orange-50          {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, 50) !important;    }
-  .bgc-brown-50                {   background-color: mat.get-color-from-palette(mat.$brown-palette, 50) !important;          }
-  .bgc-grey-50                 {   background-color: mat.get-color-from-palette(mat.$grey-palette, 50) !important;           }
-  .bgc-blue-grey-50            {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 50) !important;      }
+  .fill-light-green-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 50) !important;
+  }
+
+  .fill-lime-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 50) !important;
+  }
+
+  .fill-yellow-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 50) !important;
+  }
+
+  .fill-amber-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 50) !important;
+  }
+
+  .fill-orange-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 50) !important;
+  }
+
+  .fill-deep-orange-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 50) !important;
+  }
+
+  .fill-brown-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 50) !important;
+  }
+
+  .fill-grey-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 50) !important;
+  }
+
+  .fill-blue-grey-50 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 50) !important;
+  }
 
   // 100
-  .bgc-red-100                 {   background-color: mat.get-color-from-palette(mat.$red-palette, 100) !important;           }
-  .bgc-pink-100                {   background-color: mat.get-color-from-palette(mat.$pink-palette, 100) !important;          }
-  .bgc-purple-100              {   background-color: mat.get-color-from-palette(mat.$purple-palette, 100) !important;        }
-  .bgc-deep-purple-100         {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, 100) !important;   }
-  .bgc-indigo-100              {   background-color: mat.get-color-from-palette(mat.$indigo-palette, 100) !important;        }
-  .bgc-blue-100                {   background-color: mat.get-color-from-palette(mat.$blue-palette, 100) !important;          }
-  .bgc-light-blue-100          {   background-color: mat.get-color-from-palette(mat.$light-blue-palette, 100) !important;    }
-  .bgc-cyan-100                {   background-color: mat.get-color-from-palette(mat.$cyan-palette, 100) !important;          }
-  .bgc-teal-100                {   background-color: mat.get-color-from-palette(mat.$teal-palette, 100) !important;          }
-  .bgc-green-100               {   background-color: mat.get-color-from-palette(mat.$green-palette, 100) !important;         }
-  .bgc-light-green-100         {   background-color: mat.get-color-from-palette(mat.$light-green-palette, 100) !important;   }
-  .bgc-lime-100                {   background-color: mat.get-color-from-palette(mat.$lime-palette, 100) !important;          }
-  .bgc-yellow-100              {   background-color: mat.get-color-from-palette(mat.$yellow-palette, 100) !important;        }
-  .bgc-amber-100               {   background-color: mat.get-color-from-palette(mat.$amber-palette, 100) !important;         }
-  .bgc-orange-100              {   background-color: mat.get-color-from-palette(mat.$orange-palette, 100) !important;        }
-  .bgc-deep-orange-100         {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, 100) !important;   }
-  .bgc-brown-100               {   background-color: mat.get-color-from-palette(mat.$brown-palette, 100) !important;         }
-  .bgc-grey-100                {   background-color: mat.get-color-from-palette(mat.$grey-palette, 100) !important;          }
-  .bgc-blue-grey-100           {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 100) !important;     }
+  .fill-red-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-red-palette, 100) !important;
+  }
 
-  // 200
-  .bgc-red-200                 {   background-color: mat.get-color-from-palette(mat.$red-palette, 200) !important;           }
-  .bgc-pink-200                {   background-color: mat.get-color-from-palette(mat.$pink-palette, 200) !important;          }
-  .bgc-purple-200              {   background-color: mat.get-color-from-palette(mat.$purple-palette, 200) !important;        }
-  .bgc-deep-purple-200         {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, 200) !important;   }
-  .bgc-indigo-200              {   background-color: mat.get-color-from-palette(mat.$indigo-palette, 200) !important;        }
-  .bgc-blue-200                {   background-color: mat.get-color-from-palette(mat.$blue-palette, 200) !important;          }
-  .bgc-light-blue-200          {   background-color: mat.get-color-from-palette(mat.$light-blue-palette, 200) !important;    }
-  .bgc-cyan-200                {   background-color: mat.get-color-from-palette(mat.$cyan-palette, 200) !important;          }
-  .bgc-teal-200                {   background-color: mat.get-color-from-palette(mat.$teal-palette, 200) !important;          }
-  .bgc-green-200               {   background-color: mat.get-color-from-palette(mat.$green-palette, 200) !important;         }
-  .bgc-light-green-200         {   background-color: mat.get-color-from-palette(mat.$light-green-palette, 200) !important;   }
-  .bgc-lime-200                {   background-color: mat.get-color-from-palette(mat.$lime-palette, 200) !important;          }
-  .bgc-yellow-200              {   background-color: mat.get-color-from-palette(mat.$yellow-palette, 200) !important;        }
-  .bgc-amber-200               {   background-color: mat.get-color-from-palette(mat.$amber-palette, 200) !important;         }
-  .bgc-orange-200              {   background-color: mat.get-color-from-palette(mat.$orange-palette, 200) !important;        }
-  .bgc-deep-orange-200         {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, 200) !important;   }
-  .bgc-brown-200               {   background-color: mat.get-color-from-palette(mat.$brown-palette, 200) !important;         }
-  .bgc-grey-200                {   background-color: mat.get-color-from-palette(mat.$grey-palette, 200) !important;          }
-  .bgc-blue-grey-200           {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 200) !important;     }
+  .fill-pink-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 100) !important;
+  }
 
-  // 300
-  .bgc-red-300                 {   background-color: mat.get-color-from-palette(mat.$red-palette, 300) !important;           }
-  .bgc-pink-300                {   background-color: mat.get-color-from-palette(mat.$pink-palette, 300) !important;          }
-  .bgc-purple-300              {   background-color: mat.get-color-from-palette(mat.$purple-palette, 300) !important;        }
-  .bgc-deep-purple-300         {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, 300) !important;   }
-  .bgc-indigo-300              {   background-color: mat.get-color-from-palette(mat.$indigo-palette, 300) !important;        }
-  .bgc-blue-300                {   background-color: mat.get-color-from-palette(mat.$blue-palette, 300) !important;          }
-  .bgc-light-blue-300          {   background-color: mat.get-color-from-palette(mat.$light-blue-palette, 300) !important;    }
-  .bgc-cyan-300                {   background-color: mat.get-color-from-palette(mat.$cyan-palette, 300) !important;          }
-  .bgc-teal-300                {   background-color: mat.get-color-from-palette(mat.$teal-palette, 300) !important;          }
-  .bgc-green-300               {   background-color: mat.get-color-from-palette(mat.$green-palette, 300) !important;         }
-  .bgc-light-green-300         {   background-color: mat.get-color-from-palette(mat.$light-green-palette, 300) !important;   }
-  .bgc-lime-300                {   background-color: mat.get-color-from-palette(mat.$lime-palette, 300) !important;          }
-  .bgc-yellow-300              {   background-color: mat.get-color-from-palette(mat.$yellow-palette, 300) !important;        }
-  .bgc-amber-300               {   background-color: mat.get-color-from-palette(mat.$amber-palette, 300) !important;         }
-  .bgc-orange-300              {   background-color: mat.get-color-from-palette(mat.$orange-palette, 300) !important;        }
-  .bgc-deep-orange-300         {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, 300) !important;   }
-  .bgc-brown-300               {   background-color: mat.get-color-from-palette(mat.$brown-palette, 300) !important;         }
-  .bgc-grey-300                {   background-color: mat.get-color-from-palette(mat.$grey-palette, 300) !important;          }
-  .bgc-blue-grey-300           {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 300) !important;     }
+  .fill-purple-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 100) !important;
+  }
 
-  // 400
-  .bgc-red-400                 {   background-color: mat.get-color-from-palette(mat.$red-palette, 400) !important;           }
-  .bgc-pink-400                {   background-color: mat.get-color-from-palette(mat.$pink-palette, 400) !important;          }
-  .bgc-purple-400              {   background-color: mat.get-color-from-palette(mat.$purple-palette, 400) !important;        }
-  .bgc-deep-purple-400         {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, 400) !important;   }
-  .bgc-indigo-400              {   background-color: mat.get-color-from-palette(mat.$indigo-palette, 400) !important;        }
-  .bgc-blue-400                {   background-color: mat.get-color-from-palette(mat.$blue-palette, 400) !important;          }
-  .bgc-light-blue-400          {   background-color: mat.get-color-from-palette(mat.$light-blue-palette, 400) !important;    }
-  .bgc-cyan-400                {   background-color: mat.get-color-from-palette(mat.$cyan-palette, 400) !important;          }
-  .bgc-teal-400                {   background-color: mat.get-color-from-palette(mat.$teal-palette, 400) !important;          }
-  .bgc-green-400               {   background-color: mat.get-color-from-palette(mat.$green-palette, 400) !important;         }
-  .bgc-light-green-400         {   background-color: mat.get-color-from-palette(mat.$light-green-palette, 400) !important;   }
-  .bgc-lime-400                {   background-color: mat.get-color-from-palette(mat.$lime-palette, 400) !important;          }
-  .bgc-yellow-400              {   background-color: mat.get-color-from-palette(mat.$yellow-palette, 400) !important;        }
-  .bgc-amber-400               {   background-color: mat.get-color-from-palette(mat.$amber-palette, 400) !important;         }
-  .bgc-orange-400              {   background-color: mat.get-color-from-palette(mat.$orange-palette, 400) !important;        }
-  .bgc-deep-orange-400         {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, 400) !important;   }
-  .bgc-brown-400               {   background-color: mat.get-color-from-palette(mat.$brown-palette, 400) !important;         }
-  .bgc-grey-400                {   background-color: mat.get-color-from-palette(mat.$grey-palette, 400) !important;          }
-  .bgc-blue-grey-400           {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 400) !important;     }
+  .fill-deep-purple-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 100) !important;
+  }
 
-  // 500
-  .bgc-red-500                 {   background-color: mat.get-color-from-palette(mat.$red-palette, 500) !important;           }
-  .bgc-pink-500                {   background-color: mat.get-color-from-palette(mat.$pink-palette, 500) !important;          }
-  .bgc-purple-500              {   background-color: mat.get-color-from-palette(mat.$purple-palette, 500) !important;        }
-  .bgc-deep-purple-500         {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, 500) !important;   }
-  .bgc-indigo-500              {   background-color: mat.get-color-from-palette(mat.$indigo-palette, 500) !important;        }
-  .bgc-blue-500                {   background-color: mat.get-color-from-palette(mat.$blue-palette, 500) !important;          }
-  .bgc-light-blue-500          {   background-color: mat.get-color-from-palette(mat.$light-blue-palette, 500) !important;    }
-  .bgc-cyan-500                {   background-color: mat.get-color-from-palette(mat.$cyan-palette, 500) !important;          }
-  .bgc-teal-500                {   background-color: mat.get-color-from-palette(mat.$teal-palette, 500) !important;          }
-  .bgc-green-500               {   background-color: mat.get-color-from-palette(mat.$green-palette, 500) !important;         }
-  .bgc-light-green-500         {   background-color: mat.get-color-from-palette(mat.$light-green-palette, 500) !important;   }
-  .bgc-lime-500                {   background-color: mat.get-color-from-palette(mat.$lime-palette, 500) !important;          }
-  .bgc-yellow-500              {   background-color: mat.get-color-from-palette(mat.$yellow-palette, 500) !important;        }
-  .bgc-amber-500               {   background-color: mat.get-color-from-palette(mat.$amber-palette, 500) !important;         }
-  .bgc-orange-500              {   background-color: mat.get-color-from-palette(mat.$orange-palette, 500) !important;        }
-  .bgc-deep-orange-500         {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, 500) !important;   }
-  .bgc-brown-500               {   background-color: mat.get-color-from-palette(mat.$brown-palette, 500) !important;         }
-  .bgc-grey-500                {   background-color: mat.get-color-from-palette(mat.$grey-palette, 500) !important;          }
-  .bgc-blue-grey-500           {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 500) !important;     }
+  .fill-indigo-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 100) !important;
+  }
 
-  // 600
-  .bgc-red-600                 {   background-color: mat.get-color-from-palette(mat.$red-palette, 600) !important;           }
-  .bgc-pink-600                {   background-color: mat.get-color-from-palette(mat.$pink-palette, 600) !important;          }
-  .bgc-purple-600              {   background-color: mat.get-color-from-palette(mat.$purple-palette, 600) !important;        }
-  .bgc-deep-purple-600         {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, 600) !important;   }
-  .bgc-indigo-600              {   background-color: mat.get-color-from-palette(mat.$indigo-palette, 600) !important;        }
-  .bgc-blue-600                {   background-color: mat.get-color-from-palette(mat.$blue-palette, 600) !important;          }
-  .bgc-light-blue-600          {   background-color: mat.get-color-from-palette(mat.$light-blue-palette, 600) !important;    }
-  .bgc-cyan-600                {   background-color: mat.get-color-from-palette(mat.$cyan-palette, 600) !important;          }
-  .bgc-teal-600                {   background-color: mat.get-color-from-palette(mat.$teal-palette, 600) !important;          }
-  .bgc-green-600               {   background-color: mat.get-color-from-palette(mat.$green-palette, 600) !important;         }
-  .bgc-light-green-600         {   background-color: mat.get-color-from-palette(mat.$light-green-palette, 600) !important;   }
-  .bgc-lime-600                {   background-color: mat.get-color-from-palette(mat.$lime-palette, 600) !important;          }
-  .bgc-yellow-600              {   background-color: mat.get-color-from-palette(mat.$yellow-palette, 600) !important;        }
-  .bgc-amber-600               {   background-color: mat.get-color-from-palette(mat.$amber-palette, 600) !important;         }
-  .bgc-orange-600              {   background-color: mat.get-color-from-palette(mat.$orange-palette, 600) !important;        }
-  .bgc-deep-orange-600         {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, 600) !important;   }
-  .bgc-brown-600               {   background-color: mat.get-color-from-palette(mat.$brown-palette, 600) !important;         }
-  .bgc-grey-600                {   background-color: mat.get-color-from-palette(mat.$grey-palette, 600) !important;          }
-  .bgc-blue-grey-600           {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 600) !important;     }
+  .fill-blue-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 100) !important;
+  }
 
-  // 700
-  .bgc-red-700                 {   background-color: mat.get-color-from-palette(mat.$red-palette, 700) !important;           }
-  .bgc-pink-700                {   background-color: mat.get-color-from-palette(mat.$pink-palette, 700) !important;          }
-  .bgc-purple-700              {   background-color: mat.get-color-from-palette(mat.$purple-palette, 700) !important;        }
-  .bgc-deep-purple-700         {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, 700) !important;   }
-  .bgc-indigo-700              {   background-color: mat.get-color-from-palette(mat.$indigo-palette, 700) !important;        }
-  .bgc-blue-700                {   background-color: mat.get-color-from-palette(mat.$blue-palette, 700) !important;          }
-  .bgc-light-blue-700          {   background-color: mat.get-color-from-palette(mat.$light-blue-palette, 700) !important;    }
-  .bgc-cyan-700                {   background-color: mat.get-color-from-palette(mat.$cyan-palette, 700) !important;          }
-  .bgc-teal-700                {   background-color: mat.get-color-from-palette(mat.$teal-palette, 700) !important;          }
-  .bgc-green-700               {   background-color: mat.get-color-from-palette(mat.$green-palette, 700) !important;         }
-  .bgc-light-green-700         {   background-color: mat.get-color-from-palette(mat.$light-green-palette, 700) !important;   }
-  .bgc-lime-700                {   background-color: mat.get-color-from-palette(mat.$lime-palette, 700) !important;          }
-  .bgc-yellow-700              {   background-color: mat.get-color-from-palette(mat.$yellow-palette, 700) !important;        }
-  .bgc-amber-700               {   background-color: mat.get-color-from-palette(mat.$amber-palette, 700) !important;         }
-  .bgc-orange-700              {   background-color: mat.get-color-from-palette(mat.$orange-palette, 700) !important;        }
-  .bgc-deep-orange-700         {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, 700) !important;   }
-  .bgc-brown-700               {   background-color: mat.get-color-from-palette(mat.$brown-palette, 700) !important;         }
-  .bgc-grey-700                {   background-color: mat.get-color-from-palette(mat.$grey-palette, 700) !important;          }
-  .bgc-blue-grey-700           {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 700) !important;     }
+  .fill-light-blue-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 100) !important;
+  }
 
-  // 800
-  .bgc-red-800                 {   background-color: mat.get-color-from-palette(mat.$red-palette, 800) !important;           }
-  .bgc-pink-800                {   background-color: mat.get-color-from-palette(mat.$pink-palette, 800) !important;          }
-  .bgc-purple-800              {   background-color: mat.get-color-from-palette(mat.$purple-palette, 800) !important;        }
-  .bgc-deep-purple-800         {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, 800) !important;   }
-  .bgc-indigo-800              {   background-color: mat.get-color-from-palette(mat.$indigo-palette, 800) !important;        }
-  .bgc-blue-800                {   background-color: mat.get-color-from-palette(mat.$blue-palette, 800) !important;          }
-  .bgc-light-blue-800          {   background-color: mat.get-color-from-palette(mat.$light-blue-palette, 800) !important;    }
-  .bgc-cyan-800                {   background-color: mat.get-color-from-palette(mat.$cyan-palette, 800) !important;          }
-  .bgc-teal-800                {   background-color: mat.get-color-from-palette(mat.$teal-palette, 800) !important;          }
-  .bgc-green-800               {   background-color: mat.get-color-from-palette(mat.$green-palette, 800) !important;         }
-  .bgc-light-green-800         {   background-color: mat.get-color-from-palette(mat.$light-green-palette, 800) !important;   }
-  .bgc-lime-800                {   background-color: mat.get-color-from-palette(mat.$lime-palette, 800) !important;          }
-  .bgc-yellow-800              {   background-color: mat.get-color-from-palette(mat.$yellow-palette, 800) !important;        }
-  .bgc-amber-800               {   background-color: mat.get-color-from-palette(mat.$amber-palette, 800) !important;         }
-  .bgc-orange-800              {   background-color: mat.get-color-from-palette(mat.$orange-palette, 800) !important;        }
-  .bgc-deep-orange-800         {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, 800) !important;   }
-  .bgc-brown-800               {   background-color: mat.get-color-from-palette(mat.$brown-palette, 800) !important;         }
-  .bgc-grey-800                {   background-color: mat.get-color-from-palette(mat.$grey-palette, 800) !important;          }
-  .bgc-blue-grey-800           {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 800) !important;     }
+  .fill-cyan-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 100) !important;
+  }
 
-  // 900
-  .bgc-red-900                 {   background-color: mat.get-color-from-palette(mat.$red-palette, 900) !important;           }
-  .bgc-pink-900                {   background-color: mat.get-color-from-palette(mat.$pink-palette, 900) !important;          }
-  .bgc-purple-900              {   background-color: mat.get-color-from-palette(mat.$purple-palette, 900) !important;        }
-  .bgc-deep-purple-900         {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, 900) !important;   }
-  .bgc-indigo-900              {   background-color: mat.get-color-from-palette(mat.$indigo-palette, 900) !important;        }
-  .bgc-blue-900                {   background-color: mat.get-color-from-palette(mat.$blue-palette, 900) !important;          }
-  .bgc-light-blue-900          {   background-color: mat.get-color-from-palette(mat.$light-blue-palette, 900) !important;    }
-  .bgc-cyan-900                {   background-color: mat.get-color-from-palette(mat.$cyan-palette, 900) !important;          }
-  .bgc-teal-900                {   background-color: mat.get-color-from-palette(mat.$teal-palette, 900) !important;          }
-  .bgc-green-900               {   background-color: mat.get-color-from-palette(mat.$green-palette, 900) !important;         }
-  .bgc-light-green-900         {   background-color: mat.get-color-from-palette(mat.$light-green-palette, 900) !important;   }
-  .bgc-lime-900                {   background-color: mat.get-color-from-palette(mat.$lime-palette, 900) !important;          }
-  .bgc-yellow-900              {   background-color: mat.get-color-from-palette(mat.$yellow-palette, 900) !important;        }
-  .bgc-amber-900               {   background-color: mat.get-color-from-palette(mat.$amber-palette, 900) !important;         }
-  .bgc-orange-900              {   background-color: mat.get-color-from-palette(mat.$orange-palette, 900) !important;        }
-  .bgc-deep-orange-900         {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, 900) !important;   }
-  .bgc-brown-900               {   background-color: mat.get-color-from-palette(mat.$brown-palette, 900) !important;         }
-  .bgc-grey-900                {   background-color: mat.get-color-from-palette(mat.$grey-palette, 900) !important;          }
-  .bgc-blue-grey-900           {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 900) !important;     }
+  .fill-teal-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 100) !important;
+  }
 
-  // A100
-  .bgc-red-A100                {   background-color: mat.get-color-from-palette(mat.$red-palette, A100) !important;          }
-  .bgc-pink-A100               {   background-color: mat.get-color-from-palette(mat.$pink-palette, A100) !important;         }
-  .bgc-purple-A100             {   background-color: mat.get-color-from-palette(mat.$purple-palette, A100) !important;       }
-  .bgc-deep-purple-A100        {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, A100) !important;  }
-  .bgc-indigo-A100             {   background-color: mat.get-color-from-palette(mat.$indigo-palette, A100) !important;       }
-  .bgc-blue-A100               {   background-color: mat.get-color-from-palette(mat.$blue-palette, A100) !important;         }
-  .bgc-light-blue-A100         {   background-color: mat.get-color-from-palette(mat.$light-blue-palette, A100) !important;   }
-  .bgc-cyan-A100               {   background-color: mat.get-color-from-palette(mat.$cyan-palette, A100) !important;         }
-  .bgc-teal-A100               {   background-color: mat.get-color-from-palette(mat.$teal-palette, A100) !important;         }
-  .bgc-green-A100              {   background-color: mat.get-color-from-palette(mat.$green-palette, A100) !important;        }
-  .bgc-light-green-A100        {   background-color: mat.get-color-from-palette(mat.$light-green-palette, A100) !important;  }
-  .bgc-lime-A100               {   background-color: mat.get-color-from-palette(mat.$lime-palette, A100) !important;         }
-  .bgc-yellow-A100             {   background-color: mat.get-color-from-palette(mat.$yellow-palette, A100) !important;       }
-  .bgc-amber-A100              {   background-color: mat.get-color-from-palette(mat.$amber-palette, A100) !important;        }
-  .bgc-orange-A100             {   background-color: mat.get-color-from-palette(mat.$orange-palette, A100) !important;       }
-  .bgc-deep-orange-A100        {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, A100) !important;  }
+  .fill-green-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-green-palette, 100) !important;
+  }
 
-  // A200
-  .bgc-red-A200                {   background-color: mat.get-color-from-palette(mat.$red-palette, A200) !important;          }
-  .bgc-pink-A200               {   background-color: mat.get-color-from-palette(mat.$pink-palette, A200) !important;         }
-  .bgc-purple-A200             {   background-color: mat.get-color-from-palette(mat.$purple-palette, A200) !important;       }
-  .bgc-deep-purple-A200        {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, A200) !important;  }
-  .bgc-indigo-A200             {   background-color: mat.get-color-from-palette(mat.$indigo-palette, A200) !important;       }
-  .bgc-blue-A200               {   background-color: mat.get-color-from-palette(mat.$blue-palette, A200) !important;         }
-  .bgc-light-blue-A200         {   background-color: mat.get-color-from-palette(mat.$light-blue-palette, A200) !important;   }
-  .bgc-cyan-A200               {   background-color: mat.get-color-from-palette(mat.$cyan-palette, A200) !important;         }
-  .bgc-teal-A200               {   background-color: mat.get-color-from-palette(mat.$teal-palette, A200) !important;         }
-  .bgc-green-A200              {   background-color: mat.get-color-from-palette(mat.$green-palette, A200) !important;        }
-  .bgc-light-green-A200        {   background-color: mat.get-color-from-palette(mat.$light-green-palette, A200) !important;  }
-  .bgc-lime-A200               {   background-color: mat.get-color-from-palette(mat.$lime-palette, A200) !important;         }
-  .bgc-yellow-A200             {   background-color: mat.get-color-from-palette(mat.$yellow-palette, A200) !important;       }
-  .bgc-amber-A200              {   background-color: mat.get-color-from-palette(mat.$amber-palette, A200) !important;        }
-  .bgc-orange-A200             {   background-color: mat.get-color-from-palette(mat.$orange-palette, A200) !important;       }
-  .bgc-deep-orange-A200        {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, A200) !important;  }
+  .fill-light-green-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 100) !important;
+  }
 
-  // A400
-  .bgc-red-A400                {   background-color: mat.get-color-from-palette(mat.$red-palette, A400) !important;          }
-  .bgc-pink-A400               {   background-color: mat.get-color-from-palette(mat.$pink-palette, A400) !important;         }
-  .bgc-purple-A400             {   background-color: mat.get-color-from-palette(mat.$purple-palette, A400) !important;       }
-  .bgc-deep-purple-A400        {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, A400) !important;  }
-  .bgc-indigo-A400             {   background-color: mat.get-color-from-palette(mat.$indigo-palette, A400) !important;       }
-  .bgc-blue-A400               {   background-color: mat.get-color-from-palette(mat.$blue-palette, A400) !important;         }
-  .bgc-light-blue-A400         {   background-color: mat.get-color-from-palette(mat.$light-blue-palette, A400) !important;   }
-  .bgc-cyan-A400               {   background-color: mat.get-color-from-palette(mat.$cyan-palette, A400) !important;         }
-  .bgc-teal-A400               {   background-color: mat.get-color-from-palette(mat.$teal-palette, A400) !important;         }
-  .bgc-green-A400              {   background-color: mat.get-color-from-palette(mat.$green-palette, A400) !important;        }
-  .bgc-light-green-A400        {   background-color: mat.get-color-from-palette(mat.$light-green-palette, A400) !important;  }
-  .bgc-lime-A400               {   background-color: mat.get-color-from-palette(mat.$lime-palette, A400) !important;         }
-  .bgc-yellow-A400             {   background-color: mat.get-color-from-palette(mat.$yellow-palette, A400) !important;       }
-  .bgc-amber-A400              {   background-color: mat.get-color-from-palette(mat.$amber-palette, A400) !important;        }
-  .bgc-orange-A400             {   background-color: mat.get-color-from-palette(mat.$orange-palette, A400) !important;       }
-  .bgc-deep-orange-A400        {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, A400) !important;  }
+  .fill-lime-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 100) !important;
+  }
 
-  // A700
-  .bgc-red-A700                {   background-color: mat.get-color-from-palette(mat.$red-palette, A700) !important;          }
-  .bgc-pink-A700               {   background-color: mat.get-color-from-palette(mat.$pink-palette, A700) !important;         }
-  .bgc-purple-A700             {   background-color: mat.get-color-from-palette(mat.$purple-palette, A700) !important;       }
-  .bgc-deep-purple-A700        {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, A700) !important;  }
-  .bgc-indigo-A700             {   background-color: mat.get-color-from-palette(mat.$indigo-palette, A700) !important;       }
-  .bgc-blue-A700               {   background-color: mat.get-color-from-palette(mat.$blue-palette, A700) !important;         }
-  .bgc-light-blue-A700         {   background-color: mat.get-color-from-palette(mat.$light-blue-palette, A700) !important;   }
-  .bgc-cyan-A700               {   background-color: mat.get-color-from-palette(mat.$cyan-palette, A700) !important;         }
-  .bgc-teal-A700               {   background-color: mat.get-color-from-palette(mat.$teal-palette, A700) !important;         }
-  .bgc-green-A700              {   background-color: mat.get-color-from-palette(mat.$green-palette, A700) !important;        }
-  .bgc-light-green-A700        {   background-color: mat.get-color-from-palette(mat.$light-green-palette, A700) !important;  }
-  .bgc-lime-A700               {   background-color: mat.get-color-from-palette(mat.$lime-palette, A700) !important;         }
-  .bgc-yellow-A700             {   background-color: mat.get-color-from-palette(mat.$yellow-palette, A700) !important;       }
-  .bgc-amber-A700              {   background-color: mat.get-color-from-palette(mat.$amber-palette, A700) !important;        }
-  .bgc-orange-A700             {   background-color: mat.get-color-from-palette(mat.$orange-palette, A700) !important;       }
-  .bgc-deep-orange-A700        {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, A700) !important;  }
+  .fill-yellow-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 100) !important;
+  }
 
-  // Black
-  .bgc-black                   {   background-color: rgba(black, 87) !important;             }
-  .bgc-black-1                 {   background-color: rgba(black, 54) !important;           }
-  .bgc-black-2                 {   background-color: rgba(black, 38) !important;           }
-  .bgc-black-3                 {   background-color: rgba(black, 0.12) !important;           }
-  .bgc-black-4                 {   background-color: black !important;           }
+  .fill-amber-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 100) !important;
+  }
 
-  // White
-  .bgc-white                   {   background-color: rgba(white, 0.7) !important;             }
-  .bgc-white-1                 {   background-color: rgba(white, 0.3) !important;           }
-  .bgc-white-2                 {   background-color: rgba(white, 0.3) !important;           }
-  .bgc-white-3                 {   background-color: rgba(white, 0.12) !important;           }
-  .bgc-white-4                 {   background-color: white !important;           }
+  .fill-orange-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 100) !important;
+  }
 
+  .fill-deep-orange-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 100) !important;
+  }
 
-  // Fill color
+  .fill-brown-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 100) !important;
+  }
 
-  // 50
-  .fill-red-50                  {   fill: mat.get-color-from-palette(mat.$red-palette, 50) !important;                       }
-  .fill-pink-50                 {   fill: mat.get-color-from-palette(mat.$pink-palette, 50) !important;                      }
-  .fill-purple-50               {   fill: mat.get-color-from-palette(mat.$purple-palette, 50) !important;                    }
-  .fill-deep-purple-50          {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, 50) !important;               }
-  .fill-indigo-50               {   fill: mat.get-color-from-palette(mat.$indigo-palette, 50) !important;                    }
-  .fill-blue-50                 {   fill: mat.get-color-from-palette(mat.$blue-palette, 50) !important;                      }
-  .fill-light-blue-50           {   fill: mat.get-color-from-palette(mat.$light-blue-palette, 50) !important;                }
-  .fill-cyan-50                 {   fill: mat.get-color-from-palette(mat.$cyan-palette, 50) !important;                      }
-  .fill-teal-50                 {   fill: mat.get-color-from-palette(mat.$teal-palette, 50) !important;                      }
-  .fill-green-50                {   fill: mat.get-color-from-palette(mat.$green-palette, 50) !important;                     }
-  .fill-light-green-50          {   fill: mat.get-color-from-palette(mat.$light-green-palette, 50) !important;               }
-  .fill-lime-50                 {   fill: mat.get-color-from-palette(mat.$lime-palette, 50) !important;                      }
-  .fill-yellow-50               {   fill: mat.get-color-from-palette(mat.$yellow-palette, 50) !important;                    }
-  .fill-amber-50                {   fill: mat.get-color-from-palette(mat.$amber-palette, 50) !important;                     }
-  .fill-orange-50               {   fill: mat.get-color-from-palette(mat.$orange-palette, 50) !important;                    }
-  .fill-deep-orange-50          {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, 50) !important;               }
-  .fill-brown-50                {   fill: mat.get-color-from-palette(mat.$brown-palette, 50) !important;                     }
-  .fill-grey-50                 {   fill: mat.get-color-from-palette(mat.$grey-palette, 50) !important;                      }
-  .fill-blue-grey-50            {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, 50) !important;                 }
+  .fill-grey-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 100) !important;
+  }
 
-  // 100
-  .fill-red-100                 {   fill: mat.get-color-from-palette(mat.$red-palette, 100) !important;                      }
-  .fill-pink-100                {   fill: mat.get-color-from-palette(mat.$pink-palette, 100) !important;                     }
-  .fill-purple-100              {   fill: mat.get-color-from-palette(mat.$purple-palette, 100) !important;                   }
-  .fill-deep-purple-100         {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, 100) !important;              }
-  .fill-indigo-100              {   fill: mat.get-color-from-palette(mat.$indigo-palette, 100) !important;                   }
-  .fill-blue-100                {   fill: mat.get-color-from-palette(mat.$blue-palette, 100) !important;                     }
-  .fill-light-blue-100          {   fill: mat.get-color-from-palette(mat.$light-blue-palette, 100) !important;               }
-  .fill-cyan-100                {   fill: mat.get-color-from-palette(mat.$cyan-palette, 100) !important;                     }
-  .fill-teal-100                {   fill: mat.get-color-from-palette(mat.$teal-palette, 100) !important;                     }
-  .fill-green-100               {   fill: mat.get-color-from-palette(mat.$green-palette, 100) !important;                    }
-  .fill-light-green-100         {   fill: mat.get-color-from-palette(mat.$light-green-palette, 100) !important;              }
-  .fill-lime-100                {   fill: mat.get-color-from-palette(mat.$lime-palette, 100) !important;                     }
-  .fill-yellow-100              {   fill: mat.get-color-from-palette(mat.$yellow-palette, 100) !important;                   }
-  .fill-amber-100               {   fill: mat.get-color-from-palette(mat.$amber-palette, 100) !important;                    }
-  .fill-orange-100              {   fill: mat.get-color-from-palette(mat.$orange-palette, 100) !important;                   }
-  .fill-deep-orange-100         {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, 100) !important;              }
-  .fill-brown-100               {   fill: mat.get-color-from-palette(mat.$brown-palette, 100) !important;                    }
-  .fill-grey-100                {   fill: mat.get-color-from-palette(mat.$grey-palette, 100) !important;                     }
-  .fill-blue-grey-100           {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, 100) !important;                }
+  .fill-blue-grey-100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 100) !important;
+  }
 
   // 200
-  .fill-red-200                 {   fill: mat.get-color-from-palette(mat.$red-palette, 200) !important;                      }
-  .fill-pink-200                {   fill: mat.get-color-from-palette(mat.$pink-palette, 200) !important;                     }
-  .fill-purple-200              {   fill: mat.get-color-from-palette(mat.$purple-palette, 200) !important;                   }
-  .fill-deep-purple-200         {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, 200) !important;              }
-  .fill-indigo-200              {   fill: mat.get-color-from-palette(mat.$indigo-palette, 200) !important;                   }
-  .fill-blue-200                {   fill: mat.get-color-from-palette(mat.$blue-palette, 200) !important;                     }
-  .fill-light-blue-200          {   fill: mat.get-color-from-palette(mat.$light-blue-palette, 200) !important;               }
-  .fill-cyan-200                {   fill: mat.get-color-from-palette(mat.$cyan-palette, 200) !important;                     }
-  .fill-teal-200                {   fill: mat.get-color-from-palette(mat.$teal-palette, 200) !important;                     }
-  .fill-green-200               {   fill: mat.get-color-from-palette(mat.$green-palette, 200) !important;                    }
-  .fill-light-green-200         {   fill: mat.get-color-from-palette(mat.$light-green-palette, 200) !important;              }
-  .fill-lime-200                {   fill: mat.get-color-from-palette(mat.$lime-palette, 200) !important;                     }
-  .fill-yellow-200              {   fill: mat.get-color-from-palette(mat.$yellow-palette, 200) !important;                   }
-  .fill-amber-200               {   fill: mat.get-color-from-palette(mat.$amber-palette, 200) !important;                    }
-  .fill-orange-200              {   fill: mat.get-color-from-palette(mat.$orange-palette, 200) !important;                   }
-  .fill-deep-orange-200         {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, 200) !important;              }
-  .fill-brown-200               {   fill: mat.get-color-from-palette(mat.$brown-palette, 200) !important;                    }
-  .fill-grey-200                {   fill: mat.get-color-from-palette(mat.$grey-palette, 200) !important;                     }
-  .fill-blue-grey-200           {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, 200) !important;                }
+  .fill-red-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-red-palette, 200) !important;
+  }
+
+  .fill-pink-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 200) !important;
+  }
+
+  .fill-purple-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 200) !important;
+  }
+
+  .fill-deep-purple-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 200) !important;
+  }
+
+  .fill-indigo-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 200) !important;
+  }
+
+  .fill-blue-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 200) !important;
+  }
+
+  .fill-light-blue-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 200) !important;
+  }
+
+  .fill-cyan-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 200) !important;
+  }
+
+  .fill-teal-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 200) !important;
+  }
+
+  .fill-green-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-green-palette, 200) !important;
+  }
+
+  .fill-light-green-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 200) !important;
+  }
+
+  .fill-lime-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 200) !important;
+  }
+
+  .fill-yellow-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 200) !important;
+  }
+
+  .fill-amber-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 200) !important;
+  }
+
+  .fill-orange-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 200) !important;
+  }
+
+  .fill-deep-orange-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 200) !important;
+  }
+
+  .fill-brown-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 200) !important;
+  }
+
+  .fill-grey-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 200) !important;
+  }
+
+  .fill-blue-grey-200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 200) !important;
+  }
 
   // 300
-  .fill-red-300                 {   fill: mat.get-color-from-palette(mat.$red-palette, 300) !important;                      }
-  .fill-pink-300                {   fill: mat.get-color-from-palette(mat.$pink-palette, 300) !important;                     }
-  .fill-purple-300              {   fill: mat.get-color-from-palette(mat.$purple-palette, 300) !important;                   }
-  .fill-deep-purple-300         {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, 300) !important;              }
-  .fill-indigo-300              {   fill: mat.get-color-from-palette(mat.$indigo-palette, 300) !important;                   }
-  .fill-blue-300                {   fill: mat.get-color-from-palette(mat.$blue-palette, 300) !important;                     }
-  .fill-light-blue-300          {   fill: mat.get-color-from-palette(mat.$light-blue-palette, 300) !important;               }
-  .fill-cyan-300                {   fill: mat.get-color-from-palette(mat.$cyan-palette, 300) !important;                     }
-  .fill-teal-300                {   fill: mat.get-color-from-palette(mat.$teal-palette, 300) !important;                     }
-  .fill-green-300               {   fill: mat.get-color-from-palette(mat.$green-palette, 300) !important;                    }
-  .fill-light-green-300         {   fill: mat.get-color-from-palette(mat.$light-green-palette, 300) !important;              }
-  .fill-lime-300                {   fill: mat.get-color-from-palette(mat.$lime-palette, 300) !important;                     }
-  .fill-yellow-300              {   fill: mat.get-color-from-palette(mat.$yellow-palette, 300) !important;                   }
-  .fill-amber-300               {   fill: mat.get-color-from-palette(mat.$amber-palette, 300) !important;                    }
-  .fill-orange-300              {   fill: mat.get-color-from-palette(mat.$orange-palette, 300) !important;                   }
-  .fill-deep-orange-300         {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, 300) !important;              }
-  .fill-brown-300               {   fill: mat.get-color-from-palette(mat.$brown-palette, 300) !important;                    }
-  .fill-grey-300                {   fill: mat.get-color-from-palette(mat.$grey-palette, 300) !important;                     }
-  .fill-blue-grey-300           {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, 300) !important;                }
+  .fill-red-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-red-palette, 300) !important;
+  }
+
+  .fill-pink-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 300) !important;
+  }
+
+  .fill-purple-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 300) !important;
+  }
+
+  .fill-deep-purple-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 300) !important;
+  }
+
+  .fill-indigo-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 300) !important;
+  }
+
+  .fill-blue-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 300) !important;
+  }
+
+  .fill-light-blue-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 300) !important;
+  }
+
+  .fill-cyan-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 300) !important;
+  }
+
+  .fill-teal-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 300) !important;
+  }
+
+  .fill-green-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-green-palette, 300) !important;
+  }
+
+  .fill-light-green-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 300) !important;
+  }
+
+  .fill-lime-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 300) !important;
+  }
+
+  .fill-yellow-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 300) !important;
+  }
+
+  .fill-amber-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 300) !important;
+  }
+
+  .fill-orange-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 300) !important;
+  }
+
+  .fill-deep-orange-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 300) !important;
+  }
+
+  .fill-brown-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 300) !important;
+  }
+
+  .fill-grey-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 300) !important;
+  }
+
+  .fill-blue-grey-300 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 300) !important;
+  }
 
   // 400
-  .fill-red-400                 {   fill: mat.get-color-from-palette(mat.$red-palette, 400) !important;                      }
-  .fill-pink-400                {   fill: mat.get-color-from-palette(mat.$pink-palette, 400) !important;                     }
-  .fill-purple-400              {   fill: mat.get-color-from-palette(mat.$purple-palette, 400) !important;                   }
-  .fill-deep-purple-400         {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, 400) !important;              }
-  .fill-indigo-400              {   fill: mat.get-color-from-palette(mat.$indigo-palette, 400) !important;                   }
-  .fill-blue-400                {   fill: mat.get-color-from-palette(mat.$blue-palette, 400) !important;                     }
-  .fill-light-blue-400          {   fill: mat.get-color-from-palette(mat.$light-blue-palette, 400) !important;               }
-  .fill-cyan-400                {   fill: mat.get-color-from-palette(mat.$cyan-palette, 400) !important;                     }
-  .fill-teal-400                {   fill: mat.get-color-from-palette(mat.$teal-palette, 400) !important;                     }
-  .fill-green-400               {   fill: mat.get-color-from-palette(mat.$green-palette, 400) !important;                    }
-  .fill-light-green-400         {   fill: mat.get-color-from-palette(mat.$light-green-palette, 400) !important;              }
-  .fill-lime-400                {   fill: mat.get-color-from-palette(mat.$lime-palette, 400) !important;                     }
-  .fill-yellow-400              {   fill: mat.get-color-from-palette(mat.$yellow-palette, 400) !important;                   }
-  .fill-amber-400               {   fill: mat.get-color-from-palette(mat.$amber-palette, 400) !important;                    }
-  .fill-orange-400              {   fill: mat.get-color-from-palette(mat.$orange-palette, 400) !important;                   }
-  .fill-deep-orange-400         {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, 400) !important;              }
-  .fill-brown-400               {   fill: mat.get-color-from-palette(mat.$brown-palette, 400) !important;                    }
-  .fill-grey-400                {   fill: mat.get-color-from-palette(mat.$grey-palette, 400) !important;                     }
-  .fill-blue-grey-400           {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, 400) !important;                }
+  .fill-red-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-red-palette, 400) !important;
+  }
+
+  .fill-pink-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 400) !important;
+  }
+
+  .fill-purple-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 400) !important;
+  }
+
+  .fill-deep-purple-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 400) !important;
+  }
+
+  .fill-indigo-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 400) !important;
+  }
+
+  .fill-blue-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 400) !important;
+  }
+
+  .fill-light-blue-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 400) !important;
+  }
+
+  .fill-cyan-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 400) !important;
+  }
+
+  .fill-teal-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 400) !important;
+  }
+
+  .fill-green-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-green-palette, 400) !important;
+  }
+
+  .fill-light-green-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 400) !important;
+  }
+
+  .fill-lime-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 400) !important;
+  }
+
+  .fill-yellow-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 400) !important;
+  }
+
+  .fill-amber-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 400) !important;
+  }
+
+  .fill-orange-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 400) !important;
+  }
+
+  .fill-deep-orange-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 400) !important;
+  }
+
+  .fill-brown-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 400) !important;
+  }
+
+  .fill-grey-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 400) !important;
+  }
+
+  .fill-blue-grey-400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 400) !important;
+  }
 
   // 500
-  .fill-red-500                 {   fill: mat.get-color-from-palette(mat.$red-palette, 500) !important;                      }
-  .fill-pink-500                {   fill: mat.get-color-from-palette(mat.$pink-palette, 500) !important;                     }
-  .fill-purple-500              {   fill: mat.get-color-from-palette(mat.$purple-palette, 500) !important;                   }
-  .fill-deep-purple-500         {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, 500) !important;              }
-  .fill-indigo-500              {   fill: mat.get-color-from-palette(mat.$indigo-palette, 500) !important;                   }
-  .fill-blue-500                {   fill: mat.get-color-from-palette(mat.$blue-palette, 500) !important;                     }
-  .fill-light-blue-500          {   fill: mat.get-color-from-palette(mat.$light-blue-palette, 500) !important;               }
-  .fill-cyan-500                {   fill: mat.get-color-from-palette(mat.$cyan-palette, 500) !important;                     }
-  .fill-teal-500                {   fill: mat.get-color-from-palette(mat.$teal-palette, 500) !important;                     }
-  .fill-green-500               {   fill: mat.get-color-from-palette(mat.$green-palette, 500) !important;                    }
-  .fill-light-green-500         {   fill: mat.get-color-from-palette(mat.$light-green-palette, 500) !important;              }
-  .fill-lime-500                {   fill: mat.get-color-from-palette(mat.$lime-palette, 500) !important;                     }
-  .fill-yellow-500              {   fill: mat.get-color-from-palette(mat.$yellow-palette, 500) !important;                   }
-  .fill-amber-500               {   fill: mat.get-color-from-palette(mat.$amber-palette, 500) !important;                    }
-  .fill-orange-500              {   fill: mat.get-color-from-palette(mat.$orange-palette, 500) !important;                   }
-  .fill-deep-orange-500         {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, 500) !important;              }
-  .fill-brown-500               {   fill: mat.get-color-from-palette(mat.$brown-palette, 500) !important;                    }
-  .fill-grey-500                {   fill: mat.get-color-from-palette(mat.$grey-palette, 500) !important;                     }
-  .fill-blue-grey-500           {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, 500) !important;                }
+  .fill-red-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-red-palette, 500) !important;
+  }
+
+  .fill-pink-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 500) !important;
+  }
+
+  .fill-purple-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 500) !important;
+  }
+
+  .fill-deep-purple-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 500) !important;
+  }
+
+  .fill-indigo-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 500) !important;
+  }
+
+  .fill-blue-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 500) !important;
+  }
+
+  .fill-light-blue-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 500) !important;
+  }
+
+  .fill-cyan-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 500) !important;
+  }
+
+  .fill-teal-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 500) !important;
+  }
+
+  .fill-green-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-green-palette, 500) !important;
+  }
+
+  .fill-light-green-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 500) !important;
+  }
+
+  .fill-lime-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 500) !important;
+  }
+
+  .fill-yellow-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 500) !important;
+  }
+
+  .fill-amber-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 500) !important;
+  }
+
+  .fill-orange-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 500) !important;
+  }
+
+  .fill-deep-orange-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 500) !important;
+  }
+
+  .fill-brown-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 500) !important;
+  }
+
+  .fill-grey-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 500) !important;
+  }
+
+  .fill-blue-grey-500 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 500) !important;
+  }
 
   // 600
-  .fill-red-600                 {   fill: mat.get-color-from-palette(mat.$red-palette, 600) !important;                      }
-  .fill-pink-600                {   fill: mat.get-color-from-palette(mat.$pink-palette, 600) !important;                     }
-  .fill-purple-600              {   fill: mat.get-color-from-palette(mat.$purple-palette, 600) !important;                   }
-  .fill-deep-purple-600         {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, 600) !important;              }
-  .fill-indigo-600              {   fill: mat.get-color-from-palette(mat.$indigo-palette, 600) !important;                   }
-  .fill-blue-600                {   fill: mat.get-color-from-palette(mat.$blue-palette, 600) !important;                     }
-  .fill-light-blue-600          {   fill: mat.get-color-from-palette(mat.$light-blue-palette, 600) !important;               }
-  .fill-cyan-600                {   fill: mat.get-color-from-palette(mat.$cyan-palette, 600) !important;                     }
-  .fill-teal-600                {   fill: mat.get-color-from-palette(mat.$teal-palette, 600) !important;                     }
-  .fill-green-600               {   fill: mat.get-color-from-palette(mat.$green-palette, 600) !important;                    }
-  .fill-light-green-600         {   fill: mat.get-color-from-palette(mat.$light-green-palette, 600) !important;              }
-  .fill-lime-600                {   fill: mat.get-color-from-palette(mat.$lime-palette, 600) !important;                     }
-  .fill-yellow-600              {   fill: mat.get-color-from-palette(mat.$yellow-palette, 600) !important;                   }
-  .fill-amber-600               {   fill: mat.get-color-from-palette(mat.$amber-palette, 600) !important;                    }
-  .fill-orange-600              {   fill: mat.get-color-from-palette(mat.$orange-palette, 600) !important;                   }
-  .fill-deep-orange-600         {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, 600) !important;              }
-  .fill-brown-600               {   fill: mat.get-color-from-palette(mat.$brown-palette, 600) !important;                    }
-  .fill-grey-600                {   fill: mat.get-color-from-palette(mat.$grey-palette, 600) !important;                     }
-  .fill-blue-grey-600           {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, 600) !important;                }
+  .fill-red-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-red-palette, 600) !important;
+  }
+
+  .fill-pink-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 600) !important;
+  }
+
+  .fill-purple-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 600) !important;
+  }
+
+  .fill-deep-purple-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 600) !important;
+  }
+
+  .fill-indigo-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 600) !important;
+  }
+
+  .fill-blue-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 600) !important;
+  }
+
+  .fill-light-blue-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 600) !important;
+  }
+
+  .fill-cyan-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 600) !important;
+  }
+
+  .fill-teal-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 600) !important;
+  }
+
+  .fill-green-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-green-palette, 600) !important;
+  }
+
+  .fill-light-green-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 600) !important;
+  }
+
+  .fill-lime-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 600) !important;
+  }
+
+  .fill-yellow-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 600) !important;
+  }
+
+  .fill-amber-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 600) !important;
+  }
+
+  .fill-orange-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 600) !important;
+  }
+
+  .fill-deep-orange-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 600) !important;
+  }
+
+  .fill-brown-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 600) !important;
+  }
+
+  .fill-grey-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 600) !important;
+  }
+
+  .fill-blue-grey-600 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 600) !important;
+  }
 
   // 700
-  .fill-red-700                 {   fill: mat.get-color-from-palette(mat.$red-palette, 700) !important;                      }
-  .fill-pink-700                {   fill: mat.get-color-from-palette(mat.$pink-palette, 700) !important;                     }
-  .fill-purple-700              {   fill: mat.get-color-from-palette(mat.$purple-palette, 700) !important;                   }
-  .fill-deep-purple-700         {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, 700) !important;              }
-  .fill-indigo-700              {   fill: mat.get-color-from-palette(mat.$indigo-palette, 700) !important;                   }
-  .fill-blue-700                {   fill: mat.get-color-from-palette(mat.$blue-palette, 700) !important;                     }
-  .fill-light-blue-700          {   fill: mat.get-color-from-palette(mat.$light-blue-palette, 700) !important;               }
-  .fill-cyan-700                {   fill: mat.get-color-from-palette(mat.$cyan-palette, 700) !important;                     }
-  .fill-teal-700                {   fill: mat.get-color-from-palette(mat.$teal-palette, 700) !important;                     }
-  .fill-green-700               {   fill: mat.get-color-from-palette(mat.$green-palette, 700) !important;                    }
-  .fill-light-green-700         {   fill: mat.get-color-from-palette(mat.$light-green-palette, 700) !important;              }
-  .fill-lime-700                {   fill: mat.get-color-from-palette(mat.$lime-palette, 700) !important;                     }
-  .fill-yellow-700              {   fill: mat.get-color-from-palette(mat.$yellow-palette, 700) !important;                   }
-  .fill-amber-700               {   fill: mat.get-color-from-palette(mat.$amber-palette, 700) !important;                    }
-  .fill-orange-700              {   fill: mat.get-color-from-palette(mat.$orange-palette, 700) !important;                   }
-  .fill-deep-orange-700         {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, 700) !important;              }
-  .fill-brown-700               {   fill: mat.get-color-from-palette(mat.$brown-palette, 700) !important;                    }
-  .fill-grey-700                {   fill: mat.get-color-from-palette(mat.$grey-palette, 700) !important;                     }
-  .fill-blue-grey-700           {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, 700) !important;                }
+  .fill-red-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-red-palette, 700) !important;
+  }
+
+  .fill-pink-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 700) !important;
+  }
+
+  .fill-purple-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 700) !important;
+  }
+
+  .fill-deep-purple-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 700) !important;
+  }
+
+  .fill-indigo-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 700) !important;
+  }
+
+  .fill-blue-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 700) !important;
+  }
+
+  .fill-light-blue-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 700) !important;
+  }
+
+  .fill-cyan-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 700) !important;
+  }
+
+  .fill-teal-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 700) !important;
+  }
+
+  .fill-green-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-green-palette, 700) !important;
+  }
+
+  .fill-light-green-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 700) !important;
+  }
+
+  .fill-lime-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 700) !important;
+  }
+
+  .fill-yellow-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 700) !important;
+  }
+
+  .fill-amber-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 700) !important;
+  }
+
+  .fill-orange-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 700) !important;
+  }
+
+  .fill-deep-orange-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 700) !important;
+  }
+
+  .fill-brown-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 700) !important;
+  }
+
+  .fill-grey-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 700) !important;
+  }
+
+  .fill-blue-grey-700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 700) !important;
+  }
 
   // 800
-  .fill-red-800                 {   fill: mat.get-color-from-palette(mat.$red-palette, 800) !important;                      }
-  .fill-pink-800                {   fill: mat.get-color-from-palette(mat.$pink-palette, 800) !important;                     }
-  .fill-purple-800              {   fill: mat.get-color-from-palette(mat.$purple-palette, 800) !important;                   }
-  .fill-deep-purple-800         {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, 800) !important;              }
-  .fill-indigo-800              {   fill: mat.get-color-from-palette(mat.$indigo-palette, 800) !important;                   }
-  .fill-blue-800                {   fill: mat.get-color-from-palette(mat.$blue-palette, 800) !important;                     }
-  .fill-light-blue-800          {   fill: mat.get-color-from-palette(mat.$light-blue-palette, 800) !important;               }
-  .fill-cyan-800                {   fill: mat.get-color-from-palette(mat.$cyan-palette, 800) !important;                     }
-  .fill-teal-800                {   fill: mat.get-color-from-palette(mat.$teal-palette, 800) !important;                     }
-  .fill-green-800               {   fill: mat.get-color-from-palette(mat.$green-palette, 800) !important;                    }
-  .fill-light-green-800         {   fill: mat.get-color-from-palette(mat.$light-green-palette, 800) !important;              }
-  .fill-lime-800                {   fill: mat.get-color-from-palette(mat.$lime-palette, 800) !important;                     }
-  .fill-yellow-800              {   fill: mat.get-color-from-palette(mat.$yellow-palette, 800) !important;                   }
-  .fill-amber-800               {   fill: mat.get-color-from-palette(mat.$amber-palette, 800) !important;                    }
-  .fill-orange-800              {   fill: mat.get-color-from-palette(mat.$orange-palette, 800) !important;                   }
-  .fill-deep-orange-800         {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, 800) !important;              }
-  .fill-brown-800               {   fill: mat.get-color-from-palette(mat.$brown-palette, 800) !important;                    }
-  .fill-grey-800                {   fill: mat.get-color-from-palette(mat.$grey-palette, 800) !important;                     }
-  .fill-blue-grey-800           {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, 800) !important;                }
+  .fill-red-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-red-palette, 800) !important;
+  }
+
+  .fill-pink-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 800) !important;
+  }
+
+  .fill-purple-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 800) !important;
+  }
+
+  .fill-deep-purple-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 800) !important;
+  }
+
+  .fill-indigo-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 800) !important;
+  }
+
+  .fill-blue-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 800) !important;
+  }
+
+  .fill-light-blue-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 800) !important;
+  }
+
+  .fill-cyan-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 800) !important;
+  }
+
+  .fill-teal-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 800) !important;
+  }
+
+  .fill-green-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-green-palette, 800) !important;
+  }
+
+  .fill-light-green-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 800) !important;
+  }
+
+  .fill-lime-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 800) !important;
+  }
+
+  .fill-yellow-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 800) !important;
+  }
+
+  .fill-amber-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 800) !important;
+  }
+
+  .fill-orange-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 800) !important;
+  }
+
+  .fill-deep-orange-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 800) !important;
+  }
+
+  .fill-brown-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 800) !important;
+  }
+
+  .fill-grey-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 800) !important;
+  }
+
+  .fill-blue-grey-800 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 800) !important;
+  }
 
   // 900
-  .fill-red-900                 {   fill: mat.get-color-from-palette(mat.$red-palette, 900) !important;                      }
-  .fill-pink-900                {   fill: mat.get-color-from-palette(mat.$pink-palette, 900) !important;                     }
-  .fill-purple-900              {   fill: mat.get-color-from-palette(mat.$purple-palette, 900) !important;                   }
-  .fill-deep-purple-900         {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, 900) !important;              }
-  .fill-indigo-900              {   fill: mat.get-color-from-palette(mat.$indigo-palette, 900) !important;                   }
-  .fill-blue-900                {   fill: mat.get-color-from-palette(mat.$blue-palette, 900) !important;                     }
-  .fill-light-blue-900          {   fill: mat.get-color-from-palette(mat.$light-blue-palette, 900) !important;               }
-  .fill-cyan-900                {   fill: mat.get-color-from-palette(mat.$cyan-palette, 900) !important;                     }
-  .fill-teal-900                {   fill: mat.get-color-from-palette(mat.$teal-palette, 900) !important;                     }
-  .fill-green-900               {   fill: mat.get-color-from-palette(mat.$green-palette, 900) !important;                    }
-  .fill-light-green-900         {   fill: mat.get-color-from-palette(mat.$light-green-palette, 900) !important;              }
-  .fill-lime-900                {   fill: mat.get-color-from-palette(mat.$lime-palette, 900) !important;                     }
-  .fill-yellow-900              {   fill: mat.get-color-from-palette(mat.$yellow-palette, 900) !important;                   }
-  .fill-amber-900               {   fill: mat.get-color-from-palette(mat.$amber-palette, 900) !important;                    }
-  .fill-orange-900              {   fill: mat.get-color-from-palette(mat.$orange-palette, 900) !important;                   }
-  .fill-deep-orange-900         {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, 900) !important;              }
-  .fill-brown-900               {   fill: mat.get-color-from-palette(mat.$brown-palette, 900) !important;                    }
-  .fill-grey-900                {   fill: mat.get-color-from-palette(mat.$grey-palette, 900) !important;                     }
-  .fill-blue-grey-900           {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, 900) !important;                }
+  .fill-red-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-red-palette, 900) !important;
+  }
+
+  .fill-pink-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 900) !important;
+  }
+
+  .fill-purple-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 900) !important;
+  }
+
+  .fill-deep-purple-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, 900) !important;
+  }
+
+  .fill-indigo-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 900) !important;
+  }
+
+  .fill-blue-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 900) !important;
+  }
+
+  .fill-light-blue-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, 900) !important;
+  }
+
+  .fill-cyan-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, 900) !important;
+  }
+
+  .fill-teal-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 900) !important;
+  }
+
+  .fill-green-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-green-palette, 900) !important;
+  }
+
+  .fill-light-green-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, 900) !important;
+  }
+
+  .fill-lime-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-lime-palette, 900) !important;
+  }
+
+  .fill-yellow-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 900) !important;
+  }
+
+  .fill-amber-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-amber-palette, 900) !important;
+  }
+
+  .fill-orange-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 900) !important;
+  }
+
+  .fill-deep-orange-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, 900) !important;
+  }
+
+  .fill-brown-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-brown-palette, 900) !important;
+  }
+
+  .fill-grey-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 900) !important;
+  }
+
+  .fill-blue-grey-900 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-grey-palette, 900) !important;
+  }
 
   // A100
-  .fill-red-A100                {   fill: mat.get-color-from-palette(mat.$red-palette, A100) !important;                     }
-  .fill-pink-A100               {   fill: mat.get-color-from-palette(mat.$pink-palette, A100) !important;                    }
-  .fill-purple-A100             {   fill: mat.get-color-from-palette(mat.$purple-palette, A100) !important;                  }
-  .fill-deep-purple-A100        {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, A100) !important;             }
-  .fill-indigo-A100             {   fill: mat.get-color-from-palette(mat.$indigo-palette, A100) !important;                  }
-  .fill-blue-A100               {   fill: mat.get-color-from-palette(mat.$blue-palette, A100) !important;                    }
-  .fill-light-blue-A100         {   fill: mat.get-color-from-palette(mat.$light-blue-palette, A100) !important;              }
-  .fill-cyan-A100               {   fill: mat.get-color-from-palette(mat.$cyan-palette, A100) !important;                    }
-  .fill-teal-A100               {   fill: mat.get-color-from-palette(mat.$teal-palette, A100) !important;                    }
-  .fill-green-A100              {   fill: mat.get-color-from-palette(mat.$green-palette, A100) !important;                   }
-  .fill-light-green-A100        {   fill: mat.get-color-from-palette(mat.$light-green-palette, A100) !important;             }
-  .fill-lime-A100               {   fill: mat.get-color-from-palette(mat.$lime-palette, A100) !important;                    }
-  .fill-yellow-A100             {   fill: mat.get-color-from-palette(mat.$yellow-palette, A100) !important;                  }
-  .fill-amber-A100              {   fill: mat.get-color-from-palette(mat.$amber-palette, A100) !important;                   }
-  .fill-orange-A100             {   fill: mat.get-color-from-palette(mat.$orange-palette, A100) !important;                  }
-  .fill-deep-orange-A100        {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, A100) !important;             }
+  .fill-red-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-red-palette, A100) !important;
+  }
+
+  .fill-pink-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-pink-palette, A100) !important;
+  }
+
+  .fill-purple-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-purple-palette, A100) !important;
+  }
+
+  .fill-deep-purple-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, A100) !important;
+  }
+
+  .fill-indigo-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, A100) !important;
+  }
+
+  .fill-blue-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-palette, A100) !important;
+  }
+
+  .fill-light-blue-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, A100) !important;
+  }
+
+  .fill-cyan-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, A100) !important;
+  }
+
+  .fill-teal-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-teal-palette, A100) !important;
+  }
+
+  .fill-green-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-green-palette, A100) !important;
+  }
+
+  .fill-light-green-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, A100) !important;
+  }
+
+  .fill-lime-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-lime-palette, A100) !important;
+  }
+
+  .fill-yellow-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, A100) !important;
+  }
+
+  .fill-amber-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-amber-palette, A100) !important;
+  }
+
+  .fill-orange-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-orange-palette, A100) !important;
+  }
+
+  .fill-deep-orange-A100 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, A100) !important;
+  }
 
   // A200
-  .fill-red-A200                {   fill: mat.get-color-from-palette(mat.$red-palette, A200) !important;                     }
-  .fill-pink-A200               {   fill: mat.get-color-from-palette(mat.$pink-palette, A200) !important;                    }
-  .fill-purple-A200             {   fill: mat.get-color-from-palette(mat.$purple-palette, A200) !important;                  }
-  .fill-deep-purple-A200        {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, A200) !important;             }
-  .fill-indigo-A200             {   fill: mat.get-color-from-palette(mat.$indigo-palette, A200) !important;                  }
-  .fill-blue-A200               {   fill: mat.get-color-from-palette(mat.$blue-palette, A200) !important;                    }
-  .fill-light-blue-A200         {   fill: mat.get-color-from-palette(mat.$light-blue-palette, A200) !important;              }
-  .fill-cyan-A200               {   fill: mat.get-color-from-palette(mat.$cyan-palette, A200) !important;                    }
-  .fill-teal-A200               {   fill: mat.get-color-from-palette(mat.$teal-palette, A200) !important;                    }
-  .fill-green-A200              {   fill: mat.get-color-from-palette(mat.$green-palette, A200) !important;                   }
-  .fill-light-green-A200        {   fill: mat.get-color-from-palette(mat.$light-green-palette, A200) !important;             }
-  .fill-lime-A200               {   fill: mat.get-color-from-palette(mat.$lime-palette, A200) !important;                    }
-  .fill-yellow-A200             {   fill: mat.get-color-from-palette(mat.$yellow-palette, A200) !important;                  }
-  .fill-amber-A200              {   fill: mat.get-color-from-palette(mat.$amber-palette, A200) !important;                   }
-  .fill-orange-A200             {   fill: mat.get-color-from-palette(mat.$orange-palette, A200) !important;                  }
-  .fill-deep-orange-A200        {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, A200) !important;             }
+  .fill-red-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-red-palette, A200) !important;
+  }
+
+  .fill-pink-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-pink-palette, A200) !important;
+  }
+
+  .fill-purple-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-purple-palette, A200) !important;
+  }
+
+  .fill-deep-purple-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, A200) !important;
+  }
+
+  .fill-indigo-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, A200) !important;
+  }
+
+  .fill-blue-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-palette, A200) !important;
+  }
+
+  .fill-light-blue-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, A200) !important;
+  }
+
+  .fill-cyan-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, A200) !important;
+  }
+
+  .fill-teal-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-teal-palette, A200) !important;
+  }
+
+  .fill-green-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-green-palette, A200) !important;
+  }
+
+  .fill-light-green-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, A200) !important;
+  }
+
+  .fill-lime-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-lime-palette, A200) !important;
+  }
+
+  .fill-yellow-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, A200) !important;
+  }
+
+  .fill-amber-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-amber-palette, A200) !important;
+  }
+
+  .fill-orange-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-orange-palette, A200) !important;
+  }
+
+  .fill-deep-orange-A200 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, A200) !important;
+  }
 
   // A400
-  .fill-red-A400                {   fill: mat.get-color-from-palette(mat.$red-palette, A400) !important;                     }
-  .fill-pink-A400               {   fill: mat.get-color-from-palette(mat.$pink-palette, A400) !important;                    }
-  .fill-purple-A400             {   fill: mat.get-color-from-palette(mat.$purple-palette, A400) !important;                  }
-  .fill-deep-purple-A400        {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, A400) !important;             }
-  .fill-indigo-A400             {   fill: mat.get-color-from-palette(mat.$indigo-palette, A400) !important;                  }
-  .fill-blue-A400               {   fill: mat.get-color-from-palette(mat.$blue-palette, A400) !important;                    }
-  .fill-light-blue-A400         {   fill: mat.get-color-from-palette(mat.$light-blue-palette, A400) !important;              }
-  .fill-cyan-A400               {   fill: mat.get-color-from-palette(mat.$cyan-palette, A400) !important;                    }
-  .fill-teal-A400               {   fill: mat.get-color-from-palette(mat.$teal-palette, A400) !important;                    }
-  .fill-green-A400              {   fill: mat.get-color-from-palette(mat.$green-palette, A400) !important;                   }
-  .fill-light-green-A400        {   fill: mat.get-color-from-palette(mat.$light-green-palette, A400) !important;             }
-  .fill-lime-A400               {   fill: mat.get-color-from-palette(mat.$lime-palette, A400) !important;                    }
-  .fill-yellow-A400             {   fill: mat.get-color-from-palette(mat.$yellow-palette, A400) !important;                  }
-  .fill-amber-A400              {   fill: mat.get-color-from-palette(mat.$amber-palette, A400) !important;                   }
-  .fill-orange-A400             {   fill: mat.get-color-from-palette(mat.$orange-palette, A400) !important;                  }
-  .fill-deep-orange-A400        {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, A400) !important;             }
+  .fill-red-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-red-palette, A400) !important;
+  }
+
+  .fill-pink-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-pink-palette, A400) !important;
+  }
+
+  .fill-purple-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-purple-palette, A400) !important;
+  }
+
+  .fill-deep-purple-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, A400) !important;
+  }
+
+  .fill-indigo-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, A400) !important;
+  }
+
+  .fill-blue-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-palette, A400) !important;
+  }
+
+  .fill-light-blue-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, A400) !important;
+  }
+
+  .fill-cyan-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, A400) !important;
+  }
+
+  .fill-teal-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-teal-palette, A400) !important;
+  }
+
+  .fill-green-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-green-palette, A400) !important;
+  }
+
+  .fill-light-green-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, A400) !important;
+  }
+
+  .fill-lime-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-lime-palette, A400) !important;
+  }
+
+  .fill-yellow-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, A400) !important;
+  }
+
+  .fill-amber-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-amber-palette, A400) !important;
+  }
+
+  .fill-orange-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-orange-palette, A400) !important;
+  }
+
+  .fill-deep-orange-A400 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, A400) !important;
+  }
 
   // A700
-  .fill-red-A700                {   fill: mat.get-color-from-palette(mat.$red-palette, A700) !important;                     }
-  .fill-pink-A700               {   fill: mat.get-color-from-palette(mat.$pink-palette, A700) !important;                    }
-  .fill-purple-A700             {   fill: mat.get-color-from-palette(mat.$purple-palette, A700) !important;                  }
-  .fill-deep-purple-A700        {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, A700) !important;             }
-  .fill-indigo-A700             {   fill: mat.get-color-from-palette(mat.$indigo-palette, A700) !important;                  }
-  .fill-blue-A700               {   fill: mat.get-color-from-palette(mat.$blue-palette, A700) !important;                    }
-  .fill-light-blue-A700         {   fill: mat.get-color-from-palette(mat.$light-blue-palette, A700) !important;              }
-  .fill-cyan-A700               {   fill: mat.get-color-from-palette(mat.$cyan-palette, A700) !important;                    }
-  .fill-teal-A700               {   fill: mat.get-color-from-palette(mat.$teal-palette, A700) !important;                    }
-  .fill-green-A700              {   fill: mat.get-color-from-palette(mat.$green-palette, A700) !important;                   }
-  .fill-light-green-A700        {   fill: mat.get-color-from-palette(mat.$light-green-palette, A700) !important;             }
-  .fill-lime-A700               {   fill: mat.get-color-from-palette(mat.$lime-palette, A700) !important;                    }
-  .fill-yellow-A700             {   fill: mat.get-color-from-palette(mat.$yellow-palette, A700) !important;                  }
-  .fill-amber-A700              {   fill: mat.get-color-from-palette(mat.$amber-palette, A700) !important;                   }
-  .fill-orange-A700             {   fill: mat.get-color-from-palette(mat.$orange-palette, A700) !important;                  }
-  .fill-deep-orange-A700        {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, A700) !important;             }
+  .fill-red-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-red-palette, A700) !important;
+  }
+
+  .fill-pink-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-pink-palette, A700) !important;
+  }
+
+  .fill-purple-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-purple-palette, A700) !important;
+  }
+
+  .fill-deep-purple-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-purple-palette, A700) !important;
+  }
+
+  .fill-indigo-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, A700) !important;
+  }
+
+  .fill-blue-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-blue-palette, A700) !important;
+  }
+
+  .fill-light-blue-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-blue-palette, A700) !important;
+  }
+
+  .fill-cyan-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-cyan-palette, A700) !important;
+  }
+
+  .fill-teal-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-teal-palette, A700) !important;
+  }
+
+  .fill-green-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-green-palette, A700) !important;
+  }
+
+  .fill-light-green-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-light-green-palette, A700) !important;
+  }
+
+  .fill-lime-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-lime-palette, A700) !important;
+  }
+
+  .fill-yellow-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, A700) !important;
+  }
+
+  .fill-amber-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-amber-palette, A700) !important;
+  }
+
+  .fill-orange-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-orange-palette, A700) !important;
+  }
+
+  .fill-deep-orange-A700 {
+    fill: mat.m2-get-color-from-palette(mat.$m2-deep-orange-palette, A700) !important;
+  }
 
   // Black
-  .fill-black                   {   fill: rgba(black, 87) !important;                        }
-  .fill-black-1                 {   fill: rgba(black, 54) !important;                      }
-  .fill-black-2                 {   fill: rgba(black, 38) !important;                      }
-  .fill-black-3                 {   fill: rgba(black, 0.12) !important;                      }
-  .fill-black-4                 {   fill: black !important;                      }
+  .fill-black {
+    fill: rgba(black, 87) !important;
+  }
+
+  .fill-black-1 {
+    fill: rgba(black, 54) !important;
+  }
+
+  .fill-black-2 {
+    fill: rgba(black, 38) !important;
+  }
+
+  .fill-black-3 {
+    fill: rgba(black, 0.12) !important;
+  }
+
+  .fill-black-4 {
+    fill: black !important;
+  }
 
   // White
-  .fill-white                   {   fill: rgba(white, 0.7) !important;                        }
-  .fill-white-1                 {   fill: rgba(white, 0.3) !important;                      }
-  .fill-white-2                 {   fill: rgba(white, 0.3) !important;                      }
-  .fill-white-3                 {   fill: rgba(white, 0.12) !important;                      }
-  .fill-white-4                 {   fill: white !important;                      }
+  .fill-white {
+    fill: rgba(white, 0.7) !important;
+  }
+
+  .fill-white-1 {
+    fill: rgba(white, 0.3) !important;
+  }
+
+  .fill-white-2 {
+    fill: rgba(white, 0.3) !important;
+  }
+
+  .fill-white-3 {
+    fill: rgba(white, 0.12) !important;
+  }
+
+  .fill-white-4 {
+    fill: white !important;
+  }
 
 }