Add Axis Line Stroke Width (#160)

The current stroke width for the axis lines defaults to 1px. To aid with design considerations, there are times when the desired thickness is greater, like 2px for instance. Adding a CSS variable for this property enables the consumer to indicate a different thickness to match their designs. Co-authored-by: Mark Fitzgerald <[email protected]>
stevenpetryk · May 14, 2024 · 62aa665 · 62aa665
1 parent 4a1a849
commit 62aa665
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/core.css b/core.css
@@ -15,6 +15,7 @@
   --mafs-origin-color: var(--mafs-fg);
   --mafs-line-color: #555;
   --mafs-line-stroke-dash-style: 4, 3;
+  --mafs-axis-stroke-width: 1px;
   --grid-line-subdivision-color: #222;
 
   --mafs-red: #f11d0e;

diff --git a/src/display/Coordinates/Cartesian.tsx b/src/display/Coordinates/Cartesian.tsx
@@ -94,7 +94,7 @@ export function Cartesian({
 
       <rect x={vxMin} y={vyMax} width={vxMax - vxMin} height={vyMin - vyMax} fill={`url(#${id})`} />
 
-      <g stroke="var(--mafs-origin-color)">
+      <g stroke="var(--mafs-origin-color)" strokeWidth="var(--mafs-axis-stroke-width)">
         {xAxisEnabled && xAxis.axis && <line x1={vxMin} y1={0} x2={vxMax} y2={0} />}
         {yAxisEnabled && yAxis.axis && <line x1={0} y1={vyMin} x2={0} y2={vyMax} />}
       </g>

diff --git a/src/display/Coordinates/Polar.tsx b/src/display/Coordinates/Polar.tsx
@@ -93,7 +93,7 @@ export function PolarCoordinates({
         />
       ))}
 
-      <g stroke="var(--mafs-origin-color)">
+      <g stroke="var(--mafs-origin-color)" strokeWidth="var(--mafs-axis-stroke-width)">
         {xAxisEnabled && xAxis.axis && <line x1={vxMin} y1={0} x2={vxMax} y2={0} />}
         {yAxisEnabled && yAxis.axis && <line x1={0} y1={vyMin} x2={0} y2={vyMax} />}
       </g>