Based on feedback from kepano to reduce custom styling and use
Obsidian's native styles where possible:
- Replace all `cursor: pointer` with `cursor: var(--cursor)` across
all CSS files (100+ instances). Following Obsidian's convention where
`cursor: pointer` is only for links.
- Remove forced `border: none; box-shadow: none` rules that were
fighting against Obsidian's native button styling.
- Scope custom `.tn-btn` button system to `.mod-settings` only,
allowing Obsidian's native button styles to work elsewhere.
- Add `background: transparent` to mini-calendar buttons to match
Obsidian's native `.text-icon-button` styling.
This makes the plugin more cohesive with Obsidian's UI and reduces
unnecessary style overrides.
Extracted duplicated cursor-hiding CSS from widget files into a single
.cm-widget-cursor-fix utility class. Uses minimal approach that only
hides widget buffer artifacts and prevents editing inside widgets,
without hiding the editor cursor.
Changes:
- Created .cm-widget-cursor-fix utility class in utilities.css
- Applied utility class to task-card-note-widget and project-note-subtasks
- Removed 150+ lines of duplicated CSS across widget files
- Simplified widget-specific CSS to only styling concerns
Benefits:
- DRY principle: Single source of truth for widget behavior
- Maintainability: Update widget fixes in one place
- Consistency: All widgets use same approach
- Smaller bundle: Removed redundant CSS rules
- Better UX: Preserves cursor visibility and normal navigation
This approach only hides the widget buffer image artifact (the actual
visual bug) and prevents text selection inside widgets, without
interfering with normal editor cursor behavior or navigation.
- Add border and border radius to calendar container for better definition
- Add top border to column headers for visual consistency
- Add bottom border to header toolbar for cleaner separation
- Fix missing newline at end of utilities.css
These changes improve the visual appearance and definition of the
advanced calendar view interface.
- 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.
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
• 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.
