diff --git a/src/components/_alerts.scss b/src/components/_alerts.scss
index 9677f0f..ca6be89 100644
--- a/src/components/_alerts.scss
+++ b/src/components/_alerts.scss
@@ -1,16 +1,17 @@
-@mixin btn-close-color($base-color) {
-  color: lighten($base-color, 10%);
-
+@mixin btn-close-color($base-color-name) {
+  @include color('color', #{$base-color-name}-light-10);
   &:hover,
   &:active,
   &:focus {
-    color: darken($base-color, 10%);
+    @include color('color', #{$base-color-name}-dark-10)
   }
 }
 
 .alert {
+  @include color('border-color', 'primary');
   @include border-style();
-  border: 2px solid $primary;
+  border-style: solid;
+  border-width: 2px;
   margin-bottom: 20px;
   padding: 15px;
   width: 100%;
@@ -33,9 +34,9 @@
 
 @each $colorName, $color, $color-light in $colors {
   .alert-#{$colorName} {
-    background-color: $color-light;
-    border-color: $color;
-    color: $color;
+    @include color('color', #{$colorName}-text);
+    @include color('background-color', #{$colorName}-light);
+    @include color('border-color', #{$colorName});
 
     .btn-close {
       @include btn-close-color($color);