From 238cbd14ca98d7218b9c9ca95147a0b6e1477833 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 21 Aug 2022 08:54:27 +0530
Subject: [PATCH] tsConversion: styles

---
 src/{styles.js => styles.ts} | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)
 rename src/{styles.js => styles.ts} (67%)

diff --git a/src/styles.js b/src/styles.ts
similarity index 67%
rename from src/styles.js
rename to src/styles.ts
index 15e804ef9..54266ff9a 100644
--- a/src/styles.js
+++ b/src/styles.ts
@@ -10,8 +10,10 @@ import sequence from './diagrams/sequence/styles';
 import stateDiagram from './diagrams/state/styles';
 import journey from './diagrams/user-journey/styles';
 import c4 from './diagrams/c4/styles';
+import { FlowChartStyleOptions } from './diagrams/flowchart/styles';
 import { log } from './logger';
 
+// TODO Q: Shouldn't registerDiagram be injecting data here?
 const themes = {
   flowchart,
   'flowchart-v2': flowchart,
@@ -31,12 +33,30 @@ const themes = {
   c4,
 };
 
-export const calcThemeVariables = (theme, userOverRides) => {
-  log.info('userOverides', userOverRides);
-  return theme.calcColors(userOverRides);
-};
+// TODO: Delete as it's not used
+// export const calcThemeVariables = (theme: string, userOverRides) => {
+//   log.info('userOverides', userOverRides);
+//   return theme.calcColors(userOverRides);
+// };
 
-const getStyles = (type, userStyles, options) => {
+const getStyles = (
+  type: string,
+  userStyles: string,
+  options: {
+    fontFamily: string;
+    fontSize: string;
+    textColor: string;
+    errorBkgColor: string;
+    errorTextColor: string;
+    lineColor: string;
+  } & FlowChartStyleOptions
+) => {
+  let diagramStyles: string = '';
+  if (type in themes && themes[type as keyof typeof themes]) {
+    diagramStyles = themes[type as keyof typeof themes](options);
+  } else {
+    log.warn(`No theme found for ${type}`);
+  }
   return ` {
     font-family: ${options.fontFamily};
     font-size: ${options.fontSize};
@@ -83,7 +103,7 @@ const getStyles = (type, userStyles, options) => {
     font-size: ${options.fontSize};
   }
 
-  ${themes[type](options)}
+  ${diagramStyles}
 
   ${userStyles}
 `;