@empoweredvote/ev-ui 0.8.8 → 0.8.10

package/dist/index.mjs

@@ -265,14 +265,24 @@ function RadarChartCore({
       {
         key: "compare-static",
         points: comparePoints,
-        style: { fill: "rgba(90, 154, 110, 0.45)", stroke: "#5A9A6E", strokeWidth: 2, mixBlendMode: "multiply" }
+        style: {
+          fill: darkMode ? "rgba(110, 210, 140, 0.55)" : "rgba(90, 154, 110, 0.45)",
+          stroke: darkMode ? "#6DD28C" : "#5A9A6E",
+          strokeWidth: 2,
+          mixBlendMode: darkMode ? "normal" : "multiply"
+        }
       }
     ) : /* @__PURE__ */ React.createElement(
       animated.polygon,
       {
         key: "compare-animated",
         points: compareSpring.points,
-        style: { fill: "rgba(90, 154, 110, 0.45)", stroke: "#5A9A6E", strokeWidth: 2, mixBlendMode: "multiply" }
+        style: {
+          fill: darkMode ? "rgba(110, 210, 140, 0.55)" : "rgba(90, 154, 110, 0.45)",
+          stroke: darkMode ? "#6DD28C" : "#5A9A6E",
+          strokeWidth: 2,
+          mixBlendMode: darkMode ? "normal" : "multiply"
+        }
       }
     ) : null,
     hasCompareData && compareCoords && compareCoords.map(([cx, cy], i) => {
@@ -288,7 +298,7 @@ function RadarChartCore({
           cx,
           cy,
           r: matches ? 8 : 7,
-          fill: matches ? "#fed12e" : "#5A9A6E",
+          fill: matches ? "#fed12e" : darkMode ? "#6DD28C" : "#5A9A6E",
           stroke: "#FFFFFF",
           strokeWidth: 3,
           style: { pointerEvents: "none" }
@@ -3661,6 +3671,7 @@ function SocialLinks({
   linkedin,
   extraLinks = [],
   size = "md",
+  darkMode = false,
   style = {}
 }) {
   const iconSizes = {
@@ -3684,14 +3695,14 @@ function SocialLinks({
       ...style
     },
     link: {
-      color: "#6A7282",
+      color: darkMode ? "#9ca3af" : "#6A7282",
       transition: "color 0.2s ease, border-color 0.2s ease",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       width: boxSize,
       height: boxSize,
-      border: "1px solid #E5E7EB",
+      border: `1px solid ${darkMode ? "rgba(255,255,255,0.15)" : "#E5E7EB"}`,
       borderRadius: "10px"
     },
     icon: {
@@ -3817,8 +3828,8 @@ function SocialLinks({
         e.currentTarget.style.borderColor = colors.evTeal;
       },
       onMouseLeave: (e) => {
-        e.currentTarget.style.color = "#6A7282";
-        e.currentTarget.style.borderColor = "#E5E7EB";
+        e.currentTarget.style.color = darkMode ? "#9ca3af" : "#6A7282";
+        e.currentTarget.style.borderColor = darkMode ? "rgba(255,255,255,0.15)" : "#E5E7EB";
       }
     },
     link.icon
@@ -4365,7 +4376,17 @@ function getTierLabel(districtType, officeTitle) {
   }
   return "LOCAL";
 }
-function getTierColors(tier) {
+function getTierColors(tier, darkMode) {
+  if (darkMode) {
+    switch (tier) {
+      case "FEDERAL":
+        return { bg: "rgba(30,64,175,0.25)", text: "#93c5fd" };
+      case "STATE":
+        return { bg: "rgba(22,101,52,0.25)", text: "#86efac" };
+      default:
+        return { bg: "rgba(126,34,206,0.25)", text: "#d8b4fe" };
+    }
+  }
   switch (tier) {
     case "FEDERAL":
       return { bg: "#EFF6FF", text: "#1E40AF" };
@@ -4460,7 +4481,8 @@ function PoliticianProfile({
   judicialRecord,
   politicianId,
   onNavigateToRecord,
-  imageFocalPoint
+  imageFocalPoint,
+  darkMode = false
 }) {
   const isMobile = useMediaQuery("(max-width: 768px)");
   const pol = politician;
@@ -4493,7 +4515,7 @@ function PoliticianProfile({
   const instagram = getSocialHandle("INSTAGRAM");
   const { linkedinUrl, personWebsites } = extractLinkedIn(pol);
   const tier = getTierLabel(pol.district_type, pol.office_title);
-  const tierColors2 = tier ? getTierColors(tier) : null;
+  const tierColors2 = tier ? getTierColors(tier, darkMode) : null;
   const { title: roleTitle, subtitle: roleSubtitle } = buildTitleAndSubtitle(pol);
   const roleLine = [roleTitle, roleSubtitle].filter(Boolean).join(" \u2013 ");
   const termLine = getTermLine(pol);
@@ -4555,7 +4577,7 @@ function PoliticianProfile({
   const hasContactInfo = hasAddresses || hasPhones || hasEmails || hasWebsitesCol;
   const hasSocial = twitter || facebook || instagram || linkedinUrl;
   const divider = {
-    borderTop: "1px solid #E5E7EB",
+    borderTop: `1px solid ${darkMode ? "#374151" : "#E5E7EB"}`,
     margin: `${spacing[6]} 0`
   };
   const sectionHeading = {
@@ -4565,7 +4587,7 @@ function PoliticianProfile({
     fontFamily: fonts.primary,
     fontWeight: fontWeights.semibold,
     fontSize: "18px",
-    color: "#101828",
+    color: darkMode ? "#f3f4f6" : "#101828",
     margin: 0,
     marginBottom: spacing[4]
   };
@@ -4590,7 +4612,7 @@ function PoliticianProfile({
       padding: 0
     },
     card: {
-      background: colors.bgWhite,
+      background: darkMode ? "#1a2235" : colors.bgWhite,
       borderRadius: borderRadius.lg,
       boxShadow: shadows.lg,
       padding: isMobile ? spacing[4] : spacing[8],
@@ -4649,7 +4671,7 @@ function PoliticianProfile({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: isMobile ? fontSizes["2xl"] : "30px",
-      color: "#101828",
+      color: darkMode ? "#f3f4f6" : "#101828",
       margin: 0,
       marginBottom: spacing[1],
       lineHeight: 1.2
@@ -4658,14 +4680,14 @@ function PoliticianProfile({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.regular,
       fontSize: isMobile ? fontSizes.base : fontSizes.lg,
-      color: "#364153",
+      color: darkMode ? "#d1d5db" : "#364153",
       margin: 0,
       marginBottom: spacing[1]
     },
     officeDesc: {
       fontFamily: fonts.primary,
       fontSize: fontSizes.base,
-      color: "#6A7282",
+      color: darkMode ? "#9ca3af" : "#6A7282",
       margin: 0,
       marginBottom: spacing[3],
       lineHeight: 1.5
@@ -4673,7 +4695,7 @@ function PoliticianProfile({
     bioText: {
       fontFamily: fonts.primary,
       fontSize: fontSizes.sm,
-      color: "#6A7282",
+      color: darkMode ? "#9ca3af" : "#6A7282",
       margin: 0,
       marginTop: spacing[1],
       marginBottom: spacing[3],
@@ -4693,7 +4715,7 @@ function PoliticianProfile({
       gap: spacing[1],
       fontFamily: fonts.primary,
       fontSize: fontSizes.sm,
-      color: "#6A7282"
+      color: darkMode ? "#9ca3af" : "#6A7282"
     },
     submitBtn: {
       display: "inline-flex",
@@ -4734,7 +4756,7 @@ function PoliticianProfile({
       fontSize: "11px",
       letterSpacing: "0.05em",
       textTransform: "uppercase",
-      color: "#6A7282",
+      color: darkMode ? "#9ca3af" : "#6A7282",
       margin: 0,
       marginBottom: spacing[1],
       display: "flex",
@@ -4744,13 +4766,13 @@ function PoliticianProfile({
     contactValue: {
       fontFamily: fonts.primary,
       fontSize: fontSizes.sm,
-      color: "#364153",
+      color: darkMode ? "#d1d5db" : "#364153",
       lineHeight: 1.6,
       margin: 0,
       marginBottom: spacing[2]
     },
     contactLink: {
-      color: "#364153",
+      color: darkMode ? "#59b0c4" : "#364153",
       textDecoration: "none",
       wordBreak: "break-all"
     },
@@ -4758,7 +4780,7 @@ function PoliticianProfile({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.medium,
       fontSize: "12px",
-      color: "#9CA3AF",
+      color: darkMode ? "#6b7280" : "#9CA3AF",
       margin: 0,
       marginBottom: spacing[1]
     },
@@ -4864,6 +4886,7 @@ function PoliticianProfile({
       linkedin: linkedinUrl,
       extraLinks: socialWebsiteUrls,
       size: "sm",
+      darkMode,
       style: { marginTop: allWebsites.length > 0 ? "8px" : 0 }
     }
   )))), committees.length > 0 && /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("div", { style: divider }), /* @__PURE__ */ React22.createElement(CommitteeTable, { committees })), pol.is_judicial ? /* @__PURE__ */ React22.createElement(