@empoweredvote/ev-ui 0.8.9 → 0.8.11

package/dist/index.mjs

@@ -24,7 +24,8 @@ function RadarChartCore({
   // replacedSpokes: short_titles of substitute spokes (not the user's original defaults)
   replacedSpokes = {},
   // boldOriginalSpokes: when true, bold spokes that are NOT replacements
-  boldOriginalSpokes = false
+  boldOriginalSpokes = false,
+  highlightedSpoke = null
 }) {
   var _a;
   const radius = size / 2 - 40;
@@ -217,7 +218,7 @@ function RadarChartCore({
           textAnchor: "middle",
           dominantBaseline: isBottom ? "hanging" : "auto",
           onClick: () => onReplaceTopic(shortTitle),
-          fill: isActive ? "#E85D26" : isUnansweredLabel ? "#9ca3af" : darkMode ? "#D3D7DE" : "#555",
+          fill: isActive ? "#E85D26" : shortTitle === highlightedSpoke ? darkMode ? "#7DD4E8" : "#59B0C4" : isUnansweredLabel ? "#9ca3af" : darkMode ? "#D3D7DE" : "#555",
           fontWeight: isActive || shouldBold ? "bold" : "normal",
           style: { cursor: "pointer", userSelect: "none", fontSize: fSize, fontFamily: "sans-serif" }
         },
@@ -3671,6 +3672,7 @@ function SocialLinks({
   linkedin,
   extraLinks = [],
   size = "md",
+  darkMode = false,
   style = {}
 }) {
   const iconSizes = {
@@ -3694,14 +3696,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: {
@@ -3827,8 +3829,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
@@ -4375,7 +4377,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" };
@@ -4470,7 +4482,8 @@ function PoliticianProfile({
   judicialRecord,
   politicianId,
   onNavigateToRecord,
-  imageFocalPoint
+  imageFocalPoint,
+  darkMode = false
 }) {
   const isMobile = useMediaQuery("(max-width: 768px)");
   const pol = politician;
@@ -4503,7 +4516,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);
@@ -4565,7 +4578,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 = {
@@ -4575,7 +4588,7 @@ function PoliticianProfile({
     fontFamily: fonts.primary,
     fontWeight: fontWeights.semibold,
     fontSize: "18px",
-    color: "#101828",
+    color: darkMode ? "#f3f4f6" : "#101828",
     margin: 0,
     marginBottom: spacing[4]
   };
@@ -4600,7 +4613,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],
@@ -4659,7 +4672,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
@@ -4668,14 +4681,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
@@ -4683,7 +4696,7 @@ function PoliticianProfile({
     bioText: {
       fontFamily: fonts.primary,
       fontSize: fontSizes.sm,
-      color: "#6A7282",
+      color: darkMode ? "#9ca3af" : "#6A7282",
       margin: 0,
       marginTop: spacing[1],
       marginBottom: spacing[3],
@@ -4703,7 +4716,7 @@ function PoliticianProfile({
       gap: spacing[1],
       fontFamily: fonts.primary,
       fontSize: fontSizes.sm,
-      color: "#6A7282"
+      color: darkMode ? "#9ca3af" : "#6A7282"
     },
     submitBtn: {
       display: "inline-flex",
@@ -4744,7 +4757,7 @@ function PoliticianProfile({
       fontSize: "11px",
       letterSpacing: "0.05em",
       textTransform: "uppercase",
-      color: "#6A7282",
+      color: darkMode ? "#9ca3af" : "#6A7282",
       margin: 0,
       marginBottom: spacing[1],
       display: "flex",
@@ -4754,13 +4767,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"
     },
@@ -4768,7 +4781,7 @@ function PoliticianProfile({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.medium,
       fontSize: "12px",
-      color: "#9CA3AF",
+      color: darkMode ? "#6b7280" : "#9CA3AF",
       margin: 0,
       marginBottom: spacing[1]
     },
@@ -4874,6 +4887,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(