---
title: 'Albersdown: Getting started'
name: getting-started
description: Theme + vignette kit demonstration
output:
  rmarkdown::html_vignette:
    toc: yes
    toc_depth: 2
    css: albers.css
    includes:
      in_header: albers-header.html
params:
  family: red
  preset: homage
resource_files:
- albers.css
- albers.js
- albers-header.html

vignette: |
  %\VignetteIndexEntry{Albersdown: Getting started}
  %\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.618, message = FALSE, warning = FALSE
)
set.seed(123)
oldopt <- options(pillar.sigfig = 7, width = 80)
library(ggplot2)
if (requireNamespace("ragg", quietly = TRUE)) knitr::opts_chunk$set(dev = "ragg_png")
if (
  requireNamespace("systemfonts", quietly = TRUE) &&
  requireNamespace("albersdown", quietly = TRUE) &&
  "albers_register_fonts" %in% getNamespaceExports("albersdown")
) {
  albersdown::albers_register_fonts()
}
if (requireNamespace("albersdown", quietly = TRUE)) {
  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
))
```



## Overview

This vignette shows how the shared theme and vignette CSS work together. Links and focus rings use the family’s accessible tone; callouts and stripes use a quiet tint.

<div class="albers-plate" aria-hidden="true">
  <div class="albers-plate__outer"></div>
  <div class="albers-plate__inner"></div>
  <div class="albers-plate__core"></div>
</div>

## New feature highlights

- Design tokens + contrast guardrails: see `vignette("design-notes")`, section `#whats-new` and `#contrast-guardrails`.
- Generative composition motif + semantic callouts: see `vignette("design-notes")`, sections `#whats-new` and `#semantic-callouts`.
- Interactive visual tuning (family/preset/style/width): see `vignette("theme-lab")`.
- Dark + non-red accent gallery: see `vignette("theme-showcase")`.

## Code + output

```{r}
summary(mtcars$mpg)
```

```{r}
mtcars |>
  ggplot(aes(wt, mpg, color = factor(cyl))) +
  geom_point(size = 2.2) +
  labs(title = "Fuel efficiency vs. weight",
       subtitle = "Albers theme demo", x = "Weight (1000 lbs)", y = "MPG")
```

```{r cleanup, include=FALSE}
options(oldopt)
if (exists("oldtheme")) ggplot2::theme_set(oldtheme)
```