e9b369e667
- Added theme-aware accent and info colors in tailwind configuration for improved visual consistency. - Updated CSS variables for accent and info styles to support light and dark themes. - Refactored various components to utilize the new themed badge logic, ensuring consistent styling based on the current theme. - Improved accessibility and visual feedback in components like SidebarTaskItem, TeamListView, and ActivityItem by adjusting color schemes and hover states. - Enhanced the CreateTeamDialog and other team-related components with updated styling for better user experience.
63 lines
2.1 KiB
JavaScript
63 lines
2.1 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: ['class'],
|
|
content: [
|
|
'./src/renderer/index.html',
|
|
'./src/renderer/**/*.{js,ts,jsx,tsx}',
|
|
'./src/shared/**/*.{js,ts,jsx,tsx}'
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Theme-aware surface colors (use CSS variables)
|
|
surface: {
|
|
DEFAULT: 'var(--color-surface)',
|
|
raised: 'var(--color-surface-raised)',
|
|
overlay: 'var(--color-surface-overlay)',
|
|
sidebar: 'var(--color-surface-sidebar)',
|
|
code: 'var(--code-bg)', // Deep black for code blocks
|
|
},
|
|
// Theme-aware border colors (use CSS variables)
|
|
border: {
|
|
DEFAULT: 'var(--color-border)',
|
|
subtle: 'var(--color-border-subtle)',
|
|
emphasis: 'var(--color-border-emphasis)',
|
|
},
|
|
// Theme-aware accent color
|
|
accent: 'var(--color-accent)',
|
|
// Theme-aware text colors (use CSS variables)
|
|
text: {
|
|
DEFAULT: 'var(--color-text)',
|
|
secondary: 'var(--color-text-secondary)',
|
|
muted: 'var(--color-text-muted)',
|
|
},
|
|
// Semantic colors (only for status, not containers)
|
|
semantic: {
|
|
success: '#22c55e', // green-500
|
|
error: '#ef4444', // red-500
|
|
warning: '#f59e0b', // amber-500
|
|
info: '#3b82f6', // blue-500
|
|
},
|
|
// Theme-aware info color (use for blue informational elements)
|
|
info: {
|
|
DEFAULT: 'var(--info-text)',
|
|
bg: 'var(--info-bg)',
|
|
border: 'var(--info-border)',
|
|
},
|
|
// Theme-aware colors using CSS variables
|
|
// These aliases enable all existing components to automatically support light/dark mode
|
|
'claude-dark': {
|
|
bg: 'var(--color-surface)',
|
|
surface: 'var(--color-surface-raised)',
|
|
border: 'var(--color-border)',
|
|
text: 'var(--color-text)',
|
|
'text-secondary': 'var(--color-text-secondary)'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/typography'),
|
|
require('tailwindcss-animate')
|
|
]
|
|
}
|