@d3plus/color 3.0.16 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 D3plus
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,5 +1,8 @@
1
1
  # @d3plus/color
2
-
2
+
3
+ [![NPM version](https://img.shields.io/npm/v/@d3plus/color.svg)](https://www.npmjs.com/package/@d3plus/color)
4
+ [![codecov](https://codecov.io/gh/d3plus/d3plus/graph/badge.svg?flag=color)](https://codecov.io/gh/d3plus/d3plus/flags)
5
+
3
6
  Color functions that extent the ability of d3-color.
4
7
 
5
8
  ## Installing
@@ -7,10 +10,10 @@ Color functions that extent the ability of d3-color.
7
10
  If using npm, `npm install @d3plus/color`. Otherwise, you can download the [latest release from GitHub](https://github.com/d3plus/d3plus/releases/latest) or load from a [CDN](https://cdn.jsdelivr.net/npm/@d3plus/color).
8
11
 
9
12
  ```js
10
- import modules from "@d3plus/color";
13
+ import {*} from "@d3plus/color";
11
14
  ```
12
15
 
13
- In vanilla JavaScript, a `d3plus` global is exported from the pre-bundled version:
16
+ In a vanilla environment, a `d3plus` global is exported from the pre-bundled version:
14
17
 
15
18
  ```html
16
19
  <script src="https://cdn.jsdelivr.net/npm/@d3plus/color"></script>
@@ -21,90 +24,215 @@ In vanilla JavaScript, a `d3plus` global is exported from the pre-bundled versio
21
24
 
22
25
  ## Examples
23
26
 
24
- Live examples can be found on [d3plus.org](https://d3plus.org/), which includes a collection of example visualizations using @d3plus/react.
27
+ Live examples can be found on [d3plus.org](https://d3plus.org/), which includes a collection of example visualizations using [@d3plus/react](https://github.com/d3plus/d3plus/tree/main/packages/react).
25
28
 
26
29
  ## API Reference
27
30
 
28
- #####
29
- * [colorAdd](#colorAdd) - Adds two colors together.
30
- * [colorAssign](#colorAssign) - Assigns a color to a value using a predefined set of defaults.
31
- * [colorContrast](#colorContrast) - A set of default color values used when assigning colors based on data.
32
- * [colorLegible](#colorLegible) - Darkens a color so that it will appear legible on a white background.
33
- * [colorLighter](#colorLighter) - Similar to d3.color.brighter, except that this also reduces saturation so that colors don't appear neon.
34
- * [colorSubtract](#colorSubtract) - Subtracts one color from another.
31
+ | Functions | Description |
32
+ | --- | --- |
33
+ | [`colorAdd`](#coloradd) | Adds two colors together. |
34
+ | [`colorAssign`](#colorassign) | Assigns a color to a value using a predefined set of defaults. |
35
+ | [`colorContrast`](#colorcontrast) | A set of default color values used when assigning colors based on data. |
36
+ | [`colorLegible`](#colorlegible) | Darkens a color so that it will appear legible on a white background. |
37
+ | [`colorLighter`](#colorlighter) | Similar to d3.color.brighter, except that this also reduces saturation so that colors don't appear neon. |
38
+ | [`colorSubtract`](#colorsubtract) | Subtracts one color from another. |
39
+
40
+ | Variables | Description |
41
+ | --- | --- |
42
+ | [`colorDefaults`](#colordefaults) | A set of default color values used when assigning colors based on data. |
43
+
44
+ | Interfaces | Description |
45
+ | --- | --- |
46
+ | [`ColorDefaults`](#colordefaults) | |
47
+
48
+ ## Functions
49
+
50
+ <a id="coloradd"></a>
35
51
 
36
- #####
37
- * [colorDefaults](#colorDefaults) - A set of default color values used when assigning colors based on data.
52
+ ### colorAdd()
38
53
 
39
- ---
54
+ > **colorAdd**(`c1`: `string`, `c2`: `string`, `o1?`: `number`, `o2?`: `number`): `string`
40
55
 
41
- <a name="colorAdd"></a>
42
- #### d3plus.**colorAdd**(c1, c2, [o1], [o2]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/color/src/add.js#L3)
56
+ Defined in: [add.ts:10](https://github.com/d3plus/d3plus/blob/fe174c3153bf379a226e4a41b6a8492a86c3a1b7/packages/color/src/add.ts#L10)
43
57
 
44
58
  Adds two colors together.
45
59
 
60
+ #### Parameters
61
+
62
+ | Parameter | Type | Default | Description |
63
+ | ------ | ------ | ------ | ------ |
64
+ | `c1` | `string` | *required* | The first color, a valid CSS color string. |
65
+ | `c2` | `string` | *required* | The second color, also a valid CSS color string. |
66
+ | `o1` | `number` | `1` | Value from 0 to 1 of the first color's opacity. |
67
+ | `o2` | `number` | `1` | Value from 0 to 1 of the first color's opacity. |
68
+
69
+ #### Returns
70
+
71
+ `string`
72
+
73
+ ***
74
+
75
+ <a id="colorassign"></a>
46
76
 
47
- This is a global function
77
+ ### colorAssign()
48
78
 
49
- ---
79
+ > **colorAssign**(`c`: `string` \| `boolean` \| `null` \| `undefined`, `u?`: `Partial`\<[`ColorDefaults`](#colordefaults)\>): `string`
50
80
 
51
- <a name="colorAssign"></a>
52
- #### d3plus.**colorAssign**(c, [u]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/color/src/assign.js#L4)
81
+ Defined in: [assign.ts:9](https://github.com/d3plus/d3plus/blob/fe174c3153bf379a226e4a41b6a8492a86c3a1b7/packages/color/src/assign.ts#L9)
53
82
 
54
83
  Assigns a color to a value using a predefined set of defaults.
55
84
 
85
+ #### Parameters
56
86
 
57
- This is a global function
87
+ | Parameter | Type | Description |
88
+ | ------ | ------ | ------ |
89
+ | `c` | `string` \| `boolean` \| `null` \| *required* | A valid CSS color string. |
90
+ | `u` | `Partial`\<[`ColorDefaults`](#colordefaults)\> | An object containing overrides of the default colors. |
58
91
 
59
- ---
92
+ #### Returns
60
93
 
61
- <a name="colorContrast"></a>
62
- #### d3plus.**colorContrast**(c, [u]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/color/src/contrast.js#L4)
94
+ `string`
95
+
96
+ ***
97
+
98
+ <a id="colorcontrast"></a>
99
+
100
+ ### colorContrast()
101
+
102
+ > **colorContrast**(`c`: `string`, `u?`: `Partial`\<[`ColorDefaults`](#colordefaults)\>): `string`
103
+
104
+ Defined in: [contrast.ts:9](https://github.com/d3plus/d3plus/blob/fe174c3153bf379a226e4a41b6a8492a86c3a1b7/packages/color/src/contrast.ts#L9)
63
105
 
64
106
  A set of default color values used when assigning colors based on data.
65
107
 
108
+ #### Parameters
109
+
110
+ | Parameter | Type | Description |
111
+ | ------ | ------ | ------ |
112
+ | `c` | `string` | A valid CSS color string. |
113
+ | `u` | `Partial`\<[`ColorDefaults`](#colordefaults)\> | An object containing overrides of the default colors. |
114
+
115
+ #### Returns
116
+
117
+ `string`
118
+
119
+ ***
120
+
121
+ <a id="colorlegible"></a>
66
122
 
67
- This is a global function
123
+ ### colorLegible()
68
124
 
69
- ---
125
+ > **colorLegible**(`c`: `string`): `string`
70
126
 
71
- <a name="colorLegible"></a>
72
- #### d3plus.**colorLegible**(c) [<>](https://github.com/d3plus/d3plus/blob/main/packages/color/src/legible.js#L3)
127
+ Defined in: [legible.ts:7](https://github.com/d3plus/d3plus/blob/fe174c3153bf379a226e4a41b6a8492a86c3a1b7/packages/color/src/legible.ts#L7)
73
128
 
74
129
  Darkens a color so that it will appear legible on a white background.
75
130
 
131
+ #### Parameters
76
132
 
77
- This is a global function
133
+ | Parameter | Type | Description |
134
+ | ------ | ------ | ------ |
135
+ | `c` | `string` | A valid CSS color string. |
78
136
 
79
- ---
137
+ #### Returns
80
138
 
81
- <a name="colorLighter"></a>
82
- #### d3plus.**colorLighter**(c, [i]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/color/src/lighter.js#L3)
139
+ `string`
140
+
141
+ ***
142
+
143
+ <a id="colorlighter"></a>
144
+
145
+ ### colorLighter()
146
+
147
+ > **colorLighter**(`c`: `string`, `i?`: `number`): `string`
148
+
149
+ Defined in: [lighter.ts:8](https://github.com/d3plus/d3plus/blob/fe174c3153bf379a226e4a41b6a8492a86c3a1b7/packages/color/src/lighter.ts#L8)
83
150
 
84
151
  Similar to d3.color.brighter, except that this also reduces saturation so that colors don't appear neon.
85
152
 
153
+ #### Parameters
154
+
155
+ | Parameter | Type | Default | Description |
156
+ | ------ | ------ | ------ | ------ |
157
+ | `c` | `string` | *required* | A valid CSS color string. |
158
+ | `i` | `number` | `0.5` | Strength of the lightening effect, from 0 to 1. |
86
159
 
87
- This is a global function
160
+ #### Returns
88
161
 
89
- ---
162
+ `string`
90
163
 
91
- <a name="colorSubtract"></a>
92
- #### d3plus.**colorSubtract**(c1, c2, [o1], [o2]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/color/src/subtract.js#L3)
164
+ ***
165
+
166
+ <a id="colorsubtract"></a>
167
+
168
+ ### colorSubtract()
169
+
170
+ > **colorSubtract**(`c1`: `string`, `c2`: `string`, `o1?`: `number`, `o2?`: `number`): `string`
171
+
172
+ Defined in: [subtract.ts:10](https://github.com/d3plus/d3plus/blob/fe174c3153bf379a226e4a41b6a8492a86c3a1b7/packages/color/src/subtract.ts#L10)
93
173
 
94
174
  Subtracts one color from another.
95
175
 
176
+ #### Parameters
177
+
178
+ | Parameter | Type | Default | Description |
179
+ | ------ | ------ | ------ | ------ |
180
+ | `c1` | `string` | *required* | The base color, a valid CSS color string. |
181
+ | `c2` | `string` | *required* | The color to remove from the base color, also a valid CSS color string. |
182
+ | `o1` | `number` | `1` | Value from 0 to 1 of the first color's opacity. |
183
+ | `o2` | `number` | `1` | Value from 0 to 1 of the first color's opacity. |
96
184
 
97
- This is a global function
185
+ #### Returns
98
186
 
99
- ---
187
+ `string`
100
188
 
101
- <a name="colorDefaults"></a>
102
- #### **colorDefaults** [<>](https://github.com/d3plus/d3plus/blob/main/packages/color/src/defaults.js#L5)
189
+ ## Variables
190
+
191
+ <a id="colordefaults-1"></a>
192
+
193
+ ### colorDefaults
194
+
195
+ > `const` **colorDefaults**: [`ColorDefaults`](#colordefaults)
196
+
197
+ Defined in: [defaults.ts:37](https://github.com/d3plus/d3plus/blob/fe174c3153bf379a226e4a41b6a8492a86c3a1b7/packages/color/src/defaults.ts#L37)
103
198
 
104
199
  A set of default color values used when assigning colors based on data.
105
200
 
201
+ #### Default Value
202
+
203
+ ```
204
+ {
205
+ dark: "#495057",
206
+ light: "#f8f9fa",
207
+ missing: "#ced4da",
208
+ off: "#c92a2a",
209
+ on: "#2b8a3e",
210
+ scale: d3.scaleOrdinal().range([
211
+ "#364fc7", "#fab005", "#c92a2a",
212
+ "#2b8a3e", "#fd7e14", "#862e9c",
213
+ "#15aabf", "#e64980", "#82c91e",
214
+ "#74c0fc", "#faa2c1", "#c0eb75",
215
+ "#b197fc", "#c5f6fa", "#ffe8cc",
216
+ "#d3f9d8", "#f3d9fa", "#ffe3e3"
217
+ ])
218
+ }
219
+ ```
220
+
221
+ ## Interfaces
222
+
223
+ <a id="colordefaults"></a>
224
+
225
+ ### ColorDefaults
106
226
 
107
- This is a global namespace
227
+ Defined in: [defaults.ts:6](https://github.com/d3plus/d3plus/blob/fe174c3153bf379a226e4a41b6a8492a86c3a1b7/packages/color/src/defaults.ts#L6)
108
228
 
109
- ---
229
+ #### Properties
110
230
 
231
+ | Property | Type | Defined in |
232
+ | ------ | ------ | ------ |
233
+ | <a id="property-dark"></a> `dark` | `string` | [defaults.ts:7](https://github.com/d3plus/d3plus/blob/fe174c3153bf379a226e4a41b6a8492a86c3a1b7/packages/color/src/defaults.ts#L7) |
234
+ | <a id="property-light"></a> `light` | `string` | [defaults.ts:8](https://github.com/d3plus/d3plus/blob/fe174c3153bf379a226e4a41b6a8492a86c3a1b7/packages/color/src/defaults.ts#L8) |
235
+ | <a id="property-missing"></a> `missing` | `string` | [defaults.ts:9](https://github.com/d3plus/d3plus/blob/fe174c3153bf379a226e4a41b6a8492a86c3a1b7/packages/color/src/defaults.ts#L9) |
236
+ | <a id="property-off"></a> `off` | `string` | [defaults.ts:10](https://github.com/d3plus/d3plus/blob/fe174c3153bf379a226e4a41b6a8492a86c3a1b7/packages/color/src/defaults.ts#L10) |
237
+ | <a id="property-on"></a> `on` | `string` | [defaults.ts:11](https://github.com/d3plus/d3plus/blob/fe174c3153bf379a226e4a41b6a8492a86c3a1b7/packages/color/src/defaults.ts#L11) |
238
+ | <a id="property-scale"></a> `scale` | `ScaleOrdinal`\<`string`, `string`\> | [defaults.ts:12](https://github.com/d3plus/d3plus/blob/fe174c3153bf379a226e4a41b6a8492a86c3a1b7/packages/color/src/defaults.ts#L12) |
package/es/src/add.js CHANGED
@@ -1,22 +1,18 @@
1
1
  import { hsl } from "d3-color";
2
2
  /**
3
- @function colorAdd
4
- @desc Adds two colors together.
5
- @param {String} c1 The first color, a valid CSS color string.
6
- @param {String} c2 The second color, also a valid CSS color string.
7
- @param {String} [o1 = 1] Value from 0 to 1 of the first color's opacity.
8
- @param {String} [o2 = 1] Value from 0 to 1 of the first color's opacity.
9
- @returns {String}
3
+ Adds two colors together.
4
+ @param c1 The first color, a valid CSS color string.
5
+ @param c2 The second color, also a valid CSS color string.
6
+ @param o1 Value from 0 to 1 of the first color's opacity.
7
+ @param o2 Value from 0 to 1 of the first color's opacity.
10
8
  */ export default function(c1, c2) {
11
9
  var o1 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1, o2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 1;
12
- c1 = hsl(c1);
13
- c2 = hsl(c2);
14
- var d = Math.abs(c2.h * o2 - c1.h * o1);
10
+ var hsl1 = hsl(c1);
11
+ var hsl2 = hsl(c2);
12
+ var d = Math.abs(hsl2.h * o2 - hsl1.h * o1);
15
13
  if (d > 180) d -= 360;
16
- var h = (Math.min(c1.h, c2.h) + d / 2) % 360;
17
- var l = c1.l + (c2.l * o2 - c1.l * o1) / 2, s = c1.s + (c2.s * o2 - c1.s * o1) / 2;
18
- // a = o1 + (o2 - o1) / 2;
14
+ var h = (Math.min(hsl1.h, hsl2.h) + d / 2) % 360;
15
+ var l = hsl1.l + (hsl2.l * o2 - hsl1.l * o1) / 2, s = hsl1.s + (hsl2.s * o2 - hsl1.s * o1) / 2;
19
16
  if (h < 0) h += 360;
20
17
  return hsl("hsl(".concat(h, ",").concat(s * 100, "%,").concat(l * 100, "%)")).toString();
21
- // return hsl(`hsl(${h},${s * 100}%,${l * 100}%,${a})`).toString();
22
18
  }
package/es/src/assign.js CHANGED
@@ -1,22 +1,22 @@
1
1
  import { color } from "d3-color";
2
- import { getColor } from "./defaults.js";
2
+ import defaults from "./defaults.js";
3
3
  /**
4
- @function colorAssign
5
- @desc Assigns a color to a value using a predefined set of defaults.
6
- @param {String} c A valid CSS color string.
7
- @param {Object} [u = defaults] An object containing overrides of the default colors.
8
- @returns {String}
4
+ Assigns a color to a value using a predefined set of defaults.
5
+ @param c A valid CSS color string.
6
+ @param u An object containing overrides of the default colors.
9
7
  */ export default function(c) {
10
8
  var u = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
11
9
  // If the value is null or undefined, set to grey.
12
10
  if ([
13
11
  null,
14
- void 0
15
- ].indexOf(c) >= 0) return getColor("missing", u);
16
- else if (c === true) return getColor("on", u);
17
- else if (c === false) return getColor("off", u);
18
- var p = color(c);
19
- // If the value is not a valid color string, use the color scale.
20
- if (!p) return getColor("scale", u)(c);
21
- return c.toString();
12
+ undefined
13
+ ].indexOf(c) >= 0) return u["missing"] || defaults["missing"];
14
+ else if (c === true) return u["on"] || defaults["on"];
15
+ else if (c === false) return u["off"] || defaults["off"];
16
+ else {
17
+ var p = color(c);
18
+ // If the value is not a valid color string, use the color scale.
19
+ if (!p) return (u["scale"] || defaults["scale"])(c);
20
+ return c;
21
+ }
22
22
  }
@@ -1,14 +1,12 @@
1
- import { getColor } from "./defaults.js";
1
+ import defaults from "./defaults.js";
2
2
  import { rgb } from "d3-color";
3
3
  /**
4
- @function colorContrast
5
- @desc A set of default color values used when assigning colors based on data.
6
- @param {String} c A valid CSS color string.
7
- @param {Object} [u = defaults] An object containing overrides of the default colors.
8
- @returns {String}
4
+ A set of default color values used when assigning colors based on data.
5
+ @param c A valid CSS color string.
6
+ @param u An object containing overrides of the default colors.
9
7
  */ export default function(c) {
10
8
  var u = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
11
- c = rgb(c);
12
- var yiq = (c.r * 299 + c.g * 587 + c.b * 114) / 1000;
13
- return yiq >= 128 ? getColor("dark", u) : getColor("light", u);
9
+ var rgbColor = rgb(c);
10
+ var yiq = (rgbColor.r * 299 + rgbColor.g * 587 + rgbColor.b * 114) / 1000;
11
+ return yiq >= 128 ? u["dark"] || defaults["dark"] : u["light"] || defaults["light"];
14
12
  }
@@ -1,10 +1,29 @@
1
1
  import { scaleOrdinal } from "d3-scale";
2
+ // @ts-ignore
2
3
  import pkg from "open-color/open-color.js";
3
4
  var openColor = pkg.theme;
4
5
  /**
5
- @namespace {Object} colorDefaults
6
- @desc A set of default color values used when assigning colors based on data.
7
- */ var defaults = {
6
+ * A set of default color values used when assigning colors based on data.
7
+ *
8
+ * @defaultValue
9
+ * ```
10
+ * {
11
+ * dark: "#495057",
12
+ * light: "#f8f9fa",
13
+ * missing: "#ced4da",
14
+ * off: "#c92a2a",
15
+ * on: "#2b8a3e",
16
+ * scale: d3.scaleOrdinal().range([
17
+ * "#364fc7", "#fab005", "#c92a2a",
18
+ * "#2b8a3e", "#fd7e14", "#862e9c",
19
+ * "#15aabf", "#e64980", "#82c91e",
20
+ * "#74c0fc", "#faa2c1", "#c0eb75",
21
+ * "#b197fc", "#c5f6fa", "#ffe8cc",
22
+ * "#d3f9d8", "#f3d9fa", "#ffe3e3"
23
+ * ])
24
+ * }
25
+ * ```
26
+ */ var defaults = {
8
27
  dark: openColor.colors.gray[700],
9
28
  light: openColor.colors.gray[50],
10
29
  missing: openColor.colors.gray[400],
@@ -31,12 +50,4 @@ var openColor = pkg.theme;
31
50
  openColor.colors.red[100]
32
51
  ])
33
52
  };
34
- /**
35
- Returns a color based on a key, whether it is present in a user supplied object or in the default object.
36
- @returns {String}
37
- @private
38
- */ export function getColor(k) {
39
- var u = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
40
- return k in u ? u[k] : k in defaults ? defaults[k] : defaults.missing;
41
- }
42
53
  export default defaults;
package/es/src/legible.js CHANGED
@@ -1,14 +1,12 @@
1
1
  import { hsl } from "d3-color";
2
2
  /**
3
- @function colorLegible
4
- @desc Darkens a color so that it will appear legible on a white background.
5
- @param {String} c A valid CSS color string.
6
- @returns {String}
3
+ Darkens a color so that it will appear legible on a white background.
4
+ @param c A valid CSS color string.
7
5
  */ export default function(c) {
8
- c = hsl(c);
9
- if (c.l > 0.45) {
10
- if (c.s > 0.8) c.s = 0.8;
11
- c.l = 0.45;
6
+ var hslColor = hsl(c);
7
+ if (hslColor.l > 0.45) {
8
+ if (hslColor.s > 0.8) hslColor.s = 0.8;
9
+ hslColor.l = 0.45;
12
10
  }
13
- return c.toString();
11
+ return hslColor.toString();
14
12
  }
package/es/src/lighter.js CHANGED
@@ -1,15 +1,13 @@
1
1
  import { hsl } from "d3-color";
2
2
  /**
3
- @function colorLighter
4
- @desc Similar to d3.color.brighter, except that this also reduces saturation so that colors don't appear neon.
5
- @param {String} c A valid CSS color string.
6
- @param {String} [i = 0.5] A value from 0 to 1 dictating the strength of the function.
7
- @returns {String}
3
+ Similar to d3.color.brighter, except that this also reduces saturation so that colors don't appear neon.
4
+ @param c A valid CSS color string.
5
+ @param i Strength of the lightening effect, from 0 to 1.
8
6
  */ export default function(c) {
9
7
  var i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0.5;
10
- c = hsl(c);
11
- i *= 1 - c.l;
12
- c.l += i;
13
- c.s -= i;
14
- return c.toString();
8
+ var hslColor = hsl(c);
9
+ i *= 1 - hslColor.l;
10
+ hslColor.l += i;
11
+ hslColor.s -= i;
12
+ return hslColor.toString();
15
13
  }
@@ -1,20 +1,18 @@
1
1
  import { hsl } from "d3-color";
2
2
  /**
3
- @function colorSubtract
4
- @desc Subtracts one color from another.
5
- @param {String} c1 The base color, a valid CSS color string.
6
- @param {String} c2 The color to remove from the base color, also a valid CSS color string.
7
- @param {String} [o1 = 1] Value from 0 to 1 of the first color's opacity.
8
- @param {String} [o2 = 1] Value from 0 to 1 of the first color's opacity.
9
- @returns {String}
3
+ Subtracts one color from another.
4
+ @param c1 The base color, a valid CSS color string.
5
+ @param c2 The color to remove from the base color, also a valid CSS color string.
6
+ @param o1 Value from 0 to 1 of the first color's opacity.
7
+ @param o2 Value from 0 to 1 of the first color's opacity.
10
8
  */ export default function(c1, c2) {
11
9
  var o1 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1, o2 = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 1;
12
- c1 = hsl(c1);
13
- c2 = hsl(c2);
14
- var d = c2.h * o2 - c1.h * o1;
10
+ var hsl1 = hsl(c1);
11
+ var hsl2 = hsl(c2);
12
+ var d = hsl2.h * o2 - hsl1.h * o1;
15
13
  if (Math.abs(d) > 180) d -= 360;
16
- var h = (c1.h - d) % 360;
17
- var l = c1.l - (c2.l * o2 - c1.l * o1) / 2, s = c1.s - (c2.s * o2 - c1.s * o1) / 2;
14
+ var h = (hsl1.h - d) % 360;
15
+ var l = hsl1.l - (hsl2.l * o2 - hsl1.l * o1) / 2, s = hsl1.s - (hsl2.s * o2 - hsl1.s * o1) / 2;
18
16
  // a = o1 - (o2 - o1) / 2;
19
17
  if (h < 0) h += 360;
20
18
  return hsl("hsl(".concat(h, ",").concat(s * 100, "%,").concat(l * 100, "%)")).toString();
package/package.json CHANGED
@@ -1,18 +1,25 @@
1
1
  {
2
2
  "name": "@d3plus/color",
3
- "version": "3.0.16",
3
+ "version": "3.1.1",
4
4
  "description": "Color functions that extent the ability of d3-color.",
5
5
  "license": "MIT",
6
6
  "type": "module",
7
- "exports": "./es/index.js",
7
+ "types": "./types/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./types/index.d.ts",
11
+ "default": "./es/index.js"
12
+ }
13
+ },
8
14
  "browser": "./umd/d3plus-color.full.js",
9
15
  "engines": {
10
- "node": ">=18"
16
+ "node": ">=20"
11
17
  },
12
18
  "sideEffects": false,
13
19
  "files": [
14
20
  "umd",
15
- "es"
21
+ "es",
22
+ "types"
16
23
  ],
17
24
  "homepage": "https://d3plus.org",
18
25
  "repository": {
@@ -27,15 +34,17 @@
27
34
  "data",
28
35
  "visualization"
29
36
  ],
30
- "scripts": {
31
- "build:esm": "node ../../scripts/build-esm.js",
32
- "build:umd": "node ../../scripts/build-umd.js",
33
- "dev": "node ../../scripts/dev.js",
34
- "test": "eslint index.js src/**/*.js && eslint --global=it test && mocha 'test/**/*-test.js'"
35
- },
36
37
  "dependencies": {
37
38
  "d3-color": "^3.1.0",
38
39
  "d3-scale": "^4.0.2",
39
40
  "open-color": "^1.9.1"
41
+ },
42
+ "scripts": {
43
+ "build:esm": "node ../../scripts/build-esm.js",
44
+ "build:types": "tsc",
45
+ "build:umd": "node ../../scripts/build-umd.js",
46
+ "dev": "node ../../scripts/dev.js",
47
+ "test": "eslint index.ts src/**/*.ts && eslint --global=it test && mocha 'test/**/*-test.js'",
48
+ "test:coverage": "c8 -r text -r lcov --src src mocha 'test/**/*-test.js'"
40
49
  }
41
50
  }
@@ -0,0 +1,8 @@
1
+ export { default as colorAdd } from "./src/add.js";
2
+ export { default as colorAssign } from "./src/assign.js";
3
+ export { default as colorContrast } from "./src/contrast.js";
4
+ export { default as colorDefaults } from "./src/defaults.js";
5
+ export { default as colorLegible } from "./src/legible.js";
6
+ export { default as colorLighter } from "./src/lighter.js";
7
+ export { default as colorSubtract } from "./src/subtract.js";
8
+ export type { ColorDefaults } from "./src/defaults.js";
@@ -0,0 +1,8 @@
1
+ /**
2
+ Adds two colors together.
3
+ @param c1 The first color, a valid CSS color string.
4
+ @param c2 The second color, also a valid CSS color string.
5
+ @param o1 Value from 0 to 1 of the first color's opacity.
6
+ @param o2 Value from 0 to 1 of the first color's opacity.
7
+ */
8
+ export default function (c1: string, c2: string, o1?: number, o2?: number): string;
@@ -0,0 +1,7 @@
1
+ import { ColorDefaults } from "./defaults.js";
2
+ /**
3
+ Assigns a color to a value using a predefined set of defaults.
4
+ @param c A valid CSS color string.
5
+ @param u An object containing overrides of the default colors.
6
+ */
7
+ export default function (c: string | boolean | null | undefined, u?: Partial<ColorDefaults>): string;
@@ -0,0 +1,7 @@
1
+ import { ColorDefaults } from "./defaults.js";
2
+ /**
3
+ A set of default color values used when assigning colors based on data.
4
+ @param c A valid CSS color string.
5
+ @param u An object containing overrides of the default colors.
6
+ */
7
+ export default function (c: string, u?: Partial<ColorDefaults>): string;
@@ -0,0 +1,33 @@
1
+ import { ScaleOrdinal } from "d3-scale";
2
+ export interface ColorDefaults {
3
+ dark: string;
4
+ light: string;
5
+ missing: string;
6
+ off: string;
7
+ on: string;
8
+ scale: ScaleOrdinal<string, string>;
9
+ }
10
+ /**
11
+ * A set of default color values used when assigning colors based on data.
12
+ *
13
+ * @defaultValue
14
+ * ```
15
+ * {
16
+ * dark: "#495057",
17
+ * light: "#f8f9fa",
18
+ * missing: "#ced4da",
19
+ * off: "#c92a2a",
20
+ * on: "#2b8a3e",
21
+ * scale: d3.scaleOrdinal().range([
22
+ * "#364fc7", "#fab005", "#c92a2a",
23
+ * "#2b8a3e", "#fd7e14", "#862e9c",
24
+ * "#15aabf", "#e64980", "#82c91e",
25
+ * "#74c0fc", "#faa2c1", "#c0eb75",
26
+ * "#b197fc", "#c5f6fa", "#ffe8cc",
27
+ * "#d3f9d8", "#f3d9fa", "#ffe3e3"
28
+ * ])
29
+ * }
30
+ * ```
31
+ */
32
+ declare const defaults: ColorDefaults;
33
+ export default defaults;