UI/Badge: `none` intent has no contrast against `surface-neutral` backgrounds

[jameskoster]

The Badge component with intent="none" (the default) uses --wpds-color-bg-surface-neutral (#f8f8f8) as its background color. When this badge is rendered inside a container that also uses surface-neutral as its background, the badge becomes visually indistinguishable from its surroundings because the background values are identical.

/* Badge none intent */
.is-none-intent {
    background-color: var(--wpds-color-bg-surface-neutral); /* #f8f8f8 */
    color: var(--wpds-color-fg-content-neutral-weak); /* #6d6d6d */
}

The badge text (#6d6d6d) is still readable, but without any visible badge boundary, it just looks like floating gray text rather than a badge element. The pill shape and visual containment that a badge is supposed to provide are lost.

Steps to reproduce

1. Render a Badge with intent="none" (or no intent, since none is the default) inside a container with a surface-neutral background.
2. Observe that the badge background is indistinguishable from the container background.

Expected behavior

The badge should be visually distinct from its container regardless of the background it's placed on. The pill shape should be perceivable.

Possible solutions

A few options to consider:

• Use a slightly darker/different background token for the none intent (e.g. --wpds-color-bg-surface-neutral-weak at #f0f0f0). The trade-off here is that the problem will still occur when badges are rendered on neutral-weak, so I'd rule this out.
• Add a subtle border (e.g. using a neutral border token) so the badge boundary is visible even when the backgrounds match. (We'll need a solution to this issue if we go this route).
• Any other ideas? :)

cc @WordPress/gutenberg-components

[mirka]

• Add a subtle border (e.g. using a neutral border token) so the badge boundary is visible even when the backgrounds match. (We'll need a solution to this issue if we go this route).

outline (instead of border) may be a feasible approach in some cases since it doesn't factor into dimension calculations. But this is not a universal solution to the general problem (borders messing up grid adherence when using dimension tokens) since it could clash with focus outlines in certain interactive components.

A general approach could perhaps be something like:

padding-block: calc(var(--wpds-dimension-padding-xs) - var(--wpds-border-width-xs));

[ciampo]

• design-wise, would it be ok to have only the intent="none" badge render a border? Will this ever clash with potential future plans of adding a stronger emphasis variant (unless we don't have those plans anymore)?
• if we add a border, should we further differentiate the none badge from the other intents (especially the draft intent) by removing the background entirely (ie transparent)?

[jameskoster]

I think it's okay to add a border. We can always revise later. Yes I think we should differentiate from draft by adding a background.