Skip to content

Commit 4033615

Browse files
committed
docs: update readme for named truecolor
1 parent b69e965 commit 4033615

File tree

1 file changed

+15
-15
lines changed

1 file changed

+15
-15
lines changed

README.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,16 @@ Ansis is focused on [small size](#compare-size) and [speed](#benchmark) while pr
3838
- Nested [tagged template strings](#template-literals): ``` red`Error: ${blue`file.js`} not found!` ```
3939
- [ANSI styles](#styles): `dim` **`bold`** _`italic`_ <u>`underline`</u> <s>`strikethrough`</s>
4040
- [ANSI 16 colors](#base-colors): `red`, `redBright`, `bgRed`, `bgRedBright`, ...
41-
- [ANSI 256 colors](#256-colors): `fg()`, `bg()`
42-
- [Truecolor](#truecolor) (**RGB & HEX**): `rgb()`, `bgRgb()`, `hex()`, `bgHex()`
43-
- [Extend](#extend-colors) base colors with [**named truecolor**](https://drafts.csswg.org/css-color/#named-colors) via `ansis.extend()`, then use colors by name, e.g. `ansis.pink()`
41+
- [ANSI 256 colors](#256-colors) via methods: `fg(num)`, `bg(num)`
42+
- [Truecolor](#truecolor) via methods: `rgb(r,g,b)`, `bgRgb(r,g,b)`, `hex('#rrggbb')`, `bgHex('#rrggbb')`
43+
- [Named truecolor](#extend-colors) (extendable with colors such as [pink, indigo, navy, ...](https://drafts.csswg.org/css-color/#named-colors)): `ansis.pink()`, `ansis.bgPink()`, ...
4444
- Auto-detects [color support](#color-support): Truecolor, 256 colors, 16 colors, no colors
4545
- Automatic [fallback](#fallback): Truecolor → 256 colors → 16 colors → no colors
4646
- Raw ANSI escape codes: ``` `File ${red.open}not found${red.close} in directory` ```
4747
- Strip ANSI escape codes with `ansis.strip()`
4848
- Supports [ENV variables](#cli-vars) and [flags](#cli-flags): [`NO_COLOR`](using-env-no-color), [`FORCE_COLOR`](#using-env-force-color), [`COLORTERM`](#using-env-colorterm), `--no-color`, `--color`
49-
- Enables reliable [CLI testing](#cli-testing) with forced [color levels](#color-levels): no color, 16, 256 or Truecolor
50-
- Replacement for [`chalk`](#replacing-chalk) [`ansi-colors`](#replacing-ansi-colors) [`colorette`](#replacing-colorette) [`picocolors`](#replacing-picocolors) and others [alternatives](#alternatives)
49+
- Reliable [CLI testing](#cli-testing) with forced [color levels](#color-levels): no color, 16, 256 or Truecolor
50+
- Drop-in replacement for [`chalk`](#replacing-chalk) [`ansi-colors`](#replacing-ansi-colors) [`colorette`](#replacing-colorette) [`picocolors`](#replacing-picocolors) and others [alternatives](#alternatives)
5151

5252

5353
> 🚀 **You might also like** [`flaget`](https://github.com/webdiscus/flaget) - a smaller (5 kB) and faster alternative to [`yargs-parser`](https://www.npmjs.com/package/yargs-parser) (85 kB) for CLI argument parsing.
@@ -519,7 +519,7 @@ If you use the `hex()`, `rgb()` or `ansis256()` functions in a terminal not supp
519519
## Named truecolor
520520

521521
Ansis supports full 24-bit color via `ansis.rgb(r, g, b)` and `ansis.hex('#rrggbb')`.\
522-
If you prefer [**named colors**](http://dev.w3.org/csswg/css-color/#named-colors) (e.g. `beige`, `orange`, `pink`, `royalblue`, etc.)
522+
If you prefer [**named colors**](http://dev.w3.org/csswg/css-color/#named-colors) (e.g. `pink`, `orange`, `indigo`, etc.)
523523
instead of writing hex or RGB values by hand, resolve color names in your app and register them as extended styles on an Ansis instance via `ansis.extend()`.
524524
Then you can call e.g., `color.pink()` or `color.bgPink()` rather than using `ansis.hex('#ffc0cb')` or `ansis.bgHex('#ffc0cb')` directly.
525525

@@ -548,7 +548,7 @@ console.log(color.pink('Pink foreground'));
548548
console.log(color.bgPink('Pink background')); // auto-generated from "pink"
549549
```
550550
551-
Of course, you can define a custom subset with only the names you actually use.
551+
Of course, you can define a custom subset with only the colors you actually use.
552552
553553
> [!TIP]
554554
> Need help picking a color name? Try the [Name that Color](https://chir.ag/projects/name-that-color/#FF681F) tool - paste a hex and get its closest color name.
@@ -563,7 +563,7 @@ const myTheme = {
563563
pink: '#ffc0cb',
564564
};
565565
566-
// Create a new instance and extend it with only your custom names
566+
// Create a new instance and extend it with only your colors
567567
const ansis = new Ansis().extend(myTheme);
568568
569569
// You can still use base styles together with extended ones
@@ -599,15 +599,15 @@ const log = (style: AnsiColorsExtend<keyof typeof myTheme>, message: string) =>
599599
console.log(color[style](message));
600600
}
601601
602-
log('red', 'base color OK'); // ✅ built-in
603-
log('bgRed', 'base background OK'); // ✅ built-in background
604-
log('orange', 'extended OK'); // ✅ extended
605-
log('bgOrange', 'extended bg OK'); // ✅ auto-generated background from extended
606-
log('pink', 'extended OK'); // ✅ extended
607-
log('bgPink', 'extended bg OK'); // ✅ auto-generated background from extended
602+
log('red', 'red color'); // ✅ built-in
603+
log('bgRed', 'red background'); // ✅ built-in background
604+
log('orange', 'orange color'); // ✅ extended
605+
log('bgOrange', 'orange background'); // ✅ auto-generated background from extended
606+
607+
console.log(color.pink`pink foreground`); // ✅ extended
608+
console.log(color.bgPink`pink background`); // ✅ auto-generated background from extended
608609
609610
// log('unknown', 'nope'); // ❌ TypeScript error
610-
// log('bgUnknown', 'nope'); // ❌ TypeScript error
611611
```
612612
613613
> [!WARNING]

0 commit comments

Comments
 (0)