Refactor Style Handling to Use CSS Object Types

[Dave-lab12]

Description

This PR transforms the existing string-based CSS style handling to a more robust and type-safe object-based approach. By leveraging TypeScript and CSS types from the csstype package

Before

canvasStyle: "border:10px solid red;position:fixed;top:0;left:0;zIndex:10";

After

canvasStyles: { border: "10px solid red", position: "fixed", top: "0", left: "0", zIndex: "10" };

Motivation

The transition to object-based CSS style handling is driven by several key objectives:

• Improve Type Safety: By leveraging TypeScript's capabilities alongside csstype, we aim to reduce runtime errors. This approach allows us to catch incorrect CSS properties at compile time, minimizing common styling mistakes and enhancing the overall robustness of our code.

• Enhance Developer Experience: Adopting an object-based approach for styles not only provides autocomplete suggestions for CSS properties and values, improving developer efficiency, but also makes the code more readable and maintainable. This change facilitates easier debugging and style adjustments.

• increase Flexibility: The new styling approach simplifies the process of dynamically modifying styles. Developers can now easily merge default styles with customizations, providing greater control over the appearance of elements without the risk of unintentionally overriding other inline styles. Previously, attempting to add or modify a single style property could result in the loss of all other inline styles due to how string-based styles were concatenated or replaced. This update ensures that styles can be adjusted or extended in a more granular and safe manner, preserving existing styles while applying new ones.