@dimah-s3/ui components use CSS variable-based tokens (--color-dimah-s3-*) that map directly to standard shadcn theme tokens by default.

Token mapping

Token	Default Value
`--color-dimah-s3-background`	`var(--background)`
`--color-dimah-s3-foreground`	`var(--foreground)`
`--color-dimah-s3-card`	`var(--card)`
`--color-dimah-s3-primary`	`var(--primary)`
`--color-dimah-s3-primary-foreground`	`var(--primary-foreground)`
`--color-dimah-s3-muted`	`var(--muted)`
`--color-dimah-s3-muted-foreground`	`var(--muted-foreground)`
`--color-dimah-s3-destructive`	`var(--destructive)`
`--color-dimah-s3-border`	`var(--border)`
`--color-dimah-s3-ring`	`var(--ring)`

Customizing colors

To customize styling for dimah-s3 components independently from your global theme, override the tokens in your CSS:

app/globals.css

@import "@dimah-s3/ui/styles.css";

@theme {
  --color-dimah-s3-primary: oklch(0.65 0.15 150);
  --color-dimah-s3-destructive: oklch(0.55 0.2 25);
}