@opentf/cli-styles v0.15.0

 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

Modifier Keys

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

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).