Make sure anti-affinity fail badge shows up on table

[charliepark]

So it seems that <Badge color="neutral" variant="solid">{policy}</Badge> doesn't show up as expected.

Claude's analysis was that it comes down to how the Tailwind classes are constructed:

The CSS classes are defined in /Users/charliepark/oxide/console/node_modules/@oxide/design-system/styles/dist/main.css using CSS custom
properties (CSS variables). These map to Tailwind utility classes.

The actual bug: bg-inverse-tertiary doesn't exist in the design system

Looking at the available inverse CSS variables:
--surface-inverse-raise: var(--content-raise);
--surface-inverse-primary: var(--content-default);
--surface-inverse-secondary: var(--content-secondary);
--content-inverse: var(--surface-default);
--content-inverse-raise: var(--surface-raise);
--content-inverse-secondary: var(--surface-secondary);

There's no --surface-inverse-tertiary defined, which means the Tailwind class bg-inverse-tertiary doesn't exist in the compiled CSS

So when the Badge used:
neutral: 'bg-inverse-tertiary text-inverse'

It would render as:

• text-inverse → --content-inverse → #080F11 (very dark text)
• bg-inverse-tertiary → class doesn't exist → no background applied
• Result: Dark text on dark background = invisible "fail" badge

---

We can either change the color or the variant if we want them to be visually distinct, which I think was the original goal. In light of just fixing the bug so we can focus on more pressing issues, I have made both badges the same color, but am open to other thoughts, like using other variant/colors, fixing the design system, etc.

What this PR has:

Though I played with a few other options; including for completeness:

Closes #3016

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
console	Ready	Preview	Feb 3, 2026 11:42am

[david-crespo]

If bg-inverse-tertiary doesn't exist we should fix that in the design system repo too. Filed oxidecomputer/design-system#157.

[benjaminleonard]

Took me a second to figure this out. For context, these tokens exist because the solid colours are not used in this brightness as a background generally – but a solid badge is basically an "inverted" version of a regular one.

I was tempted to suggest removing the inverse tokens completely since they are not used outside of the badge and selection states and replace with direct colours instead. E.g. bg-neutral-${num} — however I think it's going to be useful when we (eventually) get to light mode and alternative themes.

Anyway, what happened here is that the content tokens shifted up when we added a text-raise token. Tertiary became secondary and so on. The fix is therefore just to switch to secondary, not to add the extra token. Will make that on the DS now.

[benjaminleonard]

Updated and ready to merge