palette: add three new colors (yellow, brown, grey)

css/style.css

@@ -383,6 +383,18 @@ a, a:hover, a:active {
   background-color: #46bd9e;
   color: #FFF; }
 
+.card-yellow > .card-header {
+  background-color: #f6d32d;
+  color: #FFF; }
+
+.card-brown > .card-header {
+  background-color: #986a44;
+  color: #FFF; }
+
+.card-grey > .card-header {
+  background-color: #77767b;
+  color: #FFF; }
+
 .card-primary > .card-header {
   background-color: #7951c0;
   color: #FFF; }
@@ -478,6 +490,27 @@ a, a:hover, a:active {
     background-color: #6ccab2;
     color: #FFF; }
 
+.btn-yellow {
+  background-color: #f6d32d;
+  color: #FFF; }
+  .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus, .btn-yellow:not(.disabled):not(:disabled):hover, .btn-yellow:not(.disabled):not(:disabled):active, .btn-yellow:not(.disabled):not(:disabled):focus {
+    background-color: #f8dd5e;
+    color: #FFF; }
+
+.btn-brown {
+  background-color: #986a44;
+  color: #FFF; }
+  .btn-brown:hover, .btn-brown:active, .btn-brown:focus, .btn-brown:not(.disabled):not(:disabled):hover, .btn-brown:not(.disabled):not(:disabled):active, .btn-brown:not(.disabled):not(:disabled):focus {
+    background-color: #b5835a;
+    color: #FFF; }
+
+.btn-grey {
+  background-color: #77767b;
+  color: #FFF; }
+  .btn-grey:hover, .btn-grey:active, .btn-grey:focus, .btn-grey:not(.disabled):not(:disabled):hover, .btn-grey:not(.disabled):not(:disabled):active, .btn-grey:not(.disabled):not(:disabled):focus {
+    background-color: #919094;
+    color: #FFF; }
+
 .btn-primary {
   background-color: #7951c0;
   color: #FFF; }
@@ -627,6 +660,27 @@ a, a:hover, a:active {
     background-color: #6ccab2;
     color: #FFF; }
 
+.badge-yellow {
+  background-color: #f6d32d;
+  color: #FFF; }
+  .badge-yellow:hover, .badge-yellow:active, .badge-yellow:focus, a:hover > .badge-yellow, a:active > .badge-yellow, a:focus > .badge-yellow, .badge-yellow:not(.disabled):not(:disabled):hover, .badge-yellow:not(.disabled):not(:disabled):active, .badge-yellow:not(.disabled):not(:disabled):focus, a:hover > .badge-yellow:not(.disabled):not(:disabled), a:active > .badge-yellow:not(.disabled):not(:disabled), a:focus > .badge-yellow:not(.disabled):not(:disabled) {
+    background-color: #f8dd5e;
+    color: #FFF; }
+
+.badge-brown {
+  background-color: #986a44;
+  color: #FFF; }
+  .badge-brown:hover, .badge-brown:active, .badge-brown:focus, a:hover > .badge-brown, a:active > .badge-brown, a:focus > .badge-brown, .badge-brown:not(.disabled):not(:disabled):hover, .badge-brown:not(.disabled):not(:disabled):active, .badge-brown:not(.disabled):not(:disabled):focus, a:hover > .badge-brown:not(.disabled):not(:disabled), a:active > .badge-brown:not(.disabled):not(:disabled), a:focus > .badge-brown:not(.disabled):not(:disabled) {
+    background-color: #b5835a;
+    color: #FFF; }
+
+.badge-grey {
+  background-color: #77767b;
+  color: #FFF; }
+  .badge-grey:hover, .badge-grey:active, .badge-grey:focus, a:hover > .badge-grey, a:active > .badge-grey, a:focus > .badge-grey, .badge-grey:not(.disabled):not(:disabled):hover, .badge-grey:not(.disabled):not(:disabled):active, .badge-grey:not(.disabled):not(:disabled):focus, a:hover > .badge-grey:not(.disabled):not(:disabled), a:active > .badge-grey:not(.disabled):not(:disabled), a:focus > .badge-grey:not(.disabled):not(:disabled) {
+    background-color: #919094;
+    color: #FFF; }
+
 .badge-primary {
   background-color: #7951c0;
   color: #FFF; }
@@ -710,6 +764,18 @@ a, a:hover, a:active {
   background-color: #46bd9e !important;
   color: #FFF; }
 
+.bg-yellow {
+  background-color: #f6d32d !important;
+  color: #FFF; }
+
+.bg-brown {
+  background-color: #986a44 !important;
+  color: #FFF; }
+
+.bg-grey {
+  background-color: #77767b !important;
+  color: #FFF; }
+
 .bg-primary {
   background-color: #7951c0 !important;
   color: #FFF; }
@@ -775,6 +841,18 @@ a, a:hover, a:active {
   background-color: #caece3;
   color: black; }
 
+.alert-yellow {
+  background-color: #fdf7d8;
+  color: black; }
+
+.alert-brown {
+  background-color: #ddc5b2;
+  color: black; }
+
+.alert-grey {
+  background-color: #d1d1d3;
+  color: black; }
+
 .alert-primary {
   background-color: #ded4ef;
   color: black; }
@@ -830,6 +908,15 @@ a, a:hover, a:active {
 .text-turquoise {
   color: #46bd9e; }
 
+.text-yellow {
+  color: #f6d32d; }
+
+.text-brown {
+  color: #986a44; }
+
+.text-grey {
+  color: #77767b; }
+
 .text-primary {
   color: #7951c0; }
 

scss/_colorize.scss

@@ -67,6 +67,9 @@ a, a:hover, a:active {
   &-dark { @include card-color($color-dark, #FFF); }
   &-light { @include card-color($color-light, #111); }
   &-turquoise { @include card-color($color-turquoise, #FFF); }
+  &-yellow { @include card-color($color-yellow, #FFF); }
+  &-brown { @include card-color($color-brown, #FFF); }
+  &-grey { @include card-color($color-grey, #FFF); }
   
   &-primary { @include card-color($color-primary, #FFF); }
   &-secondary { @include card-color($color-secondary, #FFF); }
@@ -89,6 +92,9 @@ a, a:hover, a:active {
   &-dark { @include button-color($color-dark, #FFF); }
   &-light { @include button-color($color-light, #111); }
   &-turquoise { @include button-color($color-turquoise, #FFF); }
+  &-yellow { @include button-color($color-yellow, #FFF); }
+  &-brown { @include button-color($color-brown, #FFF); }
+  &-grey { @include button-color($color-grey, #FFF); }
   
   &-primary { @include button-color($color-primary, #FFF); }
   &-secondary { @include button-color($color-secondary, #FFF); }
@@ -121,6 +127,9 @@ a, a:hover, a:active {
   &-dark { @include badge-color($color-dark, #FFF); }
   &-light { @include badge-color($color-light, #111); }
   &-turquoise { @include badge-color($color-turquoise, #FFF); }
+  &-yellow { @include badge-color($color-yellow, #FFF); }
+  &-brown { @include badge-color($color-brown, #FFF); }
+  &-grey { @include badge-color($color-grey, #FFF); }
   
   &-primary { @include badge-color($color-primary, #FFF); }
   &-secondary { @include badge-color($color-secondary, #FFF); }
@@ -143,6 +152,9 @@ a, a:hover, a:active {
   &-dark { @include background-color($color-dark, #FFF); }
   &-light { @include background-color($color-light, #111); }
   &-turquoise { @include background-color($color-turquoise, #FFF); }
+  &-yellow { @include background-color($color-yellow, #FFF); }
+  &-brown { @include background-color($color-brown, #FFF); }
+  &-grey { @include background-color($color-grey, #FFF); }  
   
   &-primary { @include background-color($color-primary, #FFF); }
   &-secondary { @include background-color($color-secondary, #FFF); }
@@ -165,6 +177,9 @@ a, a:hover, a:active {
   &-dark { @include alert-color($color-dark); }
   &-light { @include alert-color($color-light); }
   &-turquoise { @include alert-color($color-turquoise); }
+  &-yellow { @include alert-color($color-yellow); }
+  &-brown { @include alert-color($color-brown); }
+  &-grey { @include alert-color($color-grey); }  
   
   &-primary { @include alert-color($color-primary); }
   &-secondary { @include alert-color($color-secondary); }
@@ -187,6 +202,9 @@ a, a:hover, a:active {
   &-dark { @include text-color($color-dark); }
   &-light { @include text-color($color-light); }
   &-turquoise { @include text-color($color-turquoise); }
+  &-yellow { @include text-color($color-yellow); }
+  &-brown { @include text-color($color-brown); }
+  &-grey { @include text-color($color-grey); }  
   
   &-primary { @include text-color($color-primary); }
   &-secondary { @include text-color($color-secondary); }

scss/_palette.scss

@@ -8,6 +8,9 @@ $color-skyblue: #42a0f3;
 $color-dark: #6d6d6d;
 $color-light: #eeeeec;
 $color-turquoise: #46bd9e;
+$color-yellow: #f6d32d;
+$color-brown: #986a44;
+$color-grey: #77767b;
 
 $color-warning: $color-orange;
 $color-danger: $color-red;