/* TaskNotes Plugin Styles - Source Index This file serves as documentation for the CSS build system. The actual styles.css file is generated by concatenating these files in order: === CORE SYSTEM === 1. variables.css - CSS custom properties and design system variables 2. utilities.css - Utility classes for layout, spacing, typography, and states 3. base.css - Basic styles, animations, card components, and layout === BEM COMPONENT FILES === 4. task-card-bem.css - BEM TaskCard component with proper scoping 5. note-card-bem.css - BEM NoteCard component with proper scoping 6. filter-bar-bem.css - BEM FilterBar component with proper scoping 7. filter-heading.css - BEM FilterHeading component with proper scoping 8. modal-bem.css - BEM Modal components with proper scoping === BEM VIEW FILES === 9. task-list-view.css - BEM TaskListView component 10. calendar-view.css - BEM CalendarView component 11. kanban-view.css - BEM KanbanView component 12. agenda-view.css - BEM AgendaView component 13. notes-view.css - BEM NotesView component 14. pomodoro-view.css - BEM PomodoroView component 15. pomodoro-stats-view.css - BEM PomodoroStatsView component 16. settings-view.css - BEM SettingsView component === LEGACY SUPPORT === 17. components.css - Reusable UI components, utilities, and modals To build the final styles.css file, run: npm run build-css During development, both 'npm run dev' and 'npm run build' will automatically build the CSS before running the main build process. === File Descriptions === variables.css: - CSS custom properties for spacing, colors, typography - Design system tokens - Global CSS variables used throughout the application base.css: - Foundational styles and animations - Base card component classes using BEM methodology - Accessibility styles and reduced motion support - Loading states and transitions task-card-bem.css: - NEW BEM TaskCard component implementation - Properly scoped under .tasknotes-plugin - Uses --tn- CSS variables for consistency - Replaces legacy tasknotes-card and task-card styles note-card-bem.css: - NEW BEM NoteCard component implementation - Properly scoped under .tasknotes-plugin - Uses --tn- CSS variables for consistency - Follows same BEM patterns as TaskCard - Replaces legacy note-item and note-card styles filter-bar-bem.css: - NEW BEM FilterBar component implementation - Properly scoped under .tasknotes-plugin - Uses --tn- CSS variables for consistency - Follows same BEM patterns as TaskCard and NoteCard - Includes advanced filter panel sub-component - Replaces legacy filter-bar and filter styles components.css: - Reusable UI components (buttons, modals, forms) - Utility classes (.is-hidden, .is-loading, etc.) - General component styles used across views - Tab system and main content area - Minimal legacy support for compatibility === Development Workflow === 1. Edit the appropriate CSS file in the styles/ directory 2. Run 'npm run build-css' to regenerate styles.css 3. Test your changes in the application 4. Commit both the source files and the generated styles.css The build process ensures that: - Variables are loaded first for use in all other files - Base styles are applied before component-specific styles - View-specific styles don't conflict with each other - The final CSS is properly ordered and documented */ /* This file is for documentation only - it is not included in the build */