@messaia/cdk 0.0.0-CDK

package/lib/common/styles/_typography.scss

@@ -0,0 +1,76 @@
+@import 'theme-functions';
+@import 'variables';
+
+@mixin vd-typography() {
+	body {
+		/************
+		* Headings
+		************/
+		.md-display-4 {
+			font-size: $display-4-font-size-base;
+			font-weight: 300;
+			letter-spacing: -0.010em;
+			line-height: $display-4-font-size-base;
+		}
+
+		.md-display-3 {
+			font-size: $display-3-font-size-base;
+			font-weight: 400;
+			letter-spacing: -0.005em;
+			line-height: $display-3-font-size-base;
+		}
+
+		.md-display-2 {
+			font-size: $display-2-font-size-base;
+			font-weight: 400;
+			line-height: rem(6.4);
+		}
+
+		.md-display-1 {
+			font-size: $display-1-font-size-base;
+			font-weight: 400;
+			line-height: rem(4);
+		}
+
+		.md-headline {
+			font-size: $headline-font-size-base;
+			font-weight: 400;
+			line-height: rem(3.2);
+		}
+
+		.md-title {
+			font-size: $title-font-size-base;
+			font-weight: 500;
+			letter-spacing: 0.005em;
+		}
+
+		.md-subhead {
+			font-size: $subhead-font-size-base;
+			font-weight: 400;
+			letter-spacing: 0.010em;
+			line-height: rem(2.4);
+		}
+
+		/************
+		* Body Copy
+		************/
+		.md-body-1 {
+			font-size: $body-font-size-base;
+			font-weight: 400;
+			letter-spacing: 0.010em;
+			line-height: rem(2);
+		}
+
+		.md-body-2 {
+			font-size: $body-font-size-base;
+			font-weight: 500;
+			letter-spacing: 0.010em;
+			line-height: rem(2.4);
+		}
+
+		.md-caption {
+			font-size: $caption-font-size-base;
+			letter-spacing: 0.020em;
+		}
+	}
+}

package/lib/common/styles/_variables.scss

@@ -0,0 +1,98 @@
+@import 'theme-functions';
+
+// Teradata UI Platform
+// ------------------------------
+$navigation-drawer-width: 320px !default;
+$padding: 16px;
+$margin: $padding;
+$step-circle: 24px;
+
+// Typography
+// ------------------------------
+$font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif !default;
+$font-size: 10px;
+
+$display-4-font-size-base: rem(11.20) !default;
+$display-3-font-size-base: rem(5.600) !default;
+$display-2-font-size-base: rem(4.500) !default;
+$display-1-font-size-base: rem(3.400) !default;
+$headline-font-size-base: rem(2.400) !default;
+$title-font-size-base: rem(2.000) !default;
+$subhead-font-size-base: rem(1.600) !default;
+
+$body-font-size-base: rem(1.400) !default;
+$caption-font-size-base: rem(1.200) !default;
+
+// Layout
+$baseline-grid: 8px !default;
+$layout-breakpoint-xs: 600px !default;
+$layout-breakpoint-sm: 960px !default;
+$layout-breakpoint-md: 1280px !default;
+$layout-breakpoint-lg: 1920px !default;
+$layout-gutter-width: ($baseline-grid * 2) !default;
+
+// Typography
+$mat-body-font-size-base: rem(1.400) !default;
+
+// App bar variables
+$app-bar-height: 64px;
+
+// card header variables
+$mat-card-header-size: 40px;
+$mat-card-radius: 2px;
+
+// Icons
+$icon-size: rem(2.4);
+
+// Toast
+$toast-height: $baseline-grid * 3 !default;
+$toast-margin: $baseline-grid * 1 !default;
+
+// Whiteframes
+$whiteframe-shadow-z1: 0px 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
+$whiteframe-zindex-z1: 1 !default;
+$whiteframe-shadow-z2: 0px 8px 17px rgba(0, 0, 0, 0.2) !default;
+$whiteframe-zindex-z2: 2 !default;
+$whiteframe-shadow-z3: 0px 17px 50px rgba(0, 0, 0, 0.19) !default;
+$whiteframe-zindex-z3: 3 !default;
+$whiteframe-shadow-z4: 0px 16px 28px 0 rgba(0, 0, 0, 0.22) !default;
+$whiteframe-zindex-z4: 4 !default;
+$whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0, 0, 0, 0.2) !default;
+$whiteframe-zindex-z5: 5 !default;
+
+// Z-indexes
+$z-index-tooltip: 100 !default;
+$z-index-dialog: 80 !default;
+$z-index-toast: 90 !default;
+$z-index-bottom-sheet: 70 !default;
+$z-index-scroll-mask: 65 !default;
+$z-index-sidenav: 60 !default;
+$z-index-backdrop: 50 !default;
+$z-index-toolbar: 30 !default;
+$z-index-fab: 20 !default;
+$z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome
+
+// Easing Curves
+
+// The default animation curves used by material design.
+$mat-linear-out-slow-in-timing-function: cubic-bezier(0.0, 0.0, 0.2, 0.1) !default;
+$mat-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$mat-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0.0, 1, 1) !default;
+
+$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
+
+$swift-ease-out-duration: 0.4s !default;
+$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+
+$swift-ease-in-duration: 0.3s !default;
+$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
+$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
+
+$swift-ease-in-out-duration: 0.5s !default;
+$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
+$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
+
+$swift-linear-duration: 0.08s !default;
+$swift-linear-timing-function: linear !default;
+$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;

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

