feat: added border_color option (#1000)

* feat: Allow customization of border color

* docs: Update readme

src/cards/repo-card.js

@@ -31,6 +31,7 @@ const renderRepoCard = (repo, options = {}) => {
     show_owner,
     theme = "default_repocard",
     border_radius,
+    border_color,
     locale,
   } = options;
 
@@ -60,11 +61,12 @@ const renderRepoCard = (repo, options = {}) => {
   });
 
   // returns theme based colors with proper overrides and defaults
-  const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+  const { titleColor, textColor, iconColor, bgColor, borderColor } = getCardColors({
     title_color,
     icon_color,
     text_color,
     bg_color,
+    border_color,
     theme,
   });
 
@@ -125,6 +127,7 @@ const renderRepoCard = (repo, options = {}) => {
       textColor,
       iconColor,
       bgColor,
+      borderColor,
     },
   });
 

src/cards/stats-card.js

@@ -70,6 +70,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     theme = "default",
     custom_title,
     border_radius,
+    border_color,
     locale,
     disable_animations = false,
   } = options;
@@ -77,11 +78,12 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   const lheight = parseInt(line_height, 10);
 
   // returns theme based colors with proper overrides and defaults
-  const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+  const { titleColor, textColor, iconColor, bgColor, borderColor } = getCardColors({
     title_color,
     icon_color,
     text_color,
     bg_color,
+    border_color,
     theme,
   });
 
@@ -207,6 +209,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
       textColor,
       iconColor,
       bgColor,
+      borderColor,
     },
   });
 

src/cards/top-languages-card.js

@@ -73,7 +73,8 @@ const renderTopLanguages = (topLangs, options = {}) => {
     layout,
     custom_title,
     locale,
-    border_radius
+    border_radius,
+    border_color,
   } = options;
 
   const i18n = new I18n({
@@ -104,10 +105,11 @@ const renderTopLanguages = (topLangs, options = {}) => {
   }, 0);
 
   // returns theme based colors with proper overrides and defaults
-  const { titleColor, textColor, bgColor } = getCardColors({
+  const { titleColor, textColor, bgColor, borderColor } = getCardColors({
     title_color,
     text_color,
     bg_color,
+    border_color,
     theme,
   });
 
@@ -189,6 +191,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
       titleColor,
       textColor,
       bgColor,
+      borderColor,
     },
   });
 

src/cards/wakatime-card.js

@@ -100,7 +100,8 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     locale,
     layout,
     langs_count = languages ? languages.length : 0,
-    border_radius
+    border_radius,
+    border_color,
   } = options;
 
   const i18n = new I18n({
@@ -113,11 +114,18 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
   langsCount = clampValue(parseInt(langs_count), 1, langs_count);
 
   // returns theme based colors with proper overrides and defaults
-  const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+  const {
+    titleColor,
+    textColor,
+    iconColor,
+    bgColor,
+    borderColor,
+  } = getCardColors({
     title_color,
     icon_color,
     text_color,
     bg_color,
+    border_color,
     theme,
   });
 
@@ -221,6 +229,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
       textColor,
       iconColor,
       bgColor,
+      borderColor,
     },
   });
 

src/common/Card.js

@@ -147,7 +147,7 @@ class Card {
           y="0.5"
           rx="${this.border_radius}"
           height="99%"
-          stroke="#E4E2E2"
+          stroke="${this.colors.borderColor}"
           width="${this.width - 1}"
           fill="${
             typeof this.colors.bgColor === "object"

src/common/utils.js

@@ -115,10 +115,12 @@ function getCardColors({
   icon_color,
   bg_color,
   theme,
+  border_color,
   fallbackTheme = "default",
 }) {
   const defaultTheme = themes[fallbackTheme];
   const selectedTheme = themes[theme] || defaultTheme;
+  const defaultBorderColor = selectedTheme.border_color || defaultTheme.border_color;
 
   // get the color provided by the user else the theme color
   // finally if both colors are invalid fallback to default theme
@@ -139,7 +141,12 @@ function getCardColors({
     "#" + defaultTheme.bg_color,
   );
 
-  return { titleColor, iconColor, textColor, bgColor };
+  const borderColor = fallbackColor(
+    border_color || defaultBorderColor,
+    "#" + defaultBorderColor,
+  );
+
+  return { titleColor, iconColor, textColor, bgColor, borderColor };
 }
 
 function wrapTextMultiline(text, width = 60, maxLines = 3) {