Add .Alert--warning

Author: AlecRust

README.md

@@ -21,6 +21,7 @@ Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/)
 
 * `Alert--success` - Applies success colours to the alert
 * `Alert--danger` - Applies danger colours to the alert
+* `Alert--warning` - Applies warning colours to the alert
 
 ## Configurable variables
 
@@ -36,6 +37,10 @@ Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/)
 * `--Alert--danger-borderColor`
 * `--Alert--danger-textColor`
 
+* `--Alert--warning-backgroundColor`
+* `--Alert--warning-borderColor`
+* `--Alert--warning-textColor`
+
 ## Use
 
 Examples:

lib/alert.css

@@ -12,6 +12,10 @@
   --Alert--danger-backgroundColor: #f8d7da;
   --Alert--danger-borderColor: #f5c6cb;
   --Alert--danger-textColor: #721c24;
+
+  --Alert--warning-backgroundColor: #fff3cd;
+  --Alert--warning-borderColor: #ffeeba;
+  --Alert--warning-textColor: #856404;
 }
 
 .Alert {
@@ -34,3 +38,9 @@
   border-color: var(--Alert--danger-borderColor);
   color: var(--Alert--danger-textColor);
 }
+
+.Alert--warning {
+  background-color: var(--Alert--warning-backgroundColor);
+  border-color: var(--Alert--warning-borderColor);
+  color: var(--Alert--warning-textColor);
+}

test/index.html

@@ -30,4 +30,12 @@ <h3 class="Test-it">renders with danger modifier</h3>
       This is a danger alert.
     </div>
   </div>
+
+  <h3 class="Test-describe">.Alert.Alert--warning</h3>
+  <h3 class="Test-it">renders with warning modifier</h3>
+  <div class="Test-run" id="warning">
+    <div class="Alert Alert--warning">
+      This is a warning alert.
+    </div>
+  </div>
 </div>