Skip to content
FoundryFoundry — home
Search

Migration mapping

Old concepts mapped to new ones, with a note on what genuinely changes.

SaaSstartercomparisonmigrationmappingupgrade

Live preview

full widthLive preview — open it in a new tab for the full-height version.
Open the preview in a new tab

Source

This exact file renders the preview above.

import { ArrowRight } from 'lucide-react'
import { Container } from '@/components/ui/layout'
import { Badge } from '@/components/ui/badge'

/**
 * Migration path comparison
 *
 * Maps concepts from a previous system to their equivalents here, with a note
 * on what genuinely changes. A migration table that only lists renames is
 * useless; the third column is what people actually read.
 */
const mappings = [
  {
    from: 'ThemeProvider with a nested config object',
    to: 'CSS custom properties on `<html>`',
    note: 'No provider to nest; any subtree can override the theme.',
  },
  {
    from: '`size="sm" | "md" | "lg"` on every component',
    to: 'Density axis plus a per-component `size`',
    note: 'Density handles global rhythm; size stays for genuine exceptions.',
  },
  {
    from: 'Dark mode via a colour filter',
    to: 'An authored dark scheme',
    note: 'Surfaces and ink are defined separately, not derived.',
  },
  {
    from: '`variant` strings duplicated per component',
    to: 'One `variants()` resolver',
    note: 'Typed variant keys, so a typo is a compile error.',
  },
  {
    from: 'Docs written alongside components',
    to: 'Docs generated from the component file',
    note: 'A test fails when the shown source and the real file diverge.',
  },
]

export default function MigrationPathComparison() {
  return (
    <section className="border-b border-line bg-canvas py-section">
      <Container>
        <div className="max-w-2xl">
          <Badge tone="accent">Migrating</Badge>
          <h2 className="display-type mt-4 text-2xl font-semibold text-ink-strong sm:text-3xl">
            What maps across, and what genuinely changes.
          </h2>
          <p className="mt-3 text-md text-ink-muted">
            Most concepts survive a migration. The third column is the part worth reading.
          </p>
        </div>

        <ul className="mt-10 flex flex-col gap-3">
          {mappings.map((mapping) => (
            <li
              key={mapping.from}
              className="grid gap-3 rounded-xl border border-line bg-surface p-5 lg:grid-cols-[1fr_auto_1fr_1.2fr] lg:items-center lg:gap-6"
            >
              <span className="text-sm text-ink-muted line-through decoration-line-strong">
                {mapping.from}
              </span>
              <ArrowRight
                className="hidden size-4 shrink-0 text-ink-subtle lg:block"
                aria-hidden="true"
              />
              <span className="text-sm font-medium text-ink-strong">{mapping.to}</span>
              <span className="border-t border-line-subtle pt-3 text-xs text-ink-muted lg:border-t-0 lg:border-l lg:pt-0 lg:pl-6">
                {mapping.note}
              </span>
            </li>
          ))}
        </ul>
      </Container>
    </section>
  )
}

components/blocks/sections/comparison/migration-path.tsx

import { ArrowRight } from 'lucide-react'
import { Container } from '@/components/ui/layout'
import { Badge } from '@/components/ui/badge'

/**
 * Migration path comparison
 *
 * Maps concepts from a previous system to their equivalents here, with a note
 * on what genuinely changes. A migration table that only lists renames is
 * useless; the third column is what people actually read.
 */
const mappings = [
  {
    from: 'ThemeProvider with a nested config object',
    to: 'CSS custom properties on `<html>`',
    note: 'No provider to nest; any subtree can override the theme.',
  },
  {
    from: '`size="sm" | "md" | "lg"` on every component',
    to: 'Density axis plus a per-component `size`',
    note: 'Density handles global rhythm; size stays for genuine exceptions.',
  },
  {
    from: 'Dark mode via a colour filter',
    to: 'An authored dark scheme',
    note: 'Surfaces and ink are defined separately, not derived.',
  },
  {
    from: '`variant` strings duplicated per component',
    to: 'One `variants()` resolver',
    note: 'Typed variant keys, so a typo is a compile error.',
  },
  {
    from: 'Docs written alongside components',
    to: 'Docs generated from the component file',
    note: 'A test fails when the shown source and the real file diverge.',
  },
]

