[wemra3]

Why

Badge has four subtle variants and five outline variants. There is no subtle-neutral. The styling guide says tags use subtle-*, but a tag with no status had no subtle variant.

Closes tailor-inc/platform-planning#2210. Part of tailor-inc/platform-planning#2208.

What

• New variant subtle-neutral: bg-neutral-surface, text-neutral-text and hover:bg-neutral-surface-hover. The other subtle variants use the same three roles for their intent.
• Docs: the Badge examples, the variant type and the variant table. The showcase page shows the new variant.
• Test: subtle-neutral is added to the test that checks every semantic utility a variant uses is bridged.
• Changeset: minor.

How it looks

Existing variants do not change. No snapshot changed.

Measured with getComputedStyle in the example app:

Palette and mode	neutral background	subtle-neutral background	Text (neutral / subtle-neutral)
default, light	#f5f5f5	#f5f5f5	#171717 / #0a0a0a
default, dark	#262626	#262626	#fafafa / #fafafa
bloom, light	rgb(216, 217, 244)	rgb(246, 242, 255)	#171717 / rgb(16, 18, 43)
bloom, dark	rgb(45, 48, 72)	rgb(36, 39, 58)	rgb(248, 249, 252) / same

In the default palette, subtle-neutral has the same background as neutral, because --muted and --secondary have the same value. The hover colour is different (--accent instead of secondary/80). In bloom, and in cream light mode, --muted is closer to the page background, so subtle-neutral is quieter than neutral. In cream dark mode the two values are almost the same.

Text contrast on the subtle background is 14:1 or more, and 11:1 or more on hover, in default and bloom. The contrast test does not cover the neutral intent, the same as before.

Screenshots from the showcase page (/showcase/primitives). The new variant is the last item in the Subtle row.

	Light	Dark
default
bloom

Checks

• fmt:check, lint, type-check, test (core: 2660 tests), docs:check and build pass.
• The built CSS contains .astw\:bg-neutral-surface{background-color:var(--neutral-surface)} and the hover rule.

🤖 Generated with Claude Code

[github-actions]

Code Metrics Report

	main (cc749d5)	#640 (fb39c88)	+/-
Coverage	89.3%	89.3%	0.0%
Test Execution Time	2m54s	2m38s	-16s

Details

  |                     | main (cc749d5) | #640 (fb39c88) | +/-  |
  |---------------------|----------------|----------------|------|
  | Coverage            |          89.3% |          89.3% | 0.0% |
  |   Files             |            228 |            228 |    0 |
  |   Lines             |           7241 |           7241 |    0 |
  |   Covered           |           6471 |           6471 |    0 |
+ | Test Execution Time |          2m54s |          2m38s | -16s |

Code coverage of files in pull request scope (100.0% → 100.0%)

Files	Coverage	+/-	Status
packages/core/src/components/badge/badge.tsx	100.0%	0.0%	modified

---

Reported by octocov