add bg-primary classes

resources/sass/components/_elements.scss

@@ -20,15 +20,38 @@
     max-height: 16rem;
 }
 
+@for $i from 1 through 9 {
+
+    .bg-primary-#{$i}00 {
+        @apply bg-green-#{$i}00;
+    }
+
+    .hover:bg-primary-#{$i}00 {
+        @apply bg-green-#{$i}00;
+    }
+
+    .bg-secondary-#{$i}00 {
+        @apply bg-blue-#{$i}00;
+    }
+
+    .text-primary-#{$i}00 {
+        @apply text-gray-#{$i}00;
+    }
+
+    .hover:text-primary-#{$i}00 {
+        @apply text-gray-#{$i}00;
+    }
+}
+
 .page-title {
-    @apply text-3xl font-bold text-orange-900;
+    @apply text-3xl font-bold text-primary-900;
 }
 
 a {
-    @apply text-orange-700;
+    @apply text-primary-700;
 
     &:hover {
-        @apply text-orange-900;
+        @apply text-primary-900;
     }
 }
 
@@ -50,10 +73,10 @@ a {
     @apply shadow;
 
     &-header {
-        @apply flex justify-between items-center px-4 py-2 rounded bg-orange-400 font-bold cursor-pointer;
+        @apply flex justify-between items-center px-4 py-2 rounded bg-primary-400 font-bold cursor-pointer;
 
         svg {
-            @apply w-8 text-orange-600 fill-current;
+            @apply w-8 text-primary-600 fill-current;
         }
     }
 
@@ -73,7 +96,7 @@ a {
 }
 
 .card {
-    @apply bg-orange-300 rounded;
+    @apply bg-primary-300 rounded;
 
     svg {
         @apply max-w-full max-h-64 m-auto fill-current;
@@ -84,10 +107,10 @@ a {
     }
 
     &:hover {
-        @apply bg-orange-500;
+        @apply bg-primary-500;
 
         h2 {
-            @apply text-orange-700;
+            @apply text-primary-700;
         }
     }
 }