@kenlo/sds-design-system 0.9.9

package/components/ColorPicker/ColorPicker.css

@@ -0,0 +1,253 @@
+/* SDS ColorPicker.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/ColorPicker/ColorPicker.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+
+   Rules removed with the brand families they targeted:
+     [data-color-scheme="lya"] .sds-colorpicker__trigger--open
+ */
+
+/* Five values snapped to the system.
+
+   The opacity slider's fallback colour was #298EE6 — Kenlo blue, written into a stylesheet
+   that is meant to carry no brand at all, and the only reason it is visible is that it
+   shows for the one frame before --cp-hex is set. It reads --color-neutral-50 now: a colour
+   with no opinion, which is what a slider with no colour yet should show.
+
+   The chequerboard behind the opacity slider was #ccc on white. It is the universal way of
+   drawing "there is nothing here", so it stays a chequerboard, but out of the neutral ramp.
+
+   The three shadows were rgba literals; two are opacity steps and the panel's is
+   --shadow-drop-md, which is the same shadow the other floating panels use. *//* ============================================================
+   SDS ColorPicker
+   ============================================================ */
+
+/* ── Wrapper ── */
+.sds-colorpicker {
+  display: inline-block;
+}
+.sds-colorpicker--fill {
+  display: block;
+  width: 100%;
+}
+.sds-colorpicker--fill .sds-floating,
+.sds-colorpicker--fill .sds-colorpicker__trigger {
+  width: 100%;
+}
+/* ── Trigger (Input-like) ── */
+.sds-colorpicker__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  height: 56px;
+  padding: 0 var(--spacing-3);
+  background: var(--component-bg-color);
+  border: 1px solid var(--border-interactive-color);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-family: var(--font-family-base);
+  transition: border-color 120ms ease;
+  box-sizing: border-box;
+  outline: none;
+}
+/* ── Disabled ── */
+.sds-colorpicker__trigger--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.sds-colorpicker__trigger:hover:not(.sds-colorpicker__trigger--disabled),
+.sds-colorpicker__trigger--open,
+.sds-colorpicker__trigger:focus-visible {
+  border-color: var(--color-primary-50-solid);
+}
+.sds-colorpicker__trigger--open,
+.sds-colorpicker__trigger:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+.sds-colorpicker__swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+  border: 1px solid var(--border-interactive-color);
+}
+.sds-colorpicker__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-0-5);
+  min-width: 0;
+}
+.sds-colorpicker__hex {
+  font-size: var(--font-size-body-md);
+  line-height: var(--lh-body-md);
+  color: var(--body-color);
+  font-weight: var(--font-weight-medium);
+}
+/* ── Panel ── */
+.sds-colorpicker__panel {
+  width: 280px;
+  background: var(--component-bg-color);
+  border: 1px solid var(--border-interactive-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-drop-md);
+  padding: var(--spacing-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  box-sizing: border-box;
+}
+/* ── Color canvas ── */
+.sds-colorpicker__canvas {
+  position: relative;
+  width: 100%;
+  height: 160px;
+  border-radius: var(--radius-sm);
+  cursor: crosshair;
+  background:
+    linear-gradient(to right, var(--color-white), transparent),
+    linear-gradient(to bottom, transparent, var(--color-black)),
+    hsl(var(--cp-hue, 0), 100%, 50%);
+  user-select: none;
+}
+.sds-colorpicker__handle {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid var(--color-white);
+  box-shadow: 0 1px 4px var(--color-opacity-40);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+/* ── Slider row: IconButton + stacked sliders ── */
+.sds-colorpicker__slider-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4); /* 16px between eyedropper and sliders */
+}
+/* ── Stacked sliders column ── */
+.sds-colorpicker__sliders {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  flex: 1;
+}
+/* ── Individual slider ── */
+.sds-colorpicker__slider {
+  position: relative;
+  width: 100%;
+  height: 12px;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  user-select: none;
+}
+.sds-colorpicker__slider--hue {
+  background: linear-gradient(to right,
+    hsl(0, 100%, 50%), hsl(30, 100%, 50%), hsl(60, 100%, 50%),
+    hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%),
+    hsl(300, 100%, 50%), hsl(360, 100%, 50%)
+  );
+}
+.sds-colorpicker__slider--opacity {
+  background:
+    linear-gradient(to right, transparent, var(--cp-hex, var(--color-neutral-50))),
+    repeating-conic-gradient(var(--color-neutral-30) 0% 25%, var(--component-bg-color) 0% 50%) 0 0 / 8px 8px;
+}
+.sds-colorpicker__slider-thumb {
+  position: absolute;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--color-white);
+  border: 2px solid var(--color-white);
+  box-shadow: 0 1px 4px var(--color-opacity-30);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+/* ── R G B [A] inputs ── */
+.sds-colorpicker__input-group {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-1);
+}
+.sds-colorpicker__input-group--rgba {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+/* Divergence: the fields inside these groups carry a tighter horizontal padding than a
+   field anywhere else.
+
+   A field is 16px in from each edge, which is right when it is the width of a form and
+   wrong here: four of them share a 254px panel, so each is 61px wide and 32 of those are
+   padding. "128" did not fit — measured, it rendered as "12" and a clipped glyph. KDLS
+   has the same four columns at the same width and the same clipping.
+
+   The value is what this control exists to show, so the padding gives way to it. */
+.sds-colorpicker__input-group .sds-input,
+.sds-colorpicker__panel > .sds-input-box .sds-input {
+  padding-left: var(--spacing-2);
+  padding-right: var(--spacing-2);
+}
+/* ── Apply button ── */
+.sds-colorpicker__apply {
+  width: 100%;
+}
+
+/* The trigger is a <button>, which brings the browser's own control chrome. KDLS uses a
+   div with role="button" and does not need this — and cannot be opened by keyboard.
+
+   It resets only what the browser supplies and the design does not: the system font, the
+   centred text, the inherited colour. It must NOT reset border or background, which the
+   rule above sets on purpose — `button.sds-…` outranks `.sds-…`, so `border: 0` here beat
+   the 1px stroke that makes this read as a field, and the trigger rendered with no outline
+   at all. The same mistake was made once before, in the Select's options, and the rule
+   that came out of it is this: a chrome reset names the properties the design is silent
+   about, and nothing else. */
+button.sds-colorpicker__trigger {
+  appearance: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+button.sds-colorpicker__trigger:disabled {
+  cursor: not-allowed;
+}
+
+/* The canvas and the sliders take focus now, so they have to show it. */
+.sds-colorpicker__canvas:focus-visible,
+.sds-colorpicker__slider:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-stroke-color);
+  outline-offset: 2px;
+}
+
+/* ── Overlay ──
+   The panel centred over the page rather than anchored to its trigger. Used where
+   anchoring cannot work: inside another panel, where it would land on top of the panel it
+   came from, and on a phone, where there is no room beside a trigger. */
+.sds-colorpicker__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-4);
+  /* The scrim the Modal uses, and its dark-theme twin: --color-opacity-* inverts, so a
+     backdrop written with it goes white on a dark page. */
+  background: var(--color-opacity-50);
+  overflow-y: auto;
+}
+
+[data-theme="dark"] .sds-colorpicker__backdrop {
+  background: var(--color-scrim);
+}
+
+/* Driven entirely from outside, with no trigger of its own: the root still has to be in
+   the tree — it is what holds the overlay — but it must not take up a line while the
+   overlay is closed. `display: contents` leaves the element addressable and gives its box
+   away. */
+.sds-colorpicker--headless {
+  display: contents;
+}

package/components/ColorPicker/color-maths.js

@@ -0,0 +1,104 @@
+/**
+ * Colour conversions.
+ *
+ * Ported verbatim in behaviour from kdls-design-system v2.5.1 (0f3edf8)
+ * components/ColorPicker/ColorPicker.tsx, where the six functions sit at module scope.
+ * Pulled into their own file because they are pure, because a round trip through HSV and
+ * back is exactly the kind of arithmetic that drifts by one, and because the picker's
+ * default colour was Kenlo blue written as three numbers — a brand value in a file that is
+ * supposed to carry none.
+ */
+
+/** KDLS falls back to [41, 142, 230] — #298EE6, Kenlo blue. SDS has no brand to fall back
+ *  to, so an unreadable value starts the picker at the middle of the neutral ramp: a
+ *  colour with no opinion, which is what a picker with no value should show. */
+export const FALLBACK_RGB = [128, 128, 128];
+
+export function hsvToRgb(h, s, v) {
+  h /= 360; s /= 100; v /= 100;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  const i = Math.floor(h * 6);
+  const f = h * 6 - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  switch (i % 6) {
+    case 0: r = v; g = t; b = p; break;
+    case 1: r = q; g = v; b = p; break;
+    case 2: r = p; g = v; b = t; break;
+    case 3: r = p; g = q; b = v; break;
+    case 4: r = t; g = p; b = v; break;
+    case 5: r = v; g = p; b = q; break;
+    default: break;
+  }
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+
+export function rgbToHex(r, g, b) {
+  return `#${[r, g, b].map((x) => x.toString(16).padStart(2, '0').toUpperCase()).join('')}`;
+}
+
+export function hexToRgb(hex) {
+  if (typeof hex !== 'string') return null;
+  const clean = hex.replace('#', '');
+  if (clean.length !== 6 && clean.length !== 8) return null;
+  // parseInt stops at the first bad character and returns what it read, so "gggggg" would
+  // pass a NaN check on a prefix. The shape is checked before the value.
+  if (!/^[0-9a-f]+$/i.test(clean)) return null;
+  const n = parseInt(clean.slice(0, 6), 16);
+  if (Number.isNaN(n)) return null;
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+/** The alpha of an 8-digit hex, as a percentage. Null when there is none to read. */
+export function hexToAlpha(hex) {
+  if (typeof hex !== 'string') return null;
+  const clean = hex.replace('#', '');
+  if (clean.length !== 8) return null;
+  if (!/^[0-9a-f]+$/i.test(clean)) return null;
+  const a = parseInt(clean.slice(6, 8), 16);
+  return Number.isNaN(a) ? null : Math.round((a / 255) * 100);
+}
+
+export function alphaToHex(opacity) {
+  return Math.round((opacity / 100) * 255).toString(16).padStart(2, '0').toUpperCase();
+}
+
+export function rgbToHsv(r, g, b) {
+  r /= 255; g /= 255; b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  let h = 0;
+  const s = max === 0 ? 0 : d / max;
+  const v = max;
+  if (max !== min) {
+    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g) h = ((b - r) / d + 2) / 6;
+    else h = ((r - g) / d + 4) / 6;
+  }
+  // Unrounded, on purpose.
+  //
+  // Saturation and value used to be rounded to whole percents here, and the picker keeps
+  // its colour as HSV — so every RGB value made a round trip through a 0–100 integer that
+  // has nowhere near the resolution of 0–255. Measured: 118 of the 256 possible values of
+  // one channel came back different, each off by one. Typing 200 into the R field gave
+  // 199, and the field appeared to fight whoever was typing in it.
+  //
+  // Nobody had seen it because the R, G, B and HEX fields were inert until this commit:
+  // they were wired to an `onInput` prop that `sds-input` does not accept.
+  //
+  // Rounding belongs where a number is shown, not where it is stored.
+  return [h * 360, s * 100, v * 100];
+}
+
+/** The hex a picker should open on, given whatever it was handed. */
+export function startingRgb(value) {
+  return hexToRgb(value ?? '') ?? [...FALLBACK_RGB];
+}
+
+export function startingAlpha(value) {
+  return hexToAlpha(value ?? '') ?? 100;
+}