Domů Procházet Nápověda
Přihlásit se
AI
/
kilocode
zrcadlo https://github.com/Kilo-Org/kilocode.git
2
0
Rozštěpit 0
Soubory Úkoly 0 Wiki
Větev: mark/duplicatecommands3
Větve Značky
kilocode
/
apps
/
storybook
Chris Hasson 0d4a18fd0f Add colorized SVG-based autocomplete decorations (#2417) před 5 měsíci
..
.storybook 0d4a18fd0f Add colorized SVG-based autocomplete decorations (#2417) před 5 měsíci
generated-theme-styles 5ac54401fd refactor(e2e, storybook): improve reliability of theme variable extraction by aligning with VS Code (#1801) před 5 měsíci
scripts 5ac54401fd refactor(e2e, storybook): improve reliability of theme variable extraction by aligning with VS Code (#1801) před 5 měsíci
src 0d4a18fd0f Add colorized SVG-based autocomplete decorations (#2417) před 5 měsíci
stories 0d4a18fd0f Add colorized SVG-based autocomplete decorations (#2417) před 5 měsíci
.gitignore 6f5c825f60 Add Playwright Screenshots to Chromatic (#1234) před 7 měsíci
README.md 3529a8eb53 feat(storybook): Add VS Code theme generation and theme switcher (#755) před 8 měsíci
package.json 5609a95c6a refactor(storybook): Centralize QueryClient export for Storybook před 5 měsíci
tsconfig.json e02c2d243f Introduce Storybook for easier webview component testing (#741) před 8 měsíci

README.md

Storybook

Component library and design system documentation for the VS Code extension.

Quick Start

# Install dependencies
pnpm install

# Run Storybook
pnpm storybook

Visit http://localhost:6006 to view the component library.

VS Code Themes

This Storybook uses automatically generated VS Code themes to ensure our components match the official VS Code appearance exactly. The themes are generated from Microsoft's official VS Code theme files and converted to CSS variables.

Available Themes

  • Dark Modern - VS Code's default dark theme
  • Light Modern - VS Code's default light theme

Use the theme switcher in the Storybook toolbar to toggle between themes.

Theme Regeneration

The theme CSS files are checked into the repository and rarely need updating. To regenerate themes (only needed when VS Code releases new theme updates):

pnpm generate-theme-styles

This script:

  1. Fetches the latest theme JSON files from the VS Code repository
  2. Resolves theme includes (e.g., dark_modern includes dark_plus)
  3. Converts theme colors to CSS variables (e.g., editor.background → --vscode-editor-background)
  4. Outputs CSS files to .storybook/themes/

Scripts

  • pnpm storybook - Start development server
  • pnpm build - Build static Storybook
  • pnpm generate-theme-styles - Regenerate VS Code theme CSS files
  • pnpm test - Run component tests