---
title: 'Theme Showcase: Directions and Families'
name: theme-showcase
description: The two albersdown directions and the six colour families, side by side.
output:
  rmarkdown::html_vignette:
    toc: yes
    toc_depth: 2
    css: albers.css
    includes:
      in_header: albers-header.html
params:
  family: red
  preset: homage
  base_size: 13
  content_width: 80
  style: minimal
resource_files:
- albers.css
- albers.js
- albers-header.html

vignette: |
  %\VignetteIndexEntry{Theme Showcase: Directions and Families}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(
  collapse = TRUE, comment = "#>", fig.align = "center", fig.retina = 2,
  out.width = "100%", fig.width = 7, fig.asp = 0.6, message = FALSE, warning = FALSE
)
library(ggplot2)
if (requireNamespace("ragg", quietly = TRUE)) knitr::opts_chunk$set(dev = "ragg_png")
if (requireNamespace("systemfonts", quietly = TRUE)) albersdown::albers_register_fonts()
if (requireNamespace("ggplot2", quietly = TRUE) && requireNamespace("albersdown", quietly = TRUE)) {
  ggplot2::theme_set(albersdown::theme_albers(family = params$family, preset = params$preset))
}
```

```{r albers-classes, echo=FALSE, results='asis'}
cat(sprintf(
  paste0(
    '<script>document.addEventListener("DOMContentLoaded",function(){',
    'document.body.classList.remove("palette-red","palette-lapis","palette-ochre","palette-teal","palette-green","palette-violet","preset-homage","preset-interaction","preset-study","preset-structural","preset-adobe","preset-midnight");',
    'document.body.classList.add("palette-%s","preset-%s");',
    '});</script>'
  ),
  params$family,
  params$preset
))
```

## The albersdown system

albersdown has two orthogonal axes:

- A **direction** sets the page mood: **homage** (warm cream ground, Newsreader
  serif body, light code blocks) or **interaction** (cool grey ground, all-grotesk
  type, dark code blocks).
- A **family** sets the accent hue used for links, the nested-square marker, and
  plot palettes: `red`, `lapis`, `ochre`, `teal`, `green`, or `violet`.

Any family pairs with either direction. This page is rendered in **homage + red**;
`vignette("getting-started")` shows homage and `vignette("interaction")` shows the
cool direction in full.

## The six families

Each family is a four-tone ramp (A900 → A300). The marker, links, and plot scales
all draw from the active family.

```{r families-swatch, fig.height=2.4}
albersdown::albers_swatch(c("red", "lapis", "ochre", "teal", "green", "violet"))
```

```{r accent-families, fig.height=5.4}
families <- c("red", "lapis", "ochre", "teal", "green", "violet")
accent_a700 <- vapply(families, function(f) albersdown::albers_palette(f)[["A700"]], character(1))

plot_df <- do.call(rbind, lapply(seq_along(families), function(i) {
  d <- mtcars
  d$family <- families[[i]]
  d
}))
plot_df$family <- factor(plot_df$family, levels = families)

ggplot(plot_df, aes(wt, mpg, colour = family)) +
  geom_point(alpha = 0.85, size = 1.7) +
  facet_wrap(~family, ncol = 3) +
  scale_color_manual(values = accent_a700) +
  labs(
    title = "The same data in each family's A700 accent",
    subtitle = "Geometry held constant, only the accent family changes",
    x = "weight", y = "mpg"
  ) +
  theme(legend.position = "none")
```

## The two directions, in plots

`theme_albers()` grounds a plot in the direction you pass, so a figure always sits
on the same surface as its page — warm cream for homage, cool grey for interaction.

```{r homage-plot}
ggplot(mtcars, aes(wt, mpg, colour = factor(cyl))) +
  geom_point(size = 2.2) +
  albersdown::scale_color_albers(family = "red") +
  labs(title = "Homage direction", subtitle = "Warm cream ground, red family", colour = "cyl") +
  albersdown::theme_albers(family = "red", preset = "homage")
```

```{r interaction-plot}
ggplot(mtcars, aes(wt, mpg, colour = factor(cyl))) +
  geom_point(size = 2.2) +
  albersdown::scale_color_albers(family = "lapis") +
  labs(title = "Interaction direction", subtitle = "Cool grey ground, lapis family", colour = "cyl") +
  albersdown::theme_albers(family = "lapis", preset = "interaction")
```

## Picking a combination

```{r recipes-table}
recipes <- data.frame(
  profile = c("homage-red", "homage-teal", "interaction-lapis", "interaction-ochre"),
  family = c("red", "teal", "lapis", "ochre"),
  direction = c("homage", "homage", "interaction", "interaction"),
  mood = c("warm, classic", "warm, calm", "cool, technical", "cool, earthy"),
  stringsAsFactors = FALSE
)
knitr::kable(recipes, format = "html", caption = "A few coherent direction + family pairings.")
```

## Next step

- Use `vignette("theme-lab")` to tune family, direction, style, and width interactively.
- See `vignette("getting-started")` (homage) and `vignette("interaction")` (interaction)
  for full-page examples of each direction.