- Remove all borders and box-shadows from buttons throughout the plugin
- Apply consistent transparent background with hover states to all interactive elements
- Update FullCalendar buttons in advanced calendar view to use borderless design
- Standardize hover colors using color-mix for consistent interactive feedback
- Enhance focus states with outline-based accessibility patterns
- Unify button styling across calendar view selectors, pomodoro controls, and utility buttons
- Improve visual consistency with Obsidian's minimalist design language
This change completes the migration to a cohesive borderless button system that
provides better visual integration with Obsidian themes while maintaining full
accessibility through proper focus indicators.
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
This commit introduces additional handling for scheduled tasks throughout the application. The changes ensure that scheduled tasks are tracked, cached, and visually distinguished on the calendar view, along with due, completed, and archived tasks.
Key changes include:
1. CacheManager updates:
- Added a new property, hasScheduled, to the tasks mapping both in task aggregation and initialization.
- Separated the tracking of due and scheduled tasks rather than combining the two, allowing for independent styling and indicator display.
2. CalendarView adjustments:
- Modified logic in both the calendar rendering and cell update methods to account for scheduled tasks.
- Updated conditional checks to evaluate if a day has either a due or a scheduled task before showing indicators.
- Established a priority order for styling indicators: archived > completed > due > scheduled.
- Ensured that affected dates include both original and updated scheduled dates when tasks are modified.
3. Styling improvements:
- In calendar.css, introduced a new CSS class (.calendar-day.has-scheduled-tasks) for scheduled task indicators, including hover styles.
- In variables.css, defined new custom CSS variables (e.g., --cs-blue-100 for scheduled tasks) to support the new styling.
- Updated existing styles to now cover scheduled tasks alongside other task statuses.
Overall, these changes enhance calendar usability, clearly differentiating between tasks that are due and those that are scheduled, improving the user experience by presenting timely visual cues for task management.
• Update TaskCard class names by replacing the "recurring-task" modifier with "task-recurring" in both createTaskCard and updateTaskCard functions to ensure consistency in recurring task styling.
• In agenda.css, simplify toggle controls by removing the custom Material Design checkbox styles and letting native checkboxes render naturally. Adjust gap, font size, padding, and hover state to use updated theme variables (e.g. --cs-spacing-md, --font-ui-medium).
• In base.css, update button transitions and animations:
– Reduce hover transform scales and simplify transitions for filled and elevated buttons.
– Remove custom checkbox and radio styles entirely so that browsers or themes handle them natively.
– Adjust elevation levels and transform values to create a more subtle interactive feel.
• In components.css, update the unified card styles to be more theme-dependent by:
– Replacing expressive Material 3 settings (e.g. border-radius variable changes from --cs-radius-md to --radius-m, updated transition timing).
– Removing extraneous transform and scaling effects on hover in favor of simple border and transform changes.
• In kanban.css, remove redundant hover animations and explicit transitions for task cards so that the cards rely on their inherent styling rather than duplicative animations.
• In modals.css, rework modal styling to be cleaner and simpler:
– Change modal padding, header typography, and form element spacing to use new sizing variables (e.g. --size-4-4, --font-ui-large).
– Replace expressive animations and keyframes with simplified transitions.
– Revise autocomplete, day selector, time estimate, filename preview, and metadata sections for clarity and consistency with the new theme tokens.
• In pomodoro.css, adjust timer display animation duration (increasing pulse duration from 1s to 2s), add explicit min-width and centered layout for task displays, and update slide-out behavior for empty task displays.
• In tasks.css, modify task card priority styling:
– Increase the left border width for task cards.
– Update the recurring task indicator by switching from a border effect on task-item to a more visible infinity symbol overlay with full opacity and proper z-index.
• In variables.css, simplify design tokens:
– Remove expressive shadow variants, expressive radius variations, and multiple easing curves; keep only essential tokens for a clean, theme-driven look.
– Update transition tokens to use simplified easing (e.g. --cs-motion-easing-spring) and remove expressive motion tokens.
– Consolidate color scales to rely on theme-provided or simplified fallback colors.
These changes simplify the UI’s visual language, reduce complexity from excessive expressive styling, and standardize the component class names and CSS variable usage for improved consistency and easier theme integration.
• 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.
