Skip to content

Alex Carpenter

Staff UI Engineer at Clerk

Grand Rapids, MI.

Notes on engineering, developer experience, design systems, and agentic engineering.

Page 4

  • Had a quick chat with Hamed about the recent work we have done to improve the customization of Clerk UI components. Watch it on YouTube.

  • Your component library ships bundled CSS via CSS-in-JS. You want folks to opt in to being able to toggle between light/dark mode but you don’t know how they are handling toggling between light/dark.

    Use CSS var toggle hack?

    /* Component library styles */
:root {
  --dark-mode: ;
}

button {
  padding: 1rem;
  background-color: var(--dark-mode, white) black;
  color: var(--dark-mode, black) white;
}

/* User styles turn on dark mode */
.dark {
  --dark-mode: initial;
}

@media (prefers-color-scheme: dark) {
  :root {
    --dark-mode: initial;
  }
}

    This gives the user the ability to enable dark mode based on how they have their app configured. @⁠media query, class, data-attr, etc.

    They can even be very targeted on which components this is enabled for.

  • Agentic Engineering

    zed.dev

    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.

  • Clerk CSS variables are now available!

    clerk.com

    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.

  • 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)",
    },
  }}
/>

  • Tiny polyfill for CSS scroll driven animations

    x.com/devongovett 

    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

    www.totaltypescript.com

    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