feat(kumo): add CloudflareLogo and PoweredByCloudflare components

[mattrothenberg]

⚠️ SPECULATIVE PR

This is a speculative PR to gather feedback on the API design and implementation approach.

---

Summary

• Add CloudflareLogo component with glyph and full logo variants
• Add PoweredByCloudflare badge component for footer attribution
• Export SVG path data and brand colors for custom implementations

Components

CloudflareLogo

<CloudflareLogo className="w-36" />
<CloudflareLogo variant="glyph" className="w-12" />
<CloudflareLogo color="white" /> {/* for dark backgrounds */}
<CloudflareLogo color="black" /> {/* monochrome */}

Props:

• variant: "full" (default) | "glyph" - Full logo with wordmark or cloud icon only
• color: "color" (default) | "black" | "white" - Color scheme

PoweredByCloudflare

<PoweredByCloudflare />
<PoweredByCloudflare color="white" /> {/* for dark backgrounds */}

A badge-style link component for "Powered by Cloudflare" attribution.

Exported Constants

For custom implementations, the component exports:

• Brand colors: CLOUDFLARE_ORANGE, CLOUDFLARE_YELLOW, CLOUDFLARE_TEXT_GRAY
• SVG paths: CLOUDFLARE_GLYPH_ORANGE_PATH, CLOUDFLARE_GLYPH_YELLOW_PATH, etc.
• ViewBoxes: CLOUDFLARE_GLYPH_VIEWBOX, CLOUDFLARE_FULL_LOGO_VIEWBOX

Dark Mode

The wordmark text color respects dark mode via text-kumo-default. The cloud glyph maintains brand colors when color="color".

[threepointone]

internal chat thread: https://chat.google.com/room/AAQAys6oE8c/LMDd7E3OoME/LMDd7E3OoME?cls=10

[stritt]

hey matt made some styling tweaks here, should be good to go now!

[mattrothenberg]

@stritt Awesome! Made some changes to your PoweredByCloudflare styling to fix a lint failure. Feel free to roll back if I've misunderstood.

The issue was that neutral-* tokens are blocked by our no-primitive-colors lint rule.

I tweaked:

• bg-neutral-900 → bg-black
• ring-neutral-700 → ring-white/20
• ring-neutral-300 → ring-black/20

As such the black and white variants are intentionally NOT theme-responsive. If someone picks color="white", they get a white logo on a dark background regardless of whether the app is in light or dark mode. Same for color="black" - always black logo on light background. This makes sense because the logo color is fixed, so the background needs to be fixed too.

The color="color" variant (default) still uses semantic tokens and responds to theme normally.

Let me know if you had a different vision for this!