Add overline style and remove keyword, hsl, hsv, hwb and ansi style
Signed-off-by: Richie Bendall <richiebendall@gmail.com>
This commit is contained in:
Richie Bendall
parent
d798222a5a
commit
83341478e9
7 changed files with 51 additions and 124 deletions
|
|
@ -1,11 +1,10 @@
|
|||
import chalk from '../index.js';
|
||||
import chalk from '../source/index.js';
|
||||
import convertColor from 'color-convert';
|
||||
import updateLog from 'log-update';
|
||||
import delay from 'yoctodelay';
|
||||
|
||||
const ignoreChars = /[^!-~]/g;
|
||||
|
||||
const delay = milliseconds => new Promise(resolve => {
|
||||
setTimeout(resolve, milliseconds);
|
||||
});
|
||||
|
||||
function rainbow(string, offset) {
|
||||
if (!string || string.length === 0) {
|
||||
return string;
|
||||
|
|
@ -19,7 +18,7 @@ function rainbow(string, offset) {
|
|||
if (ignoreChars.test(character)) {
|
||||
characters.push(character);
|
||||
} else {
|
||||
characters.push(chalk.hsl(hue, 100, 50)(character));
|
||||
characters.push(chalk.hex(convertColor.hsl.hex(hue, 100, 50))(character));
|
||||
hue = (hue + hueStep) % 360;
|
||||
}
|
||||
}
|
||||
|
|
@ -28,9 +27,8 @@ function rainbow(string, offset) {
|
|||
}
|
||||
|
||||
async function animateString(string) {
|
||||
console.log();
|
||||
for (let index = 0; index < 360 * 5; index++) {
|
||||
console.log('\u001B[1F\u001B[G', rainbow(string, index));
|
||||
updateLog(rainbow(string, index));
|
||||
await delay(2); // eslint-disable-line no-await-in-loop
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import styles from 'ansi-styles';
|
||||
import chalk from '../index.js';
|
||||
import chalk from '../source/index.js';
|
||||
|
||||
// Generates screenshot
|
||||
for (const key of Object.keys(styles)) {
|
||||
|
|
|
|||
101
index.d.ts
vendored
101
index.d.ts
vendored
|
|
@ -61,6 +61,7 @@ export type Modifiers =
|
|||
| 'dim'
|
||||
| 'italic'
|
||||
| 'underline'
|
||||
| 'overline'
|
||||
| 'inverse'
|
||||
| 'hidden'
|
||||
| 'strikethrough'
|
||||
|
|
@ -163,6 +164,11 @@ export interface ChalkInstance extends ChalkFunction {
|
|||
*/
|
||||
level: ColorSupportLevel;
|
||||
|
||||
/**
|
||||
Use RGB values to set text color.
|
||||
*/
|
||||
rgb: (red: number, green: number, blue: number) => this;
|
||||
|
||||
/**
|
||||
Use HEX value to set text color.
|
||||
|
||||
|
|
@ -177,52 +183,15 @@ export interface ChalkInstance extends ChalkFunction {
|
|||
*/
|
||||
hex: (color: string) => this;
|
||||
|
||||
/**
|
||||
Use keyword color value to set text color.
|
||||
|
||||
@param color - Keyword value representing the desired color.
|
||||
|
||||
@example
|
||||
```
|
||||
import chalk from 'chalk';
|
||||
|
||||
chalk.keyword('orange');
|
||||
```
|
||||
*/
|
||||
keyword: (color: string) => this;
|
||||
|
||||
/**
|
||||
Use RGB values to set text color.
|
||||
*/
|
||||
rgb: (red: number, green: number, blue: number) => this;
|
||||
|
||||
/**
|
||||
Use HSL values to set text color.
|
||||
*/
|
||||
hsl: (hue: number, saturation: number, lightness: number) => this;
|
||||
|
||||
/**
|
||||
Use HSV values to set text color.
|
||||
*/
|
||||
hsv: (hue: number, saturation: number, value: number) => this;
|
||||
|
||||
/**
|
||||
Use HWB values to set text color.
|
||||
*/
|
||||
hwb: (hue: number, whiteness: number, blackness: number) => this;
|
||||
|
||||
/**
|
||||
Use a [Select/Set Graphic Rendition](https://en.wikipedia.org/wiki/ANSI_escape_code#SGR_parameters) (SGR) [color code number](https://en.wikipedia.org/wiki/ANSI_escape_code#3/4_bit) to set text color.
|
||||
|
||||
30 <= code && code < 38 || 90 <= code && code < 98
|
||||
For example, 31 for red, 91 for redBright.
|
||||
*/
|
||||
ansi: (code: number) => this;
|
||||
|
||||
/**
|
||||
Use a [8-bit unsigned number](https://en.wikipedia.org/wiki/ANSI_escape_code#8-bit) to set text color.
|
||||
*/
|
||||
ansi256: (index: number) => this;
|
||||
|
||||
/**
|
||||
Use RGB values to set background color.
|
||||
*/
|
||||
bgRgb: (red: number, green: number, blue: number) => this;
|
||||
|
||||
/**
|
||||
Use HEX value to set background color.
|
||||
|
|
@ -238,49 +207,6 @@ export interface ChalkInstance extends ChalkFunction {
|
|||
*/
|
||||
bgHex: (color: string) => this;
|
||||
|
||||
/**
|
||||
Use keyword color value to set background color.
|
||||
|
||||
@param color - Keyword value representing the desired color.
|
||||
|
||||
@example
|
||||
```
|
||||
import chalk from 'chalk';
|
||||
|
||||
chalk.bgKeyword('orange');
|
||||
```
|
||||
*/
|
||||
bgKeyword: (color: string) => this;
|
||||
|
||||
/**
|
||||
Use RGB values to set background color.
|
||||
*/
|
||||
bgRgb: (red: number, green: number, blue: number) => this;
|
||||
|
||||
/**
|
||||
Use HSL values to set background color.
|
||||
*/
|
||||
bgHsl: (hue: number, saturation: number, lightness: number) => this;
|
||||
|
||||
/**
|
||||
Use HSV values to set background color.
|
||||
*/
|
||||
bgHsv: (hue: number, saturation: number, value: number) => this;
|
||||
|
||||
/**
|
||||
Use HWB values to set background color.
|
||||
*/
|
||||
bgHwb: (hue: number, whiteness: number, blackness: number) => this;
|
||||
|
||||
/**
|
||||
Use a [Select/Set Graphic Rendition](https://en.wikipedia.org/wiki/ANSI_escape_code#SGR_parameters) (SGR) [color code number](https://en.wikipedia.org/wiki/ANSI_escape_code#3/4_bit) to set background color.
|
||||
|
||||
30 <= code && code < 38 || 90 <= code && code < 98
|
||||
For example, 31 for red, 91 for redBright.
|
||||
Use the foreground code, not the background code (for example, not 41, nor 101).
|
||||
*/
|
||||
bgAnsi: (code: number) => this;
|
||||
|
||||
/**
|
||||
Use a [8-bit unsigned number](https://en.wikipedia.org/wiki/ANSI_escape_code#8-bit) to set background color.
|
||||
*/
|
||||
|
|
@ -311,6 +237,11 @@ export interface ChalkInstance extends ChalkFunction {
|
|||
*/
|
||||
readonly underline: this;
|
||||
|
||||
/**
|
||||
Modifier: Make text overline. (Not widely supported)
|
||||
*/
|
||||
readonly overline: this;
|
||||
|
||||
/**
|
||||
Modifier: Inverse background and foreground colors.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -41,21 +41,11 @@ expectType<string>(chalk`Hello {bold.red ${name}}`);
|
|||
expectType<string>(chalk`Works with numbers {bold.red ${1}}`);
|
||||
|
||||
// -- Color methods --
|
||||
expectAssignable<colorReturn>(chalk.hex('#DEADED'));
|
||||
expectAssignable<colorReturn>(chalk.keyword('orange'));
|
||||
expectAssignable<colorReturn>(chalk.rgb(0, 0, 0));
|
||||
expectAssignable<colorReturn>(chalk.hsl(0, 0, 0));
|
||||
expectAssignable<colorReturn>(chalk.hsv(0, 0, 0));
|
||||
expectAssignable<colorReturn>(chalk.hwb(0, 0, 0));
|
||||
expectAssignable<colorReturn>(chalk.ansi(30));
|
||||
expectAssignable<colorReturn>(chalk.hex('#DEADED'));
|
||||
expectAssignable<colorReturn>(chalk.ansi256(0));
|
||||
expectAssignable<colorReturn>(chalk.bgHex('#DEADED'));
|
||||
expectAssignable<colorReturn>(chalk.bgKeyword('orange'));
|
||||
expectAssignable<colorReturn>(chalk.bgRgb(0, 0, 0));
|
||||
expectAssignable<colorReturn>(chalk.bgHsl(0, 0, 0));
|
||||
expectAssignable<colorReturn>(chalk.bgHsv(0, 0, 0));
|
||||
expectAssignable<colorReturn>(chalk.bgHwb(0, 0, 0));
|
||||
expectAssignable<colorReturn>(chalk.bgAnsi(30));
|
||||
expectAssignable<colorReturn>(chalk.bgHex('#DEADED'));
|
||||
expectAssignable<colorReturn>(chalk.bgAnsi256(0));
|
||||
|
||||
// -- Modifiers --
|
||||
|
|
@ -64,6 +54,7 @@ expectType<string>(chalk.bold('foo'));
|
|||
expectType<string>(chalk.dim('foo'));
|
||||
expectType<string>(chalk.italic('foo'));
|
||||
expectType<string>(chalk.underline('foo'));
|
||||
expectType<string>(chalk.overline('foo'));
|
||||
expectType<string>(chalk.inverse('foo'));
|
||||
expectType<string>(chalk.hidden('foo'));
|
||||
expectType<string>(chalk.strikethrough('foo'));
|
||||
|
|
|
|||
|
|
@ -42,17 +42,20 @@
|
|||
"text"
|
||||
],
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"ansi-styles": "^6.0.0",
|
||||
"supports-color": "^9.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"ava": "^3.15.0",
|
||||
"color-convert": "^2.0.1",
|
||||
"coveralls": "^3.1.0",
|
||||
"execa": "^5.0.0",
|
||||
"log-update": "^4.0.0",
|
||||
"matcha": "^0.7.0",
|
||||
"nyc": "^15.1.0",
|
||||
"tsd": "^0.14.0",
|
||||
"xo": "^0.38.2"
|
||||
"xo": "^0.38.2",
|
||||
"yoctodelay": "^1.2.0"
|
||||
},
|
||||
"xo": {
|
||||
"rules": {
|
||||
|
|
|
|||
10
readme.md
10
readme.md
|
|
@ -125,7 +125,6 @@ DISK: {rgb(255,131,0) ${disk.used / disk.total * 100}%}
|
|||
`);
|
||||
|
||||
// Use RGB colors in terminal emulators that support it.
|
||||
log(chalk.keyword('orange')('Yay for orange colored text!'));
|
||||
log(chalk.rgb(123, 45, 67).underline('Underlined reddish color'));
|
||||
log(chalk.hex('#DEADED').bold('Bold gray!'));
|
||||
```
|
||||
|
|
@ -136,7 +135,7 @@ Easily define your own themes:
|
|||
import chalk from 'chalk';
|
||||
|
||||
const error = chalk.bold.red;
|
||||
const warning = chalk.keyword('orange');
|
||||
const warning = chalk.hex('#FFA500'); // Orange color
|
||||
|
||||
console.log(error('Error!'));
|
||||
console.log(warning('Warning!'));
|
||||
|
|
@ -288,24 +287,17 @@ Colors are downsampled from 16 million RGB values to an ANSI color format that i
|
|||
Examples:
|
||||
|
||||
- `chalk.hex('#DEADED').underline('Hello, world!')`
|
||||
- `chalk.keyword('orange')('Some orange text')`
|
||||
- `chalk.rgb(15, 100, 204).inverse('Hello!')`
|
||||
|
||||
Background versions of these models are prefixed with `bg` and the first level of the module capitalized (e.g. `keyword` for foreground colors and `bgKeyword` for background colors).
|
||||
|
||||
- `chalk.bgHex('#DEADED').underline('Hello, world!')`
|
||||
- `chalk.bgKeyword('orange')('Some orange text')`
|
||||
- `chalk.bgRgb(15, 100, 204).inverse('Hello!')`
|
||||
|
||||
The following color models can be used:
|
||||
|
||||
- [`rgb`](https://en.wikipedia.org/wiki/RGB_color_model) - Example: `chalk.rgb(255, 136, 0).bold('Orange!')`
|
||||
- [`hex`](https://en.wikipedia.org/wiki/Web_colors#Hex_triplet) - Example: `chalk.hex('#FF8800').bold('Orange!')`
|
||||
- [`keyword`](https://www.w3.org/wiki/CSS/Properties/color/keywords) (CSS keywords) - Example: `chalk.keyword('orange').bold('Orange!')`
|
||||
- [`hsl`](https://en.wikipedia.org/wiki/HSL_and_HSV) - Example: `chalk.hsl(32, 100, 50).bold('Orange!')`
|
||||
- [`hsv`](https://en.wikipedia.org/wiki/HSL_and_HSV) - Example: `chalk.hsv(32, 100, 100).bold('Orange!')`
|
||||
- [`hwb`](https://en.wikipedia.org/wiki/HWB_color_model) - Example: `chalk.hwb(32, 0, 50).bold('Orange!')`
|
||||
- [`ansi`](https://en.wikipedia.org/wiki/ANSI_escape_code#3/4_bit) - Example: `chalk.ansi(31).bgAnsi(93)('red on yellowBright')`
|
||||
- [`ansi256`](https://en.wikipedia.org/wiki/ANSI_escape_code#8-bit) - Example: `chalk.bgAnsi256(194)('Honeydew, more or less')`
|
||||
|
||||
## Browser support
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@ const {stdout: stdoutColor, stderr: stderrColor} = supportsColor;
|
|||
const {isArray} = Array;
|
||||
|
||||
// `supportsColor.level` → `ansiStyles.color[name]` mapping
|
||||
const levelMapping = [
|
||||
'ansi',
|
||||
'ansi',
|
||||
const levelMapping = new Set([
|
||||
'ansi256',
|
||||
'ansi256',
|
||||
'ansi256',
|
||||
'ansi16m'
|
||||
];
|
||||
]);
|
||||
|
||||
const styles = Object.create(null);
|
||||
|
||||
|
|
@ -72,14 +72,26 @@ styles.visible = {
|
|||
}
|
||||
};
|
||||
|
||||
const usedModels = ['rgb', 'hex', 'keyword', 'hsl', 'hsv', 'hwb', 'ansi', 'ansi256'];
|
||||
const getModelAnsi = (model, level, type, ...arguments_) => {
|
||||
if (model === 'rgb') {
|
||||
return level === 'ansi16m' ? ansiStyles[type].ansi16m(...arguments_) : ansiStyles[type].ansi256(ansiStyles.rgbToAnsi256(...arguments_));
|
||||
}
|
||||
|
||||
if (model === 'hex') {
|
||||
return getModelAnsi('rgb', level, type, ...ansiStyles.hexToRgb(...arguments_));
|
||||
}
|
||||
|
||||
return ansiStyles[type](...arguments_);
|
||||
};
|
||||
|
||||
const usedModels = ['rgb', 'hex', 'ansi256'];
|
||||
|
||||
for (const model of usedModels) {
|
||||
styles[model] = {
|
||||
get() {
|
||||
const {level} = this;
|
||||
return function (...arguments_) {
|
||||
const styler = createStyler(ansiStyles.color[levelMapping[level]][model](...arguments_), ansiStyles.color.close, this._styler);
|
||||
const styler = createStyler(getModelAnsi(model, levelMapping[level], 'color', ...arguments_), ansiStyles.color.close, this._styler);
|
||||
return createBuilder(this, styler, this._isEmpty);
|
||||
};
|
||||
}
|
||||
|
|
@ -90,7 +102,7 @@ for (const model of usedModels) {
|
|||
get() {
|
||||
const {level} = this;
|
||||
return function (...arguments_) {
|
||||
const styler = createStyler(ansiStyles.bgColor[levelMapping[level]][model](...arguments_), ansiStyles.bgColor.close, this._styler);
|
||||
const styler = createStyler(getModelAnsi(model, levelMapping[level], 'bgColor', ...arguments_), ansiStyles.bgColor.close, this._styler);
|
||||
return createBuilder(this, styler, this._isEmpty);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue