# `FrappeUIPhx.Foundations`
[🔗](https://github.com/moacirbishopcamata/frappe_ui_phx/blob/v0.3.1/lib/frappe_ui_phx/foundations.ex#L1)

Fundamentos visuais do Frappe UI (cores, tipografia, raios, sombras, anel de
foco e cores de gráficos) como **dados**, lidos de `priv/foundations.json`, que
`mix tokens.sync` gera da mesma fonte dos tokens do CSS. Alimenta as páginas de
Fundamentos do mostruário e serve de referência em código (ex.: listar tokens).

# `chart_colors`

```elixir
@spec chart_colors() :: [
  %{index: non_neg_integer(), family: String.t(), color: String.t()}
]
```

Cores das séries dos gráficos, na ordem de uso: `[%{index, family, color}]`.

# `color_categories`

Categorias semânticas na ordem de exibição.

# `color_class`

```elixir
@spec color_class(String.t(), String.t(), :bg | :text | :border) :: String.t()
```

Classe do token de cor para uso em HTML (`"surface"`, `"gray-2"` → `bg-surface-gray-2`).

# `color_var`

```elixir
@spec color_var(String.t(), String.t()) :: String.t()
```

Variável CSS do token semântico.

# `colors`

```elixir
@spec colors() :: %{required(String.t()) => [map()]}
```

Tokens semânticos por categoria: `%{"surface" => [%{name, light, dark}]}`.

# `focus_rings`

Anéis de foco: `[%{name, value}]` (valor da `outline` em tema claro).

# `font_family`

Família de fonte do texto.

# `font_weights`

Pesos: `[%{name, value}]`.

# `radius`

Escala de raios: `[%{name, value}]`.

# `ramps`

Rampas primitivas por família: `%{"gray" => [%{shade, value}]}`.

# `section`

Seção por `id` ou `nil`.

# `sections`

Seções dos Fundamentos: `[%{id, title, summary}]`.

# `shadows`

Sombras de elevação: `[%{name, value}]` (sem `DEFAULT`).

# `type_scale`

Escala tipográfica: `[%{name, size, lineHeight, letterSpacing, weight, paragraph}]`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*