@opentf/cli-styles

 OPEN TECH FOUNDATION

CLI Styles

Style your CLI text using ANSI escape sequences.

Try it online at https://node-repl.pages.dev

🚀 @opentf/std - An Extensive JavaScript Standard Library. Please review and give feedback.

Features

• 24-Bit colors only (True Color)

• Nested styles

• Auto detects CLI color support

• Supports RGB & Hex color modes

• Respects NO_COLOR & FORCE_COLOR

Supported Terminals (Popular)

✔️ GNOME Terminal

✔️ Konsole

✔️ xfce4-terminal

✔️ MATE Terminal

✔️ iTerm2

✔️ VS Code

✔️ Tabby

✔️ Hyper

✔️ Alacritty

✔️ Contour

✔️ kitty

✔️ WezTerm

✔️ Windows Terminal

❌ Terminal.app

*Missing your favorite terminal emulators here? Please give a PR or file an issue in Github.

Installation

npm install @opentf/cli-styles

yarn add @opentf/cli-styles

pnpm add @opentf/cli-styles

bun add @opentf/cli-styles

Syntax

style(str: string, options?: { color: boolean }): string;

Usage

import { style } from '@opentf/cli-styles';

const out = style('$key[.key...]{Text}');
console.log(out);

Examples

Using foreground color

style(
  '🍊 - An $o{orange} is a fruit of various citrus species in the family Rutaceae.'
);

Using multiple colors

style(
  '$bgy.bl{The $r.bol{R}$g.bol{G}$b.bol{B} color model is an additive color model in which the $r.bol{red}, $g.bol{green} and $b.bol{blue} primary colors of light are added together in various ways to reproduce a broad array of colors.}'
);

Nested colors

style(
  "$bgbl.b{THE QUICK $g{BROWN $r.bol{CAT} JUMPED} OVER THE LAZY $r.bol{DOG}'S BACK}"
);

Composing different styles

style('$bol.w.bgg{ PASS }');

Inverse colors

style('$inv.r.bgw.bol{ FAILED }');

Normal vs Bold vs Dim text

style('Normal text | $bol{Bold text} | $dim{Dimmed text}');

Italic fonts

style(
  '$ita.fuchsia.bol.bgw{"This poem is endless,\n the odds against us are endless,\n our chances of being alive together statistically nonexistent;\n still we have made it"}'
);

Underlined texts

style('$und{Straight underline}');
style('$und{Straight $nou{(No underline here)}  underline}');
style('$dbu{Double underline}');
style('$cru{Curly underline}');
style('$dou{Dotted underline}');
style('$dau{Dashed underline}');
style('$und.ug{Straight underline colored}');
style('$dbu.uy{Double underline colored}');
style('$cru.ur{Curly underline colored}');
style('$dou.ub{Dotted underline colored}');
style('$dau.uo{Dashed underline colored}');
style('$und.urgb(100,200,255){Straight underline RGB colored}');
style('$und.ub{Straight $ruc{underline reset} colored}');

*Output from VS Code.

Strikethrough text

style('Price: $str.r{\\$75.00} $g{\\$50.00}');

Code Highlighting:

import { style } from '@opentf/cli-styles';
import hljs from 'highlight.js';
import { decode } from 'html-entities';

function highlight(code) {
  let html = hljs.highlight(code, {
    language: 'js',
  }).value;
  html = html.replaceAll('<span class="hljs-keyword">', '$fuchsia{');
  html = html.replaceAll('<span class="hljs-variable language_">', '$b{');
  html = html.replaceAll('<span class="hljs-title function_">', '$lime{');
  html = html.replaceAll('<span class="hljs-string">', '$y{');
  html = html.replaceAll('<span class="hljs-params"></span>', '');
  html = html.replaceAll('<span class="hljs-comment">', '$gr.dim{');
  html = html.replaceAll('</span>', '}');
  html = decode(html);
  return style(html);
}

const code = `
// Comment
function greet() {
  console.log('Hello World!');
}
`;

console.log(highlight(code));

Using Template Literals:

const cpu = 90;
const ram = 40;
const disk = 70;

const getColor = (n) => (n <= 50 ? 'g' : n > 50 && n <= 70 ? 'y' : 'r');

