@happnest/core

The one-line idea

Three views of the same component, three sets of CSS variables — without any conditional code in core.

Architecture

The crucial split: legacy globals.css stays (admin + enterprise depend on it), components.css is added (the new recipe layer).

The public contract

The complete list of CSS variables every refactored component reads. Consumers must provide all of them; sane fallbacks ship inside components.css.

Surfaces · 6 tokens

Accent · 3 tokens

Status · 4 × 3 tokens

Geometry · 4 + 3 tokens

In total: ~30 variables. No --ds-* prefix; the names already match what client + webcheckin adopted. In-between shades come from color-mix() at recipe time — no more --primary-50…900 scale.

The redo, side by side

The same Button component, before and after. Every refactored component follows the same five hard rules.

The recipe

/* src/styles/components.css — the new home for component styles */
.core-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color var(--motion-base);
}
.core-btn--primary {
  background: hsl(var(--accent));
  color: hsl(var(--accent-fg));
}
.core-btn--primary:hover {
  background: color-mix(in srgb, hsl(var(--accent)) 88%, black);
}
.core-btn--ghost {
  background: transparent;
  color: hsl(var(--ink));
}
.core-btn--ghost:hover {
  background: color-mix(in srgb, hsl(var(--ink)) 6%, transparent);
}
.core-btn--sm { min-height: 36px; padding: 0 0.75rem; }
.core-btn--lg { min-height: 44px; padding: 0 1.25rem; }

Button.tsx

// packages/core/src/components/Button.tsx
return (
  <button
    className={clsx(
      "inline-flex items-center justify-center",
      "h-10 px-4 rounded-md font-medium",
      variant === "primary" &&
        "bg-primary-600 hover:bg-primary-700 text-white",
      variant === "ghost" &&
        "bg-transparent hover:bg-gray-100 text-gray-900",
      variant === "danger" &&
        "bg-red-600 hover:bg-red-700 text-white",
      size === "sm" && "h-9 px-3 text-sm",
      size === "lg" && "h-11 px-5 text-base",
    )}
    {...props}
  />
);

// packages/core/src/components/Button.tsx
return (
  <button
    className={clsx(
      "core-btn",
      `core-btn--${variant}`,
      size !== "md" && `core-btn--${size}`,
      className,
    )}
    aria-busy={loading || undefined}
    {...props}
  />
);
// — Public API unchanged: variant, size, loading, ref, displayName.
// — Colors now come from consumer's --accent etc.
// — No hex, no Tailwind utilities for color/radius/font.

The plan, walked through

From packages/core/DESIGN_SYSTEM_REFACTOR_PLAN.md. None of these steps have been executed yet — the plan is the artifact.

Things to not do