ColorPicker

Un sélecteur de couleur détient une couleur, et les parties qu’il contient l’affichent et la modifient : une ColorArea de saturation et de luminosité, des ColorSlider pour n’importe quel canal de RGB, HSL, HSB ou OKLCH et pour l’alpha, des ColorField qui prennent la couleur sous forme de texte ou un canal sous forme de nombre, des ColorSwatch de couleurs prédéfinies et une ColorEyeDropper qui choisit une couleur n’importe où à l’écran. L’app dispose les parties avec ses propres éléments intercalés (une ligne par canal avec sa lettre, l’espace choisi avec Tabs, le sélecteur dans un Popover), et style chacune d’elles : les parties dessinent les couleurs des canaux, et chaque taille, rayon, bordure et ombre revient à l’app.

import { mount, signal, Text, View } from "nsh";
import { type ColorChannel, ColorArea, ColorEyeDropper, ColorField, ColorPicker, ColorSlider, type ColorSpace, ColorSwatch } from "nsh/base";
import { desktop, field, Icon, Log, Segmented, Split, ui } from "./palette";

// `ColorPicker` holds the color; its parts, laid out and styled here, read
// and change it: the saturation and brightness area, the hue and alpha
// sliders, a row per channel of the space picked (its slider and its
// number), the color typed in any CSS form, the browser's eyedropper where
// it has one, and a palette of swatches.
const thumb = "rounded-full border-2 border-white";
const thumbStyle = { boxShadow: "0 0 0 1px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.3)" };
const spaces = ["rgb", "hsl", "hsb", "oklch"] as const;
const channels: Record<ColorSpace, [ColorChannel, string][]> = {
  rgb: [["red", "R"], ["green", "G"], ["blue", "B"]],
  hsl: [["hue", "H"], ["saturation", "S"], ["lightness", "L"]],
  hsb: [["hue", "H"], ["saturation", "S"], ["brightness", "B"]],
  oklch: [["lightness", "L"], ["chroma", "C"], ["hue", "H"]],
};
const palette = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899", "#0f172a80"];

/** A track `h` points high, half a thumb free at each end for the thumb. */
const track = (h: number) => ({
  class: `h-[${h + 8}px] justify-center px-[${(h + 6) / 2}px]`,
  trackClass: `h-[${h}px] rounded-full`,
  thumbClass: `w-[${h + 6}px] h-[${h + 6}px] ${thumb}`,
  thumbStyle,
  fillThumb: true,
});

