fix(views): DS drift — sankey tooltip tokens and imports icon background

[glorydavid03023]

Summary

• Cashflow Sankey chart tooltip: replace bg-gray-700 text-white with functional tokens (matches time_series_chart_controller)
• Imports new page: replace invalid bg-gray-tint-5 with bg-surface on YNAB import option icon

Issues

• Refs DS Drift — week of 2026-05-18 #1971 (DS Drift week of 2026-05-18 — sankey commit)
• Refs DS Drift — week of 2026-05-17 #1951 (DS Drift week of 2026-05-17 — imports/new icon)

Not duplicated

• No open PR touches sankey tooltip classes or this imports callsite

Test plan

• Open dashboard cashflow Sankey, hover nodes — tooltip renders with correct contrast in light/dark mode
• Open Imports > New — YNAB option icon background looks correct

Summary by CodeRabbit

• Style
  • Updated the visual styling of sankey chart tooltips for improved appearance and consistency.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 404e3569-67e3-48b6-87b2-a023088132d5

📥 Commits

Reviewing files that changed from the base of the PR and between c9ef635 and 89ae3ca.

📒 Files selected for processing (1)

• app/javascript/controllers/sankey_chart_controller.js

✅ Files skipped from review due to trivial changes (1)

• app/javascript/controllers/sankey_chart_controller.js

---

📝 Walkthrough

Walkthrough

Sankey chart tooltip styling was updated to use design system color tokens. The tooltip div class string changed from hardcoded gray/white (bg-gray-700 text-white) to container-style tokens (bg-container text-primary) with updated border and rounding classes.

Changes

Tooltip Styling Update

Layer / File(s)	Summary
Sankey chart tooltip styling app/javascript/controllers/sankey_chart_controller.js	Tooltip div class string updated from bg-gray-700 text-white ... to bg-container text-primary ... with border-secondary and rounded-lg classes. Tooltip positioning and creation logic unchanged.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested reviewers

• jjmata

Poem

A tooltip once wore gray so plain,
Now dressed in colors born from design,
The sankey chart, a vibrant vein,
With tokens new, its hues align. 🎨✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title references both 'sankey tooltip' and 'imports icon background', but the changeset only modifies the sankey chart tooltip styling. The imports icon background change is not reflected in the provided summary.	Update the title to accurately reflect the actual changes, such as 'fix(views): Update sankey chart tooltip styling with design system tokens' or verify that the imports icon background changes are included in this PR.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[jjmata]

The token swap is correct. Beyond the required bg-gray-700 text-white → bg-container text-primary, the tooltip also picks up font-sans, border border-secondary, and rounded-lg — bringing it visually in line with other tooltips in the app. These extra additions seem intentional and reasonable for the sankey tooltip specifically (it was previously unstyled relative to the design system).

The PR description also mentions fixing bg-gray-tint-5 → bg-surface on the YNAB import option icon, but that change doesn't appear in the diff. If it was merged as part of another commit or dropped, worth confirming it's addressed.

---

Generated by Claude Code