Feature request: Add the option borderBackgroundColor

[ThornDuke]

HI.
In some applications you feel the lack of the borderBackgroundColor option, which changes the background color of the box perimeter.
Here I report the diff of the index.js file that adds that option. I did some testing and it seems to work.

diff --git a/index.js b/index.js
index ca00b36..9e6bae8 100644
--- a/index.js
+++ b/index.js
@@ -210,8 +210,11 @@ const makeContentText = (text, { padding, width, textAlignment, height }) => {
 
 const boxContent = (content, contentWidth, options) => {
   const colorizeBorder = (border) => {
-    const newBorder = options.borderColor ? getColorFn(options.borderColor)(border) : border;
-    return options.dimBorder ? chalk.dim(newBorder) : newBorder;
+    const coloredBorder = options.borderColor ? getColorFn(options.borderColor)(border) : border;
+    const bgColoredBorder = options.borderBackgroundColor
+      ? getBGColorFn(options.borderBackgroundColor)(coloredBorder)
+      : coloredBorder;
+    return options.dimBorder ? chalk.dim(bgColoredBorder) : bgColoredBorder;
   };
 
   const colorizeContent = (content) =>
@@ -243,14 +246,15 @@ const boxContent = (content, contentWidth, options) => {
 
   if (options.borderStyle !== NONE || options.title) {
     result +=
+      marginLeft +
       colorizeBorder(
-        marginLeft +
-          chars.topLeft +
+        chars.topLeft +
           (options.title
             ? makeTitle(options.title, chars.top.repeat(contentWidth), options.titleAlignment)
             : chars.top.repeat(contentWidth)) +
           chars.topRight
-      ) + NEWLINE;
+      ) +
+      NEWLINE;
   }
 
   const lines = content.split(NEWLINE);
@@ -268,9 +272,8 @@ const boxContent = (content, contentWidth, options) => {
   if (options.borderStyle !== NONE) {
     result +=
       NEWLINE +
-      colorizeBorder(
-        marginLeft + chars.bottomLeft + chars.bottom.repeat(contentWidth) + chars.bottomRight
-      );
+      marginLeft +
+      colorizeBorder(chars.bottomLeft + chars.bottom.repeat(contentWidth) + chars.bottomRight);
   }
 
   if (options.margin.bottom) {

A small test to make clearer the usefulness of the new option.

console.log(
  boxen("griffin", {
    backgroundColor: "black",
    borderStyle: "single",
    padding: 1,
    margin: 1,
  })
);

console.log(
  boxen("griffin", {
    backgroundColor: "black",
    borderBackgroundColor: "black", // <--- the new option
    borderStyle: "single",
    padding: 1,
    margin: 1,
  })
);

console.log(
  boxen(`great ${chalk.yellow("griffins")}
flying all around
the ${chalk.red("whole world")}`,
    {
      title: "GRIFFINS",
      titleAlignment: "center",
      backgroundColor: "black",
      borderBackgroundColor: "black", // <---
      borderStyle: "single",
      padding: 1,
      margin: 1,
    }
  )
);

Consider making these changes in your code.

[ThornDuke]

I dedicated time and work to opening this issue and in two weeks I haven't received a single response.

I see that other issues (even recently, for example issue #95) have had a response and a solution within a few hours of opening.

If I will not have a response within 24 hours I will delete this issue.

[Caesarovich]

Hi @ThornDuke, thanks for your issue. I apologize for not responding to your messages faster, I did not see the notification.

I approve the addition of this feature. Do you wish to make the changes yourself and open a PR ? If you don't have the time I'll take care to implement this functionnality.

[ThornDuke]

Hello @Caesarovich . I thank you for the answer.

I'm happy that you like the feature I proposed, and I'd like to follow its development by opening a PR.

Unfortunately, however, I do not have the time to do so, so I am regretfully forced to refuse your kind proposal.

However, I will be happy to see my proposal implemented by anyone who has the opportunity to do so.