vrr/qwen-code
2
0
Fork 0
mirror of https://github.com/QwenLM/qwen-code.git synced 2026-04-28 19:52:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 20

feat(webui): migrate pure UI ToolCall components and add Storybook stories

Browse source 
- Migrate ThinkToolCall, GenericToolCall, EditToolCall, WriteToolCall,
  SearchToolCall, UpdatedPlanToolCall, CheckboxDisplay to webui
- Add Storybook stories for all migrated components
- Add stories for shared components (ToolCallContainer, ToolCallCard,
  StatusIndicator, CodeBlock, LocationsList, CopyButton)
- Fix Storybook theme by reordering CSS imports and adding body color
- Update vscode-ide-companion to import ToolCall components from webui
- Keep ReadToolCall and ShellToolCall in vscode-ide-companion (VSCode deps)
This commit is contained in:
yiliang114 2026-01-16 13:45:56 +08:00
parent c44a60f9f9
commit 593577864b
53 changed files with 3089 additions and 575 deletions
Download patch file Download diff file Expand all files Collapse all files

139
packages/webui/src/styles/variables.css
View file

@ -6,47 +6,150 @@
/**
* Default CSS variables for @qwen-code/webui
* Consumers can override these variables to customize the theme.
* These provide fallback values when running outside of VSCode.
* In VSCode, these will be overridden by VSCode's design tokens.
*/
:root {
/* Primary colors */
/* ===========================
Primary Colors
=========================== */
--app-primary: #3b82f6;
--app-primary-hover: #2563eb;
--app-primary-foreground: #ffffff;
--app-primary-foreground: #e4e4e7;
--app-secondary-foreground: #a1a1aa;
/* Background colors */
--app-background: #ffffff;
--app-background-secondary: #f3f4f6;
--app-background-tertiary: #e5e7eb;
/* ===========================
Background Colors
=========================== */
--app-background: #1e1e1e;
--app-primary-background: #1e1e1e;
--app-background-secondary: #252526;
--app-background-tertiary: #2d2d2d;
/* Foreground/text colors */
--app-foreground: #111827;
--app-foreground-secondary: #6b7280;
--app-foreground-muted: #9ca3af;
/* ===========================
Foreground/Text Colors
=========================== */
--app-foreground: #e4e4e7;
--app-foreground-secondary: #a1a1aa;
--app-foreground-muted: #71717a;
/* Border colors */
--app-border: #e5e7eb;
/* ===========================
Border Colors
=========================== */
--app-border: #3f3f46;
--app-border-focus: #3b82f6;
--app-primary-border-color: #3f3f46;
/* Status colors */
/* ===========================
Status Colors
=========================== */
--app-success: #10b981;
--app-warning: #f59e0b;
--app-error: #ef4444;
--app-info: #3b82f6;
/* Typography */
/* ===========================
Typography
=========================== */
--app-font-sans: system-ui, -apple-system, sans-serif;
--app-font-mono: ui-monospace, monospace;
--app-font-mono: ui-monospace, 'SF Mono', monospace;
/* Border radius */
/* ===========================
Border Radius
=========================== */
--app-radius-sm: 0.25rem;
--app-radius-md: 0.375rem;
--app-radius-lg: 0.5rem;
--corner-radius-small: 6px;
--corner-radius-medium: 8px;
/* Spacing */
/* ===========================
Spacing
=========================== */
--app-spacing-xs: 0.25rem;
--app-spacing-sm: 0.5rem;
--app-spacing-md: 1rem;
--app-spacing-medium: 8px;
--app-spacing-lg: 1.5rem;
--app-spacing-xl: 2rem;
/* ===========================
Input Styles
=========================== */
--app-input-background: #3c3c3c;
--app-input-border: #3f3f46;
--app-input-placeholder-foreground: #71717a;
/* ===========================
Button Styles
=========================== */
--app-ghost-button-hover-background: rgba(90, 93, 94, 0.31);
/* ===========================
Header Styles
=========================== */
--app-header-background: #252526;
/* ===========================
List Styles
=========================== */
--app-list-padding: 0px;
--app-list-item-padding: 4px 8px;
--app-list-border-color: transparent;
--app-list-border-radius: 4px;
--app-list-hover-background: rgba(90, 93, 94, 0.31);
--app-list-active-background: #094771;
--app-list-active-foreground: #ffffff;
--app-list-gap: 2px;
/* ===========================
Menu Styles
=========================== */
--app-menu-background: #252526;
--app-menu-border: #454545;
--app-menu-foreground: #cccccc;
--app-menu-selection-background: #094771;
--app-menu-selection-foreground: #ffffff;
/* ===========================
Tool Call Styles
=========================== */
--app-tool-background: #1e1e1e;
--app-code-background: #2d2d2d;
/* ===========================
Warning/Error Styles
=========================== */
--app-warning-background: rgba(255, 204, 0, 0.1);
--app-warning-border: #ffcc00;
--app-warning-foreground: #ffcc00;
}
/* Light theme override (can be toggled via class or media query) */
@media (prefers-color-scheme: light) {
:root.auto-theme {
--app-primary-foreground: #1f2937;
--app-secondary-foreground: #6b7280;
--app-background: #ffffff;
--app-primary-background: #ffffff;
--app-background-secondary: #f3f4f6;
--app-background-tertiary: #e5e7eb;
--app-foreground: #1f2937;
--app-foreground-secondary: #6b7280;
--app-foreground-muted: #9ca3af;
--app-border: #e5e7eb;
--app-primary-border-color: #e5e7eb;
--app-input-background: #ffffff;
--app-input-border: #d1d5db;
--app-input-placeholder-foreground: #9ca3af;
--app-ghost-button-hover-background: rgba(0, 0, 0, 0.05);
--app-header-background: #f9fafb;
--app-list-hover-background: rgba(0, 0, 0, 0.05);
--app-list-active-background: #3b82f6;
--app-menu-background: #ffffff;
--app-menu-border: #e5e7eb;
--app-menu-foreground: #1f2937;
--app-tool-background: #ffffff;
--app-code-background: #f3f4f6;
}
}