fix(calendar): readable text on inactive event tiles#986
Merged
Conversation
PR #980 added [style.color]="boardTextColor(task.color)" to calendar event tiles. For inactive tasks (status === false) the SCSS .gcal-task--inactive rule recolours the tile to a light-grey card (#eef0f2 background, #6b7280 muted text), but the non-!important SCSS colour lost to the inline boardTextColor — which is white on dark boards — leaving white text on a light-grey background (unreadable). Make the inline colour conditional: emit null for inactive tiles so the SCSS grey applies and cascades (completion-btn uses color:inherit, .task-title inherits, .task-time keeps its own muted grey). Active tiles are unchanged (still boardTextColor: white on dark, #1a1a1a on light), and the inactive+completed case still resolves to white-on-green via the more-specific .gcal-task--inactive.completed rule. The all-day chip and drag-ghost are unaffected: neither has a light-grey inactive background, so there is no contrast regression to fix there. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR improves the Calendar module’s timed event tile readability by preventing inactive tiles (task.status === false) from emitting an inline text color that would override the inactive SCSS styling. This aligns the UI behavior with the existing .gcal-task--inactive grey theme so text stays legible.
Changes:
- Make
[style.color]conditional so inactive tiles don’t set an inlinecolor, allowing.gcal-task--inactiveto control text color via CSS.
| [style.z-index]="zIndexStyle" | ||
| [style.background-color]="task.color" | ||
| [style.color]="boardTextColor(task.color)" | ||
| [style.color]="task.status === false ? null : boardTextColor(task.color)" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Inactive calendar event tiles (
task.status === false) render white text on a light-grey background → unreadable.Gap from #980: that PR added
[style.color]="boardTextColor(task.color)", which returnswhitefor dark boards. The.gcal-task--inactiveSCSS repaints the tile light-grey (#eef0f2) withcolor: #6b7280, but that color is not!important, so the inline white wins → white-on-light-grey.Fix
Make the inline color conditional so inactive tiles emit no inline color and let the SCSS grey cascade:
#6b7280grey on#eef0f2(readable);.completion-btn/.task-titleinherit,.task-timekeeps its muted tone.boardTextColor: white on dark boards,#1a1a1aon light)..gcal-task--inactive.completed { color:#fff }still applies (white on green).All-day chip and drag-ghost don't have a light-grey inactive state — no change needed.
🤖 Generated with Claude Code