Customization

/* global.css — override once, propagates everywhere */
:root {
  --color-bg-surface-2: #1c1c1e;  /* changes Input, Dropdown, Switch track, etc. */
  --radius-sm: 6px;               /* changes Button, Input, Checkbox, Slider thumb… */
  --color-text-primary: #a78bfa;  /* changes primary Button bg, checked states… */
}

import { cn } from '@forma-studio/components'

// className — always works, specific to one element
<Button.Root variant="primary" className="rounded-full px-8">
  Pill button
</Button.Root>

// Scoped CSS var — overrides a token for this subtree only
<div style={{ '--color-text-primary': '#a78bfa' } as React.CSSProperties}>
  <Button.Root variant="primary">Purple primary</Button.Root>
  <Switch.Root>…</Switch.Root>  {/* also purple */}
</div>

/* ✗ Fragile — breaks if you change the brand color later */
:root { --color-text-primary: #8b5cf6; }

/* ✓ Semantic — one source of truth */
:root {
  --color-brand: #8b5cf6;
  --color-text-primary: var(--color-brand);  /* now everything follows brand */
}

:root {
  /* One override drives: primary Button bg, Checkbox checked state,
     Switch on-track, Slider fill, active Tab indicator, Progress fill */
  --color-text-primary: #8b5cf6;

  /* Pair it: text on primary surfaces */
  --color-text-inverted: #ffffff;
}