{colors.map(color => {
- const BadgeWrapper =
- color === 'subtle' && (appearance === 'ghost' || appearance === 'outline')
- ? ({ children }: { children: React.ReactNode }) =>
{children}
- : React.Fragment;
+ // `ghost-subtle` and `outline-subtle` are only meant to be used on a branded background,
+ // so they are rendered within an explicit "brand surface" demo container instead of the
+ // ambient story background.
+ if (color === 'subtle' && isSubtleOnBrandOnly) {
+ return (
+
+ On brand background:
+ }>
+ 999+
+
+
+ );
+ }
return (
-
- }>
- 999+
-
-
+
}>
+ 999+
+
);
})}