表单
ColorPicker 取色器
一个颜色，选出来的，或者打出来的。
用法
什么时候用它
import { ColorPicker } from '@misoto22/design'说明
一个颜色，选出来的，或者打出来的。
这个面板在 OKLCH 里工作，而这正是它值得取代 <input type="color"> 的理由。在 HSV 里——原生取色器和大多数库用的都是它——沿着一行「亮度」不变的颜色横着拖过去，眼睛读到的却是它在一点点变暗，于是一个在调色板上找颜色的人，是在跟手里的工具较劲。OKLCH 的亮度就是人看到的那个亮度，所以平面上同一高度的两个颜色是真的一样亮，而色相条停在已经选定的那个亮度上，而不是摆出一道属于别的颜色的彩虹。
这个平面是逐行归一到色域的：它的右边缘就是那个亮度和色相下真正存在的最大彩度，所以整个面都够得着，而不是一小片颜色的透镜泡在一大片被裁平的重复色里。
它收什么。 十六进制、rgb()、hsl()、oklch() 和 color(display-p3 …)，两种写法都行。颜色名不收：要认它们，得带上一张写满每个 CSS 名字的表，或者一个活的 DOM，而一个认得 "rebeccapurple"、不认得 "papayawhip" 的框，比两个都不认的还糟。
键盘。 那个平面是两个真滑块凑成的一组——彩度横着走，亮度竖着走——所以方向键推得动它，读屏软件也会报出它此刻在哪儿。这正是二维画布通常漏掉的那一半，而漏掉它，这个控件不是变笨，是没法用。
结构
| 部件 | 说明 |
|---|---|
| 触发器必填 | 收起来时的那个控件：一块色卡，后面跟着文本形式的值，装在和 Input、Select 同一个盒子里。它由自己的 label 和自己的值共同命名，所以读者听到的是「品牌色，#a78bfa」，而不是其中的任何一半。 |
| 色卡 | 颜色压在一块棋盘格上，所以一个半透明的值读起来是透明，而不是一个更淡的颜色。 |
| 写法条 | 十六进制、OKLCH 和 Display P3，做成一个单值的 ToggleGroup。它改的是 onValueChange 吐出什么，不是这个颜色本身——而十六进制和 P3 都是有界的，所以切到其中一个，颜色会在出去的路上被收进那个色域。 |
| 色面必填 | 那个平面：彩度横着走，亮度竖着走。每一行都归一到那个亮度和色相下真正存在的最大彩度，所以整个面都够得着，而不是一小片颜色的透镜夹在成带的重复色之间。它下面是两个真滑块，而不是画布上挂几个按键处理函数，这正是它拥有方向键、Home、End 和一个被播报的位置的原因。 |
| 色相轨 | 一条取在已经选定的亮度和彩度上的渐变，不是一道通用彩虹——所以这条带子展示的是这个颜色的各个色相，而不是别的颜色的。 |
| 透明度轨 | 从透明到当前颜色，压在和色卡同一块棋盘格上。 |
| CSS 框 | 文本形式的值。收十六进制、rgb()、hsl()、oklch() 和 color(display-p3 …)，两种写法都行；除此之外的任何东西，它都会把自己画成无效。 |
实践建议
推荐
- 把它套在 Field 里。触发器是一个按钮，标签绑得住、也点得进去——在这些组合控件里，这是少数几个不用额外帮忙就成立的。
- 你想拿回什么写法，就传什么写法进去。面板会一直用值进来时的那种写法吐出去，直到有人在写法条里改掉它，所以一个 "#a78bfa" 的 defaultValue 会让调用方一直待在十六进制里。
- 当这些颜色正在被调的时候，用它而不是 <input type="color">。原生取色器工作在 HSV 里，那里一行亮度不变的颜色越饱和看着越暗——于是一个在配调色板的人是在跟手里的工具较劲。OKLCH 才是那个「同一高度的两个颜色真的一样亮」的空间。
避免
- 不要传颜色名。十六进制、rgb()、hsl()、oklch() 和 color(display-p3 …) 都解析得了；"rebeccapurple" 不行，那个框会把它显示成无效。要认颜色名，得带上一张写满每个 CSS 关键字的表，或者一个活的 DOM，而一个认得一部分名字、不认得另一部分的取色器，比一个都不认的还糟。
- 不要把吐出来的字符串当成一种固定写法。它取决于写法条当下设成什么，所以一个上来就把开头的 "#" 切掉的调用方，会在读者第一次选中 OKLCH 时坏掉。
- 不要用它去挑正文色或背景色，然后管结果叫无障碍。这里没有任何东西在量对比度；一个允许读者给正文选 #eeeeee 的取色器，做的正是它被要求做的事。
示例
default
这个面板在 OKLCH 里工作，而这就是它胜过原生取色器的全部理由。在 HSV 里——input type=color 和大多数库用的都是它——一行亮度不变的颜色，越饱和看着越暗，于是一个在配调色板的人是在跟手里的工具较劲。在这里，平面上同一高度的两个颜色是真的一样亮，色相条也取在已经选定的那个亮度上，而不是一道属于别的颜色的彩虹。这个平面是一张画好的画布下面盖着两个真滑块，所以方向键推得动它，读屏软件也会说出此刻在哪个轴上。
Passed in as OKLCH, so it comes back as OKLCH.
键盘操作
| 按键 | 作用 |
|---|---|
| EnterSpace | 打开面板。 |
| ←→ | 把当前聚焦的那个轴或那条轨移动一个步长。 |
| HomeEnd | 把那个轴或那条轨跳到两端。 |
| Escape | 关闭面板；焦点回到触发器。 |
无障碍
- label 必填。触发器展示的是一个值，而一个值不是名字。
- 那个平面是两个真滑块凑成的一组——彩度和亮度——各自带百分比播报，所以这个二维面是可操作、也被报告出来的，而不只是可以点。
- 聚焦环画在那个平面上，因为真正接住焦点的那两个滑块是视觉隐藏的，浏览器自己那圈环会连同它们一起被裁掉。
- 透明度在每一处展示的地方都由一块棋盘格再说一遍，所以透明不是只靠明暗来传达的。