Skip to content

Commit f14937b

Browse files
authored
move to ESM (#264)
1 parent daec0b2 commit f14937b

File tree

7 files changed

+395
-45
lines changed

7 files changed

+395
-45
lines changed

.github/workflows/main.yml

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,12 @@ jobs:
1010
fail-fast: false
1111
matrix:
1212
node-version:
13-
- 17
14-
- 16
15-
- 14
16-
- 12
13+
- 22
14+
- 20
15+
- 18
1716
steps:
18-
- uses: actions/checkout@v2
19-
- uses: actions/setup-node@v2
17+
- uses: actions/checkout@v4
18+
- uses: actions/setup-node@v4
2019
with:
2120
node-version: ${{ matrix.node-version }}
2221
- run: npm install

README.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ console.log(color.ansi256().object()); // { ansi256: 183, alpha: 0.5 }
1212
```
1313

1414
## Install
15-
```console
16-
$ npm install color
15+
```shell
16+
npm install color
1717
```
1818

1919
## Usage
2020
```js
21-
const Color = require('color');
21+
import Color from 'color';
2222
```
2323

2424
### Constructors
@@ -95,17 +95,17 @@ String constructors are handled by [color-string](https://www.npmjs.com/package/
9595

9696
### Getters
9797
```js
98-
color.hsl();
98+
color.hsl()
9999
```
100100
Convert a color to a different space (`hsl()`, `cmyk()`, etc.).
101101

102102
```js
103-
color.object(); // {r: 255, g: 255, b: 255}
103+
color.object() // {r: 255, g: 255, b: 255}
104104
```
105105
Get a hash of the color value. Reflects the color's current model (see above).
106106

107107
```js
108-
color.rgb().array() // [255, 255, 255]
108+
color.rgb().array() // [255, 255, 255]
109109
```
110110
Get an array of the values with `array()`. Reflects the color's current model (see above).
111111

@@ -120,31 +120,31 @@ color.hex() // #ffffff
120120
Get the hex value. (**NOTE:** `.hex()` does not return alpha values; use `.hexa()` for an RGBA representation)
121121

122122
```js
123-
color.red() // 255
123+
color.red() // 255
124124
```
125125
Get the value for an individual channel.
126126

127127
### CSS Strings
128128
```js
129-
color.hsl().string() // 'hsl(320, 50%, 100%)'
129+
color.hsl().string() // 'hsl(320, 50%, 100%)'
130130
```
131131

132132
Calling `.string()` with a number rounds the numbers to that decimal place. It defaults to 1.
133133

134134
### Luminosity
135135
```js
136-
color.luminosity(); // 0.412
136+
color.luminosity(); // 0.412
137137
```
138138
The [WCAG luminosity](http://www.w3.org/TR/WCAG20/#relativeluminancedef) of the color. 0 is black, 1 is white.
139139

140140
```js
141-
color.contrast(Color("blue")) // 12
141+
color.contrast(Color("blue")) // 12
142142
```
143143
The [WCAG contrast ratio](http://www.w3.org/TR/WCAG20/#contrast-ratiodef) to another color, from 1 (same color) to 21 (contrast b/w white and black).
144144

145145
```js
146-
color.isLight(); // true
147-
color.isDark(); // false
146+
color.isLight() // true
147+
color.isDark() // false
148148
```
149149
Get whether the color is "light" or "dark", useful for deciding text color.
150150

@@ -166,7 +166,7 @@ color.grayscale() // #5CBF54 -> #969696
166166
color.whiten(0.5) // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)
167167
color.blacken(0.5) // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)
168168

169-
color.fade(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
169+
color.fade(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
170170
color.opaquer(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)
171171

172172
color.rotate(180) // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)

index.d.ts

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import type convert from 'color-convert';
2+
3+
export type ColorLike = ColorInstance | string | ArrayLike<number> | number | Record<string, any>;
4+
export type ColorJson = {model: string; color: number[]; valpha: number};
5+
export type ColorObject = {alpha?: number | undefined} & Record<string, number>;
6+
7+
// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
8+
export interface ColorInstance {
9+
toString(): string;
10+
// eslint-disable-next-line @typescript-eslint/naming-convention
11+
toJSON(): ColorJson;
12+
string(places?: number): string;
13+
percentString(places?: number): string;
14+
array(): number[];
15+
object(): ColorObject;
16+
unitArray(): number[];
17+
unitObject(): {r: number; g: number; b: number; alpha?: number | undefined};
18+
round(places?: number): ColorInstance;
19+
alpha(): number;
20+
alpha(value: number): ColorInstance;
21+
red(): number;
22+
red(value: number): ColorInstance;
23+
green(): number;
24+
green(value: number): ColorInstance;
25+
blue(): number;
26+
blue(value: number): ColorInstance;
27+
hue(): number;
28+
hue(value: number): ColorInstance;
29+
saturationl(): number;
30+
saturationl(value: number): ColorInstance;
31+
lightness(): number;
32+
lightness(value: number): ColorInstance;
33+
saturationv(): number;
34+
saturationv(value: number): ColorInstance;
35+
value(): number;
36+
value(value: number): ColorInstance;
37+
chroma(): number;
38+
chroma(value: number): ColorInstance;
39+
gray(): number;
40+
gray(value: number): ColorInstance;
41+
white(): number;
42+
white(value: number): ColorInstance;
43+
wblack(): number;
44+
wblack(value: number): ColorInstance;
45+
cyan(): number;
46+
cyan(value: number): ColorInstance;
47+
magenta(): number;
48+
magenta(value: number): ColorInstance;
49+
yellow(): number;
50+
yellow(value: number): ColorInstance;
51+
black(): number;
52+
black(value: number): ColorInstance;
53+
x(): number;
54+
x(value: number): ColorInstance;
55+
y(): number;
56+
y(value: number): ColorInstance;
57+
z(): number;
58+
z(value: number): ColorInstance;
59+
l(): number;
60+
l(value: number): ColorInstance;
61+
a(): number;
62+
a(value: number): ColorInstance;
63+
b(): number;
64+
b(value: number): ColorInstance;
65+
keyword(): string;
66+
keyword<V extends string>(value: V): ColorInstance;
67+
hex(): string;
68+
hex<V extends string>(value: V): ColorInstance;
69+
hexa(): string;
70+
hexa<V extends string>(value: V): ColorInstance;
71+
rgbNumber(): number;
72+
luminosity(): number;
73+
contrast(color2: ColorInstance): number;
74+
level(color2: ColorInstance): 'AAA' | 'AA' | '';
75+
isDark(): boolean;
76+
isLight(): boolean;
77+
negate(): ColorInstance;
78+
lighten(ratio: number): ColorInstance;
79+
darken(ratio: number): ColorInstance;
80+
saturate(ratio: number): ColorInstance;
81+
desaturate(ratio: number): ColorInstance;
82+
whiten(ratio: number): ColorInstance;
83+
blacken(ratio: number): ColorInstance;
84+
grayscale(): ColorInstance;
85+
fade(ratio: number): ColorInstance;
86+
opaquer(ratio: number): ColorInstance;
87+
rotate(degrees: number): ColorInstance;
88+
mix(mixinColor: ColorInstance, weight?: number): ColorInstance;
89+
rgb(...arguments_: number[]): ColorInstance;
90+
hsl(...arguments_: number[]): ColorInstance;
91+
hsv(...arguments_: number[]): ColorInstance;
92+
hwb(...arguments_: number[]): ColorInstance;
93+
cmyk(...arguments_: number[]): ColorInstance;
94+
xyz(...arguments_: number[]): ColorInstance;
95+
lab(...arguments_: number[]): ColorInstance;
96+
lch(...arguments_: number[]): ColorInstance;
97+
ansi16(...arguments_: number[]): ColorInstance;
98+
ansi256(...arguments_: number[]): ColorInstance;
99+
hcg(...arguments_: number[]): ColorInstance;
100+
apple(...arguments_: number[]): ColorInstance;
101+
}
102+
103+
export type ColorConstructor = {
104+
(object?: ColorLike, model?: keyof (typeof convert)): ColorInstance;
105+
new(object?: ColorLike, model?: keyof (typeof convert)): ColorInstance;
106+
rgb(...value: number[]): ColorInstance;
107+
rgb(color: ColorLike): ColorInstance;
108+
hsl(...value: number[]): ColorInstance;
109+
hsl(color: ColorLike): ColorInstance;
110+
hsv(...value: number[]): ColorInstance;
111+
hsv(color: ColorLike): ColorInstance;
112+
hwb(...value: number[]): ColorInstance;
113+
hwb(color: ColorLike): ColorInstance;
114+
cmyk(...value: number[]): ColorInstance;
115+
cmyk(color: ColorLike): ColorInstance;
116+
xyz(...value: number[]): ColorInstance;
117+
xyz(color: ColorLike): ColorInstance;
118+
lab(...value: number[]): ColorInstance;
119+
lab(color: ColorLike): ColorInstance;
120+
lch(...value: number[]): ColorInstance;
121+
lch(color: ColorLike): ColorInstance;
122+
ansi16(...value: number[]): ColorInstance;
123+
ansi16(color: ColorLike): ColorInstance;
124+
ansi256(...value: number[]): ColorInstance;
125+
ansi256(color: ColorLike): ColorInstance;
126+
hcg(...value: number[]): ColorInstance;
127+
hcg(color: ColorLike): ColorInstance;
128+
apple(...value: number[]): ColorInstance;
129+
apple(color: ColorLike): ColorInstance;
130+
};
131+
132+
// eslint-disable-next-line @typescript-eslint/naming-convention
133+
declare const Color: ColorConstructor;
134+
135+
export default Color;

index.js

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
const colorString = require('color-string');
2-
const convert = require('color-convert');
1+
import colorString from 'color-string';
2+
import convert from 'color-convert';
33

44
const skippedModels = [
55
// To be honest, I don't really feel like keyword belongs in color convert, but eh.
@@ -123,14 +123,14 @@ Color.prototype = {
123123
string(places) {
124124
let self = this.model in colorString.to ? this : this.rgb();
125125
self = self.round(typeof places === 'number' ? places : 1);
126-
const args = self.valpha === 1 ? self.color : [...self.color, this.valpha];
127-
return colorString.to[self.model](args);
126+
const arguments_ = self.valpha === 1 ? self.color : [...self.color, this.valpha];
127+
return colorString.to[self.model](...arguments_);
128128
},
129129

130130
percentString(places) {
131131
const self = this.rgb().round(typeof places === 'number' ? places : 1);
132-
const args = self.valpha === 1 ? self.color : [...self.color, this.valpha];
133-
return colorString.to.rgb.percent(args);
132+
const arguments_ = self.valpha === 1 ? self.color : [...self.color, this.valpha];
133+
return colorString.to.rgb.percent(...arguments_);
134134
},
135135

136136
array() {
@@ -237,7 +237,7 @@ Color.prototype = {
237237
return new Color(value);
238238
}
239239

240-
return colorString.to.hex(this.rgb().round().color);
240+
return colorString.to.hex(...this.rgb().round().color);
241241
},
242242

243243
hexa(value) {
@@ -252,7 +252,7 @@ Color.prototype = {
252252
alphaHex = '0' + alphaHex;
253253
}
254254

255-
return colorString.to.hex(rgbArray) + alphaHex;
255+
return colorString.to.hex(...rgbArray) + alphaHex;
256256
},
257257

258258
rgbNumber() {
@@ -409,23 +409,23 @@ for (const model of Object.keys(convert)) {
409409
const {channels} = convert[model];
410410

411411
// Conversion methods
412-
Color.prototype[model] = function (...args) {
412+
Color.prototype[model] = function (...arguments_) {
413413
if (this.model === model) {
414414
return new Color(this);
415415
}
416416

417-
if (args.length > 0) {
418-
return new Color(args, model);
417+
if (arguments_.length > 0) {
418+
return new Color(arguments_, model);
419419
}
420420

421421
return new Color([...assertArray(convert[this.model][model].raw(this.color)), this.valpha], model);
422422
};
423423

424424
// 'static' construction methods
425-
Color[model] = function (...args) {
426-
let color = args[0];
425+
Color[model] = function (...arguments_) {
426+
let color = arguments_[0];
427427
if (typeof color === 'number') {
428-
color = zeroArray(args, channels);
428+
color = zeroArray(arguments_, channels);
429429
}
430430

431431
return new Color(color, model);
@@ -446,7 +446,7 @@ function getset(model, channel, modifier) {
446446
model = Array.isArray(model) ? model : [model];
447447

448448
for (const m of model) {
449-
(limiters[m] || (limiters[m] = []))[channel] = modifier;
449+
(limiters[m] ||= [])[channel] = modifier;
450450
}
451451

452452
model = model[0];
@@ -493,4 +493,4 @@ function zeroArray(array, length) {
493493
return array;
494494
}
495495

496-
module.exports = Color;
496+
export default Color;

0 commit comments

Comments
 (0)