1 files changed, 50 insertions, 34 deletions

diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss
index 46edfb03de..1543f0adcd 100644
--- a/openecomp-ui/resources/scss/common/_typography.scss
+++ b/openecomp-ui/resources/scss/common/_typography.scss
@@ -1,28 +1,20 @@
 /* Fonts */
-@font-face {
-  font-family: Omnes-Light;
-  src: url('../fonts/omnes-att-light.otf');
-}
 
-@font-face {
-  font-family: Omnes-Regular;
-  src: url('../fonts/omnes-att-regular.otf');
+@mixin base-font-regular() {
+  font-family: omnes-regular, Arial, sans-serif;
 }
 
-@font-face {
-  font-family: Omnes-Medium;
-  src: url('../fonts/omnes-att-medium.otf');
+@mixin base-font-light() {
+  font-family: omnes-light, Arial, sans-serif;
 }
 
-@font-face {
-  font-family: Omnes-Bold;
-  src: url('../fonts/omnes-att-bold.otf');
+@mixin base-font-medium() {
+  font-family: omnes-medium, Arial, sans-serif;
 }
 
-$base-font-regular: omnes-regular, "Omnes-Regular";
-$base-font-light: omnes-light, "Omnes-Light";
-$base-font-medium: omnes-medium, "Omnes-Medium";
-$base-font-bold: omnes-bold, "Omnes-Bold";
+@mixin base-font-bold() {
+  font-family: omnes-bold, Arial, sans-serif;
+}
 
 $heading-font-1: 36px;
 $heading-font-2: 24px;
@@ -34,82 +26,106 @@ $body-font-1: 14px;
 $body-font-2: 13px;
 $body-font-3: 12px;
 
-$icon-font-size: 10px;
-$icon-font-family: FontAwesome;
+$icon-font-size: 11px;
+$icon-font-family: Arial;
 $radio-font-family: Arial;
 
 .heading-1 {
-  font-family: $base-font-light;
+  @include base-font-light;
   font-size: $heading-font-1;
 }
 
 .heading-2 {
-  font-family: $base-font-light;
+  @include base-font-light;
   font-size: $heading-font-2;
 }
 
 .heading-3-light {
-  font-family: $base-font-light;
+  @include base-font-light;
   font-size: $heading-font-3;
+  @extend .text-uppercase !optional;
 }
 
 .heading-3 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $heading-font-3;
+  @extend .text-uppercase !optional;
 }
 
 .heading-3-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $heading-font-3;
+  @extend .text-uppercase !optional;
 }
 
 .heading-4 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $heading-font-4;
 }
 
 .heading-4-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $heading-font-4;
 }
 
 .heading-5 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $heading-font-5;
 }
 
 .heading-5-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $heading-font-5;
 }
 
 .body-1 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $body-font-1;
 }
 
 .body-1-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
+  font-size: $body-font-1;
+}
+
+.body-1-light {
+  @include base-font-light;
   font-size: $body-font-1;
 }
 
 .body-2 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $body-font-2;
 }
 
 .body-2-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $body-font-2;
 }
 
 .body-3 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $body-font-3;
 }
 
 .body-3-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $body-font-3;
 }
 
+.body-3-light {
+  @include base-font-light;
+  font-size: $body-font-3;
+}
+
+.circle-icon-text {
+  @include base-font-medium;
+  font-size: $body-font-1;
+}
+
+.warning-text {
+  color: $orange;
+}
+.error-text {
+  color: $red;
+}