fix: restore Marquee animation and Tailwind v4 compatibility

[Yeom-JinHo]

I believed this was fixed in PR #82, but it still isn’t working perfectly. Submitting another PR to address the remaining issues.

Description

This PR focuses on fixing Tailwind v4 compatibility issues in the Marquee component.
During migration, Tailwind’s new CSS-first compiler caused animation variables and custom property scopes to behave inconsistently.
This update reorganizes animation tokens and CSS variable definitions to ensure smooth marquee motion and reliable variable overrides.

---

Changes

• Animation Definitions (major fix): Moved animation variable definitions from the global @theme block into @theme inline for Tailwind v4 compatibility.
• CSS Variable Syntax Update: Replaced gap-[var(--gap)] with gap-(--gap) to align with the new Tailwind v4 shorthand syntax.
• Source Directives: Added comprehensive @source paths to include all component files, ensuring custom utilities like [--duration:10s] are correctly extracted.
• Keyframes Reorganization: Moved marquee, marquee-reverse, and marquee-vertical keyframes into the same @theme inline block to maintain variable linkage.
• Reverse Animation Support: Added missing reverse keyframes (marquee-reverse, marquee-vertical-reverse) for full parity with horizontal and vertical motions.
• Documentation Update: Updated MDX examples to reflect the new CSS structure and variable syntax.

---

Motivation

• Tailwind v4 Migration Stability: Ensures that custom animations relying on CSS variables (e.g., --duration, --gap) remain functional after migration.
• CSS Variable Scope Fix: Using @theme inline guarantees local variable resolution within the same compilation context.
• Predictable Overrides: Allows [--duration:10s] and similar overrides at the component level to properly cascade.

Summary by CodeRabbit

• New Features

  • Added reverse animation support for marquee components.

• Refactor

  • Reorganized CSS animation variable structure and scope.
  • Updated CSS utility syntax for improved consistency.

[coderabbitai]

Walkthrough

This pull request refactors CSS theme organization and extends marquee animation capabilities. It moves animation variable declarations to an inline theme scope, introduces reverse marquee animations with corresponding keyframes, and updates gap utility syntax from Tailwind arbitrary values to a new format across components and documentation.

Changes

Cohort / File(s)	Summary
Theme reorganization apps/ui-layout/app/globals.css	Adds @source patterns for directory tracking; relocates CSS animation variables (--animate-border, --animate-infinite-scroll, --animate-marquee, etc.) from root @theme block to a new nested @theme inline block
Marquee component updates apps/ui-layout/components/ui/marquee.tsx	Updates gap utility syntax from gap-[var(--gap)] to gap-(--gap) in container and item classes
Documentation and examples apps/ui-layout/content/components/marquee.mdx	Introduces @theme inline for scoped theming; adds new animation variables and keyframes for reverse marquee animations (--animate-marquee-reverse, --animate-marquee-vertical-reverse, marquee-reverse, marquee-vertical-reverse); updates className gap syntax

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Consistent pattern-based updates across files (gap syntax changes)
• Straightforward CSS reorganization with clear intent
• New animation additions follow existing patterns without complex logic
• Documentation updates align with implementation changes

Possibly related PRs

• fix: restore marquee animation after Tailwind v4 migration #82: Introduces reverse marquee animations and CSS variables (--animate-marquee-reverse, --animate-marquee-vertical-reverse) with corresponding keyframes, directly coordinating with the animation enhancements in this PR.

Poem

🐰 Animations spin 'round and 'round,
Reverse marquees make magic sound,
Gaps rewritten, themes inline,
CSS tokens now align! ✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title "fix: restore Marquee animation and Tailwind v4 compatibility" directly and comprehensively addresses the main changes in the pull request. The changeset specifically updates the Marquee component across multiple files (globals.css, marquee.tsx, and marquee.mdx) by reorganizing animation tokens to use @theme inline and updating CSS variable syntax to match Tailwind v4 requirements. The title clearly identifies both the component being fixed (Marquee) and the dual objectives (restoring animation functionality and ensuring Tailwind v4 compatibility), making it specific and informative without being overly broad or vague.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2f89595 and ed12d95.

📒 Files selected for processing (3)

• apps/ui-layout/app/globals.css (2 hunks)
• apps/ui-layout/components/ui/marquee.tsx (2 hunks)
• apps/ui-layout/content/components/marquee.mdx (5 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

apps/ui-layout/components/ui/marquee.tsx (1)

packages/ui/src/lib/utils.ts (1)

• cn (4-6)

🔇 Additional comments (5)

apps/ui-layout/components/ui/marquee.tsx (1)

26-26: Tailwind v4 syntax migration applied correctly.

The CSS variable syntax has been updated from gap-[var(--gap)] to gap-(--gap) to comply with Tailwind v4 requirements, where arbitrary values using CSS variables must use parentheses instead of brackets.

Also applies to: 39-39

apps/ui-layout/content/components/marquee.mdx (2)

85-125: Theme inline block correctly implements Tailwind v4 animation tokens.

The @theme inline block properly consolidates animation variables and keyframes for marquee animations. The reverse animations correctly invert the transform directions, and all tokens reference CSS variables (--duration, --gap) that will be overridden via utility classes.

---

154-154: CSS variable syntax updated correctly.

The gap utilities now use gap-(--gap) instead of gap-[var(--gap)], matching Tailwind v4's requirement for CSS variable arbitrary values.

Also applies to: 167-167

apps/ui-layout/app/globals.css (2)

5-9: Comprehensive source paths ensure proper content extraction.

The additional @source directives cover all component and content directories, ensuring Tailwind v4 can detect and extract custom utilities like [--duration:10s] from documentation and registry files.

---

125-167: Theme reorganization successfully isolates marquee animations.

The refactoring properly closes the root @theme block and introduces a new @theme inline block for marquee-specific animations. This separation achieves the PR's goal of consolidating animations that depend on component-scoped CSS variables (--duration, --gap) while keeping variable-independent animations (border, infinite-scroll) in the root theme. The reverse keyframes correctly invert transform directions.

---

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