Skip to content

Commit

Permalink
fix: render dimmed text in all teminals & add full support for underl…
Browse files Browse the repository at this point in the history
…ine text with colors
  • Loading branch information
Thanga-Ganapathy committed Apr 2, 2024
1 parent 27d8fb7 commit 0c179fb
Show file tree
Hide file tree
Showing 14 changed files with 682 additions and 262 deletions.
5 changes: 5 additions & 0 deletions .changeset/curvy-files-impress.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@opentf/cli-styles': minor
---

Fixed dim issues in popular terminals & added full support for underline with colors.
158 changes: 100 additions & 58 deletions README.md

Large diffs are not rendered by default.

4 changes: 0 additions & 4 deletions __tests__/cases.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,4 @@ describe('cases', () => {
it('renders $ signs inbetween styles', () => {
expect(style('$$r{\\$}$')).toEqual('$\x1B[38;2;255;65;54m$\x1B[0m$');
});

it('renders dimmed green unicode symbol', () => {
expect(style('$g.dim{➜}')).toEqual('\x1B[38;2;46;204;64m\x1B[2m➜\x1B[0m');
});
});
70 changes: 38 additions & 32 deletions __tests__/colors.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@ describe('colors', () => {
);
});

it('renders pink fg color', () => {
expect(style('$pi{Pink}')).toEqual('\x1B[38;2;255;191;203mPink\x1B[0m');
});

it('renders cyan fg color', () => {
expect(style('$c{Cyan}')).toEqual('\x1B[38;2;154;236;254mCyan\x1B[0m');
});

it('renders orange fg color', () => {
expect(style('$o{ORANGE}')).toEqual('\x1B[38;2;255;133;27mORANGE\x1B[0m');
});
Expand All @@ -48,47 +56,39 @@ describe('colors', () => {
});

it('renders navy fg color', () => {
expect(style('$navy{NAVY}')).toEqual('\x1B[38;2;0;31;63mNAVY\x1B[0m');
expect(style('$n{NAVY}')).toEqual('\x1B[38;2;0;31;63mNAVY\x1B[0m');
});

it('renders aqua fg color', () => {
expect(style('$aqua{AQUA}')).toEqual('\x1B[38;2;127;219;255mAQUA\x1B[0m');
expect(style('$a{AQUA}')).toEqual('\x1B[38;2;127;219;255mAQUA\x1B[0m');
});

it('renders teal fg color', () => {
expect(style('$teal{TEAL}')).toEqual('\x1B[38;2;57;204;204mTEAL\x1B[0m');
expect(style('$t{TEAL}')).toEqual('\x1B[38;2;57;204;204mTEAL\x1B[0m');
});

it('renders purple fg color', () => {
expect(style('$purple{PURPLE}')).toEqual(
'\x1B[38;2;177;13;201mPURPLE\x1B[0m'
);
expect(style('$p{PURPLE}')).toEqual('\x1B[38;2;177;13;201mPURPLE\x1B[0m');
});

it('renders fuchsia fg color', () => {
expect(style('$fuchsia{FUCHSIA}')).toEqual(
'\x1B[38;2;240;18;190mFUCHSIA\x1B[0m'
);
expect(style('$f{FUCHSIA}')).toEqual('\x1B[38;2;240;18;190mFUCHSIA\x1B[0m');
});

it('renders maroon fg color', () => {
expect(style('$maroon{MAROON}')).toEqual(
'\x1B[38;2;133;20;75mMAROON\x1B[0m'
);
expect(style('$ma{MAROON}')).toEqual('\x1B[38;2;133;20;75mMAROON\x1B[0m');
});

it('renders olive fg color', () => {
expect(style('$olive{OLIVE}')).toEqual('\x1B[38;2;61;153;112mOLIVE\x1B[0m');
expect(style('$ol{OLIVE}')).toEqual('\x1B[38;2;61;153;112mOLIVE\x1B[0m');
});

it('renders lime fg color', () => {
expect(style('$lime{LIME}')).toEqual('\x1B[38;2;1;255;112mLIME\x1B[0m');
expect(style('$li{LIME}')).toEqual('\x1B[38;2;1;255;112mLIME\x1B[0m');
});

