Dim border color (#582)

vadimdemedes · May 2, 2023 · 8a04760 · 8a04760
1 parent eed2a11
commit 8a04760
Show file tree

Hide file tree

Showing 4 changed files with 264 additions and 4 deletions.
diff --git a/readme.md b/readme.md
@@ -1065,6 +1065,72 @@ Accepts the same values as [`color`](#color) in `<Text>` component.
 </Box>
 ```
 
+##### borderDimColor
+
+Type: `boolean`\
+Default: `false`
+
+Dim the border color.
+Shorthand for setting `borderTopDimColor`, `borderBottomDimColor`, `borderLeftDimColor` and `borderRightDimColor`.
+
+```jsx
+<Box borderStyle="round" borderDimColor>
+	<Text>Hello world</Text>
+</Box>
+```
+
+##### borderTopDimColor
+
+Type: `boolean`\
+Default: `false`
+
+Dim the top border color.
+
+```jsx
+<Box borderStyle="round" borderTopDimColor>
+	<Text>Hello world</Text>
+</Box>
+```
+
+##### borderBottomDimColor
+
+Type: `boolean`\
+Default: `false`
+
+Dim the bottom border color.
+
+```jsx
+<Box borderStyle="round" borderBottomDimColor>
+	<Text>Hello world</Text>
+</Box>
+```
+
+##### borderLeftDimColor
+
+Type: `boolean`\
+Default: `false`
+
+Dim the left border color.
+
+```jsx
+<Box borderStyle="round" borderLeftDimColor>
+	<Text>Hello world</Text>
+</Box>
+```
+
+##### borderRightDimColor
+
+Type: `boolean`\
+Default: `false`
+
+Dim the right border color.
+
+```jsx
+<Box borderStyle="round" borderRightDimColor>
+	<Text>Hello world</Text>
+</Box>
+```
+
 ##### borderTop
 
 Type: `boolean`\

diff --git a/src/render-border.ts b/src/render-border.ts
@@ -1,4 +1,5 @@
 import cliBoxes from 'cli-boxes';
+import chalk from 'chalk';
 import colorize from './colorize.js';
 import {type DOMNode} from './dom.js';
 import type Output from './output.js';
@@ -25,6 +26,18 @@ const renderBorder = (
 		const rightBorderColor =
 			node.style.borderRightColor ?? node.style.borderColor;
 
+		const dimTopBorderColor =
+			node.style.borderTopDimColor ?? node.style.borderDimColor;
+
+		const dimBottomBorderColor =
+			node.style.borderBottomDimColor ?? node.style.borderDimColor;
+
+		const dimLeftBorderColor =
+			node.style.borderLeftDimColor ?? node.style.borderDimColor;
+
+		const dimRightBorderColor =
+			node.style.borderRightDimColor ?? node.style.borderDimColor;
+
 		const showTopBorder = node.style.borderTop !== false;
 		const showBottomBorder = node.style.borderBottom !== false;
 		const showLeftBorder = node.style.borderLeft !== false;
@@ -33,7 +46,7 @@ const renderBorder = (
 		const contentWidth =
 			width - (showLeftBorder ? 1 : 0) - (showRightBorder ? 1 : 0);
 
-		const topBorder = showTopBorder
+		let topBorder = showTopBorder
 			? colorize(
 					(showLeftBorder ? box.topLeft : '') +
 						box.top.repeat(contentWidth) +
@@ -43,6 +56,10 @@ const renderBorder = (
 			  )
 			: undefined;
 
+		if (showTopBorder && dimTopBorderColor) {
+			topBorder = chalk.dim(topBorder);
+		}
+
 		let verticalBorderHeight = height;
 
 		if (showTopBorder) {
@@ -53,15 +70,23 @@ const renderBorder = (
 			verticalBorderHeight -= 1;
 		}
 
-		const leftBorder = (
+		let leftBorder = (
 			colorize(box.left, leftBorderColor, 'foreground') + '\n'
 		).repeat(verticalBorderHeight);
 
-		const rightBorder = (
+		if (dimLeftBorderColor) {
+			leftBorder = chalk.dim(leftBorder);
+		}
+
+		let rightBorder = (
 			colorize(box.right, rightBorderColor, 'foreground') + '\n'
 		).repeat(verticalBorderHeight);
 
-		const bottomBorder = showBottomBorder
+		if (dimRightBorderColor) {
+			rightBorder = chalk.dim(rightBorder);
+		}
+
+		let bottomBorder = showBottomBorder
 			? colorize(
 					(showLeftBorder ? box.bottomLeft : '') +
 						box.bottom.repeat(contentWidth) +
@@ -71,6 +96,10 @@ const renderBorder = (
 			  )
 			: undefined;
 
+		if (showBottomBorder && dimBottomBorderColor) {
+			bottomBorder = chalk.dim(bottomBorder);
+		}
+
 		const offsetY = showTopBorder ? 1 : 0;
 
 		if (topBorder) {

diff --git a/src/styles.ts b/src/styles.ts
@@ -246,6 +246,42 @@ export type Styles = {
 	 */
 	readonly borderRightColor?: LiteralUnion<ForegroundColorName, string>;
 
+	/**
+	 * Dim the border color.
+	 * Shorthand for setting `borderTopDimColor`, `borderBottomDimColor`, `borderLeftDimColor` and `borderRightDimColor`.
+	 *
+	 * @default false
+	 */
+	readonly borderDimColor?: boolean;
+
+	/**
+	 * Dim the top border color.
+	 *
+	 * @default false
+	 */
+	readonly borderTopDimColor?: boolean;
+
+	/**
+	 * Dim the bottom border color.
+	 *
+	 * @default false
+	 */
+	readonly borderBottomDimColor?: boolean;
+
+	/**
+	 * Dim the left border color.
+	 *
+	 * @default false
+	 */
+	readonly borderLeftDimColor?: boolean;
+
+	/**
+	 * Dim the right border color.
+	 *
+	 * @default false
+	 */
+	readonly borderRightDimColor?: boolean;
+
 	/**
 	 * Behavior for an element's overflow in both directions.
 	 *

diff --git a/test/borders.tsx b/test/borders.tsx
@@ -745,3 +745,132 @@ test('custom border style', t => {
 
 	t.is(output, boxen('Content', {width: 100, borderStyle: 'arrow'}));
 });
+
+test('dim border color', t => {
+	const output = renderToString(
+		<Box borderDimColor borderStyle="round">
+			<Text>Content</Text>
+		</Box>
+	);
+
+	t.is(
+		output,
+		boxen('Content', {
+			width: 100,
+			borderStyle: 'round',
+			dimBorder: true
+		})
+	);
+});
+
+test('dim top border color', t => {
+	const output = renderToString(
+		<Box flexDirection="column" alignItems="flex-start">
+			<Text>Above</Text>
+			<Box borderTopDimColor borderStyle="round">
+				<Text>Content</Text>
+			</Box>
+			<Text>Below</Text>
+		</Box>
+	);
+
+	t.is(
+		output,
+		[
+			'Above',
+			chalk.dim(
+				`${cliBoxes.round.topLeft}${cliBoxes.round.top.repeat(7)}${
+					cliBoxes.round.topRight
+				}`
+			),
+			`${cliBoxes.round.left}Content${cliBoxes.round.right}`,
+			`${cliBoxes.round.bottomLeft}${cliBoxes.round.bottom.repeat(7)}${
+				cliBoxes.round.bottomRight
+			}`,
+			'Below'
+		].join('\n')
+	);
+});
+
+test('dim bottom border color', t => {
+	const output = renderToString(
+		<Box flexDirection="column" alignItems="flex-start">
+			<Text>Above</Text>
+			<Box borderBottomDimColor borderStyle="round">
+				<Text>Content</Text>
+			</Box>
+			<Text>Below</Text>
+		</Box>
+	);
+
+	t.is(
+		output,
+		[
+			'Above',
+			`${cliBoxes.round.topLeft}${cliBoxes.round.top.repeat(7)}${
+				cliBoxes.round.topRight
+			}`,
+			`${cliBoxes.round.left}Content${cliBoxes.round.right}`,
+			chalk.dim(
+				`${cliBoxes.round.bottomLeft}${cliBoxes.round.bottom.repeat(7)}${
+					cliBoxes.round.bottomRight
+				}`
+			),
+			'Below'
+		].join('\n')
+	);
+});
+
+test('dim left border color', t => {
+	const output = renderToString(
+		<Box flexDirection="column" alignItems="flex-start">
+			<Text>Above</Text>
+			<Box borderLeftDimColor borderStyle="round">
+				<Text>Content</Text>
+			</Box>
+			<Text>Below</Text>
+		</Box>
+	);
+
+	t.is(
+		output,
+		[
+			'Above',
+			`${cliBoxes.round.topLeft}${cliBoxes.round.top.repeat(7)}${
+				cliBoxes.round.topRight
+			}`,
+			`${chalk.dim(cliBoxes.round.left)}Content${cliBoxes.round.right}`,
+			`${cliBoxes.round.bottomLeft}${cliBoxes.round.bottom.repeat(7)}${
+				cliBoxes.round.bottomRight
+			}`,
+			'Below'
+		].join('\n')
+	);
+});
+
+test('dim right border color', t => {
+	const output = renderToString(
+		<Box flexDirection="column" alignItems="flex-start">
+			<Text>Above</Text>
+			<Box borderRightDimColor borderStyle="round">
+				<Text>Content</Text>
+			</Box>
+			<Text>Below</Text>
+		</Box>
+	);
+
+	t.is(
+		output,
+		[
+			'Above',
+			`${cliBoxes.round.topLeft}${cliBoxes.round.top.repeat(7)}${
+				cliBoxes.round.topRight
+			}`,
+			`${cliBoxes.round.left}Content${chalk.dim(cliBoxes.round.right)}`,
+			`${cliBoxes.round.bottomLeft}${cliBoxes.round.bottom.repeat(7)}${
+				cliBoxes.round.bottomRight
+			}`,
+			'Below'
+		].join('\n')
+	);
+});