qwen-code/packages/vscode-ide-companion/tailwind.config.js
yiliang114 ff43a278dc feat(webui): add webview container and isolate styles for VSCode integration
- Introduce WebviewContainer component for style isolation in VSCode webviews
- Rename CSS variables from --app-* to --qwen-app-* to prevent conflicts
- Add dedicated webview.css with isolated styles
- Update exports to include webview.css in package
- Modify all components to use new CSS variable names
- Update VSCode IDE companion to use new webview container
- Add style isolation to prevent conflicts with VSCode environment

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

Fixes webview UI issues in VSCode IDE Companion by providing proper style encapsulation.
2026-01-17 10:53:32 +08:00

74 lines
2.2 KiB
JavaScript

/**
* @license
* Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0
*/
/* eslint-env node */
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
/** @type {import('tailwindcss').Config} */
export default {
// Use webui preset for shared theme configuration
presets: [require('@qwen-code/webui/tailwind.preset')],
content: [
'./src/webview/**/**/*.{js,jsx,ts,tsx}',
// Include webui components to prevent Tailwind JIT from tree-shaking their classes
// Use relative path for pnpm workspace - node_modules symlinks are in root
'../webui/src/**/*.{js,jsx,ts,tsx}',
'../webui/dist/**/*.js',
],
theme: {
extend: {
keyframes: {
// CompletionMenu mount animation: fade in + slight upward slide
'completion-menu-enter': {
'0%': { opacity: '0', transform: 'translateY(4px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
// Pulse animation for in-progress tool calls
'pulse-slow': {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.5' },
},
// PermissionDrawer enter animation: slide up from bottom
'slide-up': {
'0%': { transform: 'translateY(100%)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
},
animation: {
'completion-menu-enter': 'completion-menu-enter 150ms ease-out both',
'pulse-slow': 'pulse-slow 1.5s ease-in-out infinite',
'slide-up': 'slide-up 200ms ease-out both',
},
colors: {
qwen: {
orange: '#615fff',
'clay-orange': '#4f46e5',
ivory: '#f5f5ff',
slate: '#141420',
green: '#6bcf7f',
// Status colors used by toolcall components
success: '#74c991',
error: '#c74e39',
warning: '#e1c08d',
loading: 'var(--app-secondary-foreground)',
},
},
borderRadius: {
small: '4px',
medium: '6px',
large: '8px',
},
spacing: {
small: '4px',
medium: '8px',
large: '12px',
xlarge: '16px',
},
},
},
plugins: [],
};