---
title: Callout — xds → xds-next
date: 2026-05-27
mode: change-recipe
xds-block: callout
xds-next-block: callout
xds-kit: '@indeed/xds@0.0.1'
xds-next-kit: '@indeed/xds-next@0.0.1'
---

# Callout — change recipe

Evolve XDS Callout to xds-next. Stack changes from theme-ui + Emotion + compound `data-theme` cascade → plain CSS + variant + hue data attributes that rebind four substrate primitives.

## Markup

```diff
- import { Callout } from "@indeed/xds";
+ import { Callout } from "@indeed/xds-next";

  <Callout
-   variant="expressive"     // basic | expressive | fullColor (unchanged)
-   layout="row"             // RETIRED — block is contained-only in xds-next
-   size="md"                // RETIRED — block is one size
-   icon="trendingUp"        // unchanged
-   data-theme="blue"        // RETIRED — see hue below
+   variant="expressive"
+   hue="blue"               // NEW — six named values: blue | aqua | earth | green | magenta | purple
+   icon="click"             // unchanged
  >
    {/* children: the impact line */}
  </Callout>
```

## CSS / theming

| Concern | xds | xds-next |
|---|---|---|
| Hue source | `data-theme` on ancestor → pulls `--expressive-complementary-a-*` from `themes.css` | `data-hue` on root → rebinds the four substrate primitives (`--color-fg/bg/accent/accent-fg`) directly in `Callout.module.css` |
| Variant treatment | theme-ui `sx` styles per variant | CSS-module classes; primitives compose under variant rules |
| Decorative shape (`fullColor`) | included | retired — flat full-color surface is enough |
| Layout=row | supported | retired — page composes side-by-side itself |

## What page authors do differently

- **Lose the wrapping `data-theme` ancestor.** Set `hue` on the block instead. Lets the same page mix Callouts of different hues.
- **Drop `layout="row"`.** If you need a row layout, wrap two Callouts in your own flex container.
- **Drop `size="md"`.** No size axis.

## Migration sketch

```diff
- <section data-theme="aqua">
-   <Callout variant="expressive" icon="trendingUp" layout="row" size="md">
-     45% more clicks on Sponsored Jobs.
-   </Callout>
- </section>
+ <Callout variant="expressive" hue="aqua" icon="click">
+   45% more clicks on Sponsored Jobs.
+ </Callout>
```

## Why we changed it

- Hue-as-cascade made it impossible to put differently-colored Callouts in the same page without wrapping each.
- Compound variants × layout × size grew the API surface without earning their keep. Two surviving axes (variant + hue) cover every observed use.
- Per-block CSS modules + substrate primitives keep the block self-contained — no `themes.css` cascade required, no theme-ui runtime.