tsConversion: styles

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) => {
+// TODO: Delete as it's not used
-  log.info('userOverides', userOverRides);
+// export const calcThemeVariables = (theme: string, userOverRides) => {
-  return theme.calcColors(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}
 `;