@empoweredvote/ev-ui 0.8.2 → 0.8.4

package/dist/index.mjs

@@ -14,10 +14,11 @@ function RadarChartCore({
   size = 400,
   labelFontSize = 13,
   padding = 80,
-  labelOffset = 32,
+  labelOffset = 52,
   tightFit = false,
   activeSpoke = null,
-  writeIns = {}
+  writeIns = {},
+  darkMode = false
 }) {
   var _a;
   const radius = size / 2 - 40;
@@ -129,7 +130,7 @@ function RadarChartCore({
       ring.push(`${centerX + radius * scale * Math.sin(angle)},${centerY - radius * scale * Math.cos(angle)}`);
     }
     guidePolygons.push(
-      /* @__PURE__ */ React.createElement("polygon", { key: level, points: ring.join(" "), fill: "none", stroke: "#ccc" })
+      /* @__PURE__ */ React.createElement("polygon", { key: level, points: ring.join(" "), fill: "none", stroke: darkMode ? "#555" : "#ccc" })
     );
   }
   const getStanceText = (shortTitle, value) => {
@@ -166,7 +167,7 @@ function RadarChartCore({
           y1: centerY,
           x2: endX,
           y2: endY,
-          stroke: isUnanswered ? "#9ca3af" : "#aaa",
+          stroke: isUnanswered ? "#9ca3af" : darkMode ? "#bbb" : "#888",
           strokeDasharray: isUnanswered ? "4 3" : void 0,
           opacity: isUnanswered ? 0.6 : 1
         }
@@ -198,7 +199,7 @@ function RadarChartCore({
       if (isTop && lines.length > 1) labelY -= (lines.length - 1) * lineHeight;
       const isActive = shortTitle === activeSpoke;
       const isUnansweredLabel = !!unansweredSpokes[shortTitle];
-      const fSize = isActive ? labelFontSize * 1.2 : labelFontSize;
+      const fSize = labelFontSize;
       return /* @__PURE__ */ React.createElement(
         "text",
         {
@@ -208,7 +209,7 @@ function RadarChartCore({
           textAnchor: "middle",
           dominantBaseline: isBottom ? "hanging" : "auto",
           onClick: () => onReplaceTopic(shortTitle),
-          fill: isActive ? "#E85D26" : isUnansweredLabel ? "#9ca3af" : "#555",
+          fill: isActive ? "#E85D26" : isUnansweredLabel ? "#9ca3af" : darkMode ? "#D3D7DE" : "#555",
           fontWeight: isActive ? "bold" : "normal",
           style: { cursor: "pointer", userSelect: "none", fontSize: fSize, fontFamily: "sans-serif" }
         },
@@ -330,14 +331,14 @@ function RadarChartCore({
           {
             xmlns: "http://www.w3.org/1999/xhtml",
             style: {
-              background: "white",
-              border: "1px solid #d1d5db",
-              borderRadius: 6,
-              padding: "6px 10px",
-              fontSize: 11,
+              background: darkMode ? "#2F3237" : "#ffffff",
+              border: darkMode ? "1px solid #59B0C4" : "1px solid #d1d5db",
+              borderRadius: 8,
+              padding: "7px 11px",
+              fontSize: 12,
               lineHeight: 1.4,
-              color: "#111",
-              boxShadow: "0 2px 8px rgba(0,0,0,0.12)",
+              color: darkMode ? "#EBEDEF" : "#111",
+              boxShadow: darkMode ? "0 2px 12px rgba(0,0,0,0.4)" : "0 2px 8px rgba(0,0,0,0.12)",
               width: tipW + "px",
               wordWrap: "break-word"
             }
@@ -795,6 +796,16 @@ function useMediaQuery(query) {
 }
 
 // src/Header.jsx
+var dark = {
+  bg: "#1C1F23",
+  bgElevated: "#2F3237",
+  bgHover: "#41454E",
+  border: "#41454E",
+  link: "#59B0C4",
+  text: "#D3D7DE",
+  textMuted: "#9CA3AF",
+  shadow: "0 10px 40px rgba(0,0,0,0.4)"
+};
 function Header({
   logoSrc,
   logoAlt = "Empowered Vote",
@@ -805,6 +816,7 @@ function Header({
   currentPath,
   onNavigate,
   profileMenu,
+  darkMode = false,
   style = {}
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
@@ -828,9 +840,16 @@ function Header({
       onNavigate(href);
     }
   };
+  const linkColor = darkMode ? dark.link : colors.evTeal;
+  const dropdownBg = darkMode ? dark.bgElevated : colors.bgWhite;
+  const dropdownShadow = darkMode ? dark.shadow : "0 10px 40px rgba(0,0,0,0.1)";
+  const hoverBg = darkMode ? dark.bgHover : colors.bgLight;
+  const borderColor = darkMode ? dark.border : colors.borderLight;
+  const mobileShadow = darkMode ? "0 4px 20px rgba(0,0,0,0.4)" : "0 4px 20px rgba(0,0,0,0.1)";
   const styles2 = {
     header: {
-      backgroundColor: colors.bgWhite,
+      backgroundColor: darkMode ? dark.bg : colors.bgWhite,
+      borderBottom: darkMode ? `1px solid ${dark.border}` : "none",
       position: "sticky",
       top: 0,
       zIndex: 50,
@@ -858,7 +877,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.xl,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       cursor: "pointer",
       display: "flex",
@@ -881,11 +900,12 @@ function Header({
       zIndex: 100
     },
     dropdownInner: {
-      backgroundColor: colors.bgWhite,
+      backgroundColor: dropdownBg,
       borderRadius: borderRadius.lg,
-      boxShadow: "0 10px 40px rgba(0,0,0,0.1)",
+      boxShadow: dropdownShadow,
       minWidth: "200px",
-      padding: spacing[2]
+      padding: spacing[2],
+      border: darkMode ? `1px solid ${dark.border}` : "none"
     },
     dropdownItem: {
       display: "block",
@@ -893,7 +913,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.medium,
       fontSize: fontSizes.base,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       borderRadius: borderRadius.md,
       cursor: "pointer"
@@ -915,13 +935,13 @@ function Header({
       display: "inline-flex",
       alignItems: "center",
       backgroundColor: "transparent",
-      color: colors.evTeal,
+      color: linkColor,
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.base,
       padding: `${spacing[2]} ${spacing[5]}`,
       borderRadius: borderRadius.full || "999px",
-      border: `1.5px solid ${colors.evTeal}`,
+      border: `1.5px solid ${linkColor}`,
       cursor: "pointer",
       textDecoration: "none",
       lineHeight: 1.2,
@@ -937,7 +957,7 @@ function Header({
     hamburger: {
       width: "24px",
       height: "2px",
-      backgroundColor: colors.evTeal,
+      backgroundColor: linkColor,
       position: "relative"
     },
     mobileMenu: {
@@ -947,25 +967,26 @@ function Header({
       top: "100%",
       left: 0,
       right: 0,
-      backgroundColor: colors.bgWhite,
+      backgroundColor: darkMode ? dark.bg : colors.bgWhite,
       padding: spacing[4],
-      boxShadow: "0 4px 20px rgba(0,0,0,0.1)"
+      boxShadow: mobileShadow,
+      borderTop: darkMode ? `1px solid ${dark.border}` : "none"
     },
     mobileNavItem: {
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.lg,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       padding: `${spacing[3]} 0`,
-      borderBottom: `1px solid ${colors.borderLight}`
+      borderBottom: `1px solid ${borderColor}`
     },
     profileButton: {
       width: "40px",
       height: "40px",
       borderRadius: borderRadius.full,
-      border: `2px solid ${colors.evTeal}`,
-      backgroundColor: colors.bgLight,
+      border: `2px solid ${linkColor}`,
+      backgroundColor: darkMode ? dark.bgElevated : colors.bgLight,
       cursor: "pointer",
       display: "flex",
       alignItems: "center",
@@ -980,11 +1001,12 @@ function Header({
       zIndex: 100
     },
     profileDropdownInner: {
-      backgroundColor: colors.bgWhite,
+      backgroundColor: dropdownBg,
       borderRadius: borderRadius.lg,
-      boxShadow: "0 10px 40px rgba(0,0,0,0.1)",
+      boxShadow: dropdownShadow,
       minWidth: "160px",
-      padding: spacing[2]
+      padding: spacing[2],
+      border: darkMode ? `1px solid ${dark.border}` : "none"
     },
     profileDropdownItem: {
       display: "block",
@@ -993,7 +1015,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.medium,
       fontSize: fontSizes.base,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       borderRadius: borderRadius.md,
       cursor: "pointer",
@@ -1003,7 +1025,7 @@ function Header({
     },
     mobileDivider: {
       height: "1px",
-      backgroundColor: colors.borderLight,
+      backgroundColor: borderColor,
       margin: `${spacing[3]} 0`
     },
     profileLabel: {
@@ -1011,8 +1033,8 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.semibold,
       fontSize: fontSizes.sm,
-      color: colors.textMuted,
-      borderBottom: `1px solid ${colors.borderLight}`,
+      color: darkMode ? dark.textMuted : colors.textMuted,
+      borderBottom: `1px solid ${borderColor}`,
       marginBottom: spacing[1],
       overflow: "hidden",
       textOverflow: "ellipsis",
@@ -1053,7 +1075,7 @@ function Header({
             "path",
             {
               d: "M1 1L8 8L15 1",
-              stroke: colors.evTeal,
+              stroke: linkColor,
               strokeWidth: "2",
               strokeLinecap: "round",
               strokeLinejoin: "round"
@@ -1069,7 +1091,7 @@ function Header({
           onClick: (e) => handleNavClick(e, dropdownItem.href),
           style: styles2.dropdownItem,
           onMouseEnter: (e) => {
-            e.target.style.backgroundColor = colors.bgLight;
+            e.target.style.backgroundColor = hoverBg;
           },
           onMouseLeave: (e) => {
             e.target.style.backgroundColor = "transparent";
@@ -1093,7 +1115,7 @@ function Header({
           fontFamily: fonts.primary,
           fontWeight: fontWeights.bold,
           fontSize: fontSizes["2xl"],
-          color: colors.evTeal
+          color: linkColor
         }
       },
       "empowered.vote"
@@ -1112,12 +1134,12 @@ function Header({
       style: styles2.secondaryAction,
       className: "ev-header-secondary",
       onMouseEnter: (e) => {
-        e.currentTarget.style.backgroundColor = colors.evTeal;
+        e.currentTarget.style.backgroundColor = linkColor;
         e.currentTarget.style.color = colors.textWhite;
       },
       onMouseLeave: (e) => {
         e.currentTarget.style.backgroundColor = "transparent";
-        e.currentTarget.style.color = colors.evTeal;
+        e.currentTarget.style.color = linkColor;
       }
     },
     secondaryAction.label
@@ -1151,7 +1173,7 @@ function Header({
         height: "20",
         viewBox: "0 0 24 24",
         fill: "none",
-        stroke: colors.evTeal,
+        stroke: linkColor,
         strokeWidth: "2",
         strokeLinecap: "round",
         strokeLinejoin: "round"
@@ -1175,7 +1197,7 @@ function Header({
           },
           style: styles2.profileDropdownItem,
           onMouseEnter: (e) => {
-            e.target.style.backgroundColor = colors.bgLight;
+            e.target.style.backgroundColor = hoverBg;
           },
           onMouseLeave: (e) => {
             e.target.style.backgroundColor = "transparent";
@@ -1195,7 +1217,7 @@ function Header({
         },
         style: styles2.profileDropdownItem,
         onMouseEnter: (e) => {
-          e.target.style.backgroundColor = colors.bgLight;
+          e.target.style.backgroundColor = hoverBg;
         },
         onMouseLeave: (e) => {
           e.target.style.backgroundColor = "transparent";
@@ -1221,7 +1243,7 @@ function Header({
           left: 0,
           width: "100%",
           height: "2px",
-          backgroundColor: colors.evTeal
+          backgroundColor: linkColor
         }
       }
     ), /* @__PURE__ */ React2.createElement(
@@ -1233,7 +1255,7 @@ function Header({
           left: 0,
           width: "100%",
           height: "2px",
-          backgroundColor: colors.evTeal
+          backgroundColor: linkColor
         }
       }
     ))
@@ -1486,6 +1508,7 @@ function SiteHeader({
   profileMenu,
   secondaryAction,
   feedbackFeature,
+  darkMode = false,
   style = {}
 }) {
   const handleNavigate = (href) => {
@@ -1514,6 +1537,7 @@ function SiteHeader({
       currentPath,
       onNavigate: handleNavigate,
       profileMenu,
+      darkMode,
       style
     }
   );