@d3plus/color 3.0.16 → 3.1.0
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 +21 -0
- package/README.md +167 -42
- package/es/src/add.js +10 -14
- package/es/src/assign.js +14 -14
- package/es/src/contrast.js +7 -9
- package/es/src/defaults.js +22 -11
- package/es/src/legible.js +7 -9
- package/es/src/lighter.js +8 -10
- package/es/src/subtract.js +10 -12
- package/package.json +18 -10
- package/types/index.d.ts +8 -0
- package/types/src/add.d.ts +8 -0
- package/types/src/assign.d.ts +7 -0
- package/types/src/contrast.d.ts +7 -0
- package/types/src/defaults.d.ts +33 -0
- package/types/src/legible.d.ts +5 -0
- package/types/src/lighter.d.ts +6 -0
- package/types/src/subtract.d.ts +8 -0
- package/umd/d3plus-color.full.js +75 -180
- package/umd/d3plus-color.full.js.map +1 -1
- package/umd/d3plus-color.full.min.js +55 -57
- package/umd/d3plus-color.js +75 -180
- package/umd/d3plus-color.js.map +1 -1
- package/umd/d3plus-color.min.js +53 -55
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,5 @@
|
|
|
1
1
|
# @d3plus/color
|
|
2
|
-
|
|
2
|
+
|
|
3
3
|
Color functions that extent the ability of d3-color.
|
|
4
4
|
|
|
5
5
|
## Installing
|
|
@@ -7,10 +7,10 @@ Color functions that extent the ability of d3-color.
|
|
|
7
7
|
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
8
|
|
|
9
9
|
```js
|
|
10
|
-
import
|
|
10
|
+
import {*} from "@d3plus/color";
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
In vanilla
|
|
13
|
+
In a vanilla environment, a `d3plus` global is exported from the pre-bundled version:
|
|
14
14
|
|
|
15
15
|
```html
|
|
16
16
|
<script src="https://cdn.jsdelivr.net/npm/@d3plus/color"></script>
|
|
@@ -21,90 +21,215 @@ In vanilla JavaScript, a `d3plus` global is exported from the pre-bundled versio
|
|
|
21
21
|
|
|
22
22
|
## Examples
|
|
23
23
|
|
|
24
|
-
Live examples can be found on [d3plus.org](https://d3plus.org/), which includes a collection of example visualizations using @d3plus/react.
|
|
24
|
+
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
25
|
|
|
26
26
|
## API Reference
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
28
|
+
| Functions | Description |
|
|
29
|
+
| --- | --- |
|
|
30
|
+
| [`colorAdd`](#coloradd) | Adds two colors together. |
|
|
31
|
+
| [`colorAssign`](#colorassign) | Assigns a color to a value using a predefined set of defaults. |
|
|
32
|
+
| [`colorContrast`](#colorcontrast) | A set of default color values used when assigning colors based on data. |
|
|
33
|
+
| [`colorLegible`](#colorlegible) | Darkens a color so that it will appear legible on a white background. |
|
|
34
|
+
| [`colorLighter`](#colorlighter) | Similar to d3.color.brighter, except that this also reduces saturation so that colors don't appear neon. |
|
|
35
|
+
| [`colorSubtract`](#colorsubtract) | Subtracts one color from another. |
|
|
36
|
+
|
|
37
|
+
| Variables | Description |
|
|
38
|
+
| --- | --- |
|
|
39
|
+
| [`colorDefaults`](#colordefaults) | A set of default color values used when assigning colors based on data. |
|
|
40
|
+
|
|
41
|
+
| Interfaces | Description |
|
|
42
|
+
| --- | --- |
|
|
43
|
+
| [`ColorDefaults`](#colordefaults) | |
|
|
35
44
|
|
|
36
|
-
|
|
37
|
-
* [colorDefaults](#colorDefaults) - A set of default color values used when assigning colors based on data.
|
|
45
|
+
## Functions
|
|
38
46
|
|
|
39
|
-
|
|
47
|
+
<a id="coloradd"></a>
|
|
40
48
|
|
|
41
|
-
|
|
42
|
-
|
|
49
|
+
### colorAdd()
|
|
50
|
+
|
|
51
|
+
> **colorAdd**(`c1`: `string`, `c2`: `string`, `o1?`: `number`, `o2?`: `number`): `string`
|
|
52
|
+
|
|
53
|
+
Defined in: [add.ts:10](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/packages/color/src/add.ts#L10)
|
|
43
54
|
|
|
44
55
|
Adds two colors together.
|
|
45
56
|
|
|
57
|
+
#### Parameters
|
|
58
|
+
|
|
59
|
+
| Parameter | Type | Default | Description |
|
|
60
|
+
| ------ | ------ | ------ | ------ |
|
|
61
|
+
| `c1` | `string` | *required* | The first color, a valid CSS color string. |
|
|
62
|
+
| `c2` | `string` | *required* | The second color, also a valid CSS color string. |
|
|
63
|
+
| `o1` | `number` | `1` | Value from 0 to 1 of the first color's opacity. |
|
|
64
|
+
| `o2` | `number` | `1` | Value from 0 to 1 of the first color's opacity. |
|
|
46
65
|
|
|
47
|
-
|
|
66
|
+
#### Returns
|
|
48
67
|
|
|
49
|
-
|
|
68
|
+
`string`
|
|
50
69
|
|
|
51
|
-
|
|
52
|
-
|
|
70
|
+
***
|
|
71
|
+
|
|
72
|
+
<a id="colorassign"></a>
|
|
73
|
+
|
|
74
|
+
### colorAssign()
|
|
75
|
+
|
|
76
|
+
> **colorAssign**(`c`: `string` \| `boolean` \| `null` \| `undefined`, `u?`: `Partial`\<[`ColorDefaults`](#colordefaults)\>): `string`
|
|
77
|
+
|
|
78
|
+
Defined in: [assign.ts:9](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/packages/color/src/assign.ts#L9)
|
|
53
79
|
|
|
54
80
|
Assigns a color to a value using a predefined set of defaults.
|
|
55
81
|
|
|
82
|
+
#### Parameters
|
|
83
|
+
|
|
84
|
+
| Parameter | Type | Description |
|
|
85
|
+
| ------ | ------ | ------ |
|
|
86
|
+
| `c` | `string` \| `boolean` \| `null` \| *required* | A valid CSS color string. |
|
|
87
|
+
| `u` | `Partial`\<[`ColorDefaults`](#colordefaults)\> | An object containing overrides of the default colors. |
|
|
56
88
|
|
|
57
|
-
|
|
89
|
+
#### Returns
|
|
58
90
|
|
|
59
|
-
|
|
91
|
+
`string`
|
|
60
92
|
|
|
61
|
-
|
|
62
|
-
|
|
93
|
+
***
|
|
94
|
+
|
|
95
|
+
<a id="colorcontrast"></a>
|
|
96
|
+
|
|
97
|
+
### colorContrast()
|
|
98
|
+
|
|
99
|
+
> **colorContrast**(`c`: `string`, `u?`: `Partial`\<[`ColorDefaults`](#colordefaults)\>): `string`
|
|
100
|
+
|
|
101
|
+
Defined in: [contrast.ts:9](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/packages/color/src/contrast.ts#L9)
|
|
63
102
|
|
|
64
103
|
A set of default color values used when assigning colors based on data.
|
|
65
104
|
|
|
105
|
+
#### Parameters
|
|
106
|
+
|
|
107
|
+
| Parameter | Type | Description |
|
|
108
|
+
| ------ | ------ | ------ |
|
|
109
|
+
| `c` | `string` | A valid CSS color string. |
|
|
110
|
+
| `u` | `Partial`\<[`ColorDefaults`](#colordefaults)\> | An object containing overrides of the default colors. |
|
|
66
111
|
|
|
67
|
-
|
|
112
|
+
#### Returns
|
|
68
113
|
|
|
69
|
-
|
|
114
|
+
`string`
|
|
70
115
|
|
|
71
|
-
|
|
72
|
-
|
|
116
|
+
***
|
|
117
|
+
|
|
118
|
+
<a id="colorlegible"></a>
|
|
119
|
+
|
|
120
|
+
### colorLegible()
|
|
121
|
+
|
|
122
|
+
> **colorLegible**(`c`: `string`): `string`
|
|
123
|
+
|
|
124
|
+
Defined in: [legible.ts:7](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/packages/color/src/legible.ts#L7)
|
|
73
125
|
|
|
74
126
|
Darkens a color so that it will appear legible on a white background.
|
|
75
127
|
|
|
128
|
+
#### Parameters
|
|
129
|
+
|
|
130
|
+
| Parameter | Type | Description |
|
|
131
|
+
| ------ | ------ | ------ |
|
|
132
|
+
| `c` | `string` | A valid CSS color string. |
|
|
76
133
|
|
|
77
|
-
|
|
134
|
+
#### Returns
|
|
78
135
|
|
|
79
|
-
|
|
136
|
+
`string`
|
|
80
137
|
|
|
81
|
-
|
|
82
|
-
|
|
138
|
+
***
|
|
139
|
+
|
|
140
|
+
<a id="colorlighter"></a>
|
|
141
|
+
|
|
142
|
+
### colorLighter()
|
|
143
|
+
|
|
144
|
+
> **colorLighter**(`c`: `string`, `i?`: `number`): `string`
|
|
145
|
+
|
|
146
|
+
Defined in: [lighter.ts:8](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/packages/color/src/lighter.ts#L8)
|
|
83
147
|
|
|
84
148
|
Similar to d3.color.brighter, except that this also reduces saturation so that colors don't appear neon.
|
|
85
149
|
|
|
150
|
+
#### Parameters
|
|
151
|
+
|
|
152
|
+
| Parameter | Type | Default | Description |
|
|
153
|
+
| ------ | ------ | ------ | ------ |
|
|
154
|
+
| `c` | `string` | *required* | A valid CSS color string. |
|
|
155
|
+
| `i` | `number` | `0.5` | Strength of the lightening effect, from 0 to 1. |
|
|
86
156
|
|
|
87
|
-
|
|
157
|
+
#### Returns
|
|
88
158
|
|
|
89
|
-
|
|
159
|
+
`string`
|
|
90
160
|
|
|
91
|
-
|
|
92
|
-
|
|
161
|
+
***
|
|
162
|
+
|
|
163
|
+
<a id="colorsubtract"></a>
|
|
164
|
+
|
|
165
|
+
### colorSubtract()
|
|
166
|
+
|
|
167
|
+
> **colorSubtract**(`c1`: `string`, `c2`: `string`, `o1?`: `number`, `o2?`: `number`): `string`
|
|
168
|
+
|
|
169
|
+
Defined in: [subtract.ts:10](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/packages/color/src/subtract.ts#L10)
|
|
93
170
|
|
|
94
171
|
Subtracts one color from another.
|
|
95
172
|
|
|
173
|
+
#### Parameters
|
|
174
|
+
|
|
175
|
+
| Parameter | Type | Default | Description |
|
|
176
|
+
| ------ | ------ | ------ | ------ |
|
|
177
|
+
| `c1` | `string` | *required* | The base color, a valid CSS color string. |
|
|
178
|
+
| `c2` | `string` | *required* | The color to remove from the base color, also a valid CSS color string. |
|
|
179
|
+
| `o1` | `number` | `1` | Value from 0 to 1 of the first color's opacity. |
|
|
180
|
+
| `o2` | `number` | `1` | Value from 0 to 1 of the first color's opacity. |
|
|
96
181
|
|
|
97
|
-
|
|
182
|
+
#### Returns
|
|
98
183
|
|
|
99
|
-
|
|
184
|
+
`string`
|
|
100
185
|
|
|
101
|
-
|
|
102
|
-
|
|
186
|
+
## Variables
|
|
187
|
+
|
|
188
|
+
<a id="colordefaults-1"></a>
|
|
189
|
+
|
|
190
|
+
### colorDefaults
|
|
191
|
+
|
|
192
|
+
> `const` **colorDefaults**: [`ColorDefaults`](#colordefaults)
|
|
193
|
+
|
|
194
|
+
Defined in: [defaults.ts:37](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/packages/color/src/defaults.ts#L37)
|
|
103
195
|
|
|
104
196
|
A set of default color values used when assigning colors based on data.
|
|
105
197
|
|
|
198
|
+
#### Default Value
|
|
199
|
+
|
|
200
|
+
```
|
|
201
|
+
{
|
|
202
|
+
dark: "#495057",
|
|
203
|
+
light: "#f8f9fa",
|
|
204
|
+
missing: "#ced4da",
|
|
205
|
+
off: "#c92a2a",
|
|
206
|
+
on: "#2b8a3e",
|
|
207
|
+
scale: d3.scaleOrdinal().range([
|
|
208
|
+
"#364fc7", "#fab005", "#c92a2a",
|
|
209
|
+
"#2b8a3e", "#fd7e14", "#862e9c",
|
|
210
|
+
"#15aabf", "#e64980", "#82c91e",
|
|
211
|
+
"#74c0fc", "#faa2c1", "#c0eb75",
|
|
212
|
+
"#b197fc", "#c5f6fa", "#ffe8cc",
|
|
213
|
+
"#d3f9d8", "#f3d9fa", "#ffe3e3"
|
|
214
|
+
])
|
|
215
|
+
}
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
## Interfaces
|
|
219
|
+
|
|
220
|
+
<a id="colordefaults"></a>
|
|
221
|
+
|
|
222
|
+
### ColorDefaults
|
|
106
223
|
|
|
107
|
-
|
|
224
|
+
Defined in: [defaults.ts:6](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/packages/color/src/defaults.ts#L6)
|
|
108
225
|
|
|
109
|
-
|
|
226
|
+
#### Properties
|
|
110
227
|
|
|
228
|
+
| Property | Type | Defined in |
|
|
229
|
+
| ------ | ------ | ------ |
|
|
230
|
+
| <a id="property-dark"></a> `dark` | `string` | [defaults.ts:7](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/packages/color/src/defaults.ts#L7) |
|
|
231
|
+
| <a id="property-light"></a> `light` | `string` | [defaults.ts:8](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/packages/color/src/defaults.ts#L8) |
|
|
232
|
+
| <a id="property-missing"></a> `missing` | `string` | [defaults.ts:9](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/packages/color/src/defaults.ts#L9) |
|
|
233
|
+
| <a id="property-off"></a> `off` | `string` | [defaults.ts:10](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/packages/color/src/defaults.ts#L10) |
|
|
234
|
+
| <a id="property-on"></a> `on` | `string` | [defaults.ts:11](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/packages/color/src/defaults.ts#L11) |
|
|
235
|
+
| <a id="property-scale"></a> `scale` | `ScaleOrdinal`\<`string`, `string`\> | [defaults.ts:12](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/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
|
-
|
|
4
|
-
@
|
|
5
|
-
@param
|
|
6
|
-
@param
|
|
7
|
-
@param
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
var d = Math.abs(
|
|
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(
|
|
17
|
-
var l =
|
|
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
|
|
2
|
+
import defaults from "./defaults.js";
|
|
3
3
|
/**
|
|
4
|
-
|
|
5
|
-
@
|
|
6
|
-
@param
|
|
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
|
-
|
|
15
|
-
].indexOf(c) >= 0) return
|
|
16
|
-
else if (c === true) return
|
|
17
|
-
else if (c === false) return
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
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
|
}
|
package/es/src/contrast.js
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import defaults from "./defaults.js";
|
|
2
2
|
import { rgb } from "d3-color";
|
|
3
3
|
/**
|
|
4
|
-
|
|
5
|
-
@
|
|
6
|
-
@param
|
|
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
|
-
|
|
12
|
-
var yiq = (
|
|
13
|
-
return yiq >= 128 ?
|
|
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
|
}
|
package/es/src/defaults.js
CHANGED
|
@@ -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
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
-
|
|
4
|
-
@
|
|
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
|
-
|
|
9
|
-
if (
|
|
10
|
-
if (
|
|
11
|
-
|
|
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
|
|
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
|
-
|
|
4
|
-
@
|
|
5
|
-
@param
|
|
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
|
-
|
|
11
|
-
i *= 1 -
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
return
|
|
8
|
+
var hslColor = hsl(c);
|
|
9
|
+
i *= 1 - hslColor.l;
|
|
10
|
+
hslColor.l += i;
|
|
11
|
+
hslColor.s -= i;
|
|
12
|
+
return hslColor.toString();
|
|
15
13
|
}
|
package/es/src/subtract.js
CHANGED
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
import { hsl } from "d3-color";
|
|
2
2
|
/**
|
|
3
|
-
|
|
4
|
-
@
|
|
5
|
-
@param
|
|
6
|
-
@param
|
|
7
|
-
@param
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
var d =
|
|
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 = (
|
|
17
|
-
var l =
|
|
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
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "Color functions that extent the ability of d3-color.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"
|
|
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": ">=
|
|
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,16 @@
|
|
|
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'"
|
|
40
48
|
}
|
|
41
49
|
}
|
package/types/index.d.ts
ADDED
|
@@ -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;
|