Add decorator to Storybook to better visualize all logo variations

Author: ciampo

packages/components/src/logos/jetpack-logo/stories/index.stories.tsx

@@ -4,6 +4,23 @@ import type { Meta, StoryObj } from '@storybook/react';
 const meta: Meta< typeof JetpackLogo > = {
 	title: 'Unaudited/Logos/JetpackLogo',
 	component: JetpackLogo,
+	decorators: [
+		( Story, { args } ) => (
+			<div
+				style={ {
+					backgroundColor: args.theme === 'dark' ? '#000' : '#fff',
+					color: args.theme === 'dark' ? '#fff' : '#000',
+					minHeight: '100px',
+					padding: '1rem',
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+				} }
+			>
+				<Story />
+			</div>
+		),
+	],
 };
 export default meta;
 
@@ -17,6 +34,10 @@ export const Full: Story = {
 	},
 };
 
+/**
+ * The monochrome version uses the same color as the inherited text color,
+ * and uses a mask for the triangles in the logo (instead of a fill).
+ */
 export const Monochrome: Story = {
 	args: {
 		monochrome: true,