# Theme Card

A card component for displaying theme previews. Shows a font preview, color strip, theme name, and an optional default badge.

## Basic usage

```js
<SilkeThemeCard
  name="Brand theme"
  description="All teams"
  primaryColor="rgba(0, 150, 136, 1)"
  secondaryColor="rgba(63, 81, 181, 1)"
  accentColor="rgba(233, 30, 99, 1)"
  bgColor="rgba(255, 255, 255, 1)"
  textColor="rgba(33, 33, 33, 1)"
  baseFont="Lato"
  isDefault
  onClick={() => console.log('clicked')}
/>
```

## Default badge

Use `isDefault` to show a "Default" badge on the selected theme.

```js
<SilkeBox gap="m" wrap>
  <SilkeThemeCard
    name="Brand theme"
    description="Marketing, Design, Sales, +2"
    primaryColor="rgba(0, 150, 136, 1)"
    secondaryColor="rgba(63, 81, 181, 1)"
    accentColor="rgba(233, 30, 99, 1)"
    bgColor="rgba(255, 255, 255, 1)"
    textColor="rgba(33, 33, 33, 1)"
    baseFont="Lato"
    isDefault
  />
  <SilkeThemeCard
    name="Dark theme"
    description="Marketing, Design, Sales, +2"
    primaryColor="rgba(187, 134, 252, 1)"
    secondaryColor="rgba(3, 218, 198, 1)"
    accentColor="rgba(207, 102, 121, 1)"
    bgColor="rgba(18, 18, 18, 1)"
    textColor="rgba(230, 230, 230, 1)"
    baseFont="Inter"
  />
</SilkeBox>
```