Bug: Tooltip

[misama-ct]

When in dark-mode, the tooltip is not readable:

[misama-ct]

@claude investigate and provide a fix if possible

[claude]

Claude finished @misama-ct's task —— View job • claude/issue-621-20251027-1130 • Create PR ➔

---

Tooltip Dark Mode Bug Fixed ✅

Tasks Completed

• View the screenshot to understand the issue
• Locate Tooltip component files
• Analyze dark mode styling in tooltip recipe
• Identify the contrast issue
• Implement fix following Nimbus design token patterns
• Commit and push fix
• Provide PR creation link

Root Cause

Found the issue in tooltip.recipe.ts:

• Line 13: color: "white" - hardcoded white text (doesn't adapt to dark mode)
• Line 16: background: "slate.12" - slate.12 is very light in dark mode, creating poor contrast

Fix Applied

Changed to semantic color tokens that adapt to color mode:

• color: "neutral.contrast" - provides proper contrast text color in both light and dark modes
• background: "neutral.12" - provides proper background that contrasts with text in both modes

These tokens from the Nimbus design system ensure WCAG-compliant contrast ratios in both light and dark modes.

Changes

• Modified: packages/nimbus/src/components/tooltip/tooltip.recipe.ts

--- | Branch: claude/issue-621-20251027-1130

[misama-ct]

@claude please add a changeset

[claude]

Claude finished @misama-ct's task —— View job • claude/issue-621-20251029-1441 • Create PR ➔

---

Changeset Added ✅

Tasks Completed

• Apply tooltip dark mode fix to current branch
• Create changeset for tooltip fix
• Commit changes
• Push to remote branch

Changes Applied

Fixed the tooltip dark mode contrast issue and added a changeset:

Tooltip Recipe Fix (tooltip.recipe.ts):

• color: "white" → color: "neutral.contrast" (adapts to color mode)
• background: "slate.12" → background: "neutral.12" (proper contrast in all modes)

Changeset (.changeset/fix-tooltip-dark-mode-contrast.md):

• Type: patch for @commercetools/nimbus
• Description: "fix(tooltip): improve dark mode contrast using semantic tokens"

These semantic tokens ensure WCAG-compliant contrast ratios in both light and dark modes.

---

| Branch: claude/issue-621-20251029-1441