@sonordev/site-kit 1.5.5 → 2.0.0

package/dist/blog/index.js

@@ -62,8 +62,8 @@ function slugify(text) {
   return text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
 }
 async function BlogPost({
-  apiUrl = process.env.SONOR_API_URL || process.env.UPTRADE_API_URL || process.env.NEXT_PUBLIC_UPTRADE_API_URL || "https://api.sonor.io",
-  apiKey = process.env.SONOR_API_KEY || process.env.UPTRADE_API_KEY || process.env.NEXT_PUBLIC_UPTRADE_API_KEY || "",
+  apiUrl = process.env.SONOR_API_URL || "https://api.sonor.io",
+  apiKey = process.env.SONOR_API_KEY || "",
   slug,
   showToc = true,
   showRelated = true,
@@ -89,7 +89,7 @@ async function BlogPost({
         style: inlineStyle({ textAlign: "center", padding: 60 }, "notFound"),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("h1", { style: inlineStyle({ fontSize: 24, marginBottom: 16 }, "notFound"), children: "Post Not Found" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: inlineStyle({ color: "#6b7280" }, "notFound"), children: "The blog post you're looking for doesn't exist or has been removed." }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: inlineStyle({ color: "var(--sk-text-secondary)" }, "notFound"), children: "The blog post you're looking for doesn't exist or has been removed." }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "a",
             {
@@ -98,8 +98,8 @@ async function BlogPost({
                 display: "inline-block",
                 marginTop: 24,
                 padding: "12px 24px",
-                backgroundColor: "#3b82f6",
-                color: "#fff",
+                backgroundColor: "var(--sk-primary)",
+                color: "var(--sk-bg)",
                 borderRadius: 8,
                 textDecoration: "none"
               }, "notFound"),
@@ -132,14 +132,14 @@ async function BlogPost({
             "nav",
             {
               className: styles.breadcrumb,
-              style: inlineStyle({ marginBottom: 16, fontSize: 14, color: "#6b7280" }, "breadcrumb"),
+              style: inlineStyle({ marginBottom: 16, fontSize: 14, color: "var(--sk-text-secondary)" }, "breadcrumb"),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "a",
                   {
                     href: basePath,
                     className: styles.breadcrumbLink,
-                    style: inlineStyle({ color: "#3b82f6", textDecoration: "none" }, "breadcrumbLink"),
+                    style: inlineStyle({ color: "var(--sk-primary)", textDecoration: "none" }, "breadcrumbLink"),
                     children: "Blog"
                   }
                 ),
@@ -150,7 +150,7 @@ async function BlogPost({
                     {
                       href: `${basePath}?category=${post.category}`,
                       className: styles.breadcrumbLink,
-                      style: inlineStyle({ color: "#3b82f6", textDecoration: "none" }, "breadcrumbLink"),
+                      style: inlineStyle({ color: "var(--sk-primary)", textDecoration: "none" }, "breadcrumbLink"),
                       children: typeof post.category === "string" ? post.category : post.category?.name || "Uncategorized"
                     }
                   )
@@ -170,7 +170,7 @@ async function BlogPost({
             "p",
             {
               className: styles.subtitle,
-              style: inlineStyle({ fontSize: 20, color: "#6b7280", marginBottom: 16 }, "subtitle"),
+              style: inlineStyle({ fontSize: 20, color: "var(--sk-text-secondary)", marginBottom: 16 }, "subtitle"),
               children: post.subtitle
             }
           ),
@@ -184,7 +184,7 @@ async function BlogPost({
                   "span",
                   {
                     className: styles.metaItem,
-                    style: inlineStyle({ fontSize: 14, color: "#374151" }, "metaItem"),
+                    style: inlineStyle({ fontSize: 14, color: "var(--sk-text-primary)" }, "metaItem"),
                     children: [
                       "By ",
                       typeof post.author === "string" ? post.author : post.author.name
@@ -195,7 +195,7 @@ async function BlogPost({
                   "span",
                   {
                     className: styles.metaItem,
-                    style: inlineStyle({ fontSize: 14, color: "#6b7280" }, "metaItem"),
+                    style: inlineStyle({ fontSize: 14, color: "var(--sk-text-secondary)" }, "metaItem"),
                     children: date
                   }
                 ),
@@ -203,7 +203,7 @@ async function BlogPost({
                   "span",
                   {
                     className: styles.metaItem,
-                    style: inlineStyle({ fontSize: 14, color: "#9ca3af" }, "metaItem"),
+                    style: inlineStyle({ fontSize: 14, color: "var(--sk-text-tertiary)" }, "metaItem"),
                     children: [
                       post.reading_time_minutes,
                       " min read"
@@ -254,7 +254,7 @@ async function BlogPost({
               style: inlineStyle({
                 fontSize: 17,
                 lineHeight: 1.8,
-                color: "#374151"
+                color: "var(--sk-text-primary)"
               }, "content"),
               dangerouslySetInnerHTML: { __html: content }
             }
@@ -268,7 +268,7 @@ async function BlogPost({
                 top: 100,
                 alignSelf: "start",
                 padding: 20,
-                backgroundColor: "#f9fafb",
+                backgroundColor: "var(--sk-bg-elevated)",
                 borderRadius: 12
               }, "tocSidebar"),
               children: [
@@ -282,7 +282,7 @@ async function BlogPost({
                       fontWeight: 600,
                       textTransform: "uppercase",
                       letterSpacing: "0.05em",
-                      color: "#6b7280"
+                      color: "var(--sk-text-secondary)"
                     }, "tocTitle"),
                     children: "On This Page"
                   }
@@ -307,7 +307,7 @@ async function BlogPost({
                             className: styles.tocLink,
                             style: inlineStyle({
                               fontSize: 14,
-                              color: "#6b7280",
+                              color: "var(--sk-text-secondary)",
                               textDecoration: "none"
                             }, "tocLink"),
                             children: item.text
@@ -338,10 +338,10 @@ async function BlogPost({
               className: styles.tag,
               style: inlineStyle({
                 padding: "4px 12px",
-                backgroundColor: "#f3f4f6",
+                backgroundColor: "var(--sk-bg-elevated)",
                 borderRadius: 9999,
                 fontSize: 13,
-                color: "#374151",
+                color: "var(--sk-text-primary)",
                 textDecoration: "none"
               }, "tag"),
               children: [
@@ -374,7 +374,7 @@ async function BlogPost({
               className: styles.faqItem,
               style: inlineStyle({
                 padding: 16,
-                backgroundColor: "#f9fafb",
+                backgroundColor: "var(--sk-bg-elevated)",
                 borderRadius: 8
               }, "faqItem"),
               children: [
@@ -394,7 +394,7 @@ async function BlogPost({
                   "p",
                   {
                     className: styles.faqAnswer,
-                    style: inlineStyle({ marginTop: 12, color: "#6b7280" }, "faqAnswer"),
+                    style: inlineStyle({ marginTop: 12, color: "var(--sk-text-secondary)" }, "faqAnswer"),
                     children: faq.answer
                   }
                 )
@@ -434,7 +434,7 @@ async function BlogPost({
                 {
                   className: styles.relatedCard,
                   style: inlineStyle({
-                    backgroundColor: "#fff",
+                    backgroundColor: "var(--sk-bg)",
                     borderRadius: 12,
                     overflow: "hidden",
                     boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
@@ -457,7 +457,7 @@ async function BlogPost({
                           children: relatedPost.title
                         }
                       ) }),
-                      relatedPost.excerpt && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: inlineStyle({ fontSize: 14, color: "#6b7280", margin: 0 }, "relatedCard"), children: [
+                      relatedPost.excerpt && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: inlineStyle({ fontSize: 14, color: "var(--sk-text-secondary)", margin: 0 }, "relatedCard"), children: [
                         relatedPost.excerpt.slice(0, 100),
                         "..."
                       ] })
@@ -505,7 +505,7 @@ function AuthorSection({
       style: unstyled || className ? void 0 : {
         marginTop: 48,
         padding: 24,
-        backgroundColor: "#f9fafb",
+        backgroundColor: "var(--sk-bg-elevated)",
         borderRadius: 12,
         display: "flex",
         gap: 20,
@@ -527,8 +527,8 @@ function AuthorSection({
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { style: unstyled || className ? void 0 : { margin: "0 0 4px", fontSize: 18, fontWeight: 600 }, children: author.name }),
-          "title" in author && author.title && /* @__PURE__ */ jsxRuntime.jsx("p", { style: unstyled || className ? void 0 : { margin: "0 0 4px", fontSize: 14, color: "#6b7280" }, children: author.title }),
-          author.bio && /* @__PURE__ */ jsxRuntime.jsx("p", { style: unstyled || className ? void 0 : { margin: "0 0 12px", color: "#6b7280", fontSize: 14 }, children: author.bio }),
+          "title" in author && author.title && /* @__PURE__ */ jsxRuntime.jsx("p", { style: unstyled || className ? void 0 : { margin: "0 0 4px", fontSize: 14, color: "var(--sk-text-secondary)" }, children: author.title }),
+          author.bio && /* @__PURE__ */ jsxRuntime.jsx("p", { style: unstyled || className ? void 0 : { margin: "0 0 12px", color: "var(--sk-text-secondary)", fontSize: 14 }, children: author.bio }),
           author.social_links && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: unstyled || className ? void 0 : { display: "flex", gap: 16 }, children: [
             author.social_links.twitter && /* @__PURE__ */ jsxRuntime.jsx(
               "a",
@@ -536,7 +536,7 @@ function AuthorSection({
                 href: `https://twitter.com/${author.social_links.twitter}`,
                 target: "_blank",
                 rel: "noopener noreferrer",
-                style: unstyled || className ? void 0 : { color: "#3b82f6", fontSize: 14 },
+                style: unstyled || className ? void 0 : { color: "var(--sk-primary)", fontSize: 14 },
                 children: "Twitter"
               }
             ),
@@ -546,7 +546,7 @@ function AuthorSection({
                 href: author.social_links.linkedin,
                 target: "_blank",
                 rel: "noopener noreferrer",
-                style: unstyled || className ? void 0 : { color: "#3b82f6", fontSize: 14 },
+                style: unstyled || className ? void 0 : { color: "var(--sk-primary)", fontSize: 14 },
                 children: "LinkedIn"
               }
             )
@@ -557,7 +557,7 @@ function AuthorSection({
               href: url,
               target: "_blank",
               rel: "noopener noreferrer",
-              style: { color: "#3b82f6", fontSize: 14 },
+              style: { color: "var(--sk-primary)", fontSize: 14 },
               children: "Profile"
             },
             i
@@ -656,8 +656,8 @@ async function fetchCategories(apiUrl, apiKey) {
   }
 }
 async function BlogList({
-  apiUrl = process.env.SONOR_API_URL || process.env.UPTRADE_API_URL || process.env.NEXT_PUBLIC_UPTRADE_API_URL || "https://api.sonor.io",
-  apiKey = process.env.SONOR_API_KEY || process.env.UPTRADE_API_KEY || process.env.NEXT_PUBLIC_UPTRADE_API_KEY || "",
+  apiUrl = process.env.SONOR_API_URL || "https://api.sonor.io",
+  apiKey = process.env.SONOR_API_KEY || "",
   category,
   tag,
   author,
@@ -707,7 +707,7 @@ async function BlogList({
       {
         className: `${styles.container || ""} ${styles.emptyState || ""} ${className || ""}`.trim() || void 0,
         style: inlineStyle({ textAlign: "center", padding: 40 }, "emptyState"),
-        children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: inlineStyle({ color: "#6b7280" }, "emptyState"), children: "No posts found." })
+        children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: inlineStyle({ color: "var(--sk-text-secondary)" }, "emptyState"), children: "No posts found." })
       }
     );
   }
@@ -728,8 +728,8 @@ async function BlogList({
                 borderRadius: 9999,
                 fontSize: 14,
                 textDecoration: "none",
-                backgroundColor: !category ? "#3b82f6" : "#f3f4f6",
-                color: !category ? "#fff" : "#374151"
+                backgroundColor: !category ? "var(--sk-primary)" : "var(--sk-bg-elevated)",
+                color: !category ? "var(--sk-bg)" : "var(--sk-text-primary)"
               }, "categoryLink"),
               children: "All"
             }
@@ -744,8 +744,8 @@ async function BlogList({
                 borderRadius: 9999,
                 fontSize: 14,
                 textDecoration: "none",
-                backgroundColor: category === cat.slug ? "#3b82f6" : "#f3f4f6",
-                color: category === cat.slug ? "#fff" : "#374151"
+                backgroundColor: category === cat.slug ? "var(--sk-primary)" : "var(--sk-bg-elevated)",
+                color: category === cat.slug ? "var(--sk-bg)" : "var(--sk-text-primary)"
               }, "categoryLink"),
               children: [
                 cat.name,
@@ -797,7 +797,7 @@ async function BlogList({
             "span",
             {
               className: styles.paginationInfo,
-              style: inlineStyle({ padding: "8px 16px", color: "#6b7280" }, "paginationInfo"),
+              style: inlineStyle({ padding: "8px 16px", color: "var(--sk-text-secondary)" }, "paginationInfo"),
               children: [
                 "Page ",
                 pagination.page,
@@ -832,7 +832,7 @@ function BlogPostCard({ post, basePath, styles = {}, unstyled = false }) {
     {
       className: styles.card,
       style: inlineStyle({
-        backgroundColor: "#fff",
+        backgroundColor: "var(--sk-bg)",
         borderRadius: 12,
         overflow: "hidden",
         boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
@@ -873,8 +873,8 @@ function BlogPostCard({ post, basePath, styles = {}, unstyled = false }) {
                           borderRadius: 4,
                           fontSize: 12,
                           fontWeight: 500,
-                          backgroundColor: "#eff6ff",
-                          color: "#3b82f6",
+                          backgroundColor: "rgba(var(--sk-primary-rgb), 0.1)",
+                          color: "var(--sk-primary)",
                           textTransform: "uppercase"
                         }, "cardCategory"),
                         children: typeof post.category === "string" ? post.category : post.category?.name || "Uncategorized"
@@ -884,7 +884,7 @@ function BlogPostCard({ post, basePath, styles = {}, unstyled = false }) {
                       "span",
                       {
                         className: styles.cardDate,
-                        style: inlineStyle({ fontSize: 13, color: "#6b7280" }, "cardDate"),
+                        style: inlineStyle({ fontSize: 13, color: "var(--sk-text-secondary)" }, "cardDate"),
                         children: date
                       }
                     )
@@ -914,7 +914,7 @@ function BlogPostCard({ post, basePath, styles = {}, unstyled = false }) {
                   style: inlineStyle({
                     margin: "0 0 16px",
                     fontSize: 14,
-                    color: "#6b7280",
+                    color: "var(--sk-text-secondary)",
                     lineHeight: 1.6,
                     display: "-webkit-box",
                     WebkitLineClamp: 3,
@@ -934,7 +934,7 @@ function BlogPostCard({ post, basePath, styles = {}, unstyled = false }) {
                       "span",
                       {
                         className: styles.cardAuthor,
-                        style: inlineStyle({ fontSize: 13, color: "#6b7280" }, "cardAuthor"),
+                        style: inlineStyle({ fontSize: 13, color: "var(--sk-text-secondary)" }, "cardAuthor"),
                         children: [
                           "By ",
                           typeof post.author === "string" ? post.author : post.author.name
@@ -945,7 +945,7 @@ function BlogPostCard({ post, basePath, styles = {}, unstyled = false }) {
                       "span",
                       {
                         className: styles.cardReadingTime,
-                        style: inlineStyle({ fontSize: 13, color: "#9ca3af" }, "cardReadingTime"),
+                        style: inlineStyle({ fontSize: 13, color: "var(--sk-text-tertiary)" }, "cardReadingTime"),
                         children: [
                           post.reading_time_minutes,
                           " min read"
@@ -971,8 +971,8 @@ function buildPaginationUrl(basePath, page, category) {
 var paginationLinkStyle = {
   padding: "8px 16px",
   borderRadius: 8,
-  backgroundColor: "#3b82f6",
-  color: "#fff",
+  backgroundColor: "var(--sk-primary)",
+  color: "var(--sk-bg)",
   textDecoration: "none",
   fontSize: 14,
   fontWeight: 500
@@ -1020,8 +1020,8 @@ async function fetchTags(apiUrl, apiKey) {
   }
 }
 async function BlogSidebar({
-  apiUrl = process.env.SONOR_API_URL || process.env.UPTRADE_API_URL || process.env.NEXT_PUBLIC_UPTRADE_API_URL || "https://api.sonor.io",
-  apiKey = process.env.SONOR_API_KEY || process.env.UPTRADE_API_KEY || process.env.NEXT_PUBLIC_UPTRADE_API_KEY || "",
+  apiUrl = process.env.SONOR_API_URL || "https://api.sonor.io",
+  apiKey = process.env.SONOR_API_KEY || "",
   showCategories = true,
   showRecentPosts = true,
   recentPostsCount = 5,
@@ -1068,7 +1068,7 @@ function SearchWidget({ basePath }) {
         style: {
           width: "100%",
           padding: "10px 12px",
-          border: "1px solid #e5e7eb",
+          border: "1px solid var(--sk-border)",
           borderRadius: 8,
           fontSize: 14
         }
@@ -1091,7 +1091,7 @@ function CategoriesWidget({
           style: {
             ...categoryLinkStyle,
             fontWeight: !currentCategory ? 600 : 400,
-            color: !currentCategory ? "#3b82f6" : "#374151"
+            color: !currentCategory ? "var(--sk-primary)" : "var(--sk-text-primary)"
           },
           children: "All Posts"
         }
@@ -1103,11 +1103,11 @@ function CategoriesWidget({
           style: {
             ...categoryLinkStyle,
             fontWeight: currentCategory === cat.slug ? 600 : 400,
-            color: currentCategory === cat.slug ? "#3b82f6" : "#374151"
+            color: currentCategory === cat.slug ? "var(--sk-primary)" : "var(--sk-text-primary)"
           },
           children: [
             cat.name,
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#9ca3af", marginLeft: 8 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--sk-text-tertiary)", marginLeft: 8 }, children: [
               "(",
               cat.post_count,
               ")"
@@ -1135,7 +1135,7 @@ function RecentPostsWidget({
           style: {
             marginBottom: 16,
             paddingBottom: 16,
-            borderBottom: "1px solid #e5e7eb"
+            borderBottom: "1px solid var(--sk-border)"
           },
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12 }, children: [
             post.featured_image && /* @__PURE__ */ jsxRuntime.jsx("a", { href: `${basePath}/${post.slug}`, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1160,7 +1160,7 @@ function RecentPostsWidget({
                   style: {
                     fontSize: 14,
                     fontWeight: 500,
-                    color: "#374151",
+                    color: "var(--sk-text-primary)",
                     textDecoration: "none",
                     display: "-webkit-box",
                     WebkitLineClamp: 2,
@@ -1170,7 +1170,7 @@ function RecentPostsWidget({
                   children: post.title
                 }
               ),
-              date && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#9ca3af", display: "block", marginTop: 4 }, children: date })
+              date && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "var(--sk-text-tertiary)", display: "block", marginTop: 4 }, children: date })
             ] })
           ] })
         },
@@ -1191,10 +1191,10 @@ function TagsWidget({
         href: `${basePath}?tag=${tag.slug}`,
         style: {
           padding: "4px 10px",
-          backgroundColor: "#f3f4f6",
+          backgroundColor: "var(--sk-bg-elevated)",
           borderRadius: 9999,
           fontSize: 12,
-          color: "#374151",
+          color: "var(--sk-text-primary)",
           textDecoration: "none",
           transition: "background-color 0.2s"
         },
@@ -1209,9 +1209,9 @@ function NewsletterWidget({
   description = "Get the latest posts delivered straight to your inbox.",
   buttonText = "Subscribe"
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...widgetStyle, backgroundColor: "#eff6ff" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { ...widgetTitleStyle, color: "#1e40af" }, children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: 14, color: "#6b7280", marginBottom: 16 }, children: description }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...widgetStyle, backgroundColor: "rgba(var(--sk-primary-rgb), 0.1)" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { ...widgetTitleStyle, color: "var(--sk-primary)" }, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: 14, color: "var(--sk-text-secondary)", marginBottom: 16 }, children: description }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "form",
       {
@@ -1230,7 +1230,7 @@ function NewsletterWidget({
               style: {
                 flex: 1,
                 padding: "10px 12px",
-                border: "1px solid #bfdbfe",
+                border: "1px solid var(--sk-border)",
                 borderRadius: 8,
                 fontSize: 14
               }
@@ -1242,8 +1242,8 @@ function NewsletterWidget({
               type: "submit",
               style: {
                 padding: "10px 16px",
-                backgroundColor: "#3b82f6",
-                color: "#fff",
+                backgroundColor: "var(--sk-primary)",
+                color: "var(--sk-bg)",
                 border: "none",
                 borderRadius: 8,
                 fontSize: 14,
@@ -1260,14 +1260,14 @@ function NewsletterWidget({
 }
 var widgetStyle = {
   padding: 20,
-  backgroundColor: "#f9fafb",
+  backgroundColor: "var(--sk-bg-elevated)",
   borderRadius: 12
 };
 var widgetTitleStyle = {
   margin: "0 0 16px",
   fontSize: 16,
   fontWeight: 600,
-  color: "#111827"
+  color: "var(--sk-text-primary)"
 };
 var categoryLinkStyle = {
   display: "flex",
@@ -1276,8 +1276,8 @@ var categoryLinkStyle = {
   textDecoration: "none"
 };
 async function BlogLayout({
-  apiUrl = process.env.SONOR_API_URL || process.env.UPTRADE_API_URL || process.env.NEXT_PUBLIC_UPTRADE_API_URL || "https://api.sonor.io",
-  apiKey = process.env.SONOR_API_KEY || process.env.UPTRADE_API_KEY || process.env.NEXT_PUBLIC_UPTRADE_API_KEY || "",
+  apiUrl = process.env.SONOR_API_URL || "https://api.sonor.io",
+  apiKey = process.env.SONOR_API_KEY || "",
   layout = "sidebar-right",
   showSidebar = true,
   sidebarProps = {},
@@ -1295,11 +1295,11 @@ async function BlogLayout({
       {
         style: {
           padding: "60px 20px",
-          backgroundColor: hero.backgroundColor || "#1e3a5f",
+          backgroundColor: hero.backgroundColor || "var(--sk-primary)",
           backgroundImage: hero.backgroundImage ? `url(${hero.backgroundImage})` : void 0,
           backgroundSize: "cover",
           backgroundPosition: "center",
-          color: "#fff",
+          color: "var(--sk-bg)",
           textAlign: "center"
         },
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth, margin: "0 auto" }, children: [
@@ -1390,7 +1390,7 @@ async function CategoryPage({
   const categoryHero = hero || {
     title: categoryName || category,
     subtitle: `Browse all posts in ${categoryName || category}`,
-    backgroundColor: "#1e3a5f"
+    backgroundColor: "var(--sk-primary)"
   };
   return /* @__PURE__ */ jsxRuntime.jsx(BlogLayout, { ...layoutProps, hero: categoryHero, currentCategory: category, children: listComponent });
 }
@@ -1411,7 +1411,7 @@ function AuthorCard({ author, showBio = true, showSocial = true, className }) {
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { margin: 0 }, children: author.name }),
-      showBio && author.bio && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "4px 0", color: "#6b7280", fontSize: 14 }, children: author.bio }),
+      showBio && author.bio && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "4px 0", color: "var(--sk-text-secondary)", fontSize: 14 }, children: author.bio }),
       showSocial && author.social_links && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [
         author.social_links.twitter && /* @__PURE__ */ jsxRuntime.jsx("a", { href: `https://twitter.com/${author.social_links.twitter}`, target: "_blank", rel: "noopener noreferrer", children: "Twitter" }),
         author.social_links.linkedin && /* @__PURE__ */ jsxRuntime.jsx("a", { href: author.social_links.linkedin, target: "_blank", rel: "noopener noreferrer", children: "LinkedIn" }),
@@ -1445,8 +1445,8 @@ async function fetchRelatedPosts2(apiUrl, apiKey, currentPostId, limit) {
   }
 }
 async function RelatedPosts({
-  apiUrl = process.env.SONOR_API_URL || process.env.UPTRADE_API_URL || process.env.NEXT_PUBLIC_UPTRADE_API_URL || "https://api.sonor.io",
-  apiKey = process.env.SONOR_API_KEY || process.env.UPTRADE_API_KEY || process.env.NEXT_PUBLIC_UPTRADE_API_KEY || "",
+  apiUrl = process.env.SONOR_API_URL || "https://api.sonor.io",
+  apiKey = process.env.SONOR_API_KEY || "",
   currentPostId,
   limit = 3,
   className,
@@ -1461,7 +1461,7 @@ async function RelatedPosts({
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: 16 }, children: "Related Posts" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gap: 16 }, children: posts.map(
-      (post) => renderItem ? renderItem(post) : /* @__PURE__ */ jsxRuntime.jsxs("article", { style: { borderBottom: "1px solid #e5e7eb", paddingBottom: 16 }, children: [
+      (post) => renderItem ? renderItem(post) : /* @__PURE__ */ jsxRuntime.jsxs("article", { style: { borderBottom: "1px solid var(--sk-border)", paddingBottom: 16 }, children: [
         post.featured_image && /* @__PURE__ */ jsxRuntime.jsx(
           "img",
           {
@@ -1477,7 +1477,7 @@ async function RelatedPosts({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("a", { href: `/blog/${post.slug}`, style: { textDecoration: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { margin: 0, color: "inherit" }, children: post.title }) }),
-        post.excerpt && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "4px 0 0", fontSize: 14, color: "#6b7280" }, children: post.excerpt })
+        post.excerpt && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "4px 0 0", fontSize: 14, color: "var(--sk-text-secondary)" }, children: post.excerpt })
       ] }, post.id)
     ) })
   ] });
@@ -1550,7 +1550,7 @@ function TableOfContents({
               all: "unset",
               cursor: "pointer",
               fontSize: 14,
-              color: activeId === item.id ? "#2563eb" : "#6b7280",
+              color: activeId === item.id ? "var(--sk-primary-hover)" : "var(--sk-text-secondary)",
               fontWeight: activeId === item.id ? 500 : 400,
               transition: "color 0.2s"
             },