diff --git a/README.md b/README.md
index 1ab09ca..a4868e0 100644
--- a/README.md
+++ b/README.md
@@ -56,31 +56,37 @@ npm install ansis
## Usage
+You can import module and named colors with ESM or CommonJS syntax.
+
```js
-import { black, red, cyan, inverse, reset } from 'ansis/colors'; // named import
-import ansis from 'ansis'; // ESM
-const ansis = require('ansis'); // CommonJS
+// ESM
+import ansis from 'ansis';
+import { red, black, inverse, reset } from 'ansis/colors';
+
+// CommonJS
+const ansis = require('ansis');
+const { red, black, inverse, reset } = require('ansis/colors');
console.log(ansis.green`Hello ${inverse`ANSI`} World!`);
console.log(black.bgYellow`Warning:${reset.cyan` /path/to/file.js`} ${red`not found!`}`);
```
Output:\
-
+
## Named import
You can import named colors, styles and functions.
-All imported colors and styles **are chainable**.
+All imported colors and styles are **chainable**.
> **Note**
>
-> Imported code is not treeshakeable.\
+> Imported code is not treeshakeable.
> Don't worry, full functional code is `3KB` only.
```js
-import { red, green, blue, yellow, hex, bold, italic } from 'ansis/colors';
+import { red, hex, italic } from 'ansis/colors';
red.bold('text');
italic.underline.cyan('text');
@@ -91,31 +97,52 @@ hex('#FF75D1').bgCyan.bold('text');
## Chained syntax
+All colors, styles and functions are chainable. Each color or style can be combined in any order.
+
```js
import ansis from 'ansis';
-import { red, italic, underline } from 'ansis/colors';
+import { red, cyan, bold, italic, hex } from 'ansis/colors';
// with namespace
ansis.red('text');
-ansis.cyan.italic('text');
-ansis.blue.underline.bold('text');
+ansis.cyan.bold('text');
+ansis.hex('#FF75D1').bgCyan.bold('text');
+ansis.bold.bgHex('#FF75D1').cyan('text');
+ansis.italic.bold.strike.yellow.bgMagentaBright('text');
// with named import
-red.italic.bold('text');
-italic.bold.red('text');
-underline.yellowBright('text');
+red('text');
+cyan.bold('text');
+hex('#FF75D1').bgCyan.bold('text');
+bold.bgHex('#FF75D1').cyan('text');
+italic.bold.strike.yellow.bgMagentaBright('text');
```
## Nested syntax
+Each color or style can be nested with one another.
+
```js
-import { white, cyan, green } from 'ansis/colors';
+import { red, italic, underline } from 'ansis/colors';
-white(`MakBookPro, ${cyan.bold(`RAM:`)} 64 GB | ${green.bold(`GPU:`)} 32 cores`);
+red(`red ${italic(`red italic ${underline(`red italic underline`)}`)} red`);
+
+// deep nested chained styles
+green(
+ `green ${yellow(
+ `yellow ${magenta(
+ `magenta ${cyan(
+ `cyan ${red.italic.underline(`red italic underline`)} cyan`,
+ )} magenta`,
+ )} yellow`,
+ )} green`,
+);
```
+Output:\
+
## Template literals
@@ -125,8 +152,8 @@ None of the existing libraries (chalk, kleur, colorette, colors.js etc.) support
This does it only one library - `ansis`. Use it and enjoy!
```js
-// import used standard styles, colors and functions
-import { white, red, green, yellow, cyan, bold, visible, hex } from 'ansis/colors';
+// import used base styles, colors and functions
+import { red, green, bold, visible, inverse, hex } from 'ansis/colors';
// define custom colors
const pink = hex('#FF75D1');
@@ -143,22 +170,39 @@ bold.yellowBright`text`;
hex('#FF75D1').bgYellow.bold`text`;
// nested
-white`MakBookPro, ${cyan.bold`RAM:`} 64 GB | ${green.bold`GPU:`} 32 cores`;
-white`MakBookPro, ${cyan.bold`RAM: ${yellow`64`} GB`} | ${green.bold`GPU: ${yellow`32`} cores`}`;
+red`red ${green`green ${pink.italic`pink italic`} green`} red`;
+```
+
+Multiline nested example.
+```js
+let cpu = 33;
+let ram = 44;
+let disk = 55;
-// mutiline nested
+// normal colors
visible`
-CPU: ${red.bold`${33}%`}
-RAM: ${green`${44}%`}
-DISK: ${hex('#FFAB40')`${55}%`}
+CPU: ${red`${cpu}%`}
+RAM: ${green`${ram}%`}
+DISK: ${hex('#FFAB40')`${disk}%`}
+`;
+
+// inversed colors
+inverse`
+CPU: ${red`${cpu}%`}
+RAM: ${green`${ram}%`}
+DISK: ${hex('#FFAB40')`${disk}%`}
`;
```
+Output:\
+
## Base colors and styles
+Colors and styles have standard names used by many popular libraries, such as [chalk][chalk], [colorette][colorette], [kleur][kleur], [cli-color][cli-color], [ansi-colors][ansi-colors].
+
| Foreground colors | Background colors | Styles |
|:----------------------|:------------------|--------------------------------------------|
| `black` | `bgBlack` | `dim` (alias`faint`) |
diff --git a/docs/img/ansis-multiline-nested.png b/docs/img/ansis-multiline-nested.png
new file mode 100644
index 0000000..40abf11
Binary files /dev/null and b/docs/img/ansis-multiline-nested.png differ
diff --git a/docs/img/ansis-nested.png b/docs/img/ansis-nested.png
new file mode 100644
index 0000000..58ed564
Binary files /dev/null and b/docs/img/ansis-nested.png differ
diff --git a/examples/index.js b/examples/index.js
index e956e6c..f600476 100755
--- a/examples/index.js
+++ b/examples/index.js
@@ -113,6 +113,27 @@ log();
// Check replacement in props.parent
//log(ansis.green.bold.underline(`foo ${ansis.red.italic('bar')} foo`));
+/**
+ * Nested syntax
+ */
+log();
+log(inverse`Nested syntax:`);
+log();
+log(red(`red ${italic`red italic ${underline`red italic underline`}`} red`));
+log();
+// simple variant for readme
+log(
+ green(
+ `green ${yellow(
+ `yellow ${magenta(
+ `magenta ${cyan(
+ `cyan ${red.italic.underline(`red italic underline`)} cyan`,
+ )} magenta`,
+ )} yellow`,
+ )} green`,
+ ),
+);
+
/**
* Deep nested chained styles
*/
@@ -159,12 +180,8 @@ const pink = hex('#FF75D1');
log(red`red`);
log(yellow.italic`yellow using ${'some'} variable`);
log(hex('#fce').bgCyan.underline`text underline`);
-log(red`red ${yellow`yellow ${green`green ${pink`pink`} green`} yellow`} red`);
-log(red`${bold`${italic`${underline`underline`} italic`} bold`} red`);
-
-log(white`MakBookPro, ${cyan`RAM:`} 64 GB`);
-log(white`MakBookPro, ${cyan`RAM:`} 64 GB | ${yellow`GPU:`} 32 cores`);
-log(white`MakBookPro, ${cyan`RAM: ${cyanBright`64`} GB`} | ${yellow`GPU: ${yellowBright`32`} cores`}`);
+log(red`red ${green`green ${pink.italic`pink italic`} green`} red`);
+log(red`red ${cyan.bold`cyan bold ${pink.underline`pink bold underline`} cyan bold`} red`);
/**
* Extend base colors
@@ -221,29 +238,35 @@ ansis2.extend({
log(ansis2.pink('pink'));
log(ansis2.bold.orange('orange'));
-
/**
* Misc
*/
// visible
log(ansis.visible`visible`);
-// chalk: non-standard syntax, bad practices, slow because used RegExp
-log(chalk`
-CPU: {red.bold ${33}%}
-RAM: {green ${44}%}
-DISK: {hex('#FFAB40') ${55}%}
-`);
+/**
+ * Multiline nested example from readme
+ */
+let cpu = 33;
+let ram = 44;
+let disk = 55;
// ansis: standard ES2016 syntax, very fast because works native
log(visible`
-CPU: ${red.bold`${33}%`}
-RAM: ${green`${44}%`}
-DISK: ${hex('#FFAB40')`${55}%`}
+CPU: ${red`${cpu}%`}
+RAM: ${green`${ram}%`}
+DISK: ${hex('#FFAB40')`${disk}%`}
`);
log(inverse`
-CPU: ${red.bold`${33}%`}
-RAM: ${green`${44}%`}
-DISK: ${hex('#FFAB40')`${55}%`}
+CPU: ${red`${cpu}%`}
+RAM: ${green`${ram}%`}
+DISK: ${hex('#FFAB40')`${disk}%`}
+`);
+
+// chalk: non-standard syntax, bad practices, slow because used RegExp
+log(chalk`
+CPU: {red.bold ${cpu}%}
+RAM: {green ${ram}%}
+DISK: {hex('#FFAB40') ${disk}%}
`);