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
(confirmed: 0 occurrences in tailwind.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	Review	Updated (UTC)
console	Ready	Preview	Jan 27, 2026 3:48am