style(`
 CPU: $${getColor(cpu)}{${cpu}%}
 RAM: $${getColor(ram)}{${ram}%}
DISK: $${getColor(disk)}{${disk}%}
`);

Escape characters:

Use double back slashes to escape a character in the string.

style(
  `<$hex(#39CCCC){input} name=$y{"price"} value=$y{"\\$\\{ Cost + Tax \\}.00"} />`
);

Blinking Text:

style('$g.bol{SALE! -} $blk.r.bol{50% OFFER}');

Color Keys

Key	Description
r	Red - rgb(255,65,54)
g	Green - rgb(46,204,64)
b	Blue - rgb(0,116,217)
o	Orange - rgb(255,133,27)
y	Yellow - rgb(255,220,0)
w	White - rgb(255,255,255)
m	Magenta - rgb(255,105,193)
c	Cyan - rgb(154, 236, 254)
n	Navy - rgb(0,31,63)
a	Aqua - rgb(127,219,255)
t	Teal - rgb(57,204,204)
p	Purple - rgb(177,13,201)
f	Fuchsia - rgb(240,18,190)
s	Silver - rgb(221,221,221)
ma	Maroon - rgb(133,20,75)
ol	Olive - rgb(61,153,112)
li	Lime - rgb(1,255,112)
bl	Black - rgb(17,17,17)
gr	Grey - rgb(170,170,170)
pi	Pink - rgb(255, 191, 203)
rgb(red, green, blue)	The RGB foreground colors, Eg: rgb(255,0,0) for red color.
urgb(red, green, blue)	The RGB underlined colors, Eg: urgb(255, 255, 0) for yellow underlined color.
hex(#------)	The 6-digit Hex colors, Eg: hex(#00ff00) for green color.
bg*	The background colors can be applied with prefix bg to any color keys. Eg: bgw for white bg bgrgb(0,0,0) for black bg bghex(#0000FF) for blue bg
u*	The underline colors.

Modifier Keys

Key	Description
res	Reset all attributes to normal.
nor	Normal intensity Neither bold nor dim.
bol	Bold or increased intensity text.
dim	Dimmed or decreased intensity text.
ita	Italic text.
inv	Swap foreground and background colors.
noi	Not inversed.
str	Strikethrough text.
nos	Not Strikethrough text.
hid	Hidden text.
vis	Visible text.
und	Straight underline text.
nou	No Underlined text.
dbu	Doubly Underlined text.
cru	Curly Underlined text.
dou	Dotted Underlined text.
dau	Dashed Underlined text.
ruc	Reset Underlined text color.
ovl	Overlined text.
noo	Not Overlined text.
blk	Blinking text.
nob	No Blinking text.

Color Overrides

You can disable colors/styles by the following methods:

• Pass color option false to the style function.

• Pass --no-color or --color=false to the process arguments.

• Set FORCE_COLOR=0 in enviroment variables.

You can force enable colors/styles by setting FORCE_COLOR=3 in enviroment variables.

Modifier Keys Supported Terminals

Supported Terminals	res	nor	bol	dim	ita	inv	str	hid	ovl	blk	und	dbu
Gnome Terminal	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
Konsole	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	❌
xfce4-terminal	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
MATE Terminal	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
iTerm2	✅	✅	✅	✅	✅	✅	✅	❌	❌	❌	✅	❌
VS Code	✅	✅	✅	✅	✅	✅	✅	✅	✅	❌	✅	✅
Tabby	✅	✅	✅	✅	✅	✅	✅	✅	❌	❌	✅	✅
Hyper	✅	✅	✅	✅	✅	✅	✅	✅	❌	❌	✅	❌
Alacritty	✅	✅	✅	✅	✅	✅	✅	✅	❌	❌	✅	❌
Contour	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
kitty	✅	✅	✅	✅	❌	✅	✅	❌	❌	❌	✅	✅
WezTerm	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
Windows Terminal	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

References

https://en.wikipedia.org/wiki/ANSI_escape_code

https://github.com/termstandard/colors

https://no-color.org/

https://nodejs.org/api/cli.html#force_color1-2-3

https://clrs.cc/

https://developer.chrome.com/docs/devtools/console/format-style/

Related

• @opentf/std - An Extensive JavaScript Standard Library.

• @opentf/cli-pbar - The CLI progress bar.

License

Copyright (c) 2022, Thanga Ganapathy (MIT License).