From 21a6f8163ec7a487f4b166b4aaed4c6914431294 Mon Sep 17 00:00:00 2001
From: Ajay krishna <ajay.k@aot-technologies.com>
Date: Fri, 22 Nov 2024 13:32:59 +0530
Subject: [PATCH] css variable fetcher utility added and syles updates

---
 forms-flow-service/src/formsflow-services.ts   |  3 ++-
 forms-flow-service/src/helpers/styleService.ts | 12 ++++++++++++
 forms-flow-theme/scss/_card.scss               |  7 +++++++
 forms-flow-theme/scss/_forms.scss              |  6 ++++++
 4 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 forms-flow-service/src/helpers/styleService.ts

diff --git a/forms-flow-service/src/formsflow-services.ts b/forms-flow-service/src/formsflow-services.ts
index 2c46c64d..24073d5a 100644
--- a/forms-flow-service/src/formsflow-services.ts
+++ b/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 };
diff --git a/forms-flow-service/src/helpers/styleService.ts b/forms-flow-service/src/helpers/styleService.ts
new file mode 100644
index 00000000..433a617d
--- /dev/null
+++ b/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;
diff --git a/forms-flow-theme/scss/_card.scss b/forms-flow-theme/scss/_card.scss
index cde6a4fa..84773e93 100644
--- a/forms-flow-theme/scss/_card.scss
+++ b/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);
 }
\ No newline at end of file
diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss
index fa976796..36615847 100644
--- a/forms-flow-theme/scss/_forms.scss
+++ b/forms-flow-theme/scss/_forms.scss
@@ -411,4 +411,10 @@ select option:hover {
 .form-preview{
   pointer-events: none;
   cursor: not-allowed;
+}
+.form-preview-tab {
+  padding: var(--spacer-200);
+  height: 100vh; 
+  overflow-y: auto;
+  overflow-x: hidden; 
 }
\ No newline at end of file