it('renders silver fg color', () => {
expect(style('$silver{SILVER}')).toEqual(
'\x1B[38;2;221;221;221mSILVER\x1B[0m'
);
expect(style('$s{SILVER}')).toEqual('\x1B[38;2;221;221;221mSILVER\x1B[0m');
});

it('renders bg red color', () => {
Expand Down Expand Up @@ -124,47 +124,41 @@ describe('colors', () => {
});

it('renders bg navy color', () => {
expect(style('$bgnavy{NAVY}')).toEqual('\x1B[48;2;0;31;63mNAVY\x1B[0m');
expect(style('$bgn{NAVY}')).toEqual('\x1B[48;2;0;31;63mNAVY\x1B[0m');
});

it('renders bg aqua color', () => {
expect(style('$bgaqua{AQUA}')).toEqual('\x1B[48;2;127;219;255mAQUA\x1B[0m');
expect(style('$bga{AQUA}')).toEqual('\x1B[48;2;127;219;255mAQUA\x1B[0m');
});

it('renders bg teal color', () => {
expect(style('$bgteal{TEAL}')).toEqual('\x1B[48;2;57;204;204mTEAL\x1B[0m');
expect(style('$bgt{TEAL}')).toEqual('\x1B[48;2;57;204;204mTEAL\x1B[0m');
});

it('renders bg purple color', () => {
expect(style('$bgpurple{PURPLE}')).toEqual(
'\x1B[48;2;177;13;201mPURPLE\x1B[0m'
);
expect(style('$bgp{PURPLE}')).toEqual('\x1B[48;2;177;13;201mPURPLE\x1B[0m');
});

it('renders bg fuchsia color', () => {
expect(style('$bgfuchsia{FUCHSIA}')).toEqual(
expect(style('$bgf{FUCHSIA}')).toEqual(
'\x1B[48;2;240;18;190mFUCHSIA\x1B[0m'
);
});

it('renders bg maroon color', () => {
expect(style('$bgmaroon{MAROON}')).toEqual(
'\x1B[48;2;133;20;75mMAROON\x1B[0m'
);
expect(style('$bgma{MAROON}')).toEqual('\x1B[48;2;133;20;75mMAROON\x1B[0m');
});

it('renders bg olive color', () => {
expect(style('$bgolive{OLIVE}')).toEqual(
'\x1B[48;2;61;153;112mOLIVE\x1B[0m'
);
expect(style('$bgol{OLIVE}')).toEqual('\x1B[48;2;61;153;112mOLIVE\x1B[0m');
});

it('renders bg lime color', () => {
expect(style('$bglime{LIME}')).toEqual('\x1B[48;2;1;255;112mLIME\x1B[0m');
expect(style('$bgli{LIME}')).toEqual('\x1B[48;2;1;255;112mLIME\x1B[0m');
});

it('renders bg silver color', () => {
expect(style('$bgsilver{SILVER}')).toEqual(
expect(style('$bgs{SILVER}')).toEqual(
'\x1B[48;2;221;221;221mSILVER\x1B[0m'
);
});
Expand Down Expand Up @@ -237,4 +231,16 @@ describe('colors', () => {
style('This is will be normal $r{RED} string', { color: false })
).toEqual('This is will be normal RED string');
});

it('renders default fg color within red color', () => {
expect(style('$r{Straight $dfg{sometext} underline}')).toEqual(
'\u001B[38;2;255;65;54mStraight \u001B[0m\u001B[39msometext\u001B[0m\u001B[38;2;255;65;54m underline\u001B[0m'
);
});

it('renders default bg color within yellow bg color text', () => {
expect(style('$bgy{Straight $dbg{some text} underline}')).toEqual(
'\u001B[48;2;255;220;0mStraight \u001B[0m\u001B[49msome text\u001B[0m\u001B[48;2;255;220;0m underline\u001B[0m'
);
});
});
53 changes: 53 additions & 0 deletions __tests__/dim.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { style } from '../src/index';

beforeAll(() => {
process.env.FORCE_COLOR = 3;
});

afterAll(() => {
delete process.env.FORCE_COLOR;
});

describe('Dim', () => {
it('renders dim text', () => {
expect(style('$dim{text}')).toEqual('\x1B[2mtext\x1B[0m');
});

it('renders dim text with color', () => {
expect(style('$dim.r{text}')).toEqual(
'\u001B[38;2;127;32;27mtext\u001B[0m'
);
});

it('renders normal text inside dim', () => {
expect(style('$dim{Some $nor{long} text}')).toEqual(
'\u001B[2mSome \u001B[0m\u001B[2m\u001B[22mlong\u001B[0m\u001B[2m text\u001B[0m'
);
});

it('renders bold color text inside dim', () => {
expect(style('$dim{Some $bol.y{long} text}')).toEqual(
'\u001B[2mSome \u001B[0m\u001B[1m\u001B[38;2;127;110;0mlong\u001B[0m\u001B[2m text\u001B[0m'
);
});

it('renders nested dim text with color', () => {
expect(style('$dim.r{Some $g{green} text}')).toEqual(
'\u001B[38;2;127;32;27mSome \u001B[0m\u001B[38;2;23;102;32mgreen\u001B[0m\u001B[38;2;127;32;27m text\u001B[0m'
);
});

it('renders normal text nested within dim text with color', () => {
expect(
style('$dim.r{Some $g{green text $nor{inside} some text} text}')
).toEqual(
'\u001B[38;2;127;32;27mSome \u001B[0m\u001B[38;2;23;102;32mgreen text \u001B[0m\u001B[38;2;46;204;64m\u001B[22minside\u001B[0m\u001B[38;2;23;102;32m some text\u001B[0m\u001B[38;2;127;32;27m text\u001B[0m'
);
});

it('renders rgb colored dim text within normal text', () => {
expect(style('Normal $rgb(255, 150, 0).dim{dim text} text')).toEqual(
'Normal \u001B[38;2;127;75;0mdim text\u001B[0m text'
);
});
});
34 changes: 22 additions & 12 deletions __tests__/modifiers.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,53 +11,63 @@ afterAll(() => {
describe('Modifiers', () => {
it('renders default style', () => {
expect(style('$r{RED $res{Normal} RED}')).toEqual(
'\x1B[38;2;255;65;54mRED \x1B[0m\x1B[38;2;255;65;54m\x1B[0mNormal\x1B[0m\x1B[38;2;255;65;54m RED\x1B[0m'
'\x1B[38;2;255;65;54mRED \x1B[0m\x1B[0mNormal\x1B[0m\x1B[38;2;255;65;54m RED\x1B[0m'
);
});

it('renders normal style', () => {
expect(style('$bol{BOLD $nor{NORMAL} BOLD}')).toEqual(
'\x1B[1mBOLD \x1B[0m\x1B[1m\x1B[22mNORMAL\x1B[0m\x1B[1m BOLD\x1B[0m'
'\x1B[1mBOLD \x1B[0m\x1B[22mNORMAL\x1B[0m\x1B[1m BOLD\x1B[0m'
);
});

it('blinks text', () => {
expect(style('$blk{SALE}')).toEqual('\x1B[5mSALE\x1B[0m');
});

it('renders double underline text', () => {
expect(style('$dun{text}')).toEqual('\x1B[21mtext\x1B[0m');
it('renders no blinking text', () => {
expect(style('$nob{Offer sale}')).toEqual('\u001B[25mOffer sale\u001B[0m');
});

it('renders hidden text', () => {
expect(style('$hid{text}')).toEqual('\x1B[8mtext\x1B[0m');
});

it('renders visible text inside hidden text', () => {
expect(style('Email: $hid{user12345$vis{@example.com}}')).toEqual(
'Email: \u001B[8muser12345\u001B[0m\u001B[28m@example.com\u001B[0m\u001B[8m\u001B[0m'
);
});

it('renders overline text', () => {
expect(style('$ovl{text}')).toEqual('\x1B[53mtext\x1B[0m');
});

it('renders bold text', () => {
expect(style('$bol{text}')).toEqual('\x1B[1mtext\x1B[0m');
it('renders no overline text', () => {
expect(style('$noo{text}')).toEqual('\x1B[55mtext\x1B[0m');
});

it('renders dim text', () => {
expect(style('$dim{text}')).toEqual('\x1B[2mtext\x1B[0m');
it('renders bold text', () => {
expect(style('$bol{text}')).toEqual('\x1B[1mtext\x1B[0m');
});

it('renders italic text', () => {
expect(style('$ita{text}')).toEqual('\x1B[3mtext\x1B[0m');
});

it('renders underline text', () => {
expect(style('$und{text}')).toEqual('\x1B[4mtext\x1B[0m');
it('renders inversed text', () => {
expect(style('$inv{text}')).toEqual('\x1B[7mtext\x1B[0m');
});

it('renders inv text', () => {
expect(style('$inv{text}')).toEqual('\x1B[7mtext\x1B[0m');
it('renders not inversed text', () => {
expect(style('$noi{text}')).toEqual('\x1B[27mtext\x1B[0m');
});

it('renders strikethrough text', () => {
expect(style('$str{text}')).toEqual('\x1B[9mtext\x1B[0m');
});

it('renders not strikethrough text', () => {
expect(style('$nos{text}')).toEqual('\x1B[29mtext\x1B[0m');
});
});
93 changes: 93 additions & 0 deletions __tests__/underline.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import { style } from '../src/index';

beforeAll(() => {
process.env.FORCE_COLOR = 3;
});

afterAll(() => {
delete process.env.FORCE_COLOR;
});

describe('Underline', () => {
it('renders straight underline text', () => {
expect(style('$und{Straight Underline}')).toEqual(
'\x1B[4mStraight Underline\x1B[0m'
);
});

it('renders straight underline text with no underline', () => {
expect(
style('$und{Straight $nou{(No underline here)} underline}')
).toEqual(
'\u001B[4mStraight \u001B[0m\u001B[24m(No underline here)\u001B[0m\u001B[4m underline\u001B[0m'
);
});

it('renders doubly underline text', () => {
expect(style('$dbu{Double underline}')).toEqual(
'\u001B[21mDouble underline\u001B[0m'
);
});

it('renders curly underline text', () => {
expect(style('$cru{Curly underline}')).toEqual(
'\u001B[4:3mCurly underline\u001B[0m'
);
});

it('renders dotted underline text', () => {
expect(style('$dou{Dotted underline}')).toEqual(
'\u001B[4:4mDotted underline\u001B[0m'
);
});

it('renders dashed underline text', () => {
expect(style('$dau{Dashed underline}')).toEqual(
'\u001B[4:5mDashed underline\u001B[0m'
);
});

it('renders straight colored underline text', () => {
expect(style('$und.ug{Straight underline colored}')).toEqual(
'\u001B[4m\u001B[58:2:0:46:204:64mStraight underline colored\u001B[0m'
);
});

it('renders doubly colored underline text', () => {
expect(style('$dbu.uy{Double underline colored}')).toEqual(
'\u001B[21m\u001B[58:2:0:255:220:0mDouble underline colored\u001B[0m'
);
});

it('renders curly colored underline text', () => {
expect(style('$cru.ur{Curly underline colored}')).toEqual(
'\u001B[4:3m\u001B[58:2:0:255:65:54mCurly underline colored\u001B[0m'
);
});

it('renders dotted colored underline text', () => {
expect(style('$dou.ub{Dotted underline colored}')).toEqual(
'\u001B[4:4m\u001B[58:2:0:0:116:217mDotted underline colored\u001B[0m'
);
});

it('renders dashed colored underline text', () => {
expect(style('$dau.uo{Dashed underline colored}')).toEqual(
'\u001B[4:5m\u001B[58:2:0:255:133:27mDashed underline colored\u001B[0m'
);
});

it('renders staight rgb colored', () => {
expect(
style('$und.urgb(100,200,255){Straight underline $ug{RGB} colored}')
).toEqual(
'\u001B[4m\u001B[58:2:0:100;200;255mStraight underline \u001B[0m\u001B[4m\u001B[58:2:0:46:204:64mRGB\u001B[0m\u001B[4m\u001B[58:2:0:100;200;255m colored\u001B[0m'
);
});

it('renders default colored underline between blue colored text', () => {
expect(style('$und.ub{Straight $ruc{underline reset} colored}')).toEqual(
'\u001B[4m\u001B[58:2:0:0:116:217mStraight \u001B[0m\u001B[4m\u001B[59munderline reset\u001B[0m\u001B[4m\u001B[58:2:0:0:116:217m colored\u001B[0m'
);
});
});
Binary file added assets/Underline-Demo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed assets/underline.png
Binary file not shown.
Loading

0 comments on commit 0c179fb

Please sign in to comment.