[WIP] Update Storybook docs site theme for GitHub branding

[Copilot]

• Explore repository structure and understand existing setup
• Create packages/docs/ directory with Storybook setup
  • packages/docs/package.json — docs package with Storybook devDependencies
  • packages/docs/tsconfig.json — TypeScript config for docs package
  • packages/docs/.storybook/main.ts — Storybook main config with staticDirs
  • packages/docs/.storybook/githubTheme.ts — GitHub-branded light/dark themes
  • packages/docs/.storybook/manager.ts — Apply theme + light/dark auto-switching
  • packages/docs/.storybook/assets/octocat.svg — Octocat logo asset
• Install dependencies in packages/docs
• Verify TypeScript compiles without errors
• Run code review and security checks

Original prompt

Goal

Update the Storybook docs site theme to better reflect GitHub branding (tokens + logo + title) for the Storybook instance under packages/docs.

Repositories / scope

• The code to change lives in: github/storybook-addon-performance-panel
• Focus directory: packages/docs
• Target ref/branch: create changes on a new branch off main (or use docs-github-branding if it already exists) and open a PR.

Requirements

1. Add a GitHub-branded Storybook manager UI theme for the docs Storybook located at packages/docs.
2. Apply a stronger branding push:
   • Use GitHub-like theme tokens (Primer-ish neutrals/blues, typography stack).
   • Set Storybook brandTitle to a GitHub-branded title (e.g. GitHub • Performance Panel Docs or similar).
   • Set brandUrl to the GitHub repo URL: https://github.com/github/storybook-addon-performance-panel.
   • Set brandImage to an Octocat mark logo (Option A) included in the repo.
3. Support automatic light/dark switching using prefers-color-scheme.
4. Keep changes self-contained to the docs package’s .storybook config (do not require consumers of the addon to change anything).

Implementation details (suggested)

• Add packages/docs/.storybook/manager.ts to call addons.setConfig({ theme }).
• Add a theme module packages/docs/.storybook/githubTheme.ts exporting light and dark themes via @storybook/theming/create.
• Add an SVG asset at packages/docs/.storybook/assets/octocat.svg and reference it via brandImage.
• In manager.ts, select theme based on window.matchMedia('(prefers-color-scheme: dark)') and listen for changes.

Acceptance criteria

• Running npm run docs (or Storybook for the docs package) shows:
  • GitHub title in the Storybook top-left
  • Octocat logo appears
  • Manager UI colors/typography reflect GitHub-ish tokens
  • Theme switches when OS color scheme changes
• No build/type errors.

Notes

• Do not add external dependencies unless necessary.
• Ensure asset paths work with Storybook/Vite.

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.