callumalpass_tasknotes/.github
Callum Alpass 63525f5dd6 Add modular CSS build system with comprehensive source files and documentation
• Introduce a new “styles” directory that breaks out the plugin’s CSS into several modular source files:
 – variables.css: Defines all CSS custom properties (spacing, colors, typography, transitions) to serve as design system tokens.
 – base.css: Contains foundational styles, animations (e.g. task-flash, task-pulse, fade-in) and core card styles following BEM methodology. Also includes accessibility and performance optimizations.
 – components.css: Provides reusable UI component styles and utility classes (e.g. is-hidden, is-loading, buttons, modals, tab system, task selectors) used across multiple views.
 – calendar.css: Implements calendar layout and view styling including navigation (month/week views), day formatting, indicators (notes, tasks, daily notes), hover effects and colorized modes.
 – tasks.css: Contains styles for task-list views including card layouts, task metadata, priority/ status badges, time tracking, recurring tasks, and interactivity on hover/active states.
 – kanban.css: Provides styling for Kanban board views, including board header, column layout, drag/drop feedback, checkboxes, board actions, filters and responsive adjustments.
 – filters.css: Implements a unified filtering system across views with a filter bar layout, search and sort controls, advanced filtering panels, multi-select dropdowns, chip badges and date range pickers.
 – index.css: A documentation index that outlines the intended build order and purpose of each modular CSS file.

• Add styles/README.md documenting the CSS build system, file structure, dependency order (variables → base → components → calendar → tasks → kanban → filters), and development workflow (make changes in source files, run “npm run build-css”, and test).

• This commit lays a solid foundation for maintainable, consistent styling across the TaskNotes plugin. The CSS build process concatenates these files in the proper order to generate the final (but untracked) styles.css for distribution, while supporting CI/CD integration and responsive design.

• (Optional) The build scripts in package.json have been updated to invoke “build-css” as part of “npm run dev” and “npm run build”, ensuring the latest CSS is built before launching the app.

Overall, this commit modularizes and documents the plugin’s styling strategy, improving maintainability and clarity for future development.
2025-06-08 15:59:40 +10:00
..
workflows Add modular CSS build system with comprehensive source files and documentation 2025-06-08 15:59:40 +10:00