Use colors defined by theme

magicsunday · Aug 28, 2023 · a79b5d6 · a79b5d6
1 parent 73c680a
commit a79b5d6
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git a/resources/css/svg.css b/resources/css/svg.css
@@ -11,10 +11,6 @@
     unicode-bidi: bidi-override !important;
 }
 
-#webtrees-pedigree-chart-container svg text {
-    font-weight: bold;
-}
-
 #webtrees-pedigree-chart-container svg rect.female {
     stroke: var(--sex-f-fg, rgb(255, 32, 128));
     stroke-dasharray: none;
@@ -47,16 +43,24 @@
     /*shape-rendering: crispEdges;*/
 }
 
-#webtrees-pedigree-chart-container svg g.name text {
-    font-weight: bold;
-}
-
 #webtrees-pedigree-chart-container svg g.name tspan.preferred {
     text-decoration: underline;
 }
 
 #webtrees-pedigree-chart-container svg text.date {
-    fill: rgb(127, 127, 127);
+    fill: currentColor;
     font-weight: normal;
     font-size: 13px;
 }
+
+#webtrees-pedigree-chart-container svg .wt-chart-box-name {
+    fill: var(--link-color, currentColor);
+}
+
+#webtrees-pedigree-chart-container svg .wt-chart-box-name-alt {
+    fill: currentColor;
+}
+
+#webtrees-pedigree-chart-container svg .wt-chart-box-name:hover:not(.wt-chart-box-name-alt) {
+    fill: var(--link-color-hover);
+}
diff --git a/resources/js/modules/chart/svg.js b/resources/js/modules/chart/svg.js
@@ -46,6 +46,7 @@ export default class Svg
     {
         // Add SVG element
         this._element
+            .attr('class', 'wt-global')
             .attr("width", "100%")
             .attr("height", "100%")
             .attr("text-rendering", "optimizeLegibility")

diff --git a/resources/js/modules/tree.js b/resources/js/modules/tree.js
@@ -647,19 +647,21 @@ export default class Tree
         // Top/Bottom and Bottom/Top
         if (this._orientation.splittNames) {
             let text1 = name.append("text")
+                .attr("class", "wt-chart-box-name")
                 .attr("text-anchor", "middle")
                 .attr("alignment-baseline", "central")
                 .attr("dy", this._box.text.y);
 
             let text2 = name.append("text")
+                .attr("class", "wt-chart-box-name")
                 .attr("text-anchor", "middle")
                 .attr("alignment-baseline", "central")
                 .attr("dy", this._box.text.y + 20);
 
             this.addFirstNames(text1, datum);
             this.addLastNames(text2, datum);
 
-            // If both first and last names are empty, add the full name as alternative
+            // If both first and last names are empty, add the full name as an alternative
             if (!datum.data.firstNames.length
                 && !datum.data.lastNames.length
             ) {
@@ -670,17 +672,18 @@ export default class Tree
             this.truncateNames(text1);
             this.truncateNames(text2);
 
-            // Left/Right and Right/Left
+        // Left/Right and Right/Left
         } else {
             let text1 = name.append("text")
+                .attr("class", "wt-chart-box-name")
                 .attr("text-anchor", this._configuration.rtl ? "end" : "start")
                 .attr("dx", this._box.text.x)
                 .attr("dy", this._box.text.y);
 
             this.addFirstNames(text1, datum);
             this.addLastNames(text1, datum, 0.25);
 
-            // If both first and last names are empty, add the full name as alternative
+            // If both first and last names are empty, add the full name as an alternative
             if (!datum.data.firstNames.length
                 && !datum.data.lastNames.length
             ) {
@@ -733,7 +736,7 @@ export default class Tree
         if (datum.data.birth) {
             let col1 = table
                 .append("text")
-                .attr("class", "date")
+                .attr("fill", "currentColor")
                 .attr("text-anchor", "middle")
                 .attr("dominant-baseline", "middle")
                 .attr("x", this._box.text.x)
@@ -774,7 +777,7 @@ export default class Tree
 
             let col1 = table
                 .append("text")
-                .attr("class", "date")
+                .attr("fill", "currentColor")
                 .attr("text-anchor", "middle")
                 .attr("dominant-baseline", "middle")
                 .attr("x", this._box.text.x)
@@ -835,19 +838,18 @@ export default class Tree
      */
     drawLinks(links, source)
     {
-        // let that = this;
-
-        let link = this._svg.visual
+        let linkPath = this._svg.visual
             .selectAll("path.link")
             .data(links, person => person.target.id);
 
         // Add new links. Transition new links from the source's old position to
         // the links final position.
-        let linkEnter = link
+        let linkEnter = linkPath
             .enter()
             .append("path")
             .classed("link", true)
-            .attr("d", person => this._orientation.elbow(person));
+            .attr("d", link => this._orientation.elbow(link));
+
 
         // // Add new links. Transition new links from the source's old position to
         // // the links final position.