add UI colors configuration for cast button styles across systems

[sktbrd]

This pull request introduces a consistent, dynamic color theming system across multiple UI components by integrating the useUIColors hook and replacing hardcoded color values with theme-driven styles. The changes focus on improving maintainability and user experience by ensuring that primary colors and hover states are derived from a central theme, making it easier to update and manage UI colors throughout the app.

Theme integration and UI consistency:

• Added the useUIColors hook to various components (reorderable-tab.tsx, ClaimButtonWithModal.tsx, ClaimModal.tsx, MiniAppSettings.tsx, ThemeColorSelector.tsx, FidgetSettingsEditor.tsx, FidgetTray.tsx, MobileHeader.tsx) to provide access to theme colors. [1] [2] [3] [4] [5] [6] [7]

• Updated button and interactive element styles to use uiColors.primaryColor and uiColors.primaryHoverColor for background, text, and hover states, replacing previous hardcoded color classes and inline styles. This affects components such as claim buttons, sign-in buttons, fidget tray add button, fidget settings submit button, and mini app settings toggles. [1] [2] [3] [4] [5]

Component-specific improvements:

• Refactored tab styling in reorderable-tab.tsx to use theme colors for selection, hover, and underline, improving visual consistency and accessibility. [1] [2]

• Enhanced input and focus ring colors in MiniAppSettings.tsx and icon selector to use theme colors for better focus indication and branding alignment. [1] [2]

• Updated icon color logic and hover states in ThemeColorSelector.tsx to utilize theme colors, improving feedback and consistency.

Code maintainability:

• Centralized color management by removing hardcoded color values and CSS classes, making future theme updates straightforward and reducing the risk of inconsistent UI colors. [1] [2] [3] [4] [5]

App-wide theme adoption:

• Ensured that all major interactive components now respond to theme changes via useUIColors, supporting a more cohesive look and easier branding updates across the application. [1] [2] [3] [4] [5] [6] [7]

Summary by CodeRabbit

• New Features
  • Implemented comprehensive UI color theming throughout the application with configurable primary colors and interactive hover/active states.
  • Applied theme-driven styling to interactive elements including buttons and controls for improved visual feedback during user interactions.
  • Added dedicated cast button theming system with separate background, hover, and active color configurations across all themes.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Introduces UI color theming infrastructure by creating a useUIColors hook and UIConfig type system, then applies dynamic color styling across UI components using inline styles and hover handlers instead of static class-based styling.

Changes

Cohort / File(s)	Summary
New Theming Hook src/common/lib/hooks/useUIColors.ts	Exports a new React hook that loads system config and memoizes UI color tokens (primary, hover, active colors and cast button colors) with robust defaults.
Theming Configuration src/config/systemConfig.ts	Adds UIConfig interface with color properties and extends SystemConfig with optional ui?: UIConfig field.
Theme Configuration Files src/config/clanker/clanker.ui.ts, src/config/clanker/index.ts, src/config/example/example.ui.ts, src/config/example/index.ts, src/config/nouns/nouns.ui.ts, src/config/nouns/index.ts	Introduces UI configuration files for each theme variant defining color palettes and cast button styles; updates respective config index files to include ui property.
Component Theming Updates src/common/components/atoms/reorderable-tab.tsx, src/common/components/molecules/ClaimButtonWithModal.tsx, src/common/components/molecules/ClaimModal.tsx, src/common/components/molecules/MiniAppSettings.tsx, src/common/components/molecules/ThemeColorSelector.tsx, src/common/components/organisms/FidgetSettingsEditor.tsx, src/common/components/organisms/FidgetTray.tsx, src/common/components/organisms/MobileHeader.tsx, src/common/components/organisms/Navigation.tsx	Integrates useUIColors hook and replaces static class-based styling with inline styles driven by theme colors; adds onMouseEnter/onMouseLeave handlers for hover and active state styling.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Navigation.tsx and FidgetTray.tsx: Introduce changes to public component props and extend loadSystemConfig interface — verify contract compatibility with consuming code.
• useUIColors hook memoization: Confirm stable memoization strategy with empty dependency array is appropriate for system-wide configuration usage.
• Theme configuration consistency: Verify color values across all three theme files (clanker, example, nouns) follow intended design standards.

Possibly related PRs

• ui fixes #1573: Modifies Navigation.tsx and systemConfig.ts types similarly; overlapping configuration system changes.
• Navigation config #1525: Updates Navigation.tsx and extends loadSystemConfig usage for configuration properties; related config consumption pattern.
• feat: tabbar enhancements  #1399: Touches reorderable-tab.tsx and adds event handler logic for component interactions; same component targeted for styling updates.

Suggested labels

LGFTP

Suggested reviewers

• j-paterson

Poem

🎨 A rabbit paints the UI bright,
With hooks that fetch the colors right,
No more classes hard to trace,
Just styles flowing in their place,
Hover states with gentle care,
Theme-driven magic in the air! 🌈

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch include-cast-button-in-theme-color

---

📜 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 9e2cd23 and 079418d.

📒 Files selected for processing (17)

• src/common/components/atoms/reorderable-tab.tsx (4 hunks)
• src/common/components/molecules/ClaimButtonWithModal.tsx (3 hunks)
• src/common/components/molecules/ClaimModal.tsx (3 hunks)
• src/common/components/molecules/MiniAppSettings.tsx (5 hunks)
• src/common/components/molecules/ThemeColorSelector.tsx (3 hunks)
• src/common/components/organisms/FidgetSettingsEditor.tsx (3 hunks)
• src/common/components/organisms/FidgetTray.tsx (3 hunks)
• src/common/components/organisms/MobileHeader.tsx (2 hunks)
• src/common/components/organisms/Navigation.tsx (4 hunks)
• src/common/lib/hooks/useUIColors.ts (1 hunks)
• src/config/clanker/clanker.ui.ts (1 hunks)
• src/config/clanker/index.ts (2 hunks)
• src/config/example/example.ui.ts (1 hunks)
• src/config/example/index.ts (2 hunks)
• src/config/nouns/index.ts (2 hunks)
• src/config/nouns/nouns.ui.ts (1 hunks)
• src/config/systemConfig.ts (1 hunks)

---

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.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
nounspace-ts	Ready	Preview	Comment	Nov 19, 2025 4:41am
nounspace-ts (clanker)	Ready	Preview	Comment	Nov 19, 2025 4:41am

[willyogo]

que bonito!