Skip to main content
Graphite UI

Carbon migration

This site began on IBM’s Carbon and is moving off it. Graphite’s components, theme file and theme provider do not use Carbon. Only parts of this site still do.

What still uses Carbon

Eight files import @carbon/react, read from the repo when this page is built.

  • components/carbon-compat.tsx
  • components/sections/capabilities.tsx
  • components/sections/component-wall.tsx
  • components/sections/faq.tsx
  • components/sections/hero.tsx
  • components/sections/site-footer.tsx
  • components/sections/theme-cta.tsx
  • components/sections/two-doors.tsx

Most are home page sections on Carbon’s grid. Carbon also supplies the site’s Sass reset, its IBM Plex font faces, the breakpoint mixin and the icons in the site chrome.

The --cds-* layer

Carbon reads its own variables. The site feeds them from the same theme, so Carbon pieces follow the source color too.

The binding table maps 59 Carbon variables; the page is still reading how many are on this page’s root now, with the values the active theme resolved.

    The plan

    Replace each Carbon piece, then remove the dependency.

    The order and the remaining steps are in docs/SHADCN-MIGRATION.md. Removing Carbon turns CI red while any breakpoint mixin call remains, because token-drift checks Carbon’s breakpoint map against the kit, so the last step cannot be skipped by accident.