Here’s a simple trick for getting more people to read what you write: write in spoken language.

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.