Index: resources/assets/sass/components/color.scss
===================================================================
--- resources/assets/sass/components/color.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/color.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,277 @@
+.bg-primary {
+   background: $color-primary !important;
+   color: white !important;
+}
+
+.bg-primary-bright {
+   background: $color-primary-bright !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: rgba(11,91,182,.3) !important;
+      }
+   }
+}
+
+.bg-primary-gradient {
+   background: linear-gradient(230deg, $color-primary, lighten($color-primary, 15%)) !important;
+   color: white !important;
+}
+
+.bg-info {
+   background: $color-info !important;
+   color: white !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: lighten($color-info, 10%) !important;
+      }
+   }
+}
+
+.bg-info-bright {
+   background: $color-info-bright !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: darken($color-info-bright, 5%) !important;
+      }
+   }
+}
+
+.bg-info-gradient {
+   background: linear-gradient(230deg, $color-info, lighten($color-info, 15%)) !important;
+   color: white !important;
+}
+
+.bg-secondary {
+   background: $color-secondary !important;
+   color: white !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: lighten($color-secondary, 10%) !important;
+      }
+   }
+}
+
+.bg-secondary-bright {
+   background: $color-secondary-bright !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: darken($color-secondary-bright, 5%) !important;
+      }
+   }
+}
+
+.bg-secondary-gradient {
+   background: linear-gradient(230deg, $color-secondary, lighten($color-secondary, 15%)) !important;
+   color: white !important;
+}
+
+.bg-success {
+   background: $color-success !important;
+   color: white !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: lighten($color-success, 10%) !important;
+      }
+   }
+}
+
+.bg-success-bright {
+   background: $color-success-bright !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: darken($color-success-bright, 5%) !important;
+      }
+   }
+}
+
+.bg-success-gradient {
+   background: linear-gradient(230deg, $color-success, lighten($color-success, 15%)) !important;
+   color: white !important;
+}
+
+.bg-danger {
+   background: $color-danger !important;
+   color: white !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: lighten($color-danger, 10%) !important;
+      }
+   }
+}
+
+.bg-danger-bright {
+   background: $color-danger-bright !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: darken($color-danger-bright, 5%) !important;
+      }
+   }
+}
+
+.bg-danger-gradient {
+   background: linear-gradient(230deg, $color-danger, lighten($color-danger, 15%)) !important;
+   color: white !important;
+}
+
+.bg-warning {
+   background: $color-warning !important;
+   color: white !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: lighten($color-warning, 10%) !important;
+      }
+   }
+}
+
+.bg-warning-bright {
+   background: $color-warning-bright !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: darken($color-warning-bright, 5%) !important;
+      }
+   }
+}
+
+.bg-warning-gradient {
+   background: linear-gradient(230deg, $color-warning, lighten($color-warning, 15%)) !important;
+   color: white !important;
+}
+
+.bg-light {
+   background: $color-light !important;
+}
+
+.bg-dark {
+   background: $color-dark !important;
+   color: white !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: lighten($color-dark, 10%) !important;
+      }
+   }
+}
+
+.bg-dark-bright {
+   background: $color-dark-bright !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: darken($color-dark-bright, 5%) !important;
+      }
+   }
+}
+
+.bg-dark-gradient {
+   background: linear-gradient(230deg, $color-dark, lighten($color-dark, 15%)) !important;
+   color: white !important;
+}
+
+.bg-facebook {
+   background: $color-facebook !important;
+   color: white !important;
+}
+
+.bg-twitter {
+   background: $color-twitter !important;
+   color: white !important;
+}
+
+.bg-linkedin {
+   background: $color-linkedin !important;
+   color: white !important;
+}
+
+.bg-whatsapp {
+   background: $color-whatsapp !important;
+   color: white !important;
+}
+
+.bg-instagram {
+   background: $color-instagram !important;
+   color: white !important;
+}
+
+.bg-dribbble {
+   background: $color-dribbble !important;
+   color: white !important;
+}
+
+.bg-google {
+   background: $color-google !important;
+   color: white !important;
+}
+
+.bg-youtube {
+   background: $color-youtube !important;
+   color: white !important;
+}
+
+// texts
+
+.text-primary {
+   color: $color-primary !important;
+}
+
+.text-secondary {
+   color: $color-secondary !important;
+}
+
+.text-info {
+   color: $color-info !important;
+}
+
+.text-success {
+   color: $color-success !important;
+}
+
+.text-danger {
+   color: $color-danger !important;
+}
+
+.text-warning {
+   color: $color-warning !important;
+}
+
+.text-light {
+   color: $color-light!important;
+}
+
+.text-facebook {
+   color: $color-facebook!important;
+}
+
+.text-twitter {
+   color: $color-twitter!important;
+}
+
+.text-google {
+   color: $color-google!important;
+}
+
+.text-linkedin {
+   color: $color-linkedin!important;
+}
+
+.text-instagram {
+   color: $color-instagram!important;
+}
+
+.text-whatsapp {
+   color: $color-whatsapp!important;
+}
+
+.text-dribbble {
+   color: $color-dribbble!important;
+}
