style: make sylus example alerts change with kind (#1611)

Author: CFrez

examples/stylus/src/components/Alert.jsx

@@ -4,7 +4,8 @@ import t from 'prop-types'
 import './Alert.styl'
 
 export const Alert = ({ children, kind, ...rest }) => (
-  <div className="Alert" {...rest}>
+  // space used after alert in order to have kind remain as a separate name
+  <div className={'Alert ' + kind} {...rest}>
     {children}
   </div>
 )

examples/stylus/src/components/Alert.styl

@@ -1,5 +1,19 @@
 .Alert {
-  padding: 1rem;
-  margin: 1rem;
-  border-radius: 0.25rem;
+  padding: .5rem
+  margin: 1rem
+  border-radius: 0.25rem
+  background-color: white
+  &.info {
+    color: white
+    background-color: #5352ED
+    }
+  &.positive {
+    background-color: #2ED573
+    }
+  &.negative {
+    background-color: #FF4757
+    }
+  &.warning {
+    background-color: #FFA502
+    }
 }