@masmarino/gabarit 1.4.0 → 2.1.0

package/select/README.md

@@ -0,0 +1,61 @@
+# Select
+
+Dropdown list, single or multiple selection. Integrated with reactive
+forms and `ngModel`.
+
+**Selector**: `gbt-select`
+
+## Inputs
+
+| Input                | Type                        | Default                    | Role                                                                                                                                                                                                                                                                                                                                                         |
+| -------------------- | --------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `id`                 | `string`                    | generated (`gbt-select-N`) | DOM id, associates the `<label>`.                                                                                                                                                                                                                                                                                                                            |
+| `label`              | `string`                    | `''`                       | Visible label.                                                                                                                                                                                                                                                                                                                                               |
+| `hint`               | `string`                    | `''`                       | Help text under the field, linked to the trigger with `aria-describedby`. Hidden (and unlinked) while an error shows.                                                                                                                                                                                                                                        |
+| `hideLabel`          | `boolean`                   | `false`                    | Hides the label visually; it stays in the DOM and keeps naming the trigger.                                                                                                                                                                                                                                                                                  |
+| `fullWidth`          | `boolean`                   | `false`                    | Stretches the field to the width of its container (the default sizes to the content, 180px minimum).                                                                                                                                                                                                                                                         |
+| `size`               | `'md' \| 'sm'`              | `'md'`                     | The trigger is 38px tall (`md`) or 32px (`sm`, for compact contexts like a table's rows-per-page selector, see `Pagination`): the shared `--gbt-control-height-md` / `-sm` scale, level with `gbt-input` and `gbt-button` of the same tier.                                                                                                                  |
+| `options`            | `SelectOption<T>[]`         | required                   | `{ value, label, icon?, color? }` — the offered options.                                                                                                                                                                                                                                                                                                     |
+| `multiple`           | `boolean`                   | `false`                    | Multiple selection.                                                                                                                                                                                                                                                                                                                                          |
+| `chips`              | `boolean`                   | `false`                    | When `true` together with `multiple`, renders selected options as removable colored chips below the trigger instead of a collapsed count label. Each option's `color` field sets its chip color (a 6-digit hex — see `Tag`); options without one default to a neutral grey. When the field is disabled the chips stay visible but lose their remove buttons. |
+| `placeholder`        | `string`                    | `'Select…'`                | Text shown with no selection.                                                                                                                                                                                                                                                                                                                                |
+| `disabled`           | `boolean`                   | `false`                    | Disables the field.                                                                                                                                                                                                                                                                                                                                          |
+| `required`           | `boolean`                   | `false`                    | Native `required` attribute.                                                                                                                                                                                                                                                                                                                                 |
+| `errorMessage`       | `string \| null`            | `null`                     | Error message shown under the field.                                                                                                                                                                                                                                                                                                                         |
+| `selectedCountLabel` | `(count: number) => string` | `` `${count} selected` ``  | Trigger label in multiple-selection mode, beyond a single item. In `chips` mode the trigger shows the placeholder instead, and this string is what the screen-reader status region announces as chips are added or removed.                                                                                                                                  |
+| `chipRemoveLabel`    | `(label: string) => string` | `` `Remove ${label}` ``    | Accessible label of each chip's remove button, in `chips` mode.                                                                                                                                                                                                                                                                                              |
+| `noOptionsMessage`   | `string`                    | `'No options'`             | Shown in place of the listbox when `options` is empty and the panel is opened.                                                                                                                                                                                                                                                                              |
+
+## Hint, hidden label, full width
+
+```html
+<gbt-select
+  label="Visibility"
+  hint="Who can see this repository."
+  [fullWidth]="true"
+  [options]="options"
+  formControlName="visibility"
+/>
+
+<gbt-select
+  label="Sort by"
+  [hideLabel]="true"
+  size="sm"
+  [options]="sortOptions"
+  formControlName="sort"
+/>
+```
+
+With `errorMessage` set the hint is not rendered and the trigger's
+`aria-describedby` points at the error only (chips mode's chip row is
+unaffected and still renders in the list).
+
+## Example
+
+```html
+<gbt-select
+  label="Rôle"
+  [options]="[{ value: 'read', label: 'Lecture' }, { value: 'admin', label: 'Administration' }]"
+  formControlName="role"
+/>
+```

package/skeleton/README.md

@@ -0,0 +1,49 @@
+# Skeleton
+
+Animated placeholder that echoes the shape of content still loading —
+a line of text, a circle, or a rectangle. Combine several to mimic a
+table row, a list item, or a card, instead of a generic spinner
+unrelated to what's about to appear.
+
+**Selector**: `gbt-skeleton`
+
+## Inputs
+
+| Input     | Type                          | Default | Role                                                                 |
+| --------- | ----------------------------- | ------- | --------------------------------------------------------------------- |
+| `variant` | `'text' \| 'circle' \| 'rect'` | `'text'` | Shape: rounded line, perfect circle (`aspect-ratio: 1`, sized by `width`), or rounded rectangle. |
+| `width`   | `string`                      | `'100%'` | Any CSS length (`'240px'`, `'60%'`, …).                              |
+| `height`  | `string \| null`               | `null`  | Any CSS length. Left unset, each variant falls back to a sensible default (`1em` for `text`, matches `width` for `circle`, `100px` for `rect`). |
+
+## Example
+
+```html
+<gbt-skeleton variant="text" width="60%" />
+<gbt-skeleton variant="circle" width="40px" />
+<gbt-skeleton variant="rect" width="100%" height="140px" />
+```
+
+## Composing a placeholder layout
+
+There's no dedicated `TableSkeleton` or `CardSkeleton` — combine plain
+`gbt-skeleton`s instead, e.g. a card:
+
+```html
+<div role="status" aria-label="Loading">
+  <gbt-skeleton variant="rect" width="100%" height="140px" />
+  <gbt-skeleton variant="text" width="80%" />
+  <gbt-skeleton variant="text" width="50%" />
+</div>
+```
+
+## Behavior
+
+- A soft highlight band sweeps left to right across the shape to
+  signal "loading"; the animation is disabled under
+  `prefers-reduced-motion: reduce` (the shape stays visible, flat,
+  with no motion).
+- Each `gbt-skeleton` sets `aria-hidden="true"` on itself — a screen
+  reader is never told about a dozen individual placeholder shapes.
+  Wrap the group in a single `role="status"` container with a label
+  (as in the example above) so "Loading" is announced once for the
+  whole layout, not once per shape.

package/skeleton-list/README.md

@@ -0,0 +1,40 @@
+# SkeletonList
+
+The placeholder of a list while it loads: `rows` rows of an optional leading block (a status dot, an
+avatar) and one to three text lines, at the rhythm of a real list row.
+
+**Selector**: `gbt-skeleton-list`. Built on [`gbt-skeleton`](../skeleton/README.md). `gbt-list-card`
+draws its own loading state; use this one in a settings section, a panel, a table body or any bordered box.
+
+## Inputs
+
+| Input          | Type                             | Default      | Role                                                                            |
+| -------------- | -------------------------------- | ------------ | ------------------------------------------------------------------------------- |
+| `rows`         | `number`                         | `4`          | Number of placeholder rows (`0` or less: none, only the status).                |
+| `leading`      | `'circle' \| 'square' \| 'none'` | `'circle'`   | The block before the lines: a dot or avatar, a square, or nothing.              |
+| `leadingSize`  | `string`                         | `'1rem'`     | Its size (`1rem` a status dot, `2.25rem` an avatar).                            |
+| `lines`        | `1 \| 2 \| 3`                    | `2`          | Text lines per row. The first is the longest; its width varies from row to row. |
+| `loadingLabel` | `string`                         | `'Loading…'` | Read out (visually hidden, polite) while loading.                               |
+| `divided`      | `boolean`                        | `true`       | A hairline between rows.                                                        |
+| `padded`       | `boolean`                        | `true`       | 1 rem of side padding (a row inside a card). Turn it off in a bare list.        |
+
+## Behaviour and accessibility
+
+- A `role="status"` region with `loadingLabel` is always rendered; the shapes are `aria-hidden`.
+- **No `aria-busy`**: it would sit on an ancestor of the status region, and assistive technology may then hold
+  the announcement back until the busy state ends, which is exactly when the announcement is useless.
+- Placeholders animate with `gbt-skeleton`'s shimmer, which stops under `prefers-reduced-motion`.
+
+## Example
+
+```html
+@if (loading()) {
+<gbt-skeleton-list [rows]="3" leadingSize="2.25rem" loadingLabel="Chargement des membres…" />
+} @else {
+<ul>
+  …
+</ul>
+}
+```
+
+See [AUDIT.md](AUDIT.md).

package/slider/README.md

@@ -0,0 +1,44 @@
+# Slider
+
+A numeric value picked by dragging — a styled native
+`<input type="range">`, integrated with Angular forms via
+`ControlValueAccessor`, like `Select`.
+
+**Selector**: `gbt-slider`
+
+## Inputs
+
+| Input         | Type                          | Default                | Role                                                    |
+| -------------- | ------------------------------ | ------------------------- | ----------------------------------------------------------- |
+| `label`       | `string`                       | required                  | Field label — also the accessible name of the range input. |
+| `min`/`max`   | `number`                       | `0` / `100`                | Bounds.                                                      |
+| `step`        | `number`                       | `1`                         | Increment.                                                   |
+| `disabled`    | `boolean`                      | `false`                     | —                                                             |
+| `errorMessage`| `string \| null`                | `null`                       | Rendered as `role="alert"` below the slider.                 |
+| `showValue`   | `boolean`                      | `true`                       | Shows the current value next to the label.                   |
+| `formatValue` | `(value: number) => string`    | `(v) => \`${v}\``            | Formats the displayed value (e.g. `€`, `%`).                  |
+
+## Example
+
+```html
+<gbt-slider label="Budget" [min]="0" [max]="1000" [step]="50" [formatValue]="formatEuros" [formControl]="budget" />
+```
+
+## Behavior
+
+- Built on a native `<input type="range">`, not a custom
+  `role="slider"` widget — keyboard operability (arrows, Home/End,
+  Page Up/Down) and screen reader support come from the browser for
+  free, at the cost of styling it (done here via
+  `::-webkit-slider-thumb`/`::-moz-range-thumb` and friends) rather
+  than building a widget from scratch.
+- `label` is required: a slider with no accessible name is
+  meaningless to a screen reader, and there's no universal generic
+  default text a value-picker could fall back to (unlike `Spinner`'s
+  `'Loading…'`).
+
+## Scope
+
+Single value only. A two-handle range slider (min/max) was
+deliberately left for a separate iteration if a real use case comes
+up, the same reasoning `DatePicker` applied to a date-range picker.

package/sparkline/README.md

@@ -0,0 +1,37 @@
+# Sparkline
+
+Fixed-size trend mini-chart — built to live in a table cell, where a
+`ResizeObserver` per row would be expensive for a width the caller
+already knows.
+
+**Selector**: `gbt-sparkline`
+
+Standalone, outside the dataviz base — no tooltip or keyboard
+navigation in the base's sense, but **focusable** and given an
+accessible name, with its own visually-hidden `gbt-chart-table`.
+
+## Inputs
+
+| Input          | Type       | Default  | Role                                        |
+| -------------- | ---------- | -------- | ------------------------------------------- |
+| `values`       | `number[]` | required | Series values, in order.                    |
+| `tableCaption` | `string`   | required | Caption of the component's `sr-only` table. |
+| `xColumn`      | `string`   | required | Header of that table's x-axis column.       |
+| `yColumn`      | `string`   | required | Header of that table's value column.        |
+| `locale`       | `string`   | required | Locale used to format numbers.              |
+| `emptyMessage` | `string`   | required | Message shown when `values` is empty.       |
+| `width`        | `number`   | `80`     | Width in pixels.                            |
+| `height`       | `number`   | `24`     | Height in pixels.                           |
+
+## Example
+
+```html
+<gbt-sparkline
+  [values]="[12, 18, 9, 24, 30]"
+  tableCaption="Requêtes des 7 derniers jours"
+  xColumn="Jour"
+  yColumn="Requêtes"
+  locale="fr-FR"
+  emptyMessage="Aucune donnée"
+/>
+```

package/spinner/README.md

@@ -0,0 +1,41 @@
+# Spinner
+
+A standalone loading indicator, for use anywhere `Button`'s own
+internal spinner doesn't reach — a card, a panel, a whole page section
+— and `Skeleton` (which echoes the shape of content still loading)
+isn't a fit, typically because there's no known destination layout to
+echo yet.
+
+**Selector**: `gbt-spinner`
+
+## Inputs
+
+| Input   | Type                   | Default      | Role                                           |
+| ------- | ----------------------- | -------------- | ------------------------------------------------- |
+| `size`  | `'sm' \| 'md' \| 'lg'`   | `'md'`         | 16px / 24px / 40px.                                |
+| `label` | `string`                | `'Loading…'`   | Announced once via `role="status"`, visually hidden. |
+
+## Example
+
+```html
+<gbt-spinner size="lg" label="Loading results…" />
+```
+
+## Behavior
+
+- `role="status"` with a visually-hidden label — announced once,
+  unlike `Skeleton`'s "no live announcement per shape" stance, since a
+  spinner is usually the *only* loading cue on screen, not one of a
+  dozen placeholder shapes needing a single shared announcement.
+- The ring inherits `color` (`--primary` by default) — set `color` on
+  an ancestor to recolor it, e.g. inside a button with a colored
+  background.
+- The ring is two layers: a faint static track (`::before`, 15%
+  opacity) and the spinning arc on top (`::after`) — an arc alone,
+  with no track, reads as "a circle with a bite taken out of it"
+  rather than as motion over a fixed shape.
+
+## Relationship to `Button`'s own spinner
+
+`Button`'s internal loading spinner stays private and independent — the same call made for
+`AppShell`'s mobile drawer versus `Drawer`: a separate, independent implementation.

package/src/lib/tokens/_a11y.scss

@@ -0,0 +1,22 @@
+// Shared by the components' styles, and offered to applications through the tokens.
+
+// Out of sight, still read by assistive technology.
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+// The keyboard focus ring. `--gbt-focus-ring` lets a theme recolour every ring at once.
+@mixin focus-ring($offset: null) {
+  outline: 2px solid var(--gbt-focus-ring, var(--focus-ring));
+  @if $offset != null {
+    outline-offset: $offset;
+  }
+}

package/src/lib/tokens/_base.scss

@@ -0,0 +1,31 @@
+// The document's own elements, for an application that wants them in the family's type: include once,
+// at the root of its global styles (`@include tokens.document-base;`).
+@mixin document-base {
+  body {
+    margin: 0;
+    font-family: var(--font-family);
+    font-feature-settings: 'kern', 'liga';
+    background: var(--bg-panel);
+    color: var(--text-primary);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  // Titles in Plex Condensed: a page and its panels read as a document.
+  h1,
+  h2,
+  h3 {
+    font-family: var(--gbt-font-display, var(--font-display));
+    letter-spacing: -0.005em;
+  }
+
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family: var(--gbt-font-mono);
+  }
+
+  ::selection {
+    background: color-mix(in srgb, var(--accent) 22%, transparent);
+  }
+}

package/src/lib/tokens/_palette.scss

@@ -1,58 +1,59 @@
+// The raw colours of the Ferris family. Components never read these: they go through the semantic
+// tokens, which pick a step per theme.
 :root {
-  --brand-50: #e8e9fd;
-  --brand-100: #ced1f8;
-  --brand-200: #98a0f0;
-  --brand-300: #5b66e6;
-  --brand-400: #2938db;
-  --brand-500: #0d1ed3;
-  --brand-600: #44476a;
-  --brand-700: #091595;
-  --brand-800: #07106e;
-  --brand-900: #040943;
+  // Light neutrals, from the paper to the ink.
+  --slate-0: #ffffff;
+  --slate-50: #eff2f5;
+  --slate-100: #e9edf1;
+  --slate-200: #dce2e9;
+  --slate-300: #cfd5dc;
+  --slate-400: #a9b3c0;
+  --slate-500: #7d8794;
+  --slate-600: #4a525f;
+  --slate-700: #404954;
+  --slate-900: #10151c;
 
-  --emerald-400: #55b48b;
+  // Dark neutrals: the graphite of the frame and the dark theme.
+  --graphite-1000: #0c1015;
+  --graphite-950: #0b0f14;
+  --graphite-900: #11161c;
+  --graphite-850: #181f27;
+  --graphite-800: #1f2730;
+  --graphite-700: #28323d;
+  --graphite-500: #646c77;
+  --graphite-400: #a1a9b5;
+  --graphite-300: #b8bfca;
+  --graphite-200: #cdd3db;
+  --graphite-100: #e7ebf1;
 
-  --grey-50: #f7f9fb;
-  --grey-100: #edf1f5;
-  --grey-200: #d6e0e8;
-  --grey-300: #b4c6d2;
-  --grey-400: #8aafc5;
-  --grey-500: #62889d;
-  --grey-600: #3f6070;
-  --grey-700: #2a4250;
-  --grey-800: #192a34;
-  --grey-900: #0d1b24;
+  // The crab's rust, kept for the marks that are the brand's own (focus, current page).
+  --rust-300: #ff9469;
+  --rust-400: #f0622a;
+  --rust-500: #c2410c;
+  --rust-600: #a8360a;
 
-  --red-50: #fcf4f4;
-  --red-100: #fbe5e5;
-  --red-200: #f8d0d0;
-  --red-300: #f2afaf;
-  --red-400: #e88181;
-  --red-500: #d95a5a;
-  --red-600: #c04242;
-  --red-700: #a23333;
-  --red-800: #6e2e2e;
-  --red-900: #3c1313;
+  --patina-300: #7ed4b8;
+  --patina-400: #3fbf95;
+  --patina-600: #15805d;
+  --patina-700: #0d5d43;
+  --patina-800: #0c523b;
 
-  --amber-50: #fcf9ed;
-  --amber-100: #f7efce;
-  --amber-200: #eedd99;
-  --amber-300: #e5c764;
-  --amber-400: #dfb340;
-  --amber-500: #d5962b;
-  --amber-600: #bd7522;
-  --amber-700: #9c5621;
-  --amber-800: #673a20;
-  --amber-900: #3c1d0c;
+  --amber-300: #f6b649;
+  --amber-400: #f5b13d;
+  --amber-600: #9a5b04;
+  --amber-700: #774603;
+  --amber-800: #6a3e03;
 
-  --green-50: #effaf5;
-  --green-100: #d7f4e5;
-  --green-200: #b4e6cf;
-  --green-300: #83d2b3;
-  --green-400: #53b491;
-  --green-500: #29a079;
-  --green-600: #188362;
-  --green-700: #146850;
-  --green-800: #114436;
-  --green-900: #08261f;
+  --red-200: #f7aeaa;
+  --red-300: #f38c85;
+  --red-400: #f2857d;
+  --red-600: #c23a32;
+  --red-700: #a1302a;
+  --red-750: #942c26;
+  --red-800: #842822;
+
+  --indigo-200: #b3beff;
+  --indigo-400: #8b9bff;
+  --indigo-600: #2f49c9;
+  --indigo-800: #283da8;
 }

package/src/lib/tokens/_semantic.scss

@@ -1,144 +1,37 @@
-:root {
-  --primary: var(--brand-600);
-
-  --primary-hover: #32344e;
-  --bg-principal: #ffffff;
-  --bg-panel: #f5f5f7;
-  --bg-hover: rgba(0, 0, 0, 0.05);
-  --bg-track: var(--grey-200);
-
-  --border-color: #7798b3;
-  --gbt-hairline: color-mix(in srgb, var(--border-color) 45%, transparent);
-  --gbt-card-border: color-mix(in srgb, var(--border-color) 60%, transparent);
-
-  --text-primary: var(--grey-900);
-  --text-secondary: var(--grey-700);
-
-  --text-discret: #425c6b;
-  --text-on-color: #ffffff;
-
-  --text-on-primary: #ffffff;
-  --text-on-error: #ffffff;
-
-  --color-success-base: var(--green-500);
-  --color-success-text: #195e48;
-  --color-success-hover: var(--green-700);
-  --color-success-bg: var(--green-100);
-  --color-success-bg-text: var(--green-800);
+@use 'themes';
 
-  --color-warning-base: #c38927;
-  --color-warning-text: #6f4d16;
-  --color-warning-hover: var(--amber-600);
-  --color-warning-bg: var(--amber-100);
-  --color-warning-bg-text: var(--amber-800);
-
-  --color-error-base: var(--red-500);
-  --color-error-fill: #a82727;
-  --color-error-text: #9e2525;
-  --color-error-hover: #8f2121;
-  --color-error-bg: var(--red-100);
-  --color-error-bg-text: var(--red-800);
-
-  --color-info-bg: #dbeafe;
-  --color-info-bg-text: #1e40af;
-
-  --bg-inverse: var(--grey-900);
-
-  --color-success-vivid-base: var(--green-500);
-  --color-warning-vivid-base: #c38927;
-  --color-error-vivid-base: var(--red-500);
-  --color-info-vivid-base: #2f6feb;
+:root {
+  color-scheme: light;
+  @include themes.light-tokens;
 
-  --chart-series-1-base: #bd8200;
-  --chart-series-2-base: #009e73;
-  --chart-series-3-base: #0072b2;
-  --chart-series-4-base: #a6410f;
-  --chart-series-5-base: #9c3f78;
-  --chart-series-6-base: #5b4fb0;
-  --chart-grid: var(--grey-200);
+  --frame: var(--graphite-950);
 
-  --site-border-radius: 14px;
-  --site-border-radius-sm: 10px;
-  --site-border-radius-lg: 24px;
+  --site-border-radius: 4px;
+  --site-border-radius-sm: 3px;
+  --site-border-radius-lg: 6px;
 
   --gbt-control-height-sm: 2rem;
   --gbt-control-height-md: 2.375rem;
   --gbt-control-height-lg: 2.75rem;
 
-  --site-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.06);
-  --site-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
-  --site-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
-
   --site-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --site-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
 
-  --font-family: 'Inter', sans-serif;
-  --gbt-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
-}
-
-@mixin dark-tokens {
-  --primary: #a7aeff;
-
-  --primary-hover: #c6caff;
-
-  --bg-principal: var(--grey-900);
-  --bg-panel: #0f1c26;
-  --bg-hover: rgba(255, 255, 255, 0.06);
-  --bg-track: var(--grey-800);
-  --border-color: #436a80;
-  --gbt-hairline: color-mix(in srgb, var(--border-color) 45%, transparent);
-  --gbt-card-border: color-mix(in srgb, var(--border-color) 60%, transparent);
-
-  --text-primary: var(--grey-50);
-
-  --text-secondary: #9ebdcf;
-  --text-discret: #86a9bb;
-  --text-on-color: #ffffff;
-
-  --text-on-primary: var(--grey-900);
-  --text-on-error: var(--grey-900);
-
-  --color-success-base: var(--green-400);
-  --color-success-text: #56b693;
-  --color-success-hover: var(--green-500);
-  --color-success-bg: var(--green-900);
-  --color-success-bg-text: var(--green-100);
-
-  --color-warning-base: var(--amber-400);
-  --color-warning-text: var(--amber-400);
-  --color-warning-hover: var(--amber-500);
-  --color-warning-bg: var(--amber-900);
-  --color-warning-bg-text: var(--amber-100);
-
-  --color-error-base: var(--red-400);
-  --color-error-fill: #e98989;
-  --color-error-text: #e98b8b;
-  --color-error-hover: #eea3a3;
-  --color-error-bg: var(--red-900);
-  --color-error-bg-text: var(--red-100);
-
-  --color-info-bg: #1e3a8a;
-  --color-info-bg-text: #dbeafe;
-
-  --chart-series-1-base: #e69f00;
-  --chart-series-2-base: #009e73;
-  --chart-series-3-base: #0072b2;
-  --chart-series-4-base: #e2703a;
-  --chart-series-5-base: #d691bd;
-  --chart-series-6-base: #9d94e0;
-  --chart-grid: var(--grey-800);
-
-  --site-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.3);
-  --site-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
-  --site-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
+  // IBM Plex, served by the application (see `@masmarino/gabarit/fonts`). Without it the stacks fall
+  // back to the system's sans and monospace.
+  --font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  --font-display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Arial Narrow', Arial, sans-serif;
+  --gbt-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    @include dark-tokens;
+    color-scheme: dark;
+    @include themes.dark-tokens;
   }
 }
 
 :root[data-theme='dark'] {
-  @include dark-tokens;
+  color-scheme: dark;
+  @include themes.dark-tokens;
 }