2 files changed, 103 insertions, 30 deletions

diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss
index 997e0a21..9472fe68 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss
@@ -1,6 +1,90 @@
 $cursor-disabled: not-allowed !default;
 $cursor-pointer: pointer;
 
+$heading-font-1: 28px;
+$heading-font-2: 24px;
+$heading-font-3: 20px;
+$heading-font-4: 16px;
+$heading-font-5: 14px;
+
+$body-font-1: 14px;
+$body-font-2: 13px;
+$body-font-3: 12px;
+$body-font-4: 10px;
+
+@mixin regular-font() {
+    font-family: OpenSans-Regular, Arial, sans-serif;
+    font-style: normal;
+    font-weight: 400;
+}
+
+@mixin italic-font() {
+    font-family: OpenSans-Italic, OpenSans-Regular, Arial, sans-serif;
+    font-style: italic;
+    font-weight: 400;
+}
+
+@mixin semibold-font() {
+    font-family: OpenSans-Semibold, Arial, sans-serif;
+    font-style: normal;
+    font-weight: 600;
+}
+
+@mixin body-1() {
+    @include regular-font;
+    font-size: $body-font-1;
+}
+
+@mixin body-1-semibold() {
+    @include semibold-font;
+    font-size: $body-font-1;
+}
+
+@mixin body-2() {
+    @include regular-font;
+    font-size: $body-font-2;
+}
+
+@mixin body-2-semibold() {
+    @include semibold-font;
+    font-size: $body-font-2;
+}
+
+@mixin body-3() {
+    @include regular-font;
+    font-size: $body-font-3;
+}
+
+@mixin body-4() {
+    @include regular-font;
+    font-size: $body-font-4;
+}
+
+@mixin heading-1() {
+    @include regular-font;
+    font-size: $heading-font-1;
+}
+
+@mixin heading-1-semibold() {
+    @include semibold-font;
+    font-size: $heading-font-1;
+}
+
+@mixin heading-4() {
+    @include regular-font;
+    font-size: $heading-font-4;
+}
+
+@mixin heading-4-semibold() {
+    @include semibold-font;
+    font-size: $heading-font-4;
+}
+
+@mixin heading-5() {
+    @include regular-font;
+    font-size: $heading-font-5;
+}
+
 .flex {
     display: flex;
     flex: 1;
@@ -36,9 +120,3 @@ $cursor-pointer: pointer;
     opacity: 0.7 !important;
     cursor: $cursor-disabled;
 }
-
-@mixin semi-bold() {
-    font-weight: 600;
-};
-
-
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss
index 9d71cf7e..f367c23b 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss
@@ -1,31 +1,26 @@
-/* Fonts */
 @font-face {
     font-family: 'OpenSans-Regular';
     font-style: normal;
     font-weight: 400;
-    src:
-            local('Open Sans Regular'),
-            local('OpenSans-Regular'),
-            url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'),
-            url(http://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff)  format('woff');
-  }
-  @font-face {
+    src: local('Open Sans Regular'), local('OpenSans-Regular'),
+        url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'),
+        url('../fonts/open-sans-v15-latin-regular.woff') format('woff');
+}
+
+@font-face {
     font-family: 'OpenSans-Italic';
-    font-style: normal;
+    font-style: italic;
     font-weight: 400;
-    src:
-            local('Open Sans Italic'),
-            local('OpenSans-Italic'),
-            url(https://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'),
-            url(http://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'OpenSans-Semibold';
+    src: local('Open Sans Italic'), local('OpenSans-Italic'),
+        url('../fonts/open-sans-v15-latin-italic.woff2') format('woff2'),
+        url('../fonts/open-sans-v15-latin-italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'OpenSans-SemiBold';
     font-style: normal;
-    font-weight: 400;
-    src:
-            local('Open Sans Semibold'),
-            local('OpenSans-Semibold'),
-            url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'),
-            url(http://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff)   format('woff');
-  }
\ No newline at end of file
+    font-weight: 600;
+    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+        url('../fonts/open-sans-v15-latin-600.woff2') format('woff2'),
+        url('../fonts/open-sans-v15-latin-600.woff') format('woff');
+}