export default function MigrationPathComparison() {
  return (
    <section className="border-b border-line bg-canvas py-section">
      <Container>
        <div className="max-w-2xl">
          <Badge tone="accent">Migrating</Badge>
          <h2 className="display-type mt-4 text-2xl font-semibold text-ink-strong sm:text-3xl">
            What maps across, and what genuinely changes.
          </h2>
          <p className="mt-3 text-md text-ink-muted">
            Most concepts survive a migration. The third column is the part worth reading.
          </p>
        </div>

        <ul className="mt-10 flex flex-col gap-3">
          {mappings.map((mapping) => (
            <li
              key={mapping.from}
              className="grid gap-3 rounded-xl border border-line bg-surface p-5 lg:grid-cols-[1fr_auto_1fr_1.2fr] lg:items-center lg:gap-6"
            >
              <span className="text-sm text-ink-muted line-through decoration-line-strong">
                {mapping.from}
              </span>
              <ArrowRight
                className="hidden size-4 shrink-0 text-ink-subtle lg:block"
                aria-hidden="true"
              />
              <span className="text-sm font-medium text-ink-strong">{mapping.to}</span>
              <span className="border-t border-line-subtle pt-3 text-xs text-ink-muted lg:border-t-0 lg:border-l lg:pt-0 lg:pl-6">
                {mapping.note}
              </span>
            </li>
          ))}
        </ul>
      </Container>
    </section>
  )
}

components/ui/badge.tsx

import type { HTMLAttributes, ReactNode } from 'react'
import { variants } from '@/lib/variants'

/**
 * Badge
 *
 * A compact, non-interactive label. Tones map to the status token trios, and
 * because a badge is often the only signal in a dense table, the `dot` option
 * exists to add a second, colour-independent cue alongside the text.
 */
const badgeVariants = variants('inline-flex items-center gap-1.5 whitespace-nowrap font-medium', {
  variants: {
    tone: {
      neutral: 'bg-surface-sunken text-ink-muted border-line',
      accent: 'bg-accent-soft text-accent-soft-ink border-accent-line',
      success: 'bg-success-soft text-success border-success-line',
      warning: 'bg-warning-soft text-warning border-warning-line',
      danger: 'bg-danger-soft text-danger border-danger-line',
      info: 'bg-info-soft text-info border-info-line',
      inverse: 'bg-surface-inverse text-ink-inverse border-transparent',
    },
    appearance: {
      soft: 'border',
      outline: 'border bg-transparent',
      solid: 'border border-transparent',
    },
    size: {
      sm: 'h-4.5 rounded-sm px-1.5 text-2xs',
      md: 'h-5.5 rounded-sm px-2 text-xs',
    },
  },
  defaultVariants: { tone: 'neutral', appearance: 'soft', size: 'md' },
  compound: [
    { appearance: 'solid', tone: 'accent', class: 'bg-accent text-accent-ink' },
    { appearance: 'solid', tone: 'success', class: 'bg-success text-white' },
    { appearance: 'solid', tone: 'warning', class: 'bg-warning text-white' },
    { appearance: 'solid', tone: 'danger', class: 'bg-danger text-white' },
    { appearance: 'solid', tone: 'info', class: 'bg-info text-white' },
    { appearance: 'solid', tone: 'neutral', class: 'bg-ink text-ink-inverse' },
    { appearance: 'outline', tone: 'neutral', class: 'text-ink-muted' },
  ],
})

export type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'inverse'

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  tone?: BadgeTone
  appearance?: 'soft' | 'outline' | 'solid'
  size?: 'sm' | 'md'
  /** Adds a leading dot so the badge does not rely on hue alone. */
  dot?: boolean
  icon?: ReactNode
}

export function Badge({
  tone = 'neutral',
  appearance = 'soft',
  size = 'md',
  dot = false,
  icon,
  className,
  children,
  ...props
}: BadgeProps) {
  return (
    <span className={badgeVariants({ tone, appearance, size, className })} {...props}>
      {dot ? (
        <span className="size-1.5 shrink-0 rounded-full bg-current" aria-hidden="true" />
      ) : null}
      {icon}
      {children}
    </span>
  )
}

Demo source — adapt to your project. Foundry is not published as a package.

Usage

A migration table that only lists renames is useless. The third column — what genuinely changes — is the part people actually read.

  • Strike through the old concept so the direction of the mapping is unambiguous.
  • Be honest when a concept has no equivalent; omitting it does not make it go away.

Variants and states

Every entry below is a genuine difference in behaviour or layout, and every one of them is visible in the preview above.

  • Four-column rows
  • Struck-through old concept
  • What-changes note

Accessibility

Direction
The arrow is decorative; the strike-through and column order carry the meaning.
Reflow
Rows become stacked blocks below lg with the note separated by a rule.

Foundry implements published ARIA patterns and is tested against them. No WCAG certification is claimed — see the accessibility documentation for what is and is not covered.

Related

All sections