docs(docsite-v9): clarify brand-background demo in ColorAndAppearance story

[Copilot]

The ColorAndAppearance story wraps subtle badges in a brand-colored <div> when appearance is ghost or outline, since those combinations are only intended for branded surfaces. The wrapper was a thin padded sliver with no explanation, so it read as a rendering artifact rather than deliberate demo context — particularly alongside the overflow behavior reported in #36556.

Changes

• Labelled the brand surface — each boxed example now renders an "On brand background:" caption using colorNeutralForegroundOnBrand and base typography tokens.
• Made the container read as a card — borderRadiusMedium, spacingVerticalS/spacingHorizontalM padding, centered alignment and a gap between label and badge.
• Dropped the inline BadgeWrapper component — it was re-created on every render (remounting its subtree each time); replaced with a direct conditional branch plus a comment explaining why the branch exists.
• Expanded the docs description to state that the boxed examples show the intended usage context.

if (color === 'subtle' && isSubtleOnBrandOnly) {
  return (
    <div key={`${appearance}-${color}`} className={styles.brand}>
      <span className={styles.brandLabel}>On brand background:</span>
      <Badge appearance={appearance} color={color} icon={<PasteIcon />}>
        999+
      </Badge>
    </div>
  );
}

Scope

Story-only. This does not address the missing fui-Badge class on ghost-subtle/outline-subtle badges from #36556 — that lives in the Badge styles hook and needs a separate fix. No change file: @fluentui/react-badge-stories is private and beachball check reports none needed.

[Martin Hochel (Hotell)]

the new page demo