color-elements 0.0.3 → 0.0.5
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/.claude/settings.local.json +30 -0
- package/.editorconfig +8 -0
- package/.prettierrc +17 -0
- package/.vscode/settings.json +7 -0
- package/README.md +27 -18
- package/_build/copy-config.js +15 -14
- package/_build/copy-config.json +4 -9
- package/_build/eleventy.js +8 -8
- package/_includes/component.njk +9 -14
- package/_includes/partials/_nav-links.njk +1 -0
- package/_includes/plain.njk +5 -0
- package/_redirects +1 -1
- package/assets/css/style.css +4 -4
- package/debug.html +38 -439
- package/package.json +24 -8
- package/src/channel-picker/channel-picker.css +4 -4
- package/src/channel-picker/channel-picker.js +16 -12
- package/src/channel-slider/channel-slider.css +14 -7
- package/src/channel-slider/channel-slider.js +14 -6
- package/src/color-chart/README.md +36 -5
- package/src/color-chart/color-chart-global.css +19 -14
- package/src/color-chart/color-chart-shadow.css +123 -0
- package/src/color-chart/color-chart.css +2 -112
- package/src/color-chart/color-chart.js +309 -107
- package/src/color-inline/color-inline.css +21 -16
- package/src/color-inline/color-inline.js +3 -4
- package/src/color-inline/style.css +1 -1
- package/src/color-picker/color-picker.css +3 -3
- package/src/color-picker/color-picker.js +15 -8
- package/src/color-scale/README.md +42 -2
- package/src/color-scale/color-scale.css +8 -13
- package/src/color-scale/color-scale.js +14 -11
- package/src/color-slider/README.md +17 -3
- package/src/color-slider/color-slider.css +54 -33
- package/src/color-slider/color-slider.js +10 -8
- package/src/color-swatch/color-swatch.css +52 -34
- package/src/color-swatch/color-swatch.js +20 -10
- package/src/common/color-element.js +63 -51
- package/src/common/dom.js +4 -2
- package/src/common/util.js +66 -1
- package/src/gamut-badge/gamut-badge.css +33 -13
- package/src/gamut-badge/gamut-badge.js +10 -8
- package/src/space-picker/space-picker.css +3 -3
- package/src/space-picker/space-picker.js +29 -11
- package/src/src.json +1 -1
package/debug.html
CHANGED
|
@@ -1,447 +1,46 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
+
<!-- <html lang="en" style="color-scheme: dark;"> -->
|
|
3
4
|
|
|
4
|
-
<head>
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<style>
|
|
10
|
-
:root {
|
|
11
|
-
--test: red;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
html,
|
|
15
|
-
body {
|
|
16
|
-
margin: 0;
|
|
17
|
-
min-height: 100vh;
|
|
18
|
-
}
|
|
19
|
-
</style>
|
|
20
|
-
</head>
|
|
21
|
-
|
|
22
|
-
<!-- <body style="display: grid; place-items: center; align-content: center; margin: 2rem"> -->
|
|
23
|
-
|
|
24
|
-
<body style="display: grid; align-items: center; align-content: center; margin: 2rem">
|
|
25
|
-
|
|
26
|
-
<html-demo>
|
|
27
|
-
<channel-slider space="lch" color="lch(91% 14 50)" channel="c"></channel-slider>
|
|
28
|
-
</html-demo>
|
|
29
|
-
|
|
30
|
-
<!-- <html-demo>
|
|
31
|
-
<label for="el">Element:</label>
|
|
32
|
-
<color-chart y="oklch.l" id="el">
|
|
33
|
-
<color-scale
|
|
34
|
-
colors="#e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1"></color-scale>
|
|
35
|
-
</color-chart>
|
|
36
|
-
|
|
5
|
+
<head>
|
|
6
|
+
<meta charset="UTF-8" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<!-- <link rel="stylesheet" href="./src/color-chart/color-chart-global.css"> -->
|
|
9
|
+
<title>Document</title>
|
|
37
10
|
<style>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
outline-offset: 2px;
|
|
11
|
+
:root {
|
|
12
|
+
--test: red;
|
|
41
13
|
}
|
|
42
|
-
</style>
|
|
43
|
-
</html-demo> -->
|
|
44
|
-
<!-- <html-demo>
|
|
45
|
-
<space-picker id="picker" spaces="oklch, p3, srgb" value="oklch"></space-picker>
|
|
46
|
-
|
|
47
|
-
<script>
|
|
48
|
-
picker.labelFor = space => space.id;
|
|
49
|
-
</script>
|
|
50
|
-
</html-demo> -->
|
|
51
|
-
<!-- <html-demo>
|
|
52
|
-
<channel-slider space="jzazbz" color="oklch(50% 50% 180)"></channel-slider>
|
|
53
|
-
</html-demo> -->
|
|
54
|
-
<!-- <html-demo>
|
|
55
|
-
<color-slider space="jzazbz" color="oklch(50% 50% 180)"></color-slider>
|
|
56
|
-
</html-demo> -->
|
|
57
|
-
<!-- <html-demo>
|
|
58
|
-
<color-swatch>
|
|
59
|
-
oklch(65% 0.15 210)
|
|
60
|
-
</color-swatch>
|
|
61
|
-
</html-demo>
|
|
62
|
-
<html-demo>
|
|
63
|
-
<color-swatch label="My color">
|
|
64
|
-
oklch(65% 0.15 210)
|
|
65
|
-
</color-swatch>
|
|
66
|
-
</html-demo>
|
|
67
|
-
<html-demo>
|
|
68
|
-
<color-swatch value="oklch(65% 0.15 210)"></color-swatch>
|
|
69
|
-
</html-demo>
|
|
70
|
-
<html-demo>
|
|
71
|
-
<color-swatch value="oklch(65% 0.15 210)">Color Label</color-swatch>
|
|
72
|
-
</html-demo> -->
|
|
73
|
-
<!-- <html-demo>
|
|
74
|
-
<color-picker space="oklch" color="oklch(60% 30% 180)"></color-picker>
|
|
75
|
-
</html-demo> -->
|
|
76
|
-
<!-- <html-demo>
|
|
77
|
-
<color-picker></color-picker>
|
|
78
|
-
</html-demo> -->
|
|
79
|
-
<!-- <html-demo>
|
|
80
|
-
<color-scale editable space="oklch" colors="Gray 50: #f9fafb,
|
|
81
|
-
Gray 100: #f3f4f6,
|
|
82
|
-
Gray 400: #9ca3af,
|
|
83
|
-
Gray 500: #6b7280,
|
|
84
|
-
Gray 850: #1a202c"></color-scale>
|
|
85
14
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
15
|
+
html,
|
|
16
|
+
body {
|
|
17
|
+
margin: 0;
|
|
18
|
+
min-height: 100vh;
|
|
90
19
|
}
|
|
91
20
|
</style>
|
|
92
|
-
</
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
</html-demo> -->
|
|
118
|
-
<!-- <color-chart y="oklch.c" info="L: oklch.l, C: oklch.c, H: oklch.h">
|
|
119
|
-
<color-scale class="js"
|
|
120
|
-
colors="10: oklch(22.74% 0.05346 127.56), 20: oklch(31.363% 0.07637 127.56), 30: oklch(38.586% 0.09929 127.56), 40: oklch(45.71% 0.1222 127.56), 50: oklch(55.583% 0.14511 127.56), 60: oklch(65.706% 0.16802 127.56), 70: oklch(74.234% 0.14016 127.56), 80: oklch(82.712% 0.09698 127.56), 90: oklch(91.289% 0.04521 127.56), 95: oklch(95.028% 0.0168 127.56), 05: oklch(17.028% 0.04201 127.56)"
|
|
121
|
-
info="L: oklch.l, C: oklch.c, H: oklch.h" style="--color-count: 11;"></color-scale>
|
|
122
|
-
<color-scale class="wa"
|
|
123
|
-
colors="10 (WA) / 10: oklch(22.96% 0.05732 124.46), 20 (WA) / 20: oklch(31.023% 0.07932 126.35), 30 (WA) / 30: oklch(38.591% 0.0999 127.27), 40 (WA) / 40: oklch(45.187% 0.11752 127.61), 50 (WA) / 50: oklch(54.919% 0.144 128.2), 60 (WA) / 60: oklch(65.706% 0.16802 127.56), 70 (WA) / 70: oklch(74.318% 0.14579 124.41), 80 (WA) / 80: oklch(82.976% 0.10008 122.07), 90 (WA) / 90: oklch(91.96% 0.04779 121.53), 95 (WA) / 95: oklch(95.877% 0.02304 120.19), 05 (WA) / 05: oklch(17.406% 0.04251 122.61)"
|
|
124
|
-
info="L: oklch.l, C: oklch.c, H: oklch.h" style="--color-count: 11;"></color-scale>
|
|
125
|
-
</color-chart> -->
|
|
126
|
-
<!-- <color-chart y="oklch.l">
|
|
127
|
-
<color-scale colors="#e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1"
|
|
128
|
-
info="L: oklch.l, C: oklch.c, H: oklch.h"></color-scale>
|
|
129
|
-
</color-chart> -->
|
|
130
|
-
<!-- <color-chart y="lab.b" info="oklch.l, oklch.c, oklch.h">
|
|
131
|
-
<color-scale
|
|
132
|
-
colors="10: #fff0f7, 20: #ffd6e8, 30: #ffafd2, 40: #ff7eb6, 50: #ee5396, 60: #d02670, 70: #9f1853, 80: #740937, 90: #510224, 100: #2a0a18"></color-scale>
|
|
133
|
-
</color-chart> -->
|
|
134
|
-
<!-- <color-chart y="oklch.h" info="L: oklch.l, C: oklch.c, H: oklch.h">
|
|
135
|
-
<color-scale
|
|
136
|
-
colors="0: #e7f5ff, 1: #d0ebff, 2: #a5d8ff, 3: #74c0fc, 4: #4dabf7, 5: #339af0, 6: #228be6, 7: #1c7ed6, 8: #1971c2, 9: #1864ab, 10: #145591, 11: #114678, 12: #0d375e"></color-scale><color-scale
|
|
137
|
-
colors="0: #ebfbee, 1: #d3f9d8, 2: #b2f2bb, 3: #8ce99a, 4: #69db7c, 5: #51cf66, 6: #40c057, 7: #37b24d, 8: #2f9e44, 9: #2b8a3e, 10: #237032, 11: #1b5727, 12: #133d1b"></color-scale>
|
|
138
|
-
</color-chart> -->
|
|
139
|
-
<!--<color-chart y="oklch.c" ymin="0.1" ymax="0.2" info="oklch.c">
|
|
140
|
-
<color-scale
|
|
141
|
-
colors="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, Red 950: #450a0a"></color-scale>
|
|
142
|
-
<color-scale
|
|
143
|
-
colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
|
|
144
|
-
<color-scale
|
|
145
|
-
colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
|
|
146
|
-
</color-chart>-->
|
|
147
|
-
|
|
148
|
-
<!--<color-chart y="oklch.h" info="L: oklch.l, C: oklch.c, H: oklch.h">
|
|
149
|
-
<color-scale class="js" colors="10: oklch(24.407% 0.05594 29.731), 20: oklch(33.308% 0.07991 31.508), 30: oklch(40.809% 0.10388 33.285), 40: oklch(48.21% 0.12785 35.062), 50: oklch(58.362% 0.15183 36.839), 60: oklch(68.763% 0.1758 38.616), 70: oklch(76.854% 0.14664 39.468), 80: oklch(84.895% 0.10147 40.321), 90: oklch(93.036% 0.04731 41.174), 95: oklch(96.556% 0.01758 42.027), 05: oklch(18.556% 0.04395 29.731)"></color-scale>
|
|
150
|
-
<color-scale class="wa" colors="10 (WA) / 10: oklch(24.025% 0.06086 31.256), 20 (WA) / 20: oklch(32.951% 0.09091 32.447), 30 (WA) / 30: oklch(40.519% 0.11729 32.521), 40 (WA) / 40: oklch(48.059% 0.14232 32.918), 50 (WA) / 50: oklch(58.004% 0.15904 35.567), 60 (WA) / 60: oklch(68.763% 0.1758 38.616), 70 (WA) / 70: oklch(76.593% 0.14912 46.395), 80 (WA) / 80: oklch(84.512% 0.09722 53.3), 90 (WA) / 90: oklch(92.492% 0.0445 54.008), 95 (WA) / 95: oklch(96.208% 0.02193 54.343), 05 (WA) / 05: oklch(18.569% 0.04081 32.111)"></color-scale>
|
|
151
|
-
</color-chart>-->
|
|
152
|
-
|
|
153
|
-
<!-- <html-demo>
|
|
154
|
-
<space-picker></space-picker>
|
|
155
|
-
</html-demo>
|
|
156
|
-
|
|
157
|
-
<html-demo>
|
|
158
|
-
<space-picker value="oklab"></space-picker>
|
|
159
|
-
</html-demo>
|
|
160
|
-
|
|
161
|
-
<html-demo>
|
|
162
|
-
<space-picker spaces="oklch, p3, srgb"></space-picker>
|
|
163
|
-
</html-demo>
|
|
164
|
-
|
|
165
|
-
<html-demo>
|
|
166
|
-
<space-picker spaces="foo"></space-picker>
|
|
167
|
-
</html-demo>
|
|
168
|
-
|
|
169
|
-
<html-demo>
|
|
170
|
-
<space-picker spaces="oklch, p3, srgb" value="p3"></space-picker>
|
|
171
|
-
</html-demo>
|
|
172
|
-
|
|
173
|
-
<html-demo>
|
|
174
|
-
<space-picker spaces="bar, oklch, p3, srgb, foo" value="baz"></space-picker>
|
|
175
|
-
</html-demo>
|
|
176
|
-
|
|
177
|
-
<html-demo>
|
|
178
|
-
<space-picker onspacechange="this.nextElementSibling.textContent = this.value"></space-picker>
|
|
179
|
-
<output></output>
|
|
180
|
-
</html-demo>
|
|
181
|
-
|
|
182
|
-
<html-demo>
|
|
183
|
-
<space-picker id="space_picker" spaces="oklch, p3, srgb" value="p3"></space-picker>
|
|
184
|
-
|
|
185
|
-
<script type="module">
|
|
186
|
-
space_picker.groupBy = (space) => {
|
|
187
|
-
let isPolar = space.coords.h?.type === "angle";
|
|
188
|
-
return isPolar ? "Polar" : "Rectangular";
|
|
189
|
-
};
|
|
190
|
-
</script>
|
|
191
|
-
</html-demo> -->
|
|
192
|
-
|
|
193
|
-
<!-- <color-scale
|
|
194
|
-
colors="10: oklch(22.74% 0.05346 127.56), 20: oklch(31.363% 0.07637 127.56), 30: oklch(38.586% 0.09929 127.56), 40: oklch(45.71% 0.1222 127.56), 50: oklch(55.583% 0.14511 127.56), 60: oklch(65.706% 0.16802 127.56), 70: oklch(74.234% 0.14016 127.56), 80: oklch(82.712% 0.09698 127.56), 90: oklch(91.289% 0.04521 127.56), 95: oklch(95.028% 0.0168 127.56), 05: oklch(17.028% 0.04201 127.56)"></color-scale> -->
|
|
195
|
-
|
|
196
|
-
<!-- <color-chart y="oklch.c" info="L: oklch.l, C: oklch.c, H: oklch.h">
|
|
197
|
-
<color-scale
|
|
198
|
-
colors="opencolor 0 / 0: #f4fce3, opencolor 1 / 11.11111111111111: #e9fac8, opencolor 2 / 22.22222222222222: #d8f5a2, opencolor 3 / 33.33333333333333: #c0eb75, opencolor 4 / 44.44444444444444: #a9e34b, opencolor 5 / 55.55555555555556: #94d82d, opencolor 6 / 66.66666666666666: #82c91e, opencolor 7 / 77.77777777777777: #74b816, opencolor 8 / 88.88888888888889: #66a80f, opencolor 9 / 100: #5c940d">
|
|
199
|
-
</color-scale>
|
|
200
|
-
</color-chart> -->
|
|
201
|
-
<!-- <label>
|
|
202
|
-
Space:
|
|
203
|
-
<select onchange="this.parentNode.nextElementSibling.nextElementSibling.space = this.value">
|
|
204
|
-
<option value="cam16-jmh">CAM16-JMh</option>
|
|
205
|
-
<option value="hct">HCT</option>
|
|
206
|
-
<option value="hpluv">HPLuv</option>
|
|
207
|
-
<option value="hsl">HSL</option>
|
|
208
|
-
<option value="hsluv">HSLuv</option>
|
|
209
|
-
<option value="hsv">HSV</option>
|
|
210
|
-
<option value="hwb">HWB</option>
|
|
211
|
-
<option value="lch">LCH</option>
|
|
212
|
-
<option value="lchuv">LChuv</option>
|
|
213
|
-
<option value="oklch" selected>Oklch</option>
|
|
214
|
-
<option value="oklrch">Oklrch</option>
|
|
215
|
-
<option value="okhsl">Okhsl</option>
|
|
216
|
-
<option value="okhsv">Okhsv</option>
|
|
217
|
-
</select>
|
|
218
|
-
</label>
|
|
219
|
-
<label>Coord:
|
|
220
|
-
<select onchange="this.parentNode.nextElementSibling.y = this.value">
|
|
221
|
-
<option selected>oklch.l</option>
|
|
222
|
-
<option>oklch.c</option>
|
|
223
|
-
<option>oklch.h</option>
|
|
224
|
-
</select>
|
|
225
|
-
</label>
|
|
226
|
-
<color-chart y="oklch.l" info="L: oklch.l, C: oklch.c, H: oklch.h">
|
|
227
|
-
<color-scale
|
|
228
|
-
colors="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, 950: #450a0a"
|
|
229
|
-
info="oklch.l"></color-scale>
|
|
230
|
-
<color-scale
|
|
231
|
-
colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
|
|
232
|
-
<color-scale
|
|
233
|
-
colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
|
|
234
|
-
</color-chart> -->
|
|
235
|
-
<!-- <color-swatch id="dynamic_static">oklch(70% 0.25 138)</color-swatch>
|
|
236
|
-
<button onclick='dynamic_static.color = "oklch(60% 0.15 0)"'>Change color</button> -->
|
|
237
|
-
<!-- <color-picker id="dynamic_static" space="oklch"></color-picker>
|
|
238
|
-
<button onclick='dynamic_static.color = "gold"'>Change color</button> -->
|
|
239
|
-
|
|
240
|
-
<!--<html-demo>
|
|
241
|
-
<color-swatch info="deltaE2000, WCAG21 contrast" vs="gold" size="large">
|
|
242
|
-
oklch(65% 0.15 210)
|
|
243
|
-
</color-swatch>
|
|
244
|
-
</html-demo>-->
|
|
245
|
-
<!-- <color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h" vs="gold" size="large">
|
|
246
|
-
oklch(65% 0.15 210)
|
|
247
|
-
</color-swatch> -->
|
|
248
|
-
<!-- <html-demo>
|
|
249
|
-
<color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h" vs="gold" size="large">
|
|
250
|
-
oklch(65% 0.15 210)
|
|
251
|
-
</color-swatch>
|
|
252
|
-
</html-demo>
|
|
253
|
-
|
|
254
|
-
<html-demo>
|
|
255
|
-
<color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE.2000, contrast.Weber" vs="gold" size="large">
|
|
256
|
-
oklch(65% 0.15 210)
|
|
257
|
-
</color-swatch>
|
|
258
|
-
</html-demo>
|
|
259
|
-
|
|
260
|
-
<html-demo>
|
|
261
|
-
<color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE.2000, foo" vs="blue">
|
|
262
|
-
oklch(65% 0.15 210)
|
|
263
|
-
</color-swatch>
|
|
264
|
-
</html-demo> -->
|
|
265
|
-
<!-- <color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h" vs="oklch(65% 0.15 210)" size="large">
|
|
266
|
-
oklch(65% 0.15 210)
|
|
267
|
-
</color-swatch> -->
|
|
268
|
-
<!-- <color-swatch data="L: oklch.l, C: oklch.c, H: oklch.h, ΔE: 2000" vs="oklch(55% 0.1 210)" size="large">
|
|
269
|
-
oklch(55% 0.15 230)
|
|
270
|
-
</color-swatch>
|
|
271
|
-
<color-swatch data="L: oklch.l, C: oklch.c, H: oklch.h" vs="blue">oklch(65% 0.15 210)</color-swatch> -->
|
|
272
|
-
<!-- <color-swatch coords="L: l, C: c, H: h">oklch(80% 50% 70)</color-swatch> -->
|
|
273
|
-
<!-- <color-swatch size="large">green</color-swatch> -->
|
|
274
|
-
<!-- <div id="future_swatch_container"></div>
|
|
275
|
-
<script>
|
|
276
|
-
let swatch = document.createElement("color-swatch");
|
|
277
|
-
swatch.color = "oklch(65% 0.15 210)";
|
|
278
|
-
swatch.setAttribute("size", "large");
|
|
279
|
-
swatch.textContent = "Turquoise";
|
|
280
|
-
swatch.coords = "L: oklch.l, C: oklch.c, H: oklch.h";
|
|
281
|
-
future_swatch_container.append(swatch);
|
|
282
|
-
</script> -->
|
|
283
|
-
|
|
284
|
-
<!-- <color-scale colors="#e3fafc, #0b7285" steps="4" space="oklch" info="L: oklch.l, C: oklch.c" deltas></color-scale> -->
|
|
285
|
-
<!-- <color-scale space="oklch" info="L: oklch.l, C: oklch.c, H: oklch.h"
|
|
286
|
-
colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale> -->
|
|
287
|
-
<!-- <color-scale colors="rgb(255 0 0), rgb(0 0 255)" steps="4" space="oklch"></color-scale> -->
|
|
288
|
-
|
|
289
|
-
<!-- <color-scale
|
|
290
|
-
colors="50: #ecfeff, 100: #cffafe, 200: #a5f3fc, 300: #67e8f9, 400: #22d3ee, 500: #06b6d4, 600: #0891b2, 700: #0e7490, 800: #155e75, 900: #164e63, 950: #083344"
|
|
291
|
-
info="L: lch.l, C: lch.c, H: lch.h"></color-scale>
|
|
292
|
-
<color-scale
|
|
293
|
-
colors="50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a"
|
|
294
|
-
info="L: lch.l, C: lch.c, H: lch.h"></color-scale>
|
|
295
|
-
<color-scale
|
|
296
|
-
colors="50: #fff7ed, 100: #ffedd5, 200: #fed7aa, 300: #fdba74, 400: #fb923c, 500: #f97316, 600: #ea580c, 700: #c2410c, 800: #9a3412, 900: #7c2d12, 950: #431407"
|
|
297
|
-
info="L: lch.l, C: lch.c, H: lch.h"></color-scale>
|
|
298
|
-
<color-scale
|
|
299
|
-
colors="50: #fefce8, 100: #fef9c3, 200: #fef08a, 300: #fde047, 400: #facc15, 500: #eab308, 600: #ca8a04, 700: #a16207, 800: #854d0e, 900: #713f12, 950: #422006"
|
|
300
|
-
info="L: lch.l, C: lch.c, H: lch.h"></color-scale> -->
|
|
301
|
-
<!-- <color-scale space="oklch" colors="
|
|
302
|
-
#f8f9fa,
|
|
303
|
-
#f1f3f5,
|
|
304
|
-
#e9ecef
|
|
305
|
-
" info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE2000" vs="previous"></color-scale>
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
<color-scale space="oklch" colors="
|
|
309
|
-
#f8f9fa,
|
|
310
|
-
#f1f3f5,
|
|
311
|
-
#e9ecef
|
|
312
|
-
" info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE2000" vs="next"></color-scale>
|
|
313
|
-
|
|
314
|
-
<color-scale space="oklch" colors="
|
|
315
|
-
#f8f9fa,
|
|
316
|
-
#f1f3f5,
|
|
317
|
-
#e9ecef
|
|
318
|
-
" info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE2000" vs="#f8f9fa"></color-scale> -->
|
|
319
|
-
|
|
320
|
-
<!-- <color-scale space="oklch" colors="
|
|
321
|
-
#f8f9fa,
|
|
322
|
-
#f1f3f5,
|
|
323
|
-
#e9ecef,
|
|
324
|
-
#dee2e6,
|
|
325
|
-
#ced4da,
|
|
326
|
-
#adb5bd,
|
|
327
|
-
#868e96,
|
|
328
|
-
#495057,
|
|
329
|
-
#343a40,
|
|
330
|
-
#212529
|
|
331
|
-
" info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE2000" vs></color-scale> -->
|
|
332
|
-
|
|
333
|
-
<!-- <color-inline value="oklch(80% 50% 70)"></color-inline> -->
|
|
334
|
-
<!-- <button onclick="this.nextElementSibling.value = Math.random()">Random color</button>
|
|
335
|
-
<color-slider space="oklch" stops="gold, darkcyan, indigo"
|
|
336
|
-
oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider> -->
|
|
337
|
-
<!-- <button onclick="this.nextElementSibling.textContent = 'gold'">Random color</button>
|
|
338
|
-
<color-swatch>red</color-swatch> -->
|
|
339
|
-
|
|
340
|
-
<!-- <color-swatch size="large" oncolorchange="this.nextElementSibling.textContent = this.color">
|
|
341
|
-
<input value="oklch(90% .8 250)" />
|
|
342
|
-
</color-swatch>
|
|
343
|
-
<output></output> -->
|
|
344
|
-
|
|
345
|
-
<!--<color-chart y="oklch.c" info="L: oklch.l, C: oklch.c, H: oklch.h">
|
|
346
|
-
<color-scale class="js"></color-scale>
|
|
347
|
-
<color-scale class="wa"></color-scale>
|
|
348
|
-
</color-chart>
|
|
349
|
-
<color-picker space="oklch" id="color_picker"></color-picker>
|
|
350
|
-
|
|
351
|
-
<script type="module">
|
|
352
|
-
// import Color from "https://colorjs.io/dist/color.js";
|
|
353
|
-
for (let colorScale of document.querySelectorAll("color-chart color-scale.js")) {
|
|
354
|
-
colorScale.colors = "10: oklch(23.363% 0.01102 274.75), 20: oklch(32.076% 0.01602 274.75), 30: oklch(39.389% 0.02119 274.75), 40: oklch(46.601% 0.02665 274.75), 50: oklch(56.564% 0.03294 274.75), 60: oklch(66.951% 0.02512 274.75), 70: oklch(75.289% 0.01834 274.75), 80: oklch(83.576% 0.0119 274.75), 90: oklch(91.963% 0.00568 274.75), 95: oklch(95.607% 0.00264 274.75), 05: oklch(17.607% 0.00857 274.75)";
|
|
355
|
-
}
|
|
356
|
-
// let color = new Color("oklch(56.564% 0.03294 274.75)");
|
|
357
|
-
let color = "oklch(56.564% 0.03294 274.75)";
|
|
358
|
-
color_picker.color = color;
|
|
359
|
-
</script>-->
|
|
360
|
-
|
|
361
|
-
<!-- <html-demo>
|
|
362
|
-
<color-picker id="custom-space-select" space="oklch" color="oklch(60% 30% 180)">
|
|
363
|
-
<select slot="space-picker" size="3" class="horizontal" onchange="this.parentElement.space = this.value">
|
|
364
|
-
<option value="oklch" selected>OKLCh</option>
|
|
365
|
-
<option value="hwb">HWB</option>
|
|
366
|
-
<option value="hpluv">HPLuv</option>
|
|
367
|
-
</select>
|
|
368
|
-
</color-picker>
|
|
369
|
-
|
|
370
|
-
<style>
|
|
371
|
-
select.horizontal {
|
|
372
|
-
writing-mode: tb;
|
|
373
|
-
field-sizing: content;
|
|
374
|
-
|
|
375
|
-
option {
|
|
376
|
-
writing-mode: horizontal-tb;
|
|
377
|
-
padding: .5em;
|
|
378
|
-
}
|
|
379
|
-
}
|
|
380
|
-
</style>
|
|
381
|
-
</html-demo> -->
|
|
382
|
-
|
|
383
|
-
<!--<html-demo>
|
|
384
|
-
<space-picker onspacechange="console.log(this.selectedSpace)"></space-picker>
|
|
385
|
-
</html-demo>-->
|
|
386
|
-
|
|
387
|
-
<!-- <html-demo>
|
|
388
|
-
<channel-picker></channel-picker>
|
|
389
|
-
</html-demo>
|
|
390
|
-
|
|
391
|
-
<html-demo>
|
|
392
|
-
<channel-picker value="foo.bar"></channel-picker>
|
|
393
|
-
</html-demo>
|
|
394
|
-
|
|
395
|
-
<html-demo>
|
|
396
|
-
<channel-picker value="oklch.bar"></channel-picker>
|
|
397
|
-
</html-demo>
|
|
398
|
-
|
|
399
|
-
<html-demo>
|
|
400
|
-
<channel-picker value="foo"></channel-picker>
|
|
401
|
-
</html-demo> -->
|
|
402
|
-
|
|
403
|
-
<!-- <html-demo>
|
|
404
|
-
<channel-picker value="p3.b"></channel-picker>
|
|
405
|
-
</html-demo>
|
|
406
|
-
|
|
407
|
-
<html-demo>
|
|
408
|
-
<channel-picker id="picker" value="hsl.h"></channel-picker>
|
|
409
|
-
|
|
410
|
-
<style>
|
|
411
|
-
#picker::part(space_picker) {
|
|
412
|
-
display: none;
|
|
413
|
-
}
|
|
414
|
-
</style>
|
|
415
|
-
</html-demo> -->
|
|
416
|
-
|
|
417
|
-
<!-- <html-demo>
|
|
418
|
-
<label>Coord:
|
|
419
|
-
<channel-picker onvaluechange="this.parentNode.nextElementSibling.y = this.value"></channel-picker>
|
|
420
|
-
</label>
|
|
421
|
-
<color-chart>
|
|
422
|
-
<color-scale colors="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, Red 950: #450a0a"></color-scale>
|
|
423
|
-
<color-scale colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
|
|
424
|
-
<color-scale colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
|
|
425
|
-
</color-chart>
|
|
426
|
-
</html-demo> -->
|
|
427
|
-
|
|
428
|
-
<!--<html-demo>
|
|
429
|
-
<channel-picker spaces="p3, oklch, hsl"></channel-picker>
|
|
430
|
-
</html-demo>-->
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
<script src="./index.js" type="module"></script>
|
|
434
|
-
<script src="./src/color-picker/color-picker.js" type="module"></script>
|
|
435
|
-
<!-- <script src="./src/color-slider/color-slider.js" type="module"></script> -->
|
|
436
|
-
<script src="./src/color-swatch/color-swatch.js" type="module"></script>
|
|
437
|
-
<script src="./src/color-scale/color-scale.js" type="module"></script>
|
|
438
|
-
<script src="./src/color-chart/color-chart.js" type="module"></script>
|
|
439
|
-
<script src="./src/space-picker/space-picker.js" type="module"></script>
|
|
440
|
-
<script src="./src/channel-picker/channel-picker.js" type="module"></script>
|
|
441
|
-
<!-- <script src="./src/gamut-badge/gamut-badge.js" type="module"></script>-->
|
|
442
|
-
<!-- <script src="./src/color-inline/color-inline.js" type="module"></script> -->
|
|
443
|
-
<script src="https://nudeui.com/elements/html-demo/html-demo.js" type="module"></script>
|
|
444
|
-
|
|
445
|
-
</body>
|
|
446
|
-
|
|
21
|
+
</head>
|
|
22
|
+
|
|
23
|
+
<!-- <body style="display: grid; place-items: center; align-content: center; margin: 2rem"> -->
|
|
24
|
+
|
|
25
|
+
<body style="display: grid; align-items: center; align-content: center; margin: 2rem">
|
|
26
|
+
<html-demo>
|
|
27
|
+
<space-picker
|
|
28
|
+
onspacechange="this.nextElementSibling.textContent = this.value"
|
|
29
|
+
></space-picker>
|
|
30
|
+
<output></output>
|
|
31
|
+
</html-demo>
|
|
32
|
+
|
|
33
|
+
<!-- <script src="./index.js" type="module"></script> -->
|
|
34
|
+
<!--<script src="./src/color-picker/color-picker.js" type="module"></script>-->
|
|
35
|
+
<!--<script src="./src/color-slider/color-slider.js" type="module"></script>-->
|
|
36
|
+
<!--<script src="./src/channel-slider/channel-slider.js" type="module"></script>-->
|
|
37
|
+
<!--<script src="./src/color-swatch/color-swatch.js" type="module"></script>-->
|
|
38
|
+
<!--<script src="./src/color-scale/color-scale.js" type="module"></script>-->
|
|
39
|
+
<!--<script src="./src/color-chart/color-chart.js" type="module"></script>-->
|
|
40
|
+
<script src="./src/space-picker/space-picker.js" type="module"></script>
|
|
41
|
+
<!--<script src="./src/channel-picker/channel-picker.js" type="module"></script>-->
|
|
42
|
+
<!--<script src="./src/gamut-badge/gamut-badge.js" type="module"></script> -->
|
|
43
|
+
<!--<script src="./src/color-inline/color-inline.js" type="module"></script>-->
|
|
44
|
+
<script src="https://nudeui.com/elements/html-demo/html-demo.js" type="module"></script>
|
|
45
|
+
</body>
|
|
447
46
|
</html>
|
package/package.json
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "color-elements",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "A set of web components for working with color. A Color.js project.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": "./index.js",
|
|
9
|
+
"./*.css": "./src/*/*.css",
|
|
10
|
+
"./*": "./src/*/*.js"
|
|
11
|
+
},
|
|
7
12
|
"scripts": {
|
|
8
13
|
"eslint": "npx eslint .",
|
|
9
14
|
"eslint:fix": "npx eslint . --fix",
|
|
@@ -11,10 +16,13 @@
|
|
|
11
16
|
"build": "npm run build:html",
|
|
12
17
|
"watch": "run-p watch:*",
|
|
13
18
|
"prepack": "npm run build",
|
|
14
|
-
"release": "release-it",
|
|
19
|
+
"release": "npm login && release-it",
|
|
15
20
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
16
21
|
"build:html": "npx @11ty/eleventy --config=_build/eleventy.js",
|
|
17
|
-
"
|
|
22
|
+
"serve": "npx @11ty/eleventy --config=_build/eleventy.js --serve",
|
|
23
|
+
"watch:html": "npx @11ty/eleventy --config=_build/eleventy.js --serve",
|
|
24
|
+
"dependencies": "npx nudeps",
|
|
25
|
+
"prepare": "npx nudeps"
|
|
18
26
|
},
|
|
19
27
|
"repository": {
|
|
20
28
|
"type": "git",
|
|
@@ -26,23 +34,31 @@
|
|
|
26
34
|
"web components"
|
|
27
35
|
],
|
|
28
36
|
"author": "Lea Verou",
|
|
37
|
+
"funding": {
|
|
38
|
+
"type": "opencollective",
|
|
39
|
+
"url": "https://opencollective.com/color"
|
|
40
|
+
},
|
|
29
41
|
"license": "MIT",
|
|
30
42
|
"bugs": {
|
|
31
43
|
"url": "https://github.com/color-js/elements/issues"
|
|
32
44
|
},
|
|
33
45
|
"homepage": "https://github.com/color-js/elements#readme",
|
|
34
46
|
"dependencies": {
|
|
35
|
-
"colorjs.io": "
|
|
36
|
-
"nude-element": "
|
|
47
|
+
"colorjs.io": ">=0.5.0",
|
|
48
|
+
"nude-element": "^0.1.1"
|
|
37
49
|
},
|
|
38
50
|
"devDependencies": {
|
|
39
|
-
"@11ty/eleventy": "^3.
|
|
51
|
+
"@11ty/eleventy": "^3.1.2",
|
|
40
52
|
"@stylistic/eslint-plugin": "latest",
|
|
41
53
|
"eslint": "latest",
|
|
42
54
|
"globals": "latest",
|
|
43
|
-
"markdown-it-attrs": "^4.1.6",
|
|
44
55
|
"markdown-it-anchor": "^8",
|
|
56
|
+
"markdown-it-attrs": "^4.1.6",
|
|
45
57
|
"npm-run-all": "^4.1.5",
|
|
46
|
-
"
|
|
58
|
+
"nudeps": "^0.2.3",
|
|
59
|
+
"prettier-plugin-brace-style": "latest",
|
|
60
|
+
"prettier-plugin-merge": "latest",
|
|
61
|
+
"prettier-plugin-space-before-function-paren": "latest",
|
|
62
|
+
"release-it": "^19.2.4"
|
|
47
63
|
}
|
|
48
64
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
--border-width: 1px;
|
|
3
|
-
--border-color: rgb(0 0 0 / .2);
|
|
4
|
-
--border-radius: .2em;
|
|
3
|
+
--border-color: rgb(0 0 0 / 0.2);
|
|
4
|
+
--border-radius: 0.2em;
|
|
5
5
|
|
|
6
|
-
padding: .3em .5em;
|
|
6
|
+
padding: 0.3em 0.5em;
|
|
7
7
|
|
|
8
8
|
border: var(--border-width) solid var(--border-color);
|
|
9
9
|
border-radius: var(--border-radius);
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
#space_picker {
|
|
26
26
|
padding: initial;
|
|
27
|
-
padding-inline-end: .4em;
|
|
27
|
+
padding-inline-end: 0.4em;
|
|
28
28
|
border-radius: 0;
|
|
29
29
|
border: none;
|
|
30
30
|
border-inline-end: var(--border-width) solid var(--border-color);
|
|
@@ -5,7 +5,7 @@ import * as dom from "../common/dom.js";
|
|
|
5
5
|
const Self = class ChannelPicker extends ColorElement {
|
|
6
6
|
static tagName = "channel-picker";
|
|
7
7
|
static url = import.meta.url;
|
|
8
|
-
static
|
|
8
|
+
static styles = "./channel-picker.css";
|
|
9
9
|
static shadowTemplate = `
|
|
10
10
|
<space-picker part="color-space" exportparts="base: color-space-base" id="space_picker"></space-picker>
|
|
11
11
|
<select id="picker" part="color-channel-base"></select>`;
|
|
@@ -54,12 +54,12 @@ const Self = class ChannelPicker extends ColorElement {
|
|
|
54
54
|
let coords = space.coords;
|
|
55
55
|
|
|
56
56
|
if (space && !coords) {
|
|
57
|
-
console.warn(`Color space "${
|
|
57
|
+
console.warn(`Color space "${space.name}" has no coordinates.`);
|
|
58
58
|
return;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
this._el.picker.innerHTML = Object.entries(coords)
|
|
62
|
-
.map(([id, coord]) => `<option value="${
|
|
62
|
+
.map(([id, coord]) => `<option value="${id}">${coord.name}</option>`)
|
|
63
63
|
.join("\n");
|
|
64
64
|
|
|
65
65
|
let [prevSpace, prevChannel] = this.value?.split(".") ?? [];
|
|
@@ -83,30 +83,34 @@ const Self = class ChannelPicker extends ColorElement {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
if ([this._el.space_picker, this._el.picker].includes(event.target)) {
|
|
86
|
-
let value = `${
|
|
86
|
+
let value = `${this._el.space_picker.value}.${this._el.picker.value}`;
|
|
87
87
|
if (value !== this.value) {
|
|
88
88
|
this.value = value;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
propChangedCallback ({name, prop, detail: change}) {
|
|
93
|
+
propChangedCallback ({ name, prop, detail: change }) {
|
|
94
94
|
if (name === "value" && this.value) {
|
|
95
95
|
let [space, channel] = (this.value + "").split(".");
|
|
96
96
|
|
|
97
97
|
let currentSpace = this._el.space_picker.value;
|
|
98
98
|
let currentCoord = this._el.picker.value;
|
|
99
|
-
let currentValue = `${
|
|
99
|
+
let currentValue = `${currentSpace}.${currentCoord}`;
|
|
100
100
|
|
|
101
101
|
if (!space || !channel) {
|
|
102
|
-
console.warn(
|
|
102
|
+
console.warn(
|
|
103
|
+
`Invalid value "${this.value}". Expected format: "space.channel". Falling back to "${currentValue}".`,
|
|
104
|
+
);
|
|
103
105
|
this.value = currentValue;
|
|
104
106
|
}
|
|
105
107
|
else {
|
|
106
108
|
let spaces = Object.keys(this._el.space_picker.spaces);
|
|
107
109
|
|
|
108
110
|
if (!spaces.includes(space)) {
|
|
109
|
-
console.warn(
|
|
111
|
+
console.warn(
|
|
112
|
+
`No "${space}" color space found. Choose one of the following: ${spaces.join(", ")}. Falling back to "${currentSpace}".`,
|
|
113
|
+
);
|
|
110
114
|
this.value = currentValue;
|
|
111
115
|
}
|
|
112
116
|
else {
|
|
@@ -123,13 +127,13 @@ const Self = class ChannelPicker extends ColorElement {
|
|
|
123
127
|
else {
|
|
124
128
|
currentCoord = coords.includes(currentCoord) ? currentCoord : coords[0];
|
|
125
129
|
|
|
126
|
-
let message = `Color space "${
|
|
130
|
+
let message = `Color space "${space}" has no coordinate "${channel}".`;
|
|
127
131
|
if (coords.length) {
|
|
128
|
-
message += ` Choose one of the following: ${
|
|
132
|
+
message += ` Choose one of the following: ${coords.join(", ")}.`;
|
|
129
133
|
}
|
|
130
|
-
message += ` Falling back to "${
|
|
134
|
+
message += ` Falling back to "${currentCoord}".`;
|
|
131
135
|
console.warn(message);
|
|
132
|
-
this.value = `${
|
|
136
|
+
this.value = `${space}.${currentCoord}`;
|
|
133
137
|
channel = currentCoord;
|
|
134
138
|
}
|
|
135
139
|
}
|