function App() {
  const color = signal("#3b82f6ff");
  const text = signal("#3b82f6");
  const space = signal<ColorSpace>("oklch");
  const events = signal<string[]>([]);
  return (
    <View style={{ flex: 1, backgroundColor: ui().page, padding: 20, paddingTop: 24, gap: 14 }}>
      <Text style={{ fontSize: 22, fontWeight: "700", color: ui().text }}>color picker</Text>
      <Text style={{ color: ui().muted }}>
        {desktop ? "Drag the area or a slider, type a color, or pick a swatch" : "Drag the area or a slider, or tap a swatch"}
      </Text>
      <Split
        gap={14}
        inspector={
<Log title="onChangeEnd({ value, formatted })" lines={events()} minHeight={92} />
        }
      >
        <View style={{ ...ui().card, borderRadius: 16, padding: 16 }}>
          <ColorPicker
            value={color()}
            onChange={({ value, formatted }) => {
              color.set(value);
              text.set(formatted);
            }}
            onChangeEnd={({ formatted }) => events.set([formatted, ...events()].slice(0, 5))}
            style={{ gap: 12 }}
          >
            <ColorArea
              accessibilityLabel="Saturation and brightness"
              style={{ height: desktop ? 160 : 140 }}
              panelClass="rounded-lg"
              thumbClass={`w-[18px] h-[18px] ${thumb}`}
              thumbStyle={thumbStyle}
              fillThumb
            />
            <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
              <ColorSwatch accessibilityLabel="Current color" style={{ width: 36, height: 36, borderRadius: 18 }} checkerboardColor="#d4d4d8" />
              <View style={{ flex: 1, gap: 8 }}>
                <ColorSlider colorSpace="hsb" channel="hue" accessibilityLabel="Hue" {...track(12)} />
                <ColorSlider channel="alpha" accessibilityLabel="Alpha" checkerboardColor="#d4d4d8" {...track(12)} />
              </View>
            </View>
            <Text style={{ fontSize: 13, color: ui().muted, fontVariant: ["tabular-nums"] }}>{text()}</Text>
            <Segmented options={spaces} value={space()} onChange={(next) => space.set(next)} />
            {() =>
              channels[space()].map(([channel, letter]) => (
                <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
                  <Text style={{ width: 14, fontSize: 13, color: ui().muted }}>{letter}</Text>
                  <ColorSlider colorSpace={space()} channel={channel} accessibilityLabel={`${space()} ${channel}`} style={{ flex: 1 }} {...track(10)} />
                  <ColorField
                    colorSpace={space()}
                    channel={channel}
                    accessibilityLabel={`${space()} ${channel} value`}
                    {...field({ style: { width: 64, textAlign: "right" } })}
                  />
                </View>
              ))
            }
            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
              <ColorField
                accessibilityLabel="Color"
                placeholder="#rrggbb, rgb(), hsl(), oklch() or a name"
                {...field({ style: { flex: 1 } })}
              />
              <ColorEyeDropper
                accessibilityLabel="Pick a color from the screen"
                class="disabled:hidden w-9 h-9 items-center justify-center rounded-md border border-border active:opacity-70"
              >
                <Icon name="pipette" size={16} tint={ui().text} />
              </ColorEyeDropper>
            </View>
            <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
              {palette.map((c) => (
                <ColorSwatch
                  color={c}
                  style={{ width: 24, height: 24, borderRadius: 6 }}
                  selectedStyle={{ borderWidth: 2, borderColor: ui().text }}
                  checkerboardColor="#d4d4d8"
                  checkerboardSize={6}
                />
              ))}
            </View>
          </ColorPicker>
        </View>
      </Split>
    </View>
  );
}

mount(App);

use nsh_base::{
    ColorChannel, ColorPickerEvent, ColorSpace, color_area, color_field, color_picker,
    color_slider, color_swatch, theme,
};
use nsh_core::prelude::*;

fn primary(color: Signal<Hsla>) -> impl IntoElement {
    // A channel of OKLCH: its letter, its slider, its number.
    let channel = move |channel: ColorChannel, letter: &'static str| {
        view()
            .flex_row()
            .items_center()
            .gap_2()
            .child(text(letter).w(px(14.0)).text_sm().text_color(move || theme().muted_foreground))
            .child(
                color_slider()
                    .color_space(ColorSpace::Oklch)
                    .channel(channel)
                    .accessibility_label(letter)
                    .flex_1()
                    .h(px(18.0))
                    .justify_center()
                    .px(px(8.0))
                    .track_style(|s| s.h(px(10.0)).rounded_full())
                    .thumb_style(|s| s.size(px(16.0)).rounded_full().border_2().border_color(white()))
                    .fill_thumb(true),
            )
            .child(
                color_field()
                    .color_space(ColorSpace::Oklch)
                    .channel(channel)
                    .accessibility_label(letter)
                    .w(px(64.0))
                    .h(px(28.0))
                    .px_2()
                    .rounded_md()
                    .border_1()
                    .border_color(move || theme().border)
                    .text_sm(),
            )
    };
    color_picker()
        .value(move || Some(color.get()))
        .on_change(move |e: &ColorPickerEvent| {
            if let ColorPickerEvent::Change(value, _) = e {
                color.set(*value);
            }
        })
        .gap_3()
        .child(
            color_area()
                .accessibility_label("Saturation and brightness")
                .h(px(160.0))
                .panel_style(|s| s.rounded_lg())
                .thumb_style(|s| s.size(px(18.0)).rounded_full().border_2().border_color(white()))
                .fill_thumb(true),
        )
        .child(channel(ColorChannel::Lightness, "L"))
        .child(channel(ColorChannel::Chroma, "C"))
        .child(channel(ColorChannel::Hue, "H"))
        .child(color_swatch().size(px(28.0)).rounded_md())
}

