Use global vars

components/PieChart.module.css

@@ -8,7 +8,7 @@
 
 .pieText,
 .labelText {
-  fill: white;
+  fill: var(--label);
   font-size: 40px;
   font-weight: 800;
 }
@@ -18,8 +18,8 @@
 }
 
 .group:hover>.piePath {
-  fill: #EF839D;
-  filter: drop-shadow(0px 0px 6px #CC5773);
+  fill: var(--primary-accent);
+  filter: drop-shadow(0px 0px 6px var(--primary-accent));
 }
 
 .group:hover>.pieText {

components/PieChart.tsx

@@ -8,6 +8,8 @@ interface PieChartProps {
   data: PieChartData[];
   width: number;
   labelWidth: number;
+  padRadius?: number;
+  innerRadius?: number;
   className?: string;
 }
 
@@ -16,7 +18,13 @@ interface PieChartData {
   value: number;
 }
 
-export function PieChart({ width, labelWidth, ...props }: PieChartProps) {
+export function PieChart({
+  width,
+  labelWidth,
+  padRadius = width * 0.35,
+  innerRadius = width * 0.015,
+  ...props
+}: PieChartProps) {
   const pieWidth = width * 0.5 - labelWidth;
   return (
     <svg className={props.className} width={width} height={width}>
@@ -27,8 +35,8 @@ export function PieChart({ width, labelWidth, ...props }: PieChartProps) {
           pieValue={(d: PieChartData) => d.value}
           cornerRadius={10}
           padAngle={0.075}
-          padRadius={width * 0.35}
-          innerRadius={width * 0.015}
+          padRadius={padRadius}
+          innerRadius={innerRadius}
           outerRadius={pieWidth}
         >
           {(pie) => <PieSlices {...pie} isLabel={false} />}