Use CSS variables to set styles

CONTRIBUTING.md

@@ -1,14 +1,49 @@
+### General guidelines
+
 <a href="https://github.com/ewoks-kit/.github/blob/main/shared/CONTRIBUTING.md" target="_blank">CONTRIBUTING.md</a>
 
 ### Pixi
 
+This project is managed by [Pixi](https://pixi.prefix.dev/) with a single environment (`default`).
+
+We reproduce below the most relevant commands. For more, see [Pixi's Getting Started](https://pixi.prefix.dev/latest/getting_started/)
+
+#### Install the project
+
 ```bash
 pixi install
 pixi update
+```
+
+#### Run the tests
+
+```bash
 pixi run test
 pixi run test-lowest
 pixi run lint
 pixi run typecheck
 pixi run full-ci
-pixi run graph-to-svg acyclic1
+```
+
+#### Run the example
+
+Turn a workflow into a SVG
+
+```
+pixi run graph-to-svg <workflow_path>
+```
+
+If `workflow_name` is not given, `ewoksdraw` will use a test workflow.
+
+
+#### Add dependencies
+
+```bash
+pixi add <package_name>
+```
+
+By default, this will install the conda package (if there is one). To install from PyPI:
+
+```bash
+pixi add --pypi <package_name>
 ```

src/ewoksdraw/css_styles/css_background.css

@@ -1,3 +1,3 @@
 .background {
-    fill: #000000;
+    fill: var(--bg-color);
 }

src/ewoksdraw/css_styles/css_link_cubic_bezier.css

@@ -1,6 +1,6 @@
 .link_cubic_bezier {
     fill: none;
-    stroke: #ffffff;
+    stroke: var(--stroke-color);
     stroke-width: 1.5;
     stroke-linecap: round;
     stroke-linejoin: round;

src/ewoksdraw/css_styles/css_task_anchor_link.css

@@ -1,3 +1,3 @@
 .task_anchor_link {
-    fill: rgb(176, 147, 255);
+    fill: var(--link-color);
 }

src/ewoksdraw/css_styles/css_task_box.css

@@ -1,8 +1,7 @@
 .task_box {
-    fill: #00000000;
-    stroke: rgb(255, 255, 255);
-    stroke-width: 0.2%;
+    fill: var(--transparent);
+    stroke: var(--stroke-color);
+    stroke-width: var(--stroke-width);
     rx: 0.5%;
     ry: 0.5%;
 }
-

src/ewoksdraw/css_styles/css_task_line.css

@@ -1,5 +1,4 @@
 .task_line {
-  stroke: #ffffff;
-  stroke-width: 1;
-  stroke-dasharray: none;
-}
+  stroke: var(--stroke-color);
+  stroke-width: var(--stroke-width);
+}

src/ewoksdraw/css_styles/css_task_text_io.css

@@ -1,4 +1,4 @@
 .task_text_io {
     font-family: Helvetica, sans-serif;
-    fill:  rgb(255, 255, 255);
+    fill:  var(--text-color);
 }

src/ewoksdraw/css_styles/css_task_title.css

@@ -1,4 +1,4 @@
 .task_title {
     font-family: Helvetica, sans-serif;
-    fill:  rgb(255, 255, 255);
+    fill:  var(--text-color);
 }

src/ewoksdraw/css_styles/root.css

@@ -0,0 +1,8 @@
+.ewoksdraw {
+    --bg-color: rgb(0, 0, 0);
+    --link-color: rgb(176, 147, 255);
+    --stroke-color: rgb(255, 255, 255);
+    --stroke-width: 1;
+    --text-color: rgb(255, 255, 255);
+    --transparent: rgba(0, 0, 0, 0)
+}

src/ewoksdraw/svg/svg_canvas.py

@@ -12,6 +12,7 @@
 from .svg_background import SvgBackground
 from .svg_element import SvgElement
 from .svg_group import SvgGroup
+from .utils import generate_style_element
 
 Number = Union[int, float]
 
@@ -96,6 +97,7 @@ def _generate_xml_svg(self) -> Element:
             width=str(self.width),
             height=str(self.height),
         )
+        xml_svg.set("class", "ewoksdraw")
 
         style_elements = self._gather_all_styles()
         seen_styles = set()
@@ -136,4 +138,7 @@ def _gather_all_styles(self) -> List[Element]:
         for element in self.elements:
             all_styles.extend(self._yield_styles(element))
 
-        return all_styles
+        root_element = generate_style_element("root.css")
+        if root_element is None:
+            return all_styles
+        return [root_element, *all_styles]

src/ewoksdraw/svg/svg_element.py

@@ -1,10 +1,11 @@
 import warnings
-from pathlib import Path
 from typing import Literal
 from typing import Optional
 from typing import get_args
 from xml.etree.ElementTree import Element
 
+from .utils import generate_style_element
+
 SvgTag = Literal["rect", "circle", "text", "line", "path"]
 SUPPORTED_TAGS: tuple[SvgTag, ...] = get_args(SvgTag)
 
@@ -125,12 +126,4 @@ def _load_css_style(self) -> Optional[Element]:
         if not self._css_class:
             return None
 
-        css_file_path = Path(f"src/ewoksdraw/css_styles/css_{self._css_class}.css")
-        if not css_file_path.exists():
-            return None
-
-        with open(css_file_path, "r") as css_file:
-            css_content = css_file.read()
-        style = Element("style")
-        style.text = f"<![CDATA[\n{css_content}\n]]>"
-        return style
+        return generate_style_element(css_file_name=f"css_{self._css_class}.css")

src/ewoksdraw/svg/svg_task.py

@@ -53,7 +53,6 @@ def __init__(
             list_io=output_names, io_type="output", vertical_spacing=8
         )
         self._line_title = SvgTaskLine(x1=0, y1=0, x2=0, y2=0)
-
         self._init_elements()
 
     def _init_elements(self) -> None:

src/ewoksdraw/svg/utils.py

@@ -0,0 +1,16 @@
+from pathlib import Path
+from xml.etree.ElementTree import Element
+
+CSS_DIR = Path(__file__).parent.parent / "css_styles"
+
+
+def generate_style_element(css_file_name: str) -> None | Element:
+    css_file_path = CSS_DIR / css_file_name
+    if not css_file_path.exists():
+        return None
+
+    with open(css_file_path, "r") as css_file:
+        css_content = css_file.read()
+    style = Element("style")
+    style.text = f"<![CDATA[\n{css_content}\n]]>"
+    return style