# Logs and diffs What a job printed, line by line as it runs, and what changed between two versions of a text - a template, a setting, a translation. ## A log `pre class="log"` sets a job's output in the monospace font, wraps its long lines and scrolls in its own box once a `max-h-*` utility caps its height - give it `tabindex="0"` then, so the keyboard scrolls it too. A line in a `span` with `data-tone` - `success`, `warning`, `danger`, `info` or `muted` - takes that tone; the words still say what happened. With `data-follow` the end stays in view while lines come in, as in a terminal, unless the reader scrolled up to read an earlier one; back at the end, it follows again. ```html

09:14:02 Import started: excursions.csv, 128 rows
09:14:02 Columns: title, price, date, seats, language
09:14:02 Row 1-20 read
09:14:02 Row 21-40 read
09:14:03 Row 41: no price, set to 0
09:14:03 Row 42-60 read
09:14:03 Row 61-90 read
09:14:04 Row 91: the date 2026-02-30 does not exist, skipped
09:14:04 Row 92-128 read
09:14:05 127 excursions imported, 1 skipped

``` ## A diff `div class="diff"` holds one element a line: an `ins` is a line added, marked "+" and tinted green, a `del` a line taken away, "-" and red, anything else a line kept. In a kept line, `del` and `ins` show the words changed inside it, side by side. It scrolls in its own box past 25rem, a `max-h-*` utility sets another height, and it prints in full; one that may scroll takes `tabindex="0"` and a name, so a keyboard reaches it. Lines of code carry `translate="no"`, so a page's translator leaves them as they are, and a log or a diff of code is `dir="ltr"` on a right-to-left page; a diff of Arabic words keeps the page's direction. ```html

<header class="vstack gap-8"> ~~<h1>North Bay by speedboat</h1>~~ <h1>North Bay marine park by speedboat</h1> <p>A day among ~~forty~~forty-two islands.</p> </header>

``` ## Accessibility - A log that scrolls is focusable and named, so a keyboard reaches it and a screen reader says what it is. A log the person waits on may be `role="log"`, a live region that says new lines politely; one that prints many lines a second says a summary instead. - A diff says its changes in its signs and its words, not in its colors: a screen reader reads "+" and "-" before a line, and in forced colors an added word is underlined and a removed one struck through. ## Tokens From [`css/components/log.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/log.css), which declares no custom property of its own. It reads the theme's `--redz-border`, `--redz-radius-8`, `--redz-text`, `--redz-font-mono`, `--redz-fs-12`, `--redz-lh-20`, `--redz-space-8`, `--redz-space-12`, `--redz-bg-page`, `--redz-success`, `--redz-warning`, `--redz-danger`, `--redz-info`, `--redz-text-muted`, `--redz-bg`, `--redz-success-subtle`, `--redz-danger-subtle`.