refactor(typography): change text colors

src/app/pages/ui/typography/typography.html

@@ -118,7 +118,7 @@
 
   <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-xs-12 typography-widget">
     <div ba-panel ba-panel-class="with-scroll color-widget" ba-panel-title="Text Color">
-      <div class="section-block black-text ">
+      <div class="section-block red-text ">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
           ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
           ornare
@@ -127,7 +127,7 @@
           parturient montes, nascetur ridiculus mus.
         </p>
       </div>
-      <div class="section-block accent-text ">
+      <div class="section-block yellow-text ">
         <p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget
           urna
           mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur

src/sass/app/_typography.scss

@@ -136,12 +136,12 @@ h5 {
     margin: 14px 0;
   }
 
-  .accent-text p {
-    color: $accent;
+  .yellow-text p {
+    color: $warning-bg;
   }
 
-  .black-text p {
-    color: black;
+  .red-text p {
+    color: $danger-bg;
   }
 
   .links {
@@ -170,11 +170,11 @@ h5 {
 
   .accent {
     margin-top: 30px;
-    color: $accent;
+    color: $warning-bg;
     line-height: 14px;
     font-size: 14px;
     padding-left: 11px;
-    border-left: 4px solid $accent;
+    border-left: 4px solid $warning-bg;
     margin-left: 13px;
   }
 
@@ -198,7 +198,7 @@ h5 {
     li {
       &:before {
         content: "• ";
-        color: $accent;
+        color: $warning-bg;
         width: 10px;
         display: inline-block;
       }
@@ -208,7 +208,7 @@ h5 {
   ol.blur {
     counter-reset: section;
     li {
-      color: $accent;
+      color: $warning-bg;
       padding-left: 0;
       line-height: 14px;
       position: relative;