Callout — xds → xds-next

Recipe view source .md →

Markup

- 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

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

- <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 variant × layout × size grew the API surface without earning its 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.