@@ -0,0 +1,388 @@
+// @use '~@angular/material' as mat;
+@import '../theme-functions';
+
+@mixin vd-colors-dark() {
+  // Text color
+
+  // 500
+  .tc-dark-red-500                  {   color: mat.get-color-from-palette(mat.$red-palette, 500) !important;                       }
+  .tc-dark-pink-500                 {   color: mat.get-color-from-palette(mat.$pink-palette, 500) !important;                      }
+  .tc-dark-purple-500               {   color: mat.get-color-from-palette(mat.$purple-palette, 500) !important;                    }
+  .tc-dark-deep-purple-500          {   color: mat.get-color-from-palette(mat.$deep-purple-palette, 500) !important;               }
+  .tc-dark-indigo-500               {   color: mat.get-color-from-palette(mat.$indigo-palette, 500) !important;                    }
+  .tc-dark-blue-500                 {   color: mat.get-color-from-palette(mat.$blue-palette, 500) !important;                      }
+  .tc-dark-light-blue-500           {   color: mat.get-color-from-palette(mat.$blue-palette, 500) !important;                }
+  .tc-dark-cyan-500                 {   color: mat.get-color-from-palette(mat.$cyan-palette, 500) !important;                      }
+  .tc-dark-teal-500                 {   color: mat.get-color-from-palette(mat.$teal-palette, 500) !important;                      }
+  .tc-dark-green-500                {   color: mat.get-color-from-palette(mat.$green-palette, 500) !important;                     }
+  .tc-dark-light-green-500          {   color: mat.get-color-from-palette(mat.$green-palette, 500) !important;               }
+  .tc-dark-lime-500                 {   color: mat.get-color-from-palette(mat.$lime-palette, 500) !important;                      }
+  .tc-dark-yellow-500               {   color: mat.get-color-from-palette(mat.$yellow-palette, 500) !important;                    }
+  .tc-dark-amber-500                {   color: mat.get-color-from-palette(mat.$amber-palette, 500) !important;                     }
+  .tc-dark-orange-500               {   color: mat.get-color-from-palette(mat.$orange-palette, 500) !important;                    }
+  .tc-dark-deep-orange-500          {   color: mat.get-color-from-palette(mat.$deep-orange-palette, 500) !important;               }
+  .tc-dark-brown-500                {   color: mat.get-color-from-palette(mat.$brown-palette, 500) !important;                     }
+  .tc-dark-grey-500                 {   color: mat.get-color-from-palette(mat.$grey-palette, 500) !important;                      }
+  .tc-dark-blue-grey-500            {   color: mat.get-color-from-palette(mat.$blue-grey-palette, 500) !important;                 }
+
+  // B100
+  .tc-dark-red-B100                 {   color: mat.get-color-from-palette(mat.$red-palette, B100) !important;                      }
+  .tc-dark-pink-B100                {   color: mat.get-color-from-palette(mat.$pink-palette, B100) !important;                     }
+  .tc-dark-purple-B100              {   color: mat.get-color-from-palette(mat.$purple-palette, B100) !important;                   }
+  .tc-dark-deep-purple-B100         {   color: mat.get-color-from-palette(mat.$deep-purple-palette, B100) !important;              }
+  .tc-dark-indigo-B100              {   color: mat.get-color-from-palette(mat.$indigo-palette, B100) !important;                   }
+  .tc-dark-blue-B100                {   color: mat.get-color-from-palette(mat.$blue-palette, B100) !important;                     }
+  .tc-dark-light-blue-B100          {   color: mat.get-color-from-palette(mat.$blue-palette, B100) !important;               }
+  .tc-dark-cyan-B100                {   color: mat.get-color-from-palette(mat.$cyan-palette, B100) !important;                     }
+  .tc-dark-teal-B100                {   color: mat.get-color-from-palette(mat.$teal-palette, B100) !important;                     }
+  .tc-dark-green-B100               {   color: mat.get-color-from-palette(mat.$green-palette, B100) !important;                    }
+  .tc-dark-light-green-B100         {   color: mat.get-color-from-palette(mat.$green-palette, B100) !important;              }
+  .tc-dark-lime-B100                {   color: mat.get-color-from-palette(mat.$lime-palette, B100) !important;                     }
+  .tc-dark-yellow-B100              {   color: mat.get-color-from-palette(mat.$yellow-palette, B100) !important;                   }
+  .tc-dark-amber-B100               {   color: mat.get-color-from-palette(mat.$amber-palette, B100) !important;                    }
+  .tc-dark-orange-B100              {   color: mat.get-color-from-palette(mat.$orange-palette, B100) !important;                   }
+  .tc-dark-deep-orange-B100         {   color: mat.get-color-from-palette(mat.$deep-orange-palette, B100) !important;              }
+  .tc-dark-brown-B100               {   color: mat.get-color-from-palette(mat.$brown-palette, B100) !important;                    }
+  .tc-dark-grey-B100                {   color: mat.get-color-from-palette(mat.$grey-palette, B100) !important;                     }
+  .tc-dark-blue-grey-B100           {   color: mat.get-color-from-palette(mat.$blue-grey-palette, B100) !important;                }
+
+  // B65
+  .tc-dark-red-B65                 {   color: mat.get-color-from-palette(mat.$red-palette, B65) !important;                      }
+  .tc-dark-pink-B65                {   color: mat.get-color-from-palette(mat.$pink-palette, B65) !important;                     }
+  .tc-dark-purple-B65              {   color: mat.get-color-from-palette(mat.$purple-palette, B65) !important;                   }
+  .tc-dark-deep-purple-B65         {   color: mat.get-color-from-palette(mat.$deep-purple-palette, B65) !important;              }
+  .tc-dark-indigo-B65              {   color: mat.get-color-from-palette(mat.$indigo-palette, B65) !important;                   }
+  .tc-dark-blue-B65                {   color: mat.get-color-from-palette(mat.$blue-palette, B65) !important;                     }
+  .tc-dark-light-blue-B65          {   color: mat.get-color-from-palette(mat.$blue-palette, B65) !important;               }
+  .tc-dark-cyan-B65                {   color: mat.get-color-from-palette(mat.$cyan-palette, B65) !important;                     }
+  .tc-dark-teal-B65                {   color: mat.get-color-from-palette(mat.$teal-palette, B65) !important;                     }
+  .tc-dark-green-B65               {   color: mat.get-color-from-palette(mat.$green-palette, B65) !important;                    }
+  .tc-dark-light-green-B65         {   color: mat.get-color-from-palette(mat.$green-palette, B65) !important;              }
+  .tc-dark-lime-B65                {   color: mat.get-color-from-palette(mat.$lime-palette, B65) !important;                     }
+  .tc-dark-yellow-B65              {   color: mat.get-color-from-palette(mat.$yellow-palette, B65) !important;                   }
+  .tc-dark-amber-B65               {   color: mat.get-color-from-palette(mat.$amber-palette, B65) !important;                    }
+  .tc-dark-orange-B65              {   color: mat.get-color-from-palette(mat.$orange-palette, B65) !important;                   }
+  .tc-dark-deep-orange-B65         {   color: mat.get-color-from-palette(mat.$deep-orange-palette, B65) !important;              }
+  .tc-dark-brown-B65               {   color: mat.get-color-from-palette(mat.$brown-palette, B65) !important;                    }
+  .tc-dark-grey-B65                {   color: mat.get-color-from-palette(mat.$grey-palette, B65) !important;                     }
+  .tc-dark-blue-grey-B65           {   color: mat.get-color-from-palette(mat.$blue-grey-palette, B65) !important;                }
+
+  // B40
+  .tc-dark-red-B40                 {   color: mat.get-color-from-palette(mat.$red-palette, B40) !important;                      }
+  .tc-dark-pink-B40                {   color: mat.get-color-from-palette(mat.$pink-palette, B40) !important;                     }
+  .tc-dark-purple-B40              {   color: mat.get-color-from-palette(mat.$purple-palette, B40) !important;                   }
+  .tc-dark-deep-purple-B40         {   color: mat.get-color-from-palette(mat.$deep-purple-palette, B40) !important;              }
+  .tc-dark-indigo-B40              {   color: mat.get-color-from-palette(mat.$indigo-palette, B40) !important;                   }
+  .tc-dark-blue-B40                {   color: mat.get-color-from-palette(mat.$blue-palette, B40) !important;                     }
+  .tc-dark-light-blue-B40          {   color: mat.get-color-from-palette(mat.$blue-palette, B40) !important;               }
+  .tc-dark-cyan-B40                {   color: mat.get-color-from-palette(mat.$cyan-palette, B40) !important;                     }
+  .tc-dark-teal-B40                {   color: mat.get-color-from-palette(mat.$teal-palette, B40) !important;                     }
+  .tc-dark-green-B40               {   color: mat.get-color-from-palette(mat.$green-palette, B40) !important;                    }
+  .tc-dark-light-green-B40         {   color: mat.get-color-from-palette(mat.$green-palette, B40) !important;              }
+  .tc-dark-lime-B40                {   color: mat.get-color-from-palette(mat.$lime-palette, B40) !important;                     }
+  .tc-dark-yellow-B40              {   color: mat.get-color-from-palette(mat.$yellow-palette, B40) !important;                   }
+  .tc-dark-amber-B40               {   color: mat.get-color-from-palette(mat.$amber-palette, B40) !important;                    }
+  .tc-dark-orange-B40              {   color: mat.get-color-from-palette(mat.$orange-palette, B40) !important;                   }
+  .tc-dark-deep-orange-B40         {   color: mat.get-color-from-palette(mat.$deep-orange-palette, B40) !important;              }
+  .tc-dark-brown-B40               {   color: mat.get-color-from-palette(mat.$brown-palette, B40) !important;                    }
+  .tc-dark-grey-B40                {   color: mat.get-color-from-palette(mat.$grey-palette, B40) !important;                     }
+  .tc-dark-blue-grey-B40           {   color: mat.get-color-from-palette(mat.$blue-grey-palette, B40) !important;                }
+
+  // B30
+  .tc-dark-red-B30                 {   color: mat.get-color-from-palette(mat.$red-palette, B30) !important;                      }
+  .tc-dark-pink-B30                {   color: mat.get-color-from-palette(mat.$pink-palette, B30) !important;                     }
+  .tc-dark-purple-B30              {   color: mat.get-color-from-palette(mat.$purple-palette, B30) !important;                   }
+  .tc-dark-deep-purple-B30         {   color: mat.get-color-from-palette(mat.$deep-purple-palette, B30) !important;              }
+  .tc-dark-indigo-B30              {   color: mat.get-color-from-palette(mat.$indigo-palette, B30) !important;                   }
+  .tc-dark-blue-B30                {   color: mat.get-color-from-palette(mat.$blue-palette, B30) !important;                     }
+  .tc-dark-light-blue-B30          {   color: mat.get-color-from-palette(mat.$blue-palette, B30) !important;               }
+  .tc-dark-cyan-B30                {   color: mat.get-color-from-palette(mat.$cyan-palette, B30) !important;                     }
+  .tc-dark-teal-B30                {   color: mat.get-color-from-palette(mat.$teal-palette, B30) !important;                     }
+  .tc-dark-green-B30               {   color: mat.get-color-from-palette(mat.$green-palette, B30) !important;                    }
+  .tc-dark-light-green-B30         {   color: mat.get-color-from-palette(mat.$green-palette, B30) !important;              }
+  .tc-dark-lime-B30                {   color: mat.get-color-from-palette(mat.$lime-palette, B30) !important;                     }
+  .tc-dark-yellow-B30              {   color: mat.get-color-from-palette(mat.$yellow-palette, B30) !important;                   }
+  .tc-dark-amber-B30               {   color: mat.get-color-from-palette(mat.$amber-palette, B30) !important;                    }
+  .tc-dark-orange-B30              {   color: mat.get-color-from-palette(mat.$orange-palette, B30) !important;                   }
+  .tc-dark-deep-orange-B30         {   color: mat.get-color-from-palette(mat.$deep-orange-palette, B30) !important;              }
+  .tc-dark-brown-B30               {   color: mat.get-color-from-palette(mat.$brown-palette, B30) !important;                    }
+  .tc-dark-grey-B30                {   color: mat.get-color-from-palette(mat.$grey-palette, B30) !important;                     }
+  .tc-dark-blue-grey-B30           {   color: mat.get-color-from-palette(mat.$blue-grey-palette, B30) !important;                }
+
+  // B15
+  .tc-dark-red-B15                 {   color: mat.get-color-from-palette(mat.$red-palette, B15) !important;                      }
+  .tc-dark-pink-B15                {   color: mat.get-color-from-palette(mat.$pink-palette, B15) !important;                     }
+  .tc-dark-purple-B15              {   color: mat.get-color-from-palette(mat.$purple-palette, B15) !important;                   }
+  .tc-dark-deep-purple-B15         {   color: mat.get-color-from-palette(mat.$deep-purple-palette, B15) !important;              }
+  .tc-dark-indigo-B15              {   color: mat.get-color-from-palette(mat.$indigo-palette, B15) !important;                   }
+  .tc-dark-blue-B15                {   color: mat.get-color-from-palette(mat.$blue-palette, B15) !important;                     }
+  .tc-dark-light-blue-B15          {   color: mat.get-color-from-palette(mat.$blue-palette, B15) !important;               }
+  .tc-dark-cyan-B15                {   color: mat.get-color-from-palette(mat.$cyan-palette, B15) !important;                     }
+  .tc-dark-teal-B15                {   color: mat.get-color-from-palette(mat.$teal-palette, B15) !important;                     }
+  .tc-dark-green-B15               {   color: mat.get-color-from-palette(mat.$green-palette, B15) !important;                    }
+  .tc-dark-light-green-B15         {   color: mat.get-color-from-palette(mat.$green-palette, B15) !important;              }
+  .tc-dark-lime-B15                {   color: mat.get-color-from-palette(mat.$lime-palette, B15) !important;                     }
+  .tc-dark-yellow-B15              {   color: mat.get-color-from-palette(mat.$yellow-palette, B15) !important;                   }
+  .tc-dark-amber-B15               {   color: mat.get-color-from-palette(mat.$amber-palette, B15) !important;                    }
+  .tc-dark-orange-B15              {   color: mat.get-color-from-palette(mat.$orange-palette, B15) !important;                   }
+  .tc-dark-deep-orange-B15         {   color: mat.get-color-from-palette(mat.$deep-orange-palette, B15) !important;              }
+  .tc-dark-brown-B15               {   color: mat.get-color-from-palette(mat.$brown-palette, B15) !important;                    }
+  .tc-dark-grey-B15                {   color: mat.get-color-from-palette(mat.$grey-palette, B15) !important;                     }
+  .tc-dark-blue-grey-B15           {   color: mat.get-color-from-palette(mat.$blue-grey-palette, B15) !important;                }
+
+  // Background color
+
+  // 500
+  .bgc-dark-red-500                  {   background-color: mat.get-color-from-palette(mat.$red-palette, 500) !important;            }
+  .bgc-dark-pink-500                 {   background-color: mat.get-color-from-palette(mat.$pink-palette, 500) !important;           }
+  .bgc-dark-purple-500               {   background-color: mat.get-color-from-palette(mat.$purple-palette, 500) !important;         }
+  .bgc-dark-deep-purple-500          {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, 500) !important;    }
+  .bgc-dark-indigo-500               {   background-color: mat.get-color-from-palette(mat.$indigo-palette, 500) !important;         }
+  .bgc-dark-blue-500                 {   background-color: mat.get-color-from-palette(mat.$blue-palette, 500) !important;           }
+  .bgc-dark-light-blue-500           {   background-color: mat.get-color-from-palette(mat.$blue-palette, 500) !important;     }
+  .bgc-dark-cyan-500                 {   background-color: mat.get-color-from-palette(mat.$cyan-palette, 500) !important;           }
+  .bgc-dark-teal-500                 {   background-color: mat.get-color-from-palette(mat.$teal-palette, 500) !important;           }
+  .bgc-dark-green-500                {   background-color: mat.get-color-from-palette(mat.$green-palette, 500) !important;          }
+  .bgc-dark-light-green-500          {   background-color: mat.get-color-from-palette(mat.$green-palette, 500) !important;    }
+  .bgc-dark-lime-500                 {   background-color: mat.get-color-from-palette(mat.$lime-palette, 500) !important;           }
+  .bgc-dark-yellow-500               {   background-color: mat.get-color-from-palette(mat.$yellow-palette, 500) !important;         }
+  .bgc-dark-amber-500                {   background-color: mat.get-color-from-palette(mat.$amber-palette, 500) !important;          }
+  .bgc-dark-orange-500               {   background-color: mat.get-color-from-palette(mat.$orange-palette, 500) !important;         }
+  .bgc-dark-deep-orange-500          {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, 500) !important;    }
+  .bgc-dark-brown-500                {   background-color: mat.get-color-from-palette(mat.$brown-palette, 500) !important;          }
+  .bgc-dark-grey-500                 {   background-color: mat.get-color-from-palette(mat.$grey-palette, 500) !important;           }
+  .bgc-dark-blue-grey-500            {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 500) !important;      }
+
+  // B100
+  .bgc-dark-red-B100                 {   background-color: mat.get-color-from-palette(mat.$red-palette, B100) !important;           }
+  .bgc-dark-pink-B100                {   background-color: mat.get-color-from-palette(mat.$pink-palette, B100) !important;          }
+  .bgc-dark-purple-B100              {   background-color: mat.get-color-from-palette(mat.$purple-palette, B100) !important;        }
+  .bgc-dark-deep-purple-B100         {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, B100) !important;   }
+  .bgc-dark-indigo-B100              {   background-color: mat.get-color-from-palette(mat.$indigo-palette, B100) !important;        }
+  .bgc-dark-blue-B100                {   background-color: mat.get-color-from-palette(mat.$blue-palette, B100) !important;          }
+  .bgc-dark-light-blue-B100          {   background-color: mat.get-color-from-palette(mat.$blue-palette, B100) !important;    }
+  .bgc-dark-cyan-B100                {   background-color: mat.get-color-from-palette(mat.$cyan-palette, B100) !important;          }
+  .bgc-dark-teal-B100                {   background-color: mat.get-color-from-palette(mat.$teal-palette, B100) !important;          }
+  .bgc-dark-green-B100               {   background-color: mat.get-color-from-palette(mat.$green-palette, B100) !important;         }
+  .bgc-dark-light-green-B100         {   background-color: mat.get-color-from-palette(mat.$green-palette, B100) !important;   }
+  .bgc-dark-lime-B100                {   background-color: mat.get-color-from-palette(mat.$lime-palette, B100) !important;          }
+  .bgc-dark-yellow-B100              {   background-color: mat.get-color-from-palette(mat.$yellow-palette, B100) !important;        }
+  .bgc-dark-amber-B100               {   background-color: mat.get-color-from-palette(mat.$amber-palette, B100) !important;         }
+  .bgc-dark-orange-B100              {   background-color: mat.get-color-from-palette(mat.$orange-palette, B100) !important;        }
+  .bgc-dark-deep-orange-B100         {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, B100) !important;   }
+  .bgc-dark-brown-B100               {   background-color: mat.get-color-from-palette(mat.$brown-palette, B100) !important;         }
+  .bgc-dark-grey-B100                {   background-color: mat.get-color-from-palette(mat.$grey-palette, B100) !important;          }
+  .bgc-dark-blue-grey-B100           {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, B100) !important;     }
+
+  // B65
+  .bgc-dark-red-B65                 {   background-color: mat.get-color-from-palette(mat.$red-palette, B65) !important;           }
+  .bgc-dark-pink-B65                {   background-color: mat.get-color-from-palette(mat.$pink-palette, B65) !important;          }
+  .bgc-dark-purple-B65              {   background-color: mat.get-color-from-palette(mat.$purple-palette, B65) !important;        }
+  .bgc-dark-deep-purple-B65         {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, B65) !important;   }
+  .bgc-dark-indigo-B65              {   background-color: mat.get-color-from-palette(mat.$indigo-palette, B65) !important;        }
+  .bgc-dark-blue-B65                {   background-color: mat.get-color-from-palette(mat.$blue-palette, B65) !important;          }
+  .bgc-dark-light-blue-B65          {   background-color: mat.get-color-from-palette(mat.$blue-palette, B65) !important;    }
+  .bgc-dark-cyan-B65                {   background-color: mat.get-color-from-palette(mat.$cyan-palette, B65) !important;          }
+  .bgc-dark-teal-B65                {   background-color: mat.get-color-from-palette(mat.$teal-palette, B65) !important;          }
+  .bgc-dark-green-B65               {   background-color: mat.get-color-from-palette(mat.$green-palette, B65) !important;         }
+  .bgc-dark-light-green-B65         {   background-color: mat.get-color-from-palette(mat.$green-palette, B65) !important;   }
+  .bgc-dark-lime-B65                {   background-color: mat.get-color-from-palette(mat.$lime-palette, B65) !important;          }
+  .bgc-dark-yellow-B65              {   background-color: mat.get-color-from-palette(mat.$yellow-palette, B65) !important;        }
+  .bgc-dark-amber-B65               {   background-color: mat.get-color-from-palette(mat.$amber-palette, B65) !important;         }
+  .bgc-dark-orange-B65              {   background-color: mat.get-color-from-palette(mat.$orange-palette, B65) !important;        }
+  .bgc-dark-deep-orange-B65         {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, B65) !important;   }
+  .bgc-dark-brown-B65               {   background-color: mat.get-color-from-palette(mat.$brown-palette, B65) !important;         }
+  .bgc-dark-grey-B65                {   background-color: mat.get-color-from-palette(mat.$grey-palette, B65) !important;          }
+  .bgc-dark-blue-grey-B65           {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, B65) !important;     }
+
+  // B40
+  .bgc-dark-red-B40                 {   background-color: mat.get-color-from-palette(mat.$red-palette, B40) !important;           }
+  .bgc-dark-pink-B40                {   background-color: mat.get-color-from-palette(mat.$pink-palette, B40) !important;          }
+  .bgc-dark-purple-B40              {   background-color: mat.get-color-from-palette(mat.$purple-palette, B40) !important;        }
+  .bgc-dark-deep-purple-B40         {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, B40) !important;   }
+  .bgc-dark-indigo-B40              {   background-color: mat.get-color-from-palette(mat.$indigo-palette, B40) !important;        }
+  .bgc-dark-blue-B40                {   background-color: mat.get-color-from-palette(mat.$blue-palette, B40) !important;          }
+  .bgc-dark-light-blue-B40          {   background-color: mat.get-color-from-palette(mat.$blue-palette, B40) !important;    }
+  .bgc-dark-cyan-B40                {   background-color: mat.get-color-from-palette(mat.$cyan-palette, B40) !important;          }
+  .bgc-dark-teal-B40                {   background-color: mat.get-color-from-palette(mat.$teal-palette, B40) !important;          }
+  .bgc-dark-green-B40               {   background-color: mat.get-color-from-palette(mat.$green-palette, B40) !important;         }
+  .bgc-dark-light-green-B40         {   background-color: mat.get-color-from-palette(mat.$green-palette, B40) !important;   }
+  .bgc-dark-lime-B40                {   background-color: mat.get-color-from-palette(mat.$lime-palette, B40) !important;          }
+  .bgc-dark-yellow-B40              {   background-color: mat.get-color-from-palette(mat.$yellow-palette, B40) !important;        }
+  .bgc-dark-amber-B40               {   background-color: mat.get-color-from-palette(mat.$amber-palette, B40) !important;         }
+  .bgc-dark-orange-B40              {   background-color: mat.get-color-from-palette(mat.$orange-palette, B40) !important;        }
+  .bgc-dark-deep-orange-B40         {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, B40) !important;   }
+  .bgc-dark-brown-B40               {   background-color: mat.get-color-from-palette(mat.$brown-palette, B40) !important;         }
+  .bgc-dark-grey-B40                {   background-color: mat.get-color-from-palette(mat.$grey-palette, B40) !important;          }
+  .bgc-dark-blue-grey-B40           {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, B40) !important;     }
+
+  // B30
+  .bgc-dark-red-B30                 {   background-color: mat.get-color-from-palette(mat.$red-palette, B30) !important;           }
+  .bgc-dark-pink-B30                {   background-color: mat.get-color-from-palette(mat.$pink-palette, B30) !important;          }
+  .bgc-dark-purple-B30              {   background-color: mat.get-color-from-palette(mat.$purple-palette, B30) !important;        }
+  .bgc-dark-deep-purple-B30         {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, B30) !important;   }
+  .bgc-dark-indigo-B30              {   background-color: mat.get-color-from-palette(mat.$indigo-palette, B30) !important;        }
+  .bgc-dark-blue-B30                {   background-color: mat.get-color-from-palette(mat.$blue-palette, B30) !important;          }
+  .bgc-dark-light-blue-B30          {   background-color: mat.get-color-from-palette(mat.$blue-palette, B30) !important;    }
+  .bgc-dark-cyan-B30                {   background-color: mat.get-color-from-palette(mat.$cyan-palette, B30) !important;          }
+  .bgc-dark-teal-B30                {   background-color: mat.get-color-from-palette(mat.$teal-palette, B30) !important;          }
+  .bgc-dark-green-B30               {   background-color: mat.get-color-from-palette(mat.$green-palette, B30) !important;         }
+  .bgc-dark-light-green-B30         {   background-color: mat.get-color-from-palette(mat.$green-palette, B30) !important;   }
+  .bgc-dark-lime-B30                {   background-color: mat.get-color-from-palette(mat.$lime-palette, B30) !important;          }
+  .bgc-dark-yellow-B30              {   background-color: mat.get-color-from-palette(mat.$yellow-palette, B30) !important;        }
+  .bgc-dark-amber-B30               {   background-color: mat.get-color-from-palette(mat.$amber-palette, B30) !important;         }
+  .bgc-dark-orange-B30              {   background-color: mat.get-color-from-palette(mat.$orange-palette, B30) !important;        }
+  .bgc-dark-deep-orange-B30         {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, B30) !important;   }
+  .bgc-dark-brown-B30               {   background-color: mat.get-color-from-palette(mat.$brown-palette, B30) !important;         }
+  .bgc-dark-grey-B30                {   background-color: mat.get-color-from-palette(mat.$grey-palette, B30) !important;          }
+  .bgc-dark-blue-grey-B30           {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, B30) !important;     }
+
+  // B15
+  .bgc-dark-red-B15                 {   background-color: mat.get-color-from-palette(mat.$red-palette, B15) !important;           }
+  .bgc-dark-pink-B15                {   background-color: mat.get-color-from-palette(mat.$pink-palette, B15) !important;          }
+  .bgc-dark-purple-B15              {   background-color: mat.get-color-from-palette(mat.$purple-palette, B15) !important;        }
+  .bgc-dark-deep-purple-B15         {   background-color: mat.get-color-from-palette(mat.$deep-purple-palette, B15) !important;   }
+  .bgc-dark-indigo-B15              {   background-color: mat.get-color-from-palette(mat.$indigo-palette, B15) !important;        }
+  .bgc-dark-blue-B15                {   background-color: mat.get-color-from-palette(mat.$blue-palette, B15) !important;          }
+  .bgc-dark-light-blue-B15          {   background-color: mat.get-color-from-palette(mat.$blue-palette, B15) !important;    }
+  .bgc-dark-cyan-B15                {   background-color: mat.get-color-from-palette(mat.$cyan-palette, B15) !important;          }
+  .bgc-dark-teal-B15                {   background-color: mat.get-color-from-palette(mat.$teal-palette, B15) !important;          }
+  .bgc-dark-green-B15               {   background-color: mat.get-color-from-palette(mat.$green-palette, B15) !important;         }
+  .bgc-dark-light-green-B15         {   background-color: mat.get-color-from-palette(mat.$green-palette, B15) !important;   }
+  .bgc-dark-lime-B15                {   background-color: mat.get-color-from-palette(mat.$lime-palette, B15) !important;          }
+  .bgc-dark-yellow-B15              {   background-color: mat.get-color-from-palette(mat.$yellow-palette, B15) !important;        }
+  .bgc-dark-amber-B15               {   background-color: mat.get-color-from-palette(mat.$amber-palette, B15) !important;         }
+  .bgc-dark-orange-B15              {   background-color: mat.get-color-from-palette(mat.$orange-palette, B15) !important;        }
+  .bgc-dark-deep-orange-B15         {   background-color: mat.get-color-from-palette(mat.$deep-orange-palette, B15) !important;   }
+  .bgc-dark-brown-B15               {   background-color: mat.get-color-from-palette(mat.$brown-palette, B15) !important;         }
+  .bgc-dark-grey-B15                {   background-color: mat.get-color-from-palette(mat.$grey-palette, B15) !important;          }
+  .bgc-dark-blue-grey-B15           {   background-color: mat.get-color-from-palette(mat.$blue-grey-palette, B15) !important;     }
+
+  // Fill color
+
+  // 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.$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.$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;                 }
+
+  // B100
+  .fill-red-B100                 {   fill: mat.get-color-from-palette(mat.$red-palette, B100) !important;                      }
+  .fill-pink-B100                {   fill: mat.get-color-from-palette(mat.$pink-palette, B100) !important;                     }
+  .fill-purple-B100              {   fill: mat.get-color-from-palette(mat.$purple-palette, B100) !important;                   }
+  .fill-deep-purple-B100         {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, B100) !important;              }
+  .fill-indigo-B100              {   fill: mat.get-color-from-palette(mat.$indigo-palette, B100) !important;                   }
+  .fill-blue-B100                {   fill: mat.get-color-from-palette(mat.$blue-palette, B100) !important;                     }
+  .fill-light-blue-B100          {   fill: mat.get-color-from-palette(mat.$blue-palette, B100) !important;               }
+  .fill-cyan-B100                {   fill: mat.get-color-from-palette(mat.$cyan-palette, B100) !important;                     }
+  .fill-teal-B100                {   fill: mat.get-color-from-palette(mat.$teal-palette, B100) !important;                     }
+  .fill-green-B100               {   fill: mat.get-color-from-palette(mat.$green-palette, B100) !important;                    }
+  .fill-light-green-B100         {   fill: mat.get-color-from-palette(mat.$green-palette, B100) !important;              }
+  .fill-lime-B100                {   fill: mat.get-color-from-palette(mat.$lime-palette, B100) !important;                     }
+  .fill-yellow-B100              {   fill: mat.get-color-from-palette(mat.$yellow-palette, B100) !important;                   }
+  .fill-amber-B100               {   fill: mat.get-color-from-palette(mat.$amber-palette, B100) !important;                    }
+  .fill-orange-B100              {   fill: mat.get-color-from-palette(mat.$orange-palette, B100) !important;                   }
+  .fill-deep-orange-B100         {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, B100) !important;              }
+  .fill-brown-B100               {   fill: mat.get-color-from-palette(mat.$brown-palette, B100) !important;                    }
+  .fill-grey-B100                {   fill: mat.get-color-from-palette(mat.$grey-palette, B100) !important;                     }
+  .fill-blue-grey-B100           {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, B100) !important;                }
+
+  // B65
+  .fill-red-B65                 {   fill: mat.get-color-from-palette(mat.$red-palette, B65) !important;                      }
+  .fill-pink-B65                {   fill: mat.get-color-from-palette(mat.$pink-palette, B65) !important;                     }
+  .fill-purple-B65              {   fill: mat.get-color-from-palette(mat.$purple-palette, B65) !important;                   }
+  .fill-deep-purple-B65         {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, B65) !important;              }
+  .fill-indigo-B65              {   fill: mat.get-color-from-palette(mat.$indigo-palette, B65) !important;                   }
+  .fill-blue-B65                {   fill: mat.get-color-from-palette(mat.$blue-palette, B65) !important;                     }
+  .fill-light-blue-B65          {   fill: mat.get-color-from-palette(mat.$blue-palette, B65) !important;               }
+  .fill-cyan-B65                {   fill: mat.get-color-from-palette(mat.$cyan-palette, B65) !important;                     }
+  .fill-teal-B65                {   fill: mat.get-color-from-palette(mat.$teal-palette, B65) !important;                     }
+  .fill-green-B65               {   fill: mat.get-color-from-palette(mat.$green-palette, B65) !important;                    }
+  .fill-light-green-B65         {   fill: mat.get-color-from-palette(mat.$green-palette, B65) !important;              }
+  .fill-lime-B65                {   fill: mat.get-color-from-palette(mat.$lime-palette, B65) !important;                     }
+  .fill-yellow-B65              {   fill: mat.get-color-from-palette(mat.$yellow-palette, B65) !important;                   }
+  .fill-amber-B65               {   fill: mat.get-color-from-palette(mat.$amber-palette, B65) !important;                    }
+  .fill-orange-B65              {   fill: mat.get-color-from-palette(mat.$orange-palette, B65) !important;                   }
+  .fill-deep-orange-B65         {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, B65) !important;              }
+  .fill-brown-B65               {   fill: mat.get-color-from-palette(mat.$brown-palette, B65) !important;                    }
+  .fill-grey-B65                {   fill: mat.get-color-from-palette(mat.$grey-palette, B65) !important;                     }
+  .fill-blue-grey-B65           {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, B65) !important;                }
+
+  // B40
+  .fill-red-B40                 {   fill: mat.get-color-from-palette(mat.$red-palette, B40) !important;                      }
+  .fill-pink-B40                {   fill: mat.get-color-from-palette(mat.$pink-palette, B40) !important;                     }
+  .fill-purple-B40              {   fill: mat.get-color-from-palette(mat.$purple-palette, B40) !important;                   }
+  .fill-deep-purple-B40         {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, B40) !important;              }
+  .fill-indigo-B40              {   fill: mat.get-color-from-palette(mat.$indigo-palette, B40) !important;                   }
+  .fill-blue-B40                {   fill: mat.get-color-from-palette(mat.$blue-palette, B40) !important;                     }
+  .fill-light-blue-B40          {   fill: mat.get-color-from-palette(mat.$blue-palette, B40) !important;               }
+  .fill-cyan-B40                {   fill: mat.get-color-from-palette(mat.$cyan-palette, B40) !important;                     }
+  .fill-teal-B40                {   fill: mat.get-color-from-palette(mat.$teal-palette, B40) !important;                     }
+  .fill-green-B40               {   fill: mat.get-color-from-palette(mat.$green-palette, B40) !important;                    }
+  .fill-light-green-B40         {   fill: mat.get-color-from-palette(mat.$green-palette, B40) !important;              }
+  .fill-lime-B40                {   fill: mat.get-color-from-palette(mat.$lime-palette, B40) !important;                     }
+  .fill-yellow-B40              {   fill: mat.get-color-from-palette(mat.$yellow-palette, B40) !important;                   }
+  .fill-amber-B40               {   fill: mat.get-color-from-palette(mat.$amber-palette, B40) !important;                    }
+  .fill-orange-B40              {   fill: mat.get-color-from-palette(mat.$orange-palette, B40) !important;                   }
+  .fill-deep-orange-B40         {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, B40) !important;              }
+  .fill-brown-B40               {   fill: mat.get-color-from-palette(mat.$brown-palette, B40) !important;                    }
+  .fill-grey-B40                {   fill: mat.get-color-from-palette(mat.$grey-palette, B40) !important;                     }
+  .fill-blue-grey-B40           {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, B40) !important;                }
+
+  // B30
+  .fill-red-B30                 {   fill: mat.get-color-from-palette(mat.$red-palette, B30) !important;                      }
+  .fill-pink-B30                {   fill: mat.get-color-from-palette(mat.$pink-palette, B30) !important;                     }
+  .fill-purple-B30              {   fill: mat.get-color-from-palette(mat.$purple-palette, B30) !important;                   }
+  .fill-deep-purple-B30         {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, B30) !important;              }
+  .fill-indigo-B30              {   fill: mat.get-color-from-palette(mat.$indigo-palette, B30) !important;                   }
+  .fill-blue-B30                {   fill: mat.get-color-from-palette(mat.$blue-palette, B30) !important;                     }
+  .fill-light-blue-B30          {   fill: mat.get-color-from-palette(mat.$blue-palette, B30) !important;               }
+  .fill-cyan-B30                {   fill: mat.get-color-from-palette(mat.$cyan-palette, B30) !important;                     }
+  .fill-teal-B30                {   fill: mat.get-color-from-palette(mat.$teal-palette, B30) !important;                     }
+  .fill-green-B30               {   fill: mat.get-color-from-palette(mat.$green-palette, B30) !important;                    }
+  .fill-light-green-B30         {   fill: mat.get-color-from-palette(mat.$green-palette, B30) !important;              }
+  .fill-lime-B30                {   fill: mat.get-color-from-palette(mat.$lime-palette, B30) !important;                     }
+  .fill-yellow-B30              {   fill: mat.get-color-from-palette(mat.$yellow-palette, B30) !important;                   }
+  .fill-amber-B30               {   fill: mat.get-color-from-palette(mat.$amber-palette, B30) !important;                    }
+  .fill-orange-B30              {   fill: mat.get-color-from-palette(mat.$orange-palette, B30) !important;                   }
+  .fill-deep-orange-B30         {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, B30) !important;              }
+  .fill-brown-B30               {   fill: mat.get-color-from-palette(mat.$brown-palette, B30) !important;                    }
+  .fill-grey-B30                {   fill: mat.get-color-from-palette(mat.$grey-palette, B30) !important;                     }
+  .fill-blue-grey-B30           {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, B30) !important;                }
+
+  // B15
+  .fill-red-B15                 {   fill: mat.get-color-from-palette(mat.$red-palette, B15) !important;                      }
+  .fill-pink-B15                {   fill: mat.get-color-from-palette(mat.$pink-palette, B15) !important;                     }
+  .fill-purple-B15              {   fill: mat.get-color-from-palette(mat.$purple-palette, B15) !important;                   }
+  .fill-deep-purple-B15         {   fill: mat.get-color-from-palette(mat.$deep-purple-palette, B15) !important;              }
+  .fill-indigo-B15              {   fill: mat.get-color-from-palette(mat.$indigo-palette, B15) !important;                   }
+  .fill-blue-B15                {   fill: mat.get-color-from-palette(mat.$blue-palette, B15) !important;                     }
+  .fill-light-blue-B15          {   fill: mat.get-color-from-palette(mat.$blue-palette, B15) !important;               }
+  .fill-cyan-B15                {   fill: mat.get-color-from-palette(mat.$cyan-palette, B15) !important;                     }
+  .fill-teal-B15                {   fill: mat.get-color-from-palette(mat.$teal-palette, B15) !important;                     }
+  .fill-green-B15               {   fill: mat.get-color-from-palette(mat.$green-palette, B15) !important;                    }
+  .fill-light-green-B15         {   fill: mat.get-color-from-palette(mat.$green-palette, B15) !important;              }
+  .fill-lime-B15                {   fill: mat.get-color-from-palette(mat.$lime-palette, B15) !important;                     }
+  .fill-yellow-B15              {   fill: mat.get-color-from-palette(mat.$yellow-palette, B15) !important;                   }
+  .fill-amber-B15               {   fill: mat.get-color-from-palette(mat.$amber-palette, B15) !important;                    }
+  .fill-orange-B15              {   fill: mat.get-color-from-palette(mat.$orange-palette, B15) !important;                   }
+  .fill-deep-orange-B15         {   fill: mat.get-color-from-palette(mat.$deep-orange-palette, B15) !important;              }
+  .fill-brown-B15               {   fill: mat.get-color-from-palette(mat.$brown-palette, B15) !important;                    }
+  .fill-grey-B15                {   fill: mat.get-color-from-palette(mat.$grey-palette, B15) !important;                     }
+  .fill-blue-grey-B15           {   fill: mat.get-color-from-palette(mat.$blue-grey-palette, B15) !important;                }
+}