color-elements 0.0.1 → 0.0.3

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.
Files changed (498) hide show
  1. package/README.md +49 -12
  2. package/_build/copy-config.js +11 -1
  3. package/_build/copy-config.json +2 -2
  4. package/_build/eleventy.js +27 -1
  5. package/_build/filters-extra.js +3 -0
  6. package/_includes/component.njk +69 -0
  7. package/_includes/partials/_nav-links.njk +19 -0
  8. package/_redirects +9 -2
  9. package/assets/css/style.css +78 -1
  10. package/assets/js/index.js +11 -10
  11. package/data/components.json +12 -0
  12. package/debug.html +447 -0
  13. package/eslint.config.js +316 -0
  14. package/index.js +10 -4
  15. package/logo.svg +22 -44
  16. package/package.json +12 -5
  17. package/src/channel-picker/README.md +103 -0
  18. package/src/channel-picker/channel-picker.css +31 -0
  19. package/src/channel-picker/channel-picker.js +168 -0
  20. package/src/channel-picker/channel-picker.webp +0 -0
  21. package/src/channel-slider/README.md +165 -0
  22. package/src/channel-slider/channel-slider.css +61 -0
  23. package/src/channel-slider/channel-slider.js +287 -0
  24. package/src/channel-slider/channel-slider.webp +0 -0
  25. package/src/color-chart/README.md +129 -0
  26. package/src/color-chart/color-chart-global.css +97 -0
  27. package/src/color-chart/color-chart.css +112 -0
  28. package/src/color-chart/color-chart.js +441 -0
  29. package/src/color-chart/color-chart.webp +0 -0
  30. package/src/color-inline/README.md +72 -0
  31. package/{color-swatch/color-swatch.css → src/color-inline/color-inline.css} +11 -4
  32. package/src/color-inline/color-inline.js +85 -0
  33. package/src/color-inline/color-inline.webp +0 -0
  34. package/src/color-inline/style.css +14 -0
  35. package/src/color-picker/README.md +150 -0
  36. package/src/color-picker/color-picker.css +35 -0
  37. package/src/color-picker/color-picker.js +251 -0
  38. package/src/color-picker/color-picker.webp +0 -0
  39. package/src/color-scale/README.md +75 -0
  40. package/src/color-scale/color-scale.css +40 -0
  41. package/src/color-scale/color-scale.js +164 -0
  42. package/src/color-scale/color-scale.webp +0 -0
  43. package/src/color-slider/README.md +220 -0
  44. package/src/color-slider/color-slider.css +174 -0
  45. package/src/color-slider/color-slider.js +320 -0
  46. package/src/color-slider/color-slider.webp +0 -0
  47. package/src/color-swatch/README.md +359 -0
  48. package/src/color-swatch/color-swatch.css +230 -0
  49. package/src/color-swatch/color-swatch.js +252 -0
  50. package/src/color-swatch/color-swatch.webp +0 -0
  51. package/src/common/color-element.js +86 -0
  52. package/src/common/dom.js +61 -0
  53. package/src/common/util.js +55 -0
  54. package/src/gamut-badge/README.md +145 -0
  55. package/src/gamut-badge/gamut-badge.css +78 -0
  56. package/src/gamut-badge/gamut-badge.js +121 -0
  57. package/src/gamut-badge/gamut-badge.webp +0 -0
  58. package/src/index.js.njk +7 -0
  59. package/src/space-picker/README.md +121 -0
  60. package/src/space-picker/space-picker.css +23 -0
  61. package/src/space-picker/space-picker.js +213 -0
  62. package/src/space-picker/space-picker.webp +0 -0
  63. package/src/src.json +3 -0
  64. package/_data/eleventyComputed.11tydata.js +0 -29
  65. package/color-gamut/README.md +0 -75
  66. package/color-gamut/color-gamut.js +0 -172
  67. package/color-gamut/style.css +0 -32
  68. package/color-slider/README.md +0 -84
  69. package/color-slider/color-slider.js +0 -79
  70. package/color-slider/style.css +0 -65
  71. package/color-swatch/color-swatch.js +0 -79
  72. package/color-swatch/index.njk +0 -40
  73. package/common/attributes.js +0 -68
  74. package/common/color.js +0 -10
  75. package/css-color/css-color.js +0 -256
  76. package/css-color/index.njk +0 -43
  77. package/css-color/style.css +0 -67
  78. package/lib/README.md +0 -4
  79. package/lib/colorjs.io/LICENSE +0 -21
  80. package/lib/colorjs.io/README.json +0 -3
  81. package/lib/colorjs.io/README.md +0 -257
  82. package/lib/colorjs.io/colorjs.io/LICENSE +0 -21
  83. package/lib/colorjs.io/colorjs.io/README.json +0 -3
  84. package/lib/colorjs.io/colorjs.io/README.md +0 -257
  85. package/lib/colorjs.io/colorjs.io/dist/color-fn.cjs +0 -5437
  86. package/lib/colorjs.io/colorjs.io/dist/color-fn.cjs.map +0 -1
  87. package/lib/colorjs.io/colorjs.io/dist/color-fn.legacy.cjs +0 -7048
  88. package/lib/colorjs.io/colorjs.io/dist/color-fn.legacy.cjs.map +0 -1
  89. package/lib/colorjs.io/colorjs.io/dist/color-fn.legacy.min.cjs +0 -2
  90. package/lib/colorjs.io/colorjs.io/dist/color-fn.legacy.min.cjs.map +0 -1
  91. package/lib/colorjs.io/colorjs.io/dist/color-fn.min.cjs +0 -2
  92. package/lib/colorjs.io/colorjs.io/dist/color-fn.min.cjs.map +0 -1
  93. package/lib/colorjs.io/colorjs.io/dist/color.cjs +0 -5759
  94. package/lib/colorjs.io/colorjs.io/dist/color.cjs.map +0 -1
  95. package/lib/colorjs.io/colorjs.io/dist/color.global.js +0 -5760
  96. package/lib/colorjs.io/colorjs.io/dist/color.global.js.map +0 -1
  97. package/lib/colorjs.io/colorjs.io/dist/color.global.legacy.js +0 -7400
  98. package/lib/colorjs.io/colorjs.io/dist/color.global.legacy.js.map +0 -1
  99. package/lib/colorjs.io/colorjs.io/dist/color.global.legacy.min.js +0 -2
  100. package/lib/colorjs.io/colorjs.io/dist/color.global.legacy.min.js.map +0 -1
  101. package/lib/colorjs.io/colorjs.io/dist/color.global.min.js +0 -2
  102. package/lib/colorjs.io/colorjs.io/dist/color.global.min.js.map +0 -1
  103. package/lib/colorjs.io/colorjs.io/dist/color.js +0 -5755
  104. package/lib/colorjs.io/colorjs.io/dist/color.js.map +0 -1
  105. package/lib/colorjs.io/colorjs.io/dist/color.legacy.cjs +0 -7399
  106. package/lib/colorjs.io/colorjs.io/dist/color.legacy.cjs.map +0 -1
  107. package/lib/colorjs.io/colorjs.io/dist/color.legacy.js +0 -7395
  108. package/lib/colorjs.io/colorjs.io/dist/color.legacy.js.map +0 -1
  109. package/lib/colorjs.io/colorjs.io/dist/color.legacy.min.cjs +0 -2
  110. package/lib/colorjs.io/colorjs.io/dist/color.legacy.min.cjs.map +0 -1
  111. package/lib/colorjs.io/colorjs.io/dist/color.legacy.min.js +0 -2
  112. package/lib/colorjs.io/colorjs.io/dist/color.legacy.min.js.map +0 -1
  113. package/lib/colorjs.io/colorjs.io/dist/color.min.cjs +0 -2
  114. package/lib/colorjs.io/colorjs.io/dist/color.min.cjs.map +0 -1
  115. package/lib/colorjs.io/colorjs.io/dist/color.min.js +0 -2
  116. package/lib/colorjs.io/colorjs.io/dist/color.min.js.map +0 -1
  117. package/lib/colorjs.io/colorjs.io/package.json +0 -113
  118. package/lib/colorjs.io/colorjs.io/src/CATs.js +0 -131
  119. package/lib/colorjs.io/colorjs.io/src/adapt.js +0 -62
  120. package/lib/colorjs.io/colorjs.io/src/angles.js +0 -44
  121. package/lib/colorjs.io/colorjs.io/src/chromaticity.js +0 -33
  122. package/lib/colorjs.io/colorjs.io/src/clone.js +0 -7
  123. package/lib/colorjs.io/colorjs.io/src/color.js +0 -201
  124. package/lib/colorjs.io/colorjs.io/src/contrast/APCA.js +0 -102
  125. package/lib/colorjs.io/colorjs.io/src/contrast/Lstar.js +0 -17
  126. package/lib/colorjs.io/colorjs.io/src/contrast/Michelson.js +0 -22
  127. package/lib/colorjs.io/colorjs.io/src/contrast/WCAG21.js +0 -20
  128. package/lib/colorjs.io/colorjs.io/src/contrast/Weber.js +0 -27
  129. package/lib/colorjs.io/colorjs.io/src/contrast/deltaPhi.js +0 -25
  130. package/lib/colorjs.io/colorjs.io/src/contrast/index.js +0 -6
  131. package/lib/colorjs.io/colorjs.io/src/contrast.js +0 -28
  132. package/lib/colorjs.io/colorjs.io/src/defaults.js +0 -12
  133. package/lib/colorjs.io/colorjs.io/src/deltaE/deltaE2000.js +0 -179
  134. package/lib/colorjs.io/colorjs.io/src/deltaE/deltaE76.js +0 -7
  135. package/lib/colorjs.io/colorjs.io/src/deltaE/deltaECMC.js +0 -114
  136. package/lib/colorjs.io/colorjs.io/src/deltaE/deltaEHCT.js +0 -51
  137. package/lib/colorjs.io/colorjs.io/src/deltaE/deltaEITP.js +0 -24
  138. package/lib/colorjs.io/colorjs.io/src/deltaE/deltaEJz.js +0 -43
  139. package/lib/colorjs.io/colorjs.io/src/deltaE/deltaEOK.js +0 -19
  140. package/lib/colorjs.io/colorjs.io/src/deltaE/index.js +0 -27
  141. package/lib/colorjs.io/colorjs.io/src/deltaE.js +0 -19
  142. package/lib/colorjs.io/colorjs.io/src/display.js +0 -83
  143. package/lib/colorjs.io/colorjs.io/src/distance.js +0 -21
  144. package/lib/colorjs.io/colorjs.io/src/equals.js +0 -10
  145. package/lib/colorjs.io/colorjs.io/src/get.js +0 -11
  146. package/lib/colorjs.io/colorjs.io/src/getAll.js +0 -20
  147. package/lib/colorjs.io/colorjs.io/src/getColor.js +0 -36
  148. package/lib/colorjs.io/colorjs.io/src/hooks.js +0 -37
  149. package/lib/colorjs.io/colorjs.io/src/inGamut.js +0 -25
  150. package/lib/colorjs.io/colorjs.io/src/index-fn.js +0 -28
  151. package/lib/colorjs.io/colorjs.io/src/index.js +0 -38
  152. package/lib/colorjs.io/colorjs.io/src/interpolation.js +0 -222
  153. package/lib/colorjs.io/colorjs.io/src/keywords.js +0 -158
  154. package/lib/colorjs.io/colorjs.io/src/luminance.js +0 -27
  155. package/lib/colorjs.io/colorjs.io/src/multiply-matrices.js +0 -44
  156. package/lib/colorjs.io/colorjs.io/src/parse.js +0 -198
  157. package/lib/colorjs.io/colorjs.io/src/rgbspace.js +0 -64
  158. package/lib/colorjs.io/colorjs.io/src/serialize.js +0 -86
  159. package/lib/colorjs.io/colorjs.io/src/set.js +0 -33
  160. package/lib/colorjs.io/colorjs.io/src/setAll.js +0 -12
  161. package/lib/colorjs.io/colorjs.io/src/space-accessors.js +0 -86
  162. package/lib/colorjs.io/colorjs.io/src/space.js +0 -440
  163. package/lib/colorjs.io/colorjs.io/src/spaces/a98rgb-linear.js +0 -28
  164. package/lib/colorjs.io/colorjs.io/src/spaces/a98rgb.js +0 -11
  165. package/lib/colorjs.io/colorjs.io/src/spaces/acescc.js +0 -76
  166. package/lib/colorjs.io/colorjs.io/src/spaces/acescg.js +0 -54
  167. package/lib/colorjs.io/colorjs.io/src/spaces/cam16.js +0 -362
  168. package/lib/colorjs.io/colorjs.io/src/spaces/hct.js +0 -157
  169. package/lib/colorjs.io/colorjs.io/src/spaces/hpluv.js +0 -130
  170. package/lib/colorjs.io/colorjs.io/src/spaces/hsl.js +0 -91
  171. package/lib/colorjs.io/colorjs.io/src/spaces/hsluv.js +0 -162
  172. package/lib/colorjs.io/colorjs.io/src/spaces/hsv.js +0 -65
  173. package/lib/colorjs.io/colorjs.io/src/spaces/hwb.js +0 -58
  174. package/lib/colorjs.io/colorjs.io/src/spaces/ictcp.js +0 -133
  175. package/lib/colorjs.io/colorjs.io/src/spaces/index-fn-hdr.js +0 -7
  176. package/lib/colorjs.io/colorjs.io/src/spaces/index-fn.js +0 -29
  177. package/lib/colorjs.io/colorjs.io/src/spaces/index.js +0 -8
  178. package/lib/colorjs.io/colorjs.io/src/spaces/jzazbz.js +0 -118
  179. package/lib/colorjs.io/colorjs.io/src/spaces/jzczhz.js +0 -53
  180. package/lib/colorjs.io/colorjs.io/src/spaces/lab-d65.js +0 -74
  181. package/lib/colorjs.io/colorjs.io/src/spaces/lab.js +0 -74
  182. package/lib/colorjs.io/colorjs.io/src/spaces/lch.js +0 -67
  183. package/lib/colorjs.io/colorjs.io/src/spaces/lchuv.js +0 -68
  184. package/lib/colorjs.io/colorjs.io/src/spaces/luv.js +0 -85
  185. package/lib/colorjs.io/colorjs.io/src/spaces/oklab.js +0 -74
  186. package/lib/colorjs.io/colorjs.io/src/spaces/oklch.js +0 -68
  187. package/lib/colorjs.io/colorjs.io/src/spaces/p3-linear.js +0 -22
  188. package/lib/colorjs.io/colorjs.io/src/spaces/p3.js +0 -13
  189. package/lib/colorjs.io/colorjs.io/src/spaces/prophoto-linear.js +0 -28
  190. package/lib/colorjs.io/colorjs.io/src/spaces/prophoto.js +0 -19
  191. package/lib/colorjs.io/colorjs.io/src/spaces/rec2020-linear.js +0 -27
  192. package/lib/colorjs.io/colorjs.io/src/spaces/rec2020.js +0 -31
  193. package/lib/colorjs.io/colorjs.io/src/spaces/rec2100-hlg.js +0 -49
  194. package/lib/colorjs.io/colorjs.io/src/spaces/rec2100-pq.js +0 -37
  195. package/lib/colorjs.io/colorjs.io/src/spaces/srgb-linear.js +0 -30
  196. package/lib/colorjs.io/colorjs.io/src/spaces/srgb.js +0 -127
  197. package/lib/colorjs.io/colorjs.io/src/spaces/xyz-abs-d65.js +0 -40
  198. package/lib/colorjs.io/colorjs.io/src/spaces/xyz-d50.js +0 -12
  199. package/lib/colorjs.io/colorjs.io/src/spaces/xyz-d65.js +0 -18
  200. package/lib/colorjs.io/colorjs.io/src/to.js +0 -26
  201. package/lib/colorjs.io/colorjs.io/src/toGamut.js +0 -310
  202. package/lib/colorjs.io/colorjs.io/src/util.js +0 -254
  203. package/lib/colorjs.io/colorjs.io/src/variations.js +0 -14
  204. package/lib/colorjs.io/colorjs.io/types/index.d.cts +0 -4
  205. package/lib/colorjs.io/colorjs.io/types/index.d.ts +0 -42
  206. package/lib/colorjs.io/colorjs.io/types/src/CATs.d.ts +0 -13
  207. package/lib/colorjs.io/colorjs.io/types/src/adapt.d.ts +0 -12
  208. package/lib/colorjs.io/colorjs.io/types/src/angles.d.ts +0 -7
  209. package/lib/colorjs.io/colorjs.io/types/src/chromaticity.d.ts +0 -7
  210. package/lib/colorjs.io/colorjs.io/types/src/clone.d.ts +0 -3
  211. package/lib/colorjs.io/colorjs.io/types/src/color.d.ts +0 -160
  212. package/lib/colorjs.io/colorjs.io/types/src/contrast/APCA.d.ts +0 -5
  213. package/lib/colorjs.io/colorjs.io/types/src/contrast/Lstar.d.ts +0 -5
  214. package/lib/colorjs.io/colorjs.io/types/src/contrast/Michelson.d.ts +0 -5
  215. package/lib/colorjs.io/colorjs.io/types/src/contrast/WCAG21.d.ts +0 -5
  216. package/lib/colorjs.io/colorjs.io/types/src/contrast/Weber.d.ts +0 -5
  217. package/lib/colorjs.io/colorjs.io/types/src/contrast/deltaPhi.d.ts +0 -5
  218. package/lib/colorjs.io/colorjs.io/types/src/contrast/index.d.ts +0 -11
  219. package/lib/colorjs.io/colorjs.io/types/src/contrast.d.ts +0 -12
  220. package/lib/colorjs.io/colorjs.io/types/src/defaults.d.ts +0 -2
  221. package/lib/colorjs.io/colorjs.io/types/src/deltaE/deltaE2000.d.ts +0 -11
  222. package/lib/colorjs.io/colorjs.io/types/src/deltaE/deltaE76.d.ts +0 -5
  223. package/lib/colorjs.io/colorjs.io/types/src/deltaE/deltaECMC.d.ts +0 -9
  224. package/lib/colorjs.io/colorjs.io/types/src/deltaE/deltaEHCT.d.ts +0 -5
  225. package/lib/colorjs.io/colorjs.io/types/src/deltaE/deltaEITP.d.ts +0 -5
  226. package/lib/colorjs.io/colorjs.io/types/src/deltaE/deltaEJz.d.ts +0 -5
  227. package/lib/colorjs.io/colorjs.io/types/src/deltaE/deltaEOK.d.ts +0 -5
  228. package/lib/colorjs.io/colorjs.io/types/src/deltaE/index.d.ts +0 -14
  229. package/lib/colorjs.io/colorjs.io/types/src/deltaE.d.ts +0 -12
  230. package/lib/colorjs.io/colorjs.io/types/src/display.d.ts +0 -17
  231. package/lib/colorjs.io/colorjs.io/types/src/distance.d.ts +0 -8
  232. package/lib/colorjs.io/colorjs.io/types/src/equals.d.ts +0 -3
  233. package/lib/colorjs.io/colorjs.io/types/src/get.d.ts +0 -4
  234. package/lib/colorjs.io/colorjs.io/types/src/getAll.d.ts +0 -7
  235. package/lib/colorjs.io/colorjs.io/types/src/getColor.d.ts +0 -4
  236. package/lib/colorjs.io/colorjs.io/types/src/hooks.d.ts +0 -52
  237. package/lib/colorjs.io/colorjs.io/types/src/inGamut.d.ts +0 -8
  238. package/lib/colorjs.io/colorjs.io/types/src/index-fn.d.cts +0 -1
  239. package/lib/colorjs.io/colorjs.io/types/src/index-fn.d.ts +0 -63
  240. package/lib/colorjs.io/colorjs.io/types/src/index.d.ts +0 -125
  241. package/lib/colorjs.io/colorjs.io/types/src/interpolation.d.ts +0 -77
  242. package/lib/colorjs.io/colorjs.io/types/src/keywords.d.ts +0 -2
  243. package/lib/colorjs.io/colorjs.io/types/src/luminance.d.ts +0 -10
  244. package/lib/colorjs.io/colorjs.io/types/src/multiply-matrices.d.ts +0 -9
  245. package/lib/colorjs.io/colorjs.io/types/src/parse.d.ts +0 -16
  246. package/lib/colorjs.io/colorjs.io/types/src/rgbspace.d.ts +0 -10
  247. package/lib/colorjs.io/colorjs.io/types/src/serialize.d.ts +0 -13
  248. package/lib/colorjs.io/colorjs.io/types/src/set.d.ts +0 -18
  249. package/lib/colorjs.io/colorjs.io/types/src/setAll.d.ts +0 -14
  250. package/lib/colorjs.io/colorjs.io/types/src/space-accessors.d.ts +0 -1
  251. package/lib/colorjs.io/colorjs.io/types/src/space-coord-accessors.d.ts +0 -69
  252. package/lib/colorjs.io/colorjs.io/types/src/space.d.ts +0 -143
  253. package/lib/colorjs.io/colorjs.io/types/src/spaces/a98rgb-linear.d.ts +0 -3
  254. package/lib/colorjs.io/colorjs.io/types/src/spaces/a98rgb.d.ts +0 -3
  255. package/lib/colorjs.io/colorjs.io/types/src/spaces/acescc.d.ts +0 -3
  256. package/lib/colorjs.io/colorjs.io/types/src/spaces/acescg.d.ts +0 -3
  257. package/lib/colorjs.io/colorjs.io/types/src/spaces/hpluv.d.ts +0 -3
  258. package/lib/colorjs.io/colorjs.io/types/src/spaces/hsl.d.ts +0 -3
  259. package/lib/colorjs.io/colorjs.io/types/src/spaces/hsluv.d.ts +0 -3
  260. package/lib/colorjs.io/colorjs.io/types/src/spaces/hsv.d.ts +0 -3
  261. package/lib/colorjs.io/colorjs.io/types/src/spaces/hwb.d.ts +0 -3
  262. package/lib/colorjs.io/colorjs.io/types/src/spaces/ictcp.d.ts +0 -3
  263. package/lib/colorjs.io/colorjs.io/types/src/spaces/index-fn-hdr.d.ts +0 -9
  264. package/lib/colorjs.io/colorjs.io/types/src/spaces/index-fn.d.ts +0 -29
  265. package/lib/colorjs.io/colorjs.io/types/src/spaces/index.d.ts +0 -4
  266. package/lib/colorjs.io/colorjs.io/types/src/spaces/jzazbz.d.ts +0 -3
  267. package/lib/colorjs.io/colorjs.io/types/src/spaces/jzczhz.d.ts +0 -3
  268. package/lib/colorjs.io/colorjs.io/types/src/spaces/lab-d65.d.ts +0 -3
  269. package/lib/colorjs.io/colorjs.io/types/src/spaces/lab.d.ts +0 -3
  270. package/lib/colorjs.io/colorjs.io/types/src/spaces/lch.d.ts +0 -3
  271. package/lib/colorjs.io/colorjs.io/types/src/spaces/lchuv.d.ts +0 -3
  272. package/lib/colorjs.io/colorjs.io/types/src/spaces/luv.d.ts +0 -3
  273. package/lib/colorjs.io/colorjs.io/types/src/spaces/oklab.d.ts +0 -3
  274. package/lib/colorjs.io/colorjs.io/types/src/spaces/oklch.d.ts +0 -3
  275. package/lib/colorjs.io/colorjs.io/types/src/spaces/p3-linear.d.ts +0 -3
  276. package/lib/colorjs.io/colorjs.io/types/src/spaces/p3.d.ts +0 -3
  277. package/lib/colorjs.io/colorjs.io/types/src/spaces/prophoto-linear.d.ts +0 -3
  278. package/lib/colorjs.io/colorjs.io/types/src/spaces/prophoto.d.ts +0 -3
  279. package/lib/colorjs.io/colorjs.io/types/src/spaces/rec2020-linear.d.ts +0 -3
  280. package/lib/colorjs.io/colorjs.io/types/src/spaces/rec2020.d.ts +0 -3
  281. package/lib/colorjs.io/colorjs.io/types/src/spaces/rec2100-hlg.d.ts +0 -3
  282. package/lib/colorjs.io/colorjs.io/types/src/spaces/rec2100-pq.d.ts +0 -3
  283. package/lib/colorjs.io/colorjs.io/types/src/spaces/srgb-linear.d.ts +0 -3
  284. package/lib/colorjs.io/colorjs.io/types/src/spaces/srgb.d.ts +0 -3
  285. package/lib/colorjs.io/colorjs.io/types/src/spaces/xyz-abs-d65.d.ts +0 -3
  286. package/lib/colorjs.io/colorjs.io/types/src/spaces/xyz-d50.d.ts +0 -3
  287. package/lib/colorjs.io/colorjs.io/types/src/spaces/xyz-d65.d.ts +0 -3
  288. package/lib/colorjs.io/colorjs.io/types/src/to.d.ts +0 -14
  289. package/lib/colorjs.io/colorjs.io/types/src/toGamut.d.ts +0 -45
  290. package/lib/colorjs.io/colorjs.io/types/src/util.d.ts +0 -58
  291. package/lib/colorjs.io/colorjs.io/types/src/variations.d.ts +0 -5
  292. package/lib/colorjs.io/dist/color-fn.cjs +0 -5437
  293. package/lib/colorjs.io/dist/color-fn.cjs.map +0 -1
  294. package/lib/colorjs.io/dist/color-fn.legacy.cjs +0 -7048
  295. package/lib/colorjs.io/dist/color-fn.legacy.cjs.map +0 -1
  296. package/lib/colorjs.io/dist/color-fn.legacy.min.cjs +0 -2
  297. package/lib/colorjs.io/dist/color-fn.legacy.min.cjs.map +0 -1
  298. package/lib/colorjs.io/dist/color-fn.min.cjs +0 -2
  299. package/lib/colorjs.io/dist/color-fn.min.cjs.map +0 -1
  300. package/lib/colorjs.io/dist/color.cjs +0 -5759
  301. package/lib/colorjs.io/dist/color.cjs.map +0 -1
  302. package/lib/colorjs.io/dist/color.global.js +0 -5760
  303. package/lib/colorjs.io/dist/color.global.js.map +0 -1
  304. package/lib/colorjs.io/dist/color.global.legacy.js +0 -7400
  305. package/lib/colorjs.io/dist/color.global.legacy.js.map +0 -1
  306. package/lib/colorjs.io/dist/color.global.legacy.min.js +0 -2
  307. package/lib/colorjs.io/dist/color.global.legacy.min.js.map +0 -1
  308. package/lib/colorjs.io/dist/color.global.min.js +0 -2
  309. package/lib/colorjs.io/dist/color.global.min.js.map +0 -1
  310. package/lib/colorjs.io/dist/color.js +0 -5755
  311. package/lib/colorjs.io/dist/color.js.map +0 -1
  312. package/lib/colorjs.io/dist/color.legacy.cjs +0 -7399
  313. package/lib/colorjs.io/dist/color.legacy.cjs.map +0 -1
  314. package/lib/colorjs.io/dist/color.legacy.js +0 -7395
  315. package/lib/colorjs.io/dist/color.legacy.js.map +0 -1
  316. package/lib/colorjs.io/dist/color.legacy.min.cjs +0 -2
  317. package/lib/colorjs.io/dist/color.legacy.min.cjs.map +0 -1
  318. package/lib/colorjs.io/dist/color.legacy.min.js +0 -2
  319. package/lib/colorjs.io/dist/color.legacy.min.js.map +0 -1
  320. package/lib/colorjs.io/dist/color.min.cjs +0 -2
  321. package/lib/colorjs.io/dist/color.min.cjs.map +0 -1
  322. package/lib/colorjs.io/dist/color.min.js +0 -2
  323. package/lib/colorjs.io/dist/color.min.js.map +0 -1
  324. package/lib/colorjs.io/package.json +0 -113
  325. package/lib/colorjs.io/src/CATs.js +0 -131
  326. package/lib/colorjs.io/src/adapt.js +0 -62
  327. package/lib/colorjs.io/src/angles.js +0 -44
  328. package/lib/colorjs.io/src/chromaticity.js +0 -33
  329. package/lib/colorjs.io/src/clone.js +0 -7
  330. package/lib/colorjs.io/src/color.js +0 -201
  331. package/lib/colorjs.io/src/contrast/APCA.js +0 -102
  332. package/lib/colorjs.io/src/contrast/Lstar.js +0 -17
  333. package/lib/colorjs.io/src/contrast/Michelson.js +0 -22
  334. package/lib/colorjs.io/src/contrast/WCAG21.js +0 -20
  335. package/lib/colorjs.io/src/contrast/Weber.js +0 -27
  336. package/lib/colorjs.io/src/contrast/deltaPhi.js +0 -25
  337. package/lib/colorjs.io/src/contrast/index.js +0 -6
  338. package/lib/colorjs.io/src/contrast.js +0 -28
  339. package/lib/colorjs.io/src/defaults.js +0 -12
  340. package/lib/colorjs.io/src/deltaE/deltaE2000.js +0 -179
  341. package/lib/colorjs.io/src/deltaE/deltaE76.js +0 -7
  342. package/lib/colorjs.io/src/deltaE/deltaECMC.js +0 -114
  343. package/lib/colorjs.io/src/deltaE/deltaEHCT.js +0 -51
  344. package/lib/colorjs.io/src/deltaE/deltaEITP.js +0 -24
  345. package/lib/colorjs.io/src/deltaE/deltaEJz.js +0 -43
  346. package/lib/colorjs.io/src/deltaE/deltaEOK.js +0 -19
  347. package/lib/colorjs.io/src/deltaE/index.js +0 -27
  348. package/lib/colorjs.io/src/deltaE.js +0 -19
  349. package/lib/colorjs.io/src/display.js +0 -83
  350. package/lib/colorjs.io/src/distance.js +0 -21
  351. package/lib/colorjs.io/src/equals.js +0 -10
  352. package/lib/colorjs.io/src/get.js +0 -11
  353. package/lib/colorjs.io/src/getAll.js +0 -20
  354. package/lib/colorjs.io/src/getColor.js +0 -36
  355. package/lib/colorjs.io/src/hooks.js +0 -37
  356. package/lib/colorjs.io/src/inGamut.js +0 -25
  357. package/lib/colorjs.io/src/index-fn.js +0 -28
  358. package/lib/colorjs.io/src/index.js +0 -38
  359. package/lib/colorjs.io/src/interpolation.js +0 -222
  360. package/lib/colorjs.io/src/keywords.js +0 -158
  361. package/lib/colorjs.io/src/luminance.js +0 -27
  362. package/lib/colorjs.io/src/multiply-matrices.js +0 -44
  363. package/lib/colorjs.io/src/parse.js +0 -198
  364. package/lib/colorjs.io/src/rgbspace.js +0 -64
  365. package/lib/colorjs.io/src/serialize.js +0 -86
  366. package/lib/colorjs.io/src/set.js +0 -33
  367. package/lib/colorjs.io/src/setAll.js +0 -12
  368. package/lib/colorjs.io/src/space-accessors.js +0 -86
  369. package/lib/colorjs.io/src/space.js +0 -440
  370. package/lib/colorjs.io/src/spaces/a98rgb-linear.js +0 -28
  371. package/lib/colorjs.io/src/spaces/a98rgb.js +0 -11
  372. package/lib/colorjs.io/src/spaces/acescc.js +0 -76
  373. package/lib/colorjs.io/src/spaces/acescg.js +0 -54
  374. package/lib/colorjs.io/src/spaces/cam16.js +0 -362
  375. package/lib/colorjs.io/src/spaces/hct.js +0 -157
  376. package/lib/colorjs.io/src/spaces/hpluv.js +0 -130
  377. package/lib/colorjs.io/src/spaces/hsl.js +0 -91
  378. package/lib/colorjs.io/src/spaces/hsluv.js +0 -162
  379. package/lib/colorjs.io/src/spaces/hsv.js +0 -65
  380. package/lib/colorjs.io/src/spaces/hwb.js +0 -58
  381. package/lib/colorjs.io/src/spaces/ictcp.js +0 -133
  382. package/lib/colorjs.io/src/spaces/index-fn-hdr.js +0 -7
  383. package/lib/colorjs.io/src/spaces/index-fn.js +0 -29
  384. package/lib/colorjs.io/src/spaces/index.js +0 -8
  385. package/lib/colorjs.io/src/spaces/jzazbz.js +0 -118
  386. package/lib/colorjs.io/src/spaces/jzczhz.js +0 -53
  387. package/lib/colorjs.io/src/spaces/lab-d65.js +0 -74
  388. package/lib/colorjs.io/src/spaces/lab.js +0 -74
  389. package/lib/colorjs.io/src/spaces/lch.js +0 -67
  390. package/lib/colorjs.io/src/spaces/lchuv.js +0 -68
  391. package/lib/colorjs.io/src/spaces/luv.js +0 -85
  392. package/lib/colorjs.io/src/spaces/oklab.js +0 -74
  393. package/lib/colorjs.io/src/spaces/oklch.js +0 -68
  394. package/lib/colorjs.io/src/spaces/p3-linear.js +0 -22
  395. package/lib/colorjs.io/src/spaces/p3.js +0 -13
  396. package/lib/colorjs.io/src/spaces/prophoto-linear.js +0 -28
  397. package/lib/colorjs.io/src/spaces/prophoto.js +0 -19
  398. package/lib/colorjs.io/src/spaces/rec2020-linear.js +0 -27
  399. package/lib/colorjs.io/src/spaces/rec2020.js +0 -31
  400. package/lib/colorjs.io/src/spaces/rec2100-hlg.js +0 -49
  401. package/lib/colorjs.io/src/spaces/rec2100-pq.js +0 -37
  402. package/lib/colorjs.io/src/spaces/srgb-linear.js +0 -30
  403. package/lib/colorjs.io/src/spaces/srgb.js +0 -127
  404. package/lib/colorjs.io/src/spaces/xyz-abs-d65.js +0 -40
  405. package/lib/colorjs.io/src/spaces/xyz-d50.js +0 -12
  406. package/lib/colorjs.io/src/spaces/xyz-d65.js +0 -18
  407. package/lib/colorjs.io/src/to.js +0 -26
  408. package/lib/colorjs.io/src/toGamut.js +0 -310
  409. package/lib/colorjs.io/src/util.js +0 -254
  410. package/lib/colorjs.io/src/variations.js +0 -14
  411. package/lib/colorjs.io/types/index.d.cts +0 -4
  412. package/lib/colorjs.io/types/index.d.ts +0 -42
  413. package/lib/colorjs.io/types/src/CATs.d.ts +0 -13
  414. package/lib/colorjs.io/types/src/adapt.d.ts +0 -12
  415. package/lib/colorjs.io/types/src/angles.d.ts +0 -7
  416. package/lib/colorjs.io/types/src/chromaticity.d.ts +0 -7
  417. package/lib/colorjs.io/types/src/clone.d.ts +0 -3
  418. package/lib/colorjs.io/types/src/color.d.ts +0 -160
  419. package/lib/colorjs.io/types/src/contrast/APCA.d.ts +0 -5
  420. package/lib/colorjs.io/types/src/contrast/Lstar.d.ts +0 -5
  421. package/lib/colorjs.io/types/src/contrast/Michelson.d.ts +0 -5
  422. package/lib/colorjs.io/types/src/contrast/WCAG21.d.ts +0 -5
  423. package/lib/colorjs.io/types/src/contrast/Weber.d.ts +0 -5
  424. package/lib/colorjs.io/types/src/contrast/deltaPhi.d.ts +0 -5
  425. package/lib/colorjs.io/types/src/contrast/index.d.ts +0 -11
  426. package/lib/colorjs.io/types/src/contrast.d.ts +0 -12
  427. package/lib/colorjs.io/types/src/defaults.d.ts +0 -2
  428. package/lib/colorjs.io/types/src/deltaE/deltaE2000.d.ts +0 -11
  429. package/lib/colorjs.io/types/src/deltaE/deltaE76.d.ts +0 -5
  430. package/lib/colorjs.io/types/src/deltaE/deltaECMC.d.ts +0 -9
  431. package/lib/colorjs.io/types/src/deltaE/deltaEHCT.d.ts +0 -5
  432. package/lib/colorjs.io/types/src/deltaE/deltaEITP.d.ts +0 -5
  433. package/lib/colorjs.io/types/src/deltaE/deltaEJz.d.ts +0 -5
  434. package/lib/colorjs.io/types/src/deltaE/deltaEOK.d.ts +0 -5
  435. package/lib/colorjs.io/types/src/deltaE/index.d.ts +0 -14
  436. package/lib/colorjs.io/types/src/deltaE.d.ts +0 -12
  437. package/lib/colorjs.io/types/src/display.d.ts +0 -17
  438. package/lib/colorjs.io/types/src/distance.d.ts +0 -8
  439. package/lib/colorjs.io/types/src/equals.d.ts +0 -3
  440. package/lib/colorjs.io/types/src/get.d.ts +0 -4
  441. package/lib/colorjs.io/types/src/getAll.d.ts +0 -7
  442. package/lib/colorjs.io/types/src/getColor.d.ts +0 -4
  443. package/lib/colorjs.io/types/src/hooks.d.ts +0 -52
  444. package/lib/colorjs.io/types/src/inGamut.d.ts +0 -8
  445. package/lib/colorjs.io/types/src/index-fn.d.cts +0 -1
  446. package/lib/colorjs.io/types/src/index-fn.d.ts +0 -63
  447. package/lib/colorjs.io/types/src/index.d.ts +0 -125
  448. package/lib/colorjs.io/types/src/interpolation.d.ts +0 -77
  449. package/lib/colorjs.io/types/src/keywords.d.ts +0 -2
  450. package/lib/colorjs.io/types/src/luminance.d.ts +0 -10
  451. package/lib/colorjs.io/types/src/multiply-matrices.d.ts +0 -9
  452. package/lib/colorjs.io/types/src/parse.d.ts +0 -16
  453. package/lib/colorjs.io/types/src/rgbspace.d.ts +0 -10
  454. package/lib/colorjs.io/types/src/serialize.d.ts +0 -13
  455. package/lib/colorjs.io/types/src/set.d.ts +0 -18
  456. package/lib/colorjs.io/types/src/setAll.d.ts +0 -14
  457. package/lib/colorjs.io/types/src/space-accessors.d.ts +0 -1
  458. package/lib/colorjs.io/types/src/space-coord-accessors.d.ts +0 -69
  459. package/lib/colorjs.io/types/src/space.d.ts +0 -143
  460. package/lib/colorjs.io/types/src/spaces/a98rgb-linear.d.ts +0 -3
  461. package/lib/colorjs.io/types/src/spaces/a98rgb.d.ts +0 -3
  462. package/lib/colorjs.io/types/src/spaces/acescc.d.ts +0 -3
  463. package/lib/colorjs.io/types/src/spaces/acescg.d.ts +0 -3
  464. package/lib/colorjs.io/types/src/spaces/hpluv.d.ts +0 -3
  465. package/lib/colorjs.io/types/src/spaces/hsl.d.ts +0 -3
  466. package/lib/colorjs.io/types/src/spaces/hsluv.d.ts +0 -3
  467. package/lib/colorjs.io/types/src/spaces/hsv.d.ts +0 -3
  468. package/lib/colorjs.io/types/src/spaces/hwb.d.ts +0 -3
  469. package/lib/colorjs.io/types/src/spaces/ictcp.d.ts +0 -3
  470. package/lib/colorjs.io/types/src/spaces/index-fn-hdr.d.ts +0 -9
  471. package/lib/colorjs.io/types/src/spaces/index-fn.d.ts +0 -29
  472. package/lib/colorjs.io/types/src/spaces/index.d.ts +0 -4
  473. package/lib/colorjs.io/types/src/spaces/jzazbz.d.ts +0 -3
  474. package/lib/colorjs.io/types/src/spaces/jzczhz.d.ts +0 -3
  475. package/lib/colorjs.io/types/src/spaces/lab-d65.d.ts +0 -3
  476. package/lib/colorjs.io/types/src/spaces/lab.d.ts +0 -3
  477. package/lib/colorjs.io/types/src/spaces/lch.d.ts +0 -3
  478. package/lib/colorjs.io/types/src/spaces/lchuv.d.ts +0 -3
  479. package/lib/colorjs.io/types/src/spaces/luv.d.ts +0 -3
  480. package/lib/colorjs.io/types/src/spaces/oklab.d.ts +0 -3
  481. package/lib/colorjs.io/types/src/spaces/oklch.d.ts +0 -3
  482. package/lib/colorjs.io/types/src/spaces/p3-linear.d.ts +0 -3
  483. package/lib/colorjs.io/types/src/spaces/p3.d.ts +0 -3
  484. package/lib/colorjs.io/types/src/spaces/prophoto-linear.d.ts +0 -3
  485. package/lib/colorjs.io/types/src/spaces/prophoto.d.ts +0 -3
  486. package/lib/colorjs.io/types/src/spaces/rec2020-linear.d.ts +0 -3
  487. package/lib/colorjs.io/types/src/spaces/rec2020.d.ts +0 -3
  488. package/lib/colorjs.io/types/src/spaces/rec2100-hlg.d.ts +0 -3
  489. package/lib/colorjs.io/types/src/spaces/rec2100-pq.d.ts +0 -3
  490. package/lib/colorjs.io/types/src/spaces/srgb-linear.d.ts +0 -3
  491. package/lib/colorjs.io/types/src/spaces/srgb.d.ts +0 -3
  492. package/lib/colorjs.io/types/src/spaces/xyz-abs-d65.d.ts +0 -3
  493. package/lib/colorjs.io/types/src/spaces/xyz-d50.d.ts +0 -3
  494. package/lib/colorjs.io/types/src/spaces/xyz-d65.d.ts +0 -3
  495. package/lib/colorjs.io/types/src/to.d.ts +0 -14
  496. package/lib/colorjs.io/types/src/toGamut.d.ts +0 -45
  497. package/lib/colorjs.io/types/src/util.d.ts +0 -58
  498. package/lib/colorjs.io/types/src/variations.d.ts +0 -5
