Software development is changing and we find ourselves at a convergence. Between the extremes of technological zealotry (“all code will be AI-generated”) and dismissive skepticism (“AI-generated code is garbage”) lies a more practical and nuanced approach—one that is ours to discover together.

Theme your Clerk components directly from your CSS files where your design tokens live – no more CSS-in-JS required.

:root {
  --clerk-color-primary: #6d47ff;
}

We learned from our own experience: the variables appearance option had limited adoption because it was hard to integrate with existing design systems. Even we had to use workarounds with elements prop + Tailwind classes in our dashboard.

Now you can theme components where your tokens are already defined. Plus we’ve improved variable naming and added new ones like colorRing, colorMuted, and colorShadow for more flexible theming.

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" />