A comprehensive color library for JavaScript.

JS color calculator for composing colors with consistent APCA contrast ratio.

JS library to improve keyboard UI of web apps

Working on some updates to make it easier to theme Clerk components from your existing CSS variables.

Generating a color palette using relative color syntax and color-mix.

:root {
  --brand-color: oklch(49.1% 0.27 292.581);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-color: oklch(54.1% 0.281 293.009);
  }
}

<ClerkProvider
  appearance={{
    variables: {
      colorPrimary: "var(--brand-color)",
    },
  }}
/>

type Cat = { kind: 'cat' }
type Dog = { kind: 'dog' }
type Pet = Cat | Dog

function example(pet: Pet) {
  switch (pet.kind) {
    case: 'cat':
      return ...
    case: 'dog'
      return ...
    default:
      pet satisfies never
  }
}

let animationRange = [0, 62];

if (!CSS.supports("(animation-timeline: scroll())")) {
  let [start, end] = animationRange;
  let animations = header.getAnimations();
  let onScroll = () => {
    // Calculate animation time based on percentage of animationRange * duration.
    let time =
      Math.max(0, Math.min(end, window.scrollY - start) / (end - start)) * 1000;
    for (let animation of animations) {
      animation.currentTime = time;
    }
  };

  window.addEventListener("scroll", onScroll, { passive: true });
}

The Prettify helper is a utility type that takes an object type and makes the hover overlay more readable.

type Prettify<T> = {
  [K in keyof T]: T[K];
} & {};

Automatic foreground color contrast based on the provided background color.

button {
  --background: black;
  --foreground: color(
    from var(--background) xyz round(up, min(1, max(0, 0.18 - y)))
      round(up, min(1, max(0, 0.18 - y))) round(up, min(1, max(0, 0.18 - y)))
  );

  background-color: var(--background);
  color: var(--foreground);
}

via blog.damato.design

Harmonizer is a tool for generating accessible, consistent color palettes for user interfaces. Using the OKLCH color model and APCA contrast formula, Harmonizer helps you create color palettes with consistent chroma and contrast across all levels and hues.

it’s never just that simple

Also the companion tailwindcss-spring plugin.

Very nice scroll mask implementation using registered @ properties by Sam Becker.

Not uncommon to see folks add form submit handlers on the submit buttons click event vs on the forms submit handler. The problem is this prevents users from being able to fill out the form and submit it solely from the keyboard.

<form>
  <button onClick={handleSubmit} />
</form>

Instead, apply the handleSubmit function to the form onSubmit handler. This ensures the form can be submitted when the user hits the return key.

<form onSubmit={handleSubmit}>
  <button type="submit" />
</form>

If for whatever reason your button needs to live outside of the form element, likely in a dialog situation, you can ensure the same functionality by passing the forms id to the button via the form attribute as shown below.

<form id="contactForm" onSubmit={handleSubmit}>
</form>
<button form="contactForm" type="submit" />

Quick little improvement for wrapping highlighted text. Make use of box-decoration-break: clone; to ensure elements fragments break across lines.

mark {
  box-decoration-break: clone;
}

View demo on Twitter.

Quick little improvement for elements that render dark even in light mode and have overflow, force the color-scheme to dark to blend the native form controls a bit better.

pre {
  color-scheme: dark;
}

View demo on Twitter.