> ## Documentation Index
> Fetch the complete documentation index at: https://docs.martan.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Customização

> Personalize os widgets usando CSS variables

Os widgets podem ser customizados usando CSS variables, permitindo que você adapte as cores, espaçamentos e tipografia para combinar com o design da sua loja.

## Variáveis CSS Disponíveis

### Cores

| Variável                  | Descrição                                              |
| ------------------------- | ------------------------------------------------------ |
| `--rw-primary-color`      | Cor primária (botões, links)                           |
| `--rw-text-color`         | Cor do texto principal                                 |
| `--rw-text-secondary`     | Cor do texto secundário                                |
| `--rw-border-color`       | Cor das bordas                                         |
| `--rw-bg-color`           | Cor de fundo                                           |
| `--rw-bg-secondary`       | Cor de fundo secundária                                |
| `--rw-star-color`         | Cor das estrelas preenchidas                           |
| `--rw-star-empty`         | Cor das estrelas vazias                                |
| `--rw-progress-bar-color` | Cor das barras de progresso (distribuição de estrelas) |

### Espaçamentos

| Variável          | Descrição                 |
| ----------------- | ------------------------- |
| `--rw-spacing-xs` | Espaçamento extra pequeno |
| `--rw-spacing-sm` | Espaçamento pequeno       |
| `--rw-spacing-md` | Espaçamento médio         |
| `--rw-spacing-lg` | Espaçamento grande        |
| `--rw-spacing-xl` | Espaçamento extra grande  |

### Tipografia

| Variável              | Descrição                |
| --------------------- | ------------------------ |
| `--rw-font-family`    | Família de fontes        |
| `--rw-font-size-base` | Tamanho de fonte base    |
| `--rw-font-size-sm`   | Tamanho de fonte pequeno |
| `--rw-font-size-lg`   | Tamanho de fonte grande  |

### Outros

| Variável             | Descrição       |
| -------------------- | --------------- |
| `--rw-border-radius` | Raio das bordas |
| `--rw-shadow`        | Sombra padrão   |
| `--rw-shadow-md`     | Sombra média    |

## Exemplo de Customização

```html theme={null}
<style>
  martan-reviews {
    --rw-primary-color: #10b981;
    --rw-star-color: #f59e0b;
    --rw-progress-bar-color: #f59e0b;
    --rw-bg-color: #ffffff;
    --rw-text-color: #1f2937;
    --rw-font-family: 'Arial', sans-serif;
  }

  martan-rating {
    --rw-star-color: #f59e0b;
    --rw-text-color: #1f2937;
    --rw-text-secondary: #6b7280;
  }
</style>
```

## Customização por Widget

Você pode customizar cada widget individualmente:

```html theme={null}
<style>
  /* Customização apenas para o widget de reviews */
  martan-reviews {
    --rw-primary-color: #10b981;
  }

  /* Customização apenas para o widget de rating */
  martan-rating {
    --rw-star-color: #f59e0b;
  }

  /* Customização apenas para o widget de questions */
  martan-questions {
    --rw-primary-color: #3b82f6;
  }
</style>
```

## Customização Global

Para aplicar customizações a todos os widgets:

```html theme={null}
<style>
  :root {
    --rw-primary-color: #10b981;
    --rw-star-color: #f59e0b;
    --rw-text-color: #1f2937;
    --rw-font-family: 'Inter', sans-serif;
  }
</style>
```