CSS Color Variables

Now all the chart colors are managed by CSS variables. This change opens the way for more customizations and for the future refactory of all the color system.
g-battaglia · Aug 17, 2024 · ab633be · ab633be
1 parent 60e0a9a
commit ab633be
Show file tree

Hide file tree

Showing 20 changed files with 2,402 additions and 1,248 deletions.
diff --git a/kerykeion/charts/charts_utils.py b/kerykeion/charts/charts_utils.py
@@ -1,7 +1,7 @@
 import math
 import datetime
 from kerykeion.kr_types import KerykeionException, ChartType
-from typing import Union
+from typing import Union, Literal
 from kerykeion.kr_types.kr_models import AspectModel, KerykeionPointModel
 from kerykeion.kr_types.settings_models import KerykeionLanguageCelestialPointModel, KerykeionSettingsAspectModel
 
@@ -314,46 +314,43 @@ def draw_elements_percentages(
 
     return (
         f'<g transform="translate(-30,79)">'
-        f'<text y="0" style="fill:#ff6600; font-size: 10px;">{fire_label}  {str(fire_percentage)}%</text>'
-        f'<text y="12" style="fill:#6a2d04; font-size: 10px;">{earth_label} {str(earth_percentage)}%</text>'
-        f'<text y="24" style="fill:#6f76d1; font-size: 10px;">{air_label}   {str(air_percentage)}%</text>'
-        f'<text y="36" style="fill:#630e73; font-size: 10px;">{water_label} {str(water_percentage)}%</text>'
+        f'<text y="0" style="fill: var(--kerykeion-chart-color-fire-percentage); font-size: 10px;">{fire_label}  {str(fire_percentage)}%</text>'
+        f'<text y="12" style="fill: var(--kerykeion-chart-color-earth-percentage); font-size: 10px;">{earth_label} {str(earth_percentage)}%</text>'
+        f'<text y="24" style="fill: var(--kerykeion-chart-color-air-percentage); font-size: 10px;">{air_label}   {str(air_percentage)}%</text>'
+        f'<text y="36" style="fill: var(--kerykeion-chart-color-water-percentage); font-size: 10px;">{water_label} {str(water_percentage)}%</text>'
         f"</g>"
     )
 
 
-def convert_decimal_to_degree_string(dec: float, type="3") -> str:
+def convert_decimal_to_degree_string(dec: float, format_type: Literal["1", "2", "3"] = "3") -> str:
     """
-    Coverts decimal float to degrees in format a°b'c".
+    Converts a decimal float to a degrees string in the specified format.
 
     Args:
-        - dec (float): decimal float
-        - type (str): type of format:
-            - 1: a°
-            - 2: a°b'
-            - 3: a°b'c"
+        dec (float): The decimal float to convert.
+        format_type (str): The format type:
+            - "1": a°
+            - "2": a°b'
+            - "3": a°b'c" (default)
 
     Returns:
-        str: degrees in format a°b'c"
+        str: The degrees string in the specified format.
     """
-
+    # Ensure the input is a float
     dec = float(dec)
-    a = int(dec)
-    a_new = (dec - float(a)) * 60.0
-    b_rounded = int(round(a_new))
-    b = int(a_new)
-    c = int(round((a_new - float(b)) * 60.0))
-
-    if type == "3":
-        out = f"{a:02d}&#176;{b:02d}&#39;{c:02d}&#34;"
-    elif type == "2":
-        out = f"{a:02d}&#176;{b_rounded:02d}&#39;"
-    elif type == "1":
-        out = f"{a:02d}&#176;"
-    else:
-        raise KerykeionException(f"Wrong type: {type}, it must be 1, 2 or 3.")
 
-    return str(out)
+    # Calculate degrees, minutes, and seconds
+    degrees = int(dec)
+    minutes = int((dec - degrees) * 60)
+    seconds = int(round((dec - degrees - minutes / 60) * 3600))
+
+    # Format the output based on the specified type
+    if format_type == "1":
+        return f"{degrees}°"
+    elif format_type == "2":
+        return f"{degrees}°{minutes:02d}'"
+    elif format_type == "3":
+        return f"{degrees}°{minutes:02d}'{seconds:02d}\""
 
 
 def draw_transit_ring_degree_steps(r: Union[int, float], seventh_house_degree_ut: Union[int, float]) -> str:
@@ -675,7 +672,7 @@ def draw_houses_cusps_and_text_number(
 
         # Add the house number text for the first subject
         path += f'<g kr:node="HouseNumber">'
-        path += f'<text style="fill: #f00; fill-opacity: .6; font-size: 14px"><tspan x="{xtext - 3}" y="{ytext + 3}">{i + 1}</tspan></text>'
+        path += f'<text style="fill: var(--kerykeion-chart-color-house-number); fill-opacity: .6; font-size: 14px"><tspan x="{xtext - 3}" y="{ytext + 3}">{i + 1}</tspan></text>'
         path += f"</g>"
 
     return path
@@ -765,10 +762,7 @@ def draw_aspect_transit_grid(
 
 def draw_moon_phase(
     degrees_between_sun_and_moon: float,
-    latitude: float,
-    lunar_phase_outline_color: str = "#000000",
-    dark_color: str = "#000000",
-    light_color: str = "#ffffff",
+    latitude: float
 ) -> str:
     """
     Draws the moon phase based on the degrees between the sun and the moon.
@@ -786,8 +780,6 @@ def draw_moon_phase(
     deg = degrees_between_sun_and_moon
 
     # Initialize variables for lunar phase properties
-    fill_color_foreground = None
-    fill_color_background = None
     circle_center_x = None
     circle_radius = None
 
@@ -798,35 +790,27 @@ def draw_moon_phase(
             max_radius = max_radius * max_radius
         circle_center_x = 20.0 + (deg / 90.0) * (max_radius + 10.0)
         circle_radius = 10.0 + (deg / 90.0) * max_radius
-        fill_color_foreground = dark_color
-        fill_color_background = light_color
 
     elif deg < 180.0:
         max_radius = 180.0 - deg
         if deg < 100.0:
             max_radius = max_radius * max_radius
         circle_center_x = 20.0 + ((deg - 90.0) / 90.0 * (max_radius + 10.0)) - (max_radius + 10.0)
         circle_radius = 10.0 + max_radius - ((deg - 90.0) / 90.0 * max_radius)
-        fill_color_foreground = light_color
-        fill_color_background = dark_color
 
     elif deg < 270.0:
         max_radius = deg - 180.0
         if deg > 260.0:
             max_radius = max_radius * max_radius
         circle_center_x = 20.0 + ((deg - 180.0) / 90.0 * (max_radius + 10.0))
         circle_radius = 10.0 + ((deg - 180.0) / 90.0 * max_radius)
-        fill_color_foreground = light_color
-        fill_color_background = dark_color
 
     elif deg < 361.0:
         max_radius = 360.0 - deg
         if deg < 280.0:
             max_radius = max_radius * max_radius
         circle_center_x = 20.0 + ((deg - 270.0) / 90.0 * (max_radius + 10.0)) - (max_radius + 10.0)
         circle_radius = 10.0 + max_radius - ((deg - 270.0) / 90.0 * max_radius)
-        fill_color_foreground = dark_color
-        fill_color_background = light_color
 
     else:
         raise KerykeionException(f"Invalid degree value: {deg}")
@@ -843,9 +827,9 @@ def draw_moon_phase(
         f'        <circle cx="20" cy="10" r="10" />'
         f'        </clipPath>'
         f'    </defs>'
-        f'    <circle cx="20" cy="10" r="10" style="fill: {fill_color_background}" />'
-        f'    <circle cx="{circle_center_x}" cy="10" r="{circle_radius}" style="fill: {fill_color_foreground}" clip-path="url(#moonPhaseCutOffCircle)" />'
-        f'    <circle cx="20" cy="10" r="10" style="fill: none; stroke: {lunar_phase_outline_color}; stroke-width: 0.5px; stroke-opacity: 0.5" />'
+        f'    <circle cx="20" cy="10" r="10" style="fill: var(--kerykeion-chart-color-lunar-phase-0)" />'
+        f'    <circle cx="{circle_center_x}" cy="10" r="{circle_radius}" style="fill: var(--kerykeion-chart-color-lunar-phase-1)" clip-path="url(#moonPhaseCutOffCircle)" />'
+        f'    <circle cx="20" cy="10" r="10" style="fill: none; stroke: var(--kerykeion-chart-color-lunar-phase-0); stroke-width: 0.5px; stroke-opacity: 0.5" />'
         f'</g>'
     )
 

diff --git a/kerykeion/charts/color_style_tags.py b/kerykeion/charts/color_style_tags.py
@@ -0,0 +1,86 @@
+DEFAULT_COLOR_STYLE_TAG = """
+<style>
+    :root {
+        /* Main Colors */
+        --kerykeion-chart-color-paper-0: #000000;
+        --kerykeion-chart-color-paper-1: #ffffff;
+        --kerykeion-chart-color-zodiac-bg-0: #ff7200;
+        --kerykeion-chart-color-zodiac-bg-1: #6b3d00;
+        --kerykeion-chart-color-zodiac-bg-2: #69acf1;
+        --kerykeion-chart-color-zodiac-bg-3: #2b4972;
+        --kerykeion-chart-color-zodiac-bg-4: #ff7200;
+        --kerykeion-chart-color-zodiac-bg-5: #6b3d00;
+        --kerykeion-chart-color-zodiac-bg-6: #69acf1;
+        --kerykeion-chart-color-zodiac-bg-7: #2b4972;
+        --kerykeion-chart-color-zodiac-bg-8: #ff7200;
+        --kerykeion-chart-color-zodiac-bg-9: #6b3d00;
+        --kerykeion-chart-color-zodiac-bg-10: #69acf1;
+        --kerykeion-chart-color-zodiac-bg-11: #2b4972;
+        --kerykeion-chart-color-zodiac-icon-0: #ff7200;
+        --kerykeion-chart-color-zodiac-icon-1: #6b3d00;
+        --kerykeion-chart-color-zodiac-icon-2: #69acf1;
+        --kerykeion-chart-color-zodiac-icon-3: #2b4972;
+        --kerykeion-chart-color-zodiac-icon-4: #ff7200;
+        --kerykeion-chart-color-zodiac-icon-5: #6b3d00;
+        --kerykeion-chart-color-zodiac-icon-6: #69acf1;
+        --kerykeion-chart-color-zodiac-icon-7: #2b4972;
+        --kerykeion-chart-color-zodiac-icon-8: #ff7200;
+        --kerykeion-chart-color-zodiac-icon-9: #6b3d00;
+        --kerykeion-chart-color-zodiac-icon-10: #69acf1;
+        --kerykeion-chart-color-zodiac-icon-11: #2b4972;
+        --kerykeion-chart-color-zodiac-radix-ring-0: #ff0000;
+        --kerykeion-chart-color-zodiac-radix-ring-1: #ff0000;
+        --kerykeion-chart-color-zodiac-radix-ring-2: #ff0000;
+        --kerykeion-chart-color-zodiac-transit-ring-0: #ff0000;
+        --kerykeion-chart-color-zodiac-transit-ring-1: #ff0000;
+        --kerykeion-chart-color-zodiac-transit-ring-2: #0000ff;
+        --kerykeion-chart-color-zodiac-transit-ring-3: #0000ff;
+        --kerykeion-chart-color-houses-radix-line: #ff0000;
+        --kerykeion-chart-color-houses-transit-line: #0000ff;
+        --kerykeion-chart-color-lunar-phase-0: #000000;
+        --kerykeion-chart-color-lunar-phase-1: #ffffff;
+
+        /* Aspects */
+        --kerykeion-chart-color-conjunction: #5757e2;
+        --kerykeion-chart-color-semi-sextile: #810757;
+        --kerykeion-chart-color-semi-square: #b14e58;
+        --kerykeion-chart-color-sextile: #d59e28;
+        --kerykeion-chart-color-quintile: #1f99b3;
+        --kerykeion-chart-color-square: #dc0000;
+        --kerykeion-chart-color-trine: #36d100;
+        --kerykeion-chart-color-sesquiquadrate: #985a10;
+        --kerykeion-chart-color-biquintile: #7a9810;
+        --kerykeion-chart-color-quincunx: #26bbcf;
+        --kerykeion-chart-color-opposition: #510060;
+
+        /* Planets */
+        --kerykeion-chart-color-sun: #984b00;
+        --kerykeion-chart-color-moon: #150052;
+        --kerykeion-chart-color-mercury: #520800;
+        --kerykeion-chart-color-venus: #400052;
+        --kerykeion-chart-color-mars: #540000;
+        --kerykeion-chart-color-jupiter: #47133d;
+        --kerykeion-chart-color-saturn: #124500;
+        --kerykeion-chart-color-uranus: #6f0766;
+        --kerykeion-chart-color-neptune: #06537f;
+        --kerykeion-chart-color-pluto: #713f04;
+        --kerykeion-chart-color-mean-node: #4c1541;
+        --kerykeion-chart-color-true-node: #4c1541;
+        --kerykeion-chart-color-chiron: #666f06;
+        --kerykeion-chart-color-first-house: #ff7e00;
+        --kerykeion-chart-color-tenth-house: #ff0000;
+        --kerykeion-chart-color-seventh-house: #0000ff;
+        --kerykeion-chart-color-fourth-house: #000000;
+        --kerykeion-chart-color-mean-lilith: #000000;
+
+        /* Elements Percentage */
+        --kerykeion-chart-color-air-percentage: #6f76d1;
+        --kerykeion-chart-color-earth-percentage: #6a2d04;
+        --kerykeion-chart-color-fire-percentage: #ff6600;
+        --kerykeion-chart-color-water-percentage: #630e73;
+
+        /* Other */
+        --kerykeion-chart-color-house-number: #f00;
+    }
+</style>
+"""
diff --git a/kerykeion/charts/draw_planets.py b/kerykeion/charts/draw_planets.py
@@ -375,7 +375,7 @@ def zero(x):
             degree = int(t_offset)
             output += f'<g transform="translate({deg_x},{deg_y})">'
             output += f'<text transform="rotate({rotate})" text-anchor="{textanchor}'
-            output += f'" style="fill: {available_planets_setting[i]["color"]}; font-size: 10px;">{convert_decimal_to_degree_string(t_points_deg[i], type="1")}'
+            output += f'" style="fill: {available_planets_setting[i]["color"]}; font-size: 10px;">{convert_decimal_to_degree_string(t_points_deg[i], format_type="1")}'
             output += "</text></g>"
 
         # check transit

diff --git a/kerykeion/charts/kerykeion_chart_svg.py b/kerykeion/charts/kerykeion_chart_svg.py
@@ -36,6 +36,7 @@
 )
 from kerykeion.charts.draw_planets import draw_planets # type: ignore
 from kerykeion.utilities import get_houses_list
+from kerykeion.charts.color_style_tags import DEFAULT_COLOR_STYLE_TAG
 from pathlib import Path
 from scour.scour import scourString
 from string import Template
@@ -103,6 +104,7 @@ def __init__(
         second_obj: Union[AstrologicalSubject, AstrologicalSubjectModel, None] = None,
         new_output_directory: Union[str, None] = None,
         new_settings_file: Union[Path, None] = None,
+        color_style_tag: str = DEFAULT_COLOR_STYLE_TAG
     ):
         # Directories:
         self.homedir = Path.home()
@@ -184,6 +186,9 @@ def __init__(
         self.air = 0.0
         self.water = 0.0
 
+        # Color style tag
+        self.color_style_tag = color_style_tag
+
         # Calculate element points from planets
         self._calculate_elements_points_from_planets()
 
@@ -325,6 +330,9 @@ def _create_template_dictionary(self) -> ChartTemplateDictionary:
         # Initialize template dictionary
         template_dict: ChartTemplateDictionary = dict()  # type: ignore
 
+        # Set the color style tag
+        template_dict["color_style_tag"] = self.color_style_tag
+
         # Set chart dimensions
         template_dict["chart_height"] = self.height
         template_dict["chart_width"] = self.width
@@ -376,7 +384,10 @@ def _create_template_dictionary(self) -> ChartTemplateDictionary:
             template_dict["bottomLeft4"] = f'{self.t_user.perspective_type}'
 
         # Draw moon phase
-        template_dict['moon_phase'] = draw_moon_phase(self.user.lunar_phase["degrees_between_s_m"], self.geolat)
+        template_dict['moon_phase'] = draw_moon_phase(
+            self.user.lunar_phase["degrees_between_s_m"], 
+            self.geolat
+        )
 
         # Set location string
         if len(self.location) > 35: