Feature/fwf 3920 css variable fetcher utility

forms-flow-service/src/formsflow-services.ts

@@ -3,5 +3,6 @@ import StorageService from "./storage/storageService";
 import RequestService from "./request/requestService";
 import i18nService from "./resourceBundles/i18n";
 import HelperServices from "./helpers/helperServices";
+import StyleServices from "./helpers/styleService"
 
-export { KeycloakService, StorageService, RequestService, i18nService, HelperServices };
+export { KeycloakService, StorageService, RequestService, i18nService, HelperServices, StyleServices };

forms-flow-service/src/helpers/styleService.ts

@@ -0,0 +1,12 @@
+class StyleServices {
+  //css variable fetcher utility
+  public static getCSSVariable(
+    variableName: string,
+    element: HTMLElement = document.documentElement
+  ): string {
+    const value = getComputedStyle(element).getPropertyValue(variableName);
+    return value.trim();
+  }
+}
+
+export default StyleServices;

forms-flow-theme/scss/_card.scss

@@ -201,4 +201,11 @@
   color: var(--ff-gray-800);
   font-size: var(--font-size-xs);
   line-height: var(--text-line-height);
+}
+
+.preview-header-text {
+  color: var(--ff-gray-800);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-xl);
+  line-height: var(--text-line-height);
 }

forms-flow-theme/scss/_forms.scss

@@ -412,6 +412,12 @@ select option:hover {
   pointer-events: none;
   cursor: not-allowed;
 }
+.form-preview-tab {
+  padding: var(--spacer-200);
+  height: 100vh; 
+  overflow-y: auto;
+  overflow-x: hidden; 
+}
 
 .dropdown-main {
   display: block !important;