feat : unify interactive stats and boarders in dark mode (#110)

[YasserYG8]

Title feat: unify interactive states and borders in dark mode (DataDave-Dev#110)

Description

This PR addresses issue DataDave-Dev#110 by auditing and unifying interactive states (hover, focus, active) and border styles in dark mode. It ensures high contrast (WCAG AA compliant) and visual polish across the application.

Changes

• Design Tokens: Introduced theme-level design tokens (--color-surface-hover, --color-surface-active, --color-border-dark, and brand hover variants) in globals.css.
• Docs Navigation: Resolved a bug where inactive links turned black (unreadable) on hover in dark mode, and added proper active border styling.
• Workspace UI: Fixed workspace tabs and folder upload buttons from flashing white backgrounds or black text on hover in dark mode.
• Home Layout: Adjusted card grids (Showcase, FAQ, Use Cases, How It Works) and outline buttons to use dark-mode hover backgrounds instead of light-theme flashing.
• Theme Toggle: Added interactive hover background transitions.
• Diagram Nodes: Configured custom selection and hover borders for React Flow nodes.

Verification

• Ran pnpm typecheck (Passed successfully).
• Ran pnpm test (All 66 tests passed successfully).
• Ran pnpm build (Compiled production build successfully).
• Ran pnpm lint (0 errors or warnings).

Related Issues

Closes DataDave-Dev#110

Summary by CodeRabbit

• Style
  • Unified application color scheme using design tokens for improved visual consistency across all components.
  • Enhanced dark mode support with improved color contrast and brand-aligned styling throughout the interface.
  • Refreshed styling for interactive elements including buttons, menus, cards, and navigation items.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 2a4400a6-317b-4e62-8d6f-a70b9a6481e4

📥 Commits

Reviewing files that changed from the base of the PR and between 755f49d and a0178bc.

📒 Files selected for processing (11)

• src/app/globals.css
• src/components/docs/DocsSidebar.tsx
• src/components/layout/Header.tsx
• src/components/layout/ThemeToggle.tsx
• src/components/sections/Hero.tsx
• src/components/sections/HowItWorks.tsx
• src/components/sections/Showcase.tsx
• src/components/sections/SupportedLanguages.tsx
• src/components/sections/TestimonialsBoard.tsx
• src/components/sections/UseCases.tsx
• src/components/ui/CodeWorkspace.tsx

---

📝 Walkthrough

Walkthrough

New semantic color variables (surface-hover, border-dark, brand hover variants) and React Flow node styling overrides are added to globals.css. Across 10 components—Header, ThemeToggle, DocsSidebar, Hero, HowItWorks, Showcase, SupportedLanguages, TestimonialsBoard, UseCases, and CodeWorkspace—all hardcoded Tailwind color classes are replaced with the new design token classes.

Changes

Design Token Migration

Layer / File(s)	Summary
New design tokens and React Flow overrides src/app/globals.css	@theme gains surface-hover/active, dark-border, and brand-hover variables. .react-flow__node receives transition, hover border-color, and selected-state box-shadow rules for both light and dark modes.
Layout component token migration src/components/layout/Header.tsx, src/components/layout/ThemeToggle.tsx, src/components/docs/DocsSidebar.tsx	All Header class constants and inline className strings (language dropdown, user menu, mobile panel/dividers) switch to token classes; ThemeToggle button and DocsSidebar border/active-link classes are updated the same way.
Section component token migration src/components/sections/Hero.tsx, src/components/sections/HowItWorks.tsx, src/components/sections/Showcase.tsx, src/components/sections/SupportedLanguages.tsx, src/components/sections/TestimonialsBoard.tsx, src/components/sections/UseCases.tsx	Hero buttons, HowItWorks step cards, Showcase grid cards, SupportedLanguages list items, TestimonialsBoard rating chips and Load-more button, and UseCases item cards all replace hardcoded color classes with brand/surface/ink/line/border-dark tokens.
CodeWorkspace UI token migration src/components/ui/CodeWorkspace.tsx	Tab helper, folder picker container, upload button, language <select>, splitter bar, and save button replace hardcoded color strings with brand/ink/surface/line token classes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐇 Hop hop, the tokens align,
No more hardcoded hues in a line.
border-line and bg-surface bloom,
Chasing stale hex values out of the room.
Dark mode tokens dance just right —
This rabbit's theme shines day and night! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title describes the main change: unifying interactive states and borders in dark mode, which aligns with the file modifications across multiple components.
Description check	✅ Passed	The PR description comprehensively covers the changes, includes verification results for all required checks (lint, typecheck, test, build), and follows the template structure with proper categorization.
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 docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/dark-mode-polish

---

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