package/debug.html ADDED
@@ -0,0 +1,447 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <!-- <link rel="stylesheet" href="./src/color-chart/color-chart-global.css"> -->
8
+ <title>Document</title>
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
+
37
+ <style>
38
+ #el:focus {
39
+ outline: 2px solid salmon;
40
+ outline-offset: 2px;
41
+ }
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
+
86
+ <style>
87
+ color-scale::part(delete-button) {
88
+ border: none;
89
+ border-radius: .2em;
90
+ }
91
+ </style>
92
+ </html-demo> -->
93
+ <!-- <html-demo>
94
+ <color-scale editable="editable" space="oklch"
95
+ colors="Peach: #F6D6D6, Yellow: #F6F7C4, Mint: #A1EEBD, Blue: #7BD3EA"></color-scale>
96
+ </html-demo> -->
97
+ <!-- <html-demo>
98
+ <color-scale editable="color" colors="#e3fafc, #0b7285" steps="4" space="oklch"></color-scale>
99
+ </html-demo>
100
+ <html-demo>
101
+ <label>
102
+ <input type="checkbox" onchange="this.parentElement.nextElementSibling.editable = this.checked" />Editable
103
+ </label>
104
+ <color-scale space="oklch" colors="Peach: #F6D6D6, Yellow: #F6F7C4, Mint: #A1EEBD, Blue: #7BD3EA"></color-scale>
105
+ </html-demo> -->
106
+ <!-- <html-demo>
107
+ <label>
108
+ <input type="checkbox" onchange="this.parentElement.nextElementSibling.editable = this.checked" />Editable
109
+ </label>
110
+ <color-scale space="oklch" colors="
111
+ Gray 50: #f9fafb,
112
+ Gray 100: #f3f4f6,
113
+ Gray 400: #9ca3af,
114
+ Gray 500: #6b7280,
115
+ Gray 850: #1a202c
116
+ "></color-scale>
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
+
447
+ </html>