import { mount, signal, Text, View } from "nsh";
import { type ColorChannel, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch } from "nsh/base";

const thumb = "rounded-full border-2 border-white";

function Channel(props: { channel: ColorChannel; letter: string }) {
  return (
    <View class="flex-row items-center gap-2">
      <Text class="w-[14px] text-sm text-muted-foreground">{props.letter}</Text>
      <ColorSlider
        colorSpace="oklch"
        channel={props.channel}
        accessibilityLabel={props.letter}
        class="flex-1 h-[18px] justify-center px-2"
        trackClass="h-[10px] rounded-full"
        thumbClass={`size-4 ${thumb}`}
        fillThumb
      />
      <ColorField
        colorSpace="oklch"
        channel={props.channel}
        accessibilityLabel={props.letter}
        class="w-16 h-7 px-2 rounded-md border border-border text-sm text-right"
      />
    </View>
  );
}

function App() {
  const primary = signal("oklch(54.6% 0.215 262.9)");
  return (
    <ColorPicker value={primary()} format="oklch" onChange={({ formatted }) => primary.set(formatted)} class="gap-3">
      <ColorArea accessibilityLabel="Saturation and brightness" class="h-40" panelClass="rounded-lg" thumbClass={`size-[18px] ${thumb}`} fillThumb />
      <Channel channel="lightness" letter="L" />
      <Channel channel="chroma" letter="C" />
      <Channel channel="hue" letter="H" />
      <View class="flex-row items-center gap-2">
        <ColorSwatch class="size-7 rounded-md" />
        <Text class="font-mono text-sm">{`--primary: ${primary()}`}</Text>
      </View>
    </ColorPicker>
  );
}

mount(App);

ColorPicker, ColorArea, ColorSlider, ColorField, ColorSwatch et ColorEyeDropper proviennent de nsh/base, le crate nsh-base en Rust. En Rust, color_picker() et les fonctions de ses parties les construisent avec un setter par prop (.channel(..), .thumb_style(..)), une méthode d’écoute par événement (.on_change(..)) et les méthodes de style typées ; la couleur est un Hsla, les espaces, canaux et formats sont des ColorSpace, ColorChannel et ColorFormat.

#Valeur

La couleur est une couleur CSS : hexadécimal (#3b82f6, #3b82f680 avec son alpha), rgb(), hsl(), hsb(), oklch() ou un nom CSS ; en Rust, un Hsla. L’app la possède avec value et définit celle que onChange signale, comme pour tout contrôle de nsh/base ; ou bien elle laisse la couleur au sélecteur avec defaultValue et entend malgré tout les changements.

• onChange({ value, formatted }) signale chaque couleur que l’utilisateur demande : à chaque étape d’un glissement sur la zone ou sur un curseur, à chaque touche, au fil de la saisie du nombre d’un champ, à l’appui sur un échantillon. value est la couleur, formatted la même couleur écrite comme l’indique format ("hex", "rgb", "hsl", "hsb" ou "oklch"), prête à être enregistrée ou définie comme token.
• onChangeEnd({ value, formatted }) signale la couleur à laquelle le changement s’est terminé, une seule fois : quand le pointeur se relève, après chaque touche, quand un champ est quitté ou validé, quand un échantillon est pressé.
• Le sélecteur conserve la couleur dans chaque espace telle que l’utilisateur l’a définie. Un gris garde sa teinte et sa saturation, de sorte que le curseur de teinte reste là où l’utilisateur l’a laissé ; une couleur modifiée en OKLCH garde sa luminosité, sa chroma et sa teinte telles que saisies, y compris au-delà de ce que sRGB affiche (la couleur signalée est la plus proche que sRGB affiche, et formatted dans "oklch" conserve les canaux).
• Une value définie par l’app et que le sélecteur n’a pas signalée remplace la couleur dans tous les espaces.

#Espaces et canaux

La piste d’un curseur dessine les couleurs de son canal, les autres canaux restant fixes, afin de montrer où mène chaque valeur. Un canal que son espace n’a pas est remplacé par le premier canal de l’espace (un avertissement le signale).

#Props

#ColorPicker

#ColorArea

#ColorSlider

#ColorField

Le champ d’un canal modifie la couleur au fil de la saisie d’un nombre, borné à la plage du canal ; le champ de la couleur entière la modifie quand il est quitté ou validé, si le texte se lit comme une couleur. Quitter un champ réécrit sa valeur dans sa forme.

#ColorSwatch

#ColorEyeDropper

Un appui affiche la pipette du système : le sélecteur de couleur d’AppKit sur macOS, EyeDropper du navigateur sur le web (Chrome et Edge). La couleur choisie devient celle du sélecteur (onChange, puis onChangeEnd) ; Escape n’en choisit aucune. Là où la plateforme n’a pas de pipette, le bouton est désactivé, et disabled:hidden le masque.

#Événements

En Rust, ColorPickerEvent::Change(Hsla, SharedString) et ColorPickerEvent::ChangeEnd(Hsla, SharedString) portent la couleur et son texte formatted.

#Parties

Le pouce d’un curseur est centré sur les extrémités de la piste aux extrémités du canal. Un padding sur le curseur égal à la moitié de la largeur du pouce (h-6 justify-center px-2.5 autour d’une piste h-3) garde le pouce entier à l’intérieur du curseur, où il reçoit les appuis aux deux extrémités. États que montrent les parties : active: d’un pouce pendant qu’il est glissé et focus: avec le focus clavier, selected: d’un échantillon, et disabled: de chaque partie.

#Clavier

Sur macOS et le web, chaque pouce est un arrêt du focus clavier (Tab) :

Dans une disposition de droite à gauche, un curseur horizontal et la zone vont à partir de la droite, la plus petite valeur (la moindre saturation) se trouvant à l’extrémité droite : Gauche est un pas en plus et Droite un pas en moins, et un appui ou un glissement choisit la valeur sous le pointeur telle qu’elle est dessinée. Un curseur vertical garde Droite et Haut comme un pas en plus ; Haut et Bas sur la zone gardent la luminosité.

Un échantillon réagit à Espace et Retour. Chaque touche signale onChange puis onChangeEnd ; les flèches se répètent tant qu’elles sont maintenues.

#Accessibilité

• Le pouce de la zone et celui de chaque curseur sont des éléments ajustables ("adjustable", un slider dans le navigateur) avec leur libellé, leur valeur et leur plage ; l’incrémentation et la décrémentation des lecteurs d’écran les font avancer par pas.
• Chaque champ est un champ de texte avec son libellé ; chaque échantillon est un bouton, sélectionné tant qu’il porte la couleur du sélecteur, nommé par sa couleur en hexadécimal sauf si accessibilityLabel le nomme. La pipette est un bouton avec le libellé de l’app.
• Lorsqu’elles sont désactivées, les lecteurs d’écran annoncent les parties comme grisées, et elles n’acceptent aucune action.

Voir Accessibilité pour les libellés, les rôles et les actions en général.

#Notes sur les plateformes

• Chaque plateforme dessine ce que l’app style ; les couleurs des pistes et du panneau sont des dégradés dessinés par la plateforme. Les appuis et les glissements sont suivis dans le cœur, pour une souris, un stylet ou un doigt, et une vue défilante autour du sélecteur conserve son défilement pour les glissements qui commencent ailleurs.
• ColorEyeDropper choisit avec le sélecteur de couleur d’AppKit sur macOS et EyeDropper du navigateur sur le web ; la couleur arrive en sRGB.