---
title: "Colour Schemes Reference"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{Colour Schemes Reference}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
resource_files:
  - figures/logo.svg
  - figures/logo-dark.svg
---

<!-- cttir-vignette-logo: start -->
<style>
.cttir-vignette-logo { float: right; width: 120px; max-width: 30%; margin: 0 0 1rem 1.5rem; }
.cttir-vignette-logo img { width: 100%; height: auto; border: 0; background: transparent; box-shadow: none; }
.cttir-vignette-logo .cttir-vignette-logo-light { display: block; }
.cttir-vignette-logo .cttir-vignette-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .cttir-vignette-logo .cttir-vignette-logo-light { display: none; }
  .cttir-vignette-logo .cttir-vignette-logo-dark { display: block; }
}
[data-bs-theme="light"] .cttir-vignette-logo .cttir-vignette-logo-light { display: block; }
[data-bs-theme="light"] .cttir-vignette-logo .cttir-vignette-logo-dark { display: none; }
[data-bs-theme="dark"] .cttir-vignette-logo .cttir-vignette-logo-light { display: none; }
[data-bs-theme="dark"] .cttir-vignette-logo .cttir-vignette-logo-dark { display: block; }
</style>
<div class="cttir-vignette-logo">
  <img class="cttir-vignette-logo-light" src="figures/logo.svg" alt="reflowR logo" width="120" height="139" />
  <img class="cttir-vignette-logo-dark" src="figures/logo-dark.svg" alt="reflowR logo" width="120" height="139" />
</div>
<!-- cttir-vignette-logo: end -->

<!-- badges: start -->
[![R-CMD-check](https://github.com/CTTIR/reflowR/actions/workflows/R-CMD-check.yaml/badge.svg)](https://github.com/CTTIR/reflowR/actions/workflows/R-CMD-check.yaml)
[![pkgdown](https://github.com/CTTIR/reflowR/actions/workflows/pkgdown.yaml/badge.svg)](https://cttir.github.io/reflowR/)
[![Codecov test coverage](https://codecov.io/gh/CTTIR/reflowR/branch/main/graph/badge.svg)](https://app.codecov.io/gh/CTTIR/reflowR?branch=main)
[![License: MIT](https://img.shields.io/badge/license-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Lifecycle: experimental](https://img.shields.io/badge/lifecycle-experimental-orange.svg)](https://lifecycle.r-lib.org/articles/stages.html#experimental)
<!-- badges: end -->

```{r, include = FALSE}
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>",
  eval = FALSE
)
```

## CTTIR v5 families

reflowR schemes are the nine topic families of the CTTIR v5 design language,
the same set used by hexmakR artwork and the themakR documentation template.
Every colour and font comes from `design_tokens.csv`, shipped with the package
in `inst/cttir/`. Colour supports identity; text, headings and links always
use neutral tokens.

```{r swatches, echo = FALSE, eval = TRUE, message = FALSE, results = "asis"}
library(reflowR)
families <- suppressMessages(reflow_schemes())
chip <- function(colour) sprintf(
  '<span style="display:inline-block;width:1.4em;height:1.4em;vertical-align:middle;background:%s;border:1px solid #D8D8D8;border-radius:3px"></span> <code>%s</code>',
  colour, colour)
rows <- vapply(families, function(f) {
  s <- reflow_scheme(f)
  sprintf('<tr><td><img src="%s" alt="" height="28"></td><td><code>%s</code></td><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>',
          reflow_icon_base64(f), f, s$label, chip(s$accent), chip(s$face_light), chip(s$face_dark))
}, character(1))
cat('<table><thead><tr><th></th><th>Key</th><th>Label</th><th>Accent</th>',
    '<th>Face, light</th><th>Face, dark</th></tr></thead><tbody>',
    rows, '</tbody></table>', sep = "\n")
```

`brand` is the CTTIR default and the default of `reflow_init()`. Pick the
family that best describes the project:

| Context | Family |
|---------|--------|
| Clinical trial, patient data | `clinical` |
| Imaging and spectroscopy | `spectral` |
| Tissue and spatial assays | `spatial` |
| Sequencing and molecular profiles | `omics` |
| Statistical or machine-learning methods | `methods` |
| Simulation and systems models | `simulation` |
| Systematic reviews, meta-analyses | `evidence` |
| Software, data and infrastructure | `platform` |
| General purpose | `brand` |

## Earlier scheme names

The five schemes of reflowR 0.1.0 remain accepted. `clinical` keeps its name
and now uses the v5 vermillion; the others are aliases that print a one-time
message:

| Earlier name | v5 family |
|--------------|-----------|
| `basic` | `brand` |
| `code` | `methods` |
| `special` | `evidence` |
| `other` | `platform` |

## Generated site styling

`reflow_init()` writes `analysis/theme.css` (workflowr) and `assets/_theme.scss`
(Quarto report). Both follow the themakR surface:

| Role | Light | Dark |
|------|-------|------|
| Page and flat navbar | `#FAFAFA` | `#212121` |
| Text | `#212121` | `#DADADA` |
| Headings, navbar text | `#212121` | `#FFFFFF` |
| Links | `#1565C0` | `#42A5F5` |
| Code surface | `#E9E9E9` | `#2B2B2B` |
| Borders, h2 rule | `#D8D8D8` | `#4F4F4F` |

Dark mode follows the reader's system setting and can be forced with
`data-bs-theme="dark"` or `body.colorscheme-dark`. The family accent marks only
non-text identity elements: the 3px navbar rule, the h1 underline, active
navigation and table-of-contents markers, callout borders and table header
rules. Pages use the `--cttir-*` custom properties of themakR plus
`--cttir-topic`.

Body text uses `"Inter", system-ui, sans-serif`, code `"JetBrains Mono",
ui-monospace, monospace` and the navbar name JetBrains Mono at weight 600.
Nothing is downloaded: sites without these fonts fall back to system fonts.

## In R code

`code/00_setup.R` provides the same values for figures and tables:

```r
wf_colors$primary   # family accent
wf_colors$face      # tinted surface, e.g. facet strips
wf_palette          # Okabe-Ito topic colours, accent first
wf_fonts$body       # "Inter"

ggplot(df, aes(x, y, colour = group)) + geom_point() +
  scale_color_wf() + theme_wf()
```

Inspect or preview a family directly:

```r
reflow_schemes()
s <- reflow_scheme("spatial")
s$accent
s$palette
reflow_preview("spatial")
```