Add possibility to define spacing

ludic/catalog/buttons.py

@@ -15,8 +15,8 @@ class Button(ComponentStrict[PrimitiveChildren, ButtonAttrs]):
             "button.btn": {
                 "background-color": theme.colors.light,
                 "color": theme.colors.black,
-                "margin": "8px 10px 8px 0px",
-                "padding": "10px 17px",
+                "margin": theme.spacing.new(8, 10),
+                "padding": theme.spacing.new(10, 17),
                 "border": f"1px solid {theme.colors.light.darken(0.1)}",
                 "border-radius": "4px",
                 "cursor": "pointer",

ludic/catalog/forms.py

@@ -105,18 +105,17 @@ class FormField(Component[TChildren, TAttrs]):
             ".form-field": {
                 "label": {
                     "display": "block",
-                    "margin-top": "12px",
-                    "margin-bottom": "8px",
+                    "margin": theme.spacing.new(12, 0, 8),
                     "font-weight": "bold",
                 },
                 "input": {
                     "width": "100%",
                     "padding": "10px",
-                    "margin": "5px 0",
+                    "margin": theme.spacing.new(5, 0),
                     "border": f"1px solid {theme.colors.light.darken(0.2)}",
                     "border-radius": "4px",
                     "box-sizing": "border-box",
-                    "font-size": "1em",
+                    "font-size": theme.fonts.sizes.medium,
                 },
             }
         }

ludic/styles/themes.py

@@ -1,99 +1,15 @@
 from abc import ABCMeta, abstractmethod
 from dataclasses import dataclass, field
-from typing import TYPE_CHECKING, Literal, Self, TypeVar
+from typing import TYPE_CHECKING, TypeVar
 
-from .utils import darken_color, hex_to_rgb, lighten_color, pick_readable_color_for
+from .types import Color, Size, Spacing
 
 if TYPE_CHECKING:
     from ludic.types import BaseElement
 
 _T = TypeVar("_T", bound="BaseElement")
 
 
-class Color(str):
-    """Color class."""
-
-    @property
-    def rgb(self) -> tuple[int, int, int]:
-        """RGB color."""
-        return hex_to_rgb(self)
-
-    def darken(self, factor: float = 0.5) -> Self:
-        """Darken color by a given factor.
-
-        Args:
-            factor (float, optional): Darkening factor. Defaults to 0.5.
-
-        Returns:
-            str: Darkened color.
-        """
-        return type(self)(darken_color(self, factor))
-
-    def lighten(self, factor: float = 0.5) -> Self:
-        """Lighten color by a given factor.
-
-        Args:
-            factor (float, optional): Lightening factor. Defaults to 0.5.
-
-        Returns:
-            str: Lightened color.
-        """
-        return type(self)(lighten_color(self, factor))
-
-    def readable(self) -> Self:
-        """Get lighter or darker variant of the given color depending on the luminance.
-
-        Args:
-            color (str): Color to find the readable opposite for.
-
-        Returns:
-            str: Readable opposite of the given color.
-        """
-        return type(self)(pick_readable_color_for(self))
-
-
-class Size(str):
-    """Size class."""
-
-    value: float
-    unit: Literal["px", "em"] = "px"  # Default unit is pixels
-
-    def __new__(cls, value: float, unit: Literal["px", "em"] = "px") -> "Size":
-        match unit:
-            case "em":
-                self = super().__new__(cls, f"{value:.1f}{unit}")
-            case "px":
-                self = super().__new__(cls, f"{value:d}{unit}")
-            case _:
-                raise ValueError(f"Invalid unit: {unit}")
-
-        self.value = value
-        self.unit = unit
-        return self
-
-    def inc(self, factor: float = 1) -> Self:
-        """Increment size by a given factor.
-
-        Args:
-            factor (float, optional): Increment factor. Defaults to 1.
-
-        Returns:
-            str: Incremented size.
-        """
-        return type(self)(self.value + float(self.value * factor), self.unit)
-
-    def dec(self, factor: float = 1) -> Self:
-        """Decrement size by a given factor.
-
-        Args:
-            factor (float, optional): Decrement factor. Defaults to 1.
-
-        Returns:
-            str: Decremented size.
-        """
-        return type(self)(self.value - float(self.value * factor), self.unit)
-
-
 @dataclass
 class Colors:
     """Colors for a theme."""
@@ -144,6 +60,7 @@ class Theme(metaclass=ABCMeta):
 
     fonts: Fonts = field(default_factory=Fonts)
     colors: Colors = field(default_factory=Colors)
+    spacing: Spacing = field(default_factory=Spacing)
 
     def __eq__(self, other: object) -> bool:
         return isinstance(other, Theme) and self.name == other.name