Alerts do not meet color contrast requirements

closes CNVS-23377

This changes the global alert notifications in the styleguide to meet our
webaim contrast ratios.

Test Plan:
- Go to /styleguide
- Go to Hightlights & Alerts section
- All colors meet our 3:1 contrast ratio
- Turn on High-contrast mode
- Go back to Alert section in styleguide
- All colors meet our 4.5:1 contrast ratio

UI dev notes:
- I moved bootstrap/_alerts css into our component/_alerts file
- Took out _alerts from the custom_bootstrap file
- Took out some commenting cruft in custom_bootstrap
- Took out .alert-block css since on searching it didn't appear to be used
anywhere
- Took out some of the bootstrap styles on the notifications (border,
text-shadow, and margin); then switched out the colors for our variables
- The "info" alert pulls in the primary color variables, so if customized, that
will pull in custom colors

Change-Id: I95b0ebb3cc833fd252160245e176c5dfeeb001b2
Reviewed-on: https://gerrit.instructure.com/64321
Tested-by: Jenkins
Reviewed-by: Chris Hart <chart@instructure.com>
Product-Review: Chris Hart <chart@instructure.com>
QA-Review: Myller de Araujo <myller@instructure.com>

Author: Colleen Palmer

app/stylesheets/base/_custom_bootstrap.scss

@@ -16,22 +16,16 @@
 @import "vendor/bootstrap/tables";
 
 // Components: common
-//@import "vendor/bootstrap/sprites"; //we do our own icons
 @import "vendor/bootstrap/dropdowns";
 @import "vendor/bootstrap/wells";
 @import "vendor/bootstrap/component-animations";
 @import "vendor/bootstrap/close";
 
-// Components: Alerts
-@import "vendor/bootstrap/alerts";
-
 // Components: Nav
 @import "vendor/bootstrap/navs";
 @import "vendor/bootstrap/pagination";
 
 // Components: Popovers
-//@import "vendor/bootstrap/modals"; // use jqueryUI instead
-//@import "vendor/bootstrap/tooltip"; // we do our own
 @import "vendor/bootstrap/popovers";
 
 // Components: Misc

app/stylesheets/bundles/common.scss

@@ -10,6 +10,7 @@
 @import "vendor/flexboxgrid";
 
 // Canvas components and area-specific styles
+@import "components/alerts";
 @import "components/buttons";
 @import "components/g_base";
 @import "components/accordion";

app/stylesheets/components/_alerts.scss

@@ -49,6 +49,52 @@
 
 */
 
+// Alerts
+////////////////////////
+
+
+// Base styles
+
+.alert {
+  padding: $ic-sp $ic-sp*3 $ic-sp $ic-sp;
+  background-color: $ic-bg-light-alert;
+  color: $ic-color-alert;
+  border-radius: $ic-border-radius;
+}
+.alert h4 {
+  margin: 0;
+}
+
+// Adjust close link position
+
+.alert .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  line-height: $baseLineHeight;
+}
+
+// Alternate State Colors
+
+.alert-success {
+  background-color: $ic-bg-light-success;
+  color: $successText;
+}
+.alert-danger,
+.alert-error {
+  background-color: $ic-bg-light-danger;
+  color: $ic-color-danger;
+}
+.alert-info {
+  background-color: $ic-bg-light-primary;
+  color: $ic-brand-primary;
+}
+
+//// end Alerts
+
+//// Flash Notifications
+////////////////////////
+
 .ic-flash-info, .ic-flash-success, .ic-flash-warning, .ic-flash-error {
   position: relative;