refactor: pick out magic numbers to constants

src/stores/panelStore.ts

@@ -1,15 +1,16 @@
 import { writable, type Writable } from "svelte/store";
 import { v4 as uuidv4 } from "uuid";
+import { PANEL_SETTINGS, TYPOGRAPHY } from "../lib/constants";
 import { type Panel, type TextItem } from "../lib/types/panel";
 
 export const panelStore: Writable<Panel | undefined> = writable(undefined);
 
 export const textSettingsStore = writable<Partial<TextItem>>({
-  fontSize: 18,
-  fontFamily: "Arial",
-  color: "#ffffff",
-  textAlign: "left",
-  paddingX: 10,
+  fontSize: TYPOGRAPHY.FONT_SIZE_DEFAULT,
+  fontFamily: TYPOGRAPHY.FONT_FAMILY_DEFAULT,
+  color: TYPOGRAPHY.TEXT_COLOR_DEFAULT,
+  textAlign: TYPOGRAPHY.TEXT_ALIGN_LEFT,
+  paddingX: TYPOGRAPHY.PADDING_X_DEFAULT,
   verticalOffset: 0,
 });
 
@@ -17,15 +18,15 @@ export const updateAllTextSettings = (settings: Partial<TextItem>) => {
   textSettingsStore.update((current) => ({ ...current, ...settings }));
 };
 
-export const createEmptyPanel = (height: number = 100): Panel => {
+export const createEmptyPanel = (height: number = PANEL_SETTINGS.PANEL_HEIGHT_DEFAULT): Panel => {
   const defaultText: TextItem = {
     id: uuidv4(),
     text: "",
-    fontSize: 18,
-    fontFamily: "Arial",
-    color: "#ffffff",
-    textAlign: "center",
-    paddingX: 10,
+    fontSize: TYPOGRAPHY.FONT_SIZE_DEFAULT,
+    fontFamily: TYPOGRAPHY.FONT_FAMILY_DEFAULT,
+    color: TYPOGRAPHY.TEXT_COLOR_DEFAULT,
+    textAlign: TYPOGRAPHY.TEXT_ALIGN_CENTER,
+    paddingX: TYPOGRAPHY.PADDING_X_DEFAULT,
     verticalOffset: 0,
   };
 
@@ -62,17 +63,17 @@ export const updateTextProperties = (panel: Panel, updates: Partial<TextItem>):
 export const createPanelFromText = (
   backgroundImage: string,
   text: string,
-  height: number = 100,
+  height: number = PANEL_SETTINGS.PANEL_HEIGHT_DEFAULT,
   textSettings?: Partial<TextItem>,
 ): Panel => {
   const newText: TextItem = {
     id: uuidv4(),
     text,
-    fontSize: textSettings?.fontSize ?? 18,
-    fontFamily: textSettings?.fontFamily ?? "Arial",
-    color: textSettings?.color ?? "#ffffff",
-    textAlign: textSettings?.textAlign ?? "center",
-    paddingX: textSettings?.paddingX ?? 10,
+    fontSize: textSettings?.fontSize ?? TYPOGRAPHY.FONT_SIZE_DEFAULT,
+    fontFamily: textSettings?.fontFamily ?? TYPOGRAPHY.FONT_FAMILY_DEFAULT,
+    color: textSettings?.color ?? TYPOGRAPHY.TEXT_COLOR_DEFAULT,
+    textAlign: textSettings?.textAlign ?? TYPOGRAPHY.TEXT_ALIGN_CENTER,
+    paddingX: textSettings?.paddingX ?? TYPOGRAPHY.PADDING_X_DEFAULT,
     verticalOffset: textSettings?.verticalOffset ?? 0,
   };