refactor: update Tabs component structure and theme colors

[abhishek-bruno]

Description

• Replaced the div wrapper in the Tabs component with StyledWrapper for improved styling.
• Simplified TabsList and TabsTrigger components by removing theme dependency and using classnames for styling.
• Updated inactive background colors in multiple theme files to enhance visual consistency across themes.

Contribution Checklist:

• I've used AI significantly to create this pull request
• The pull request only addresses one issue or adds one feature.
• The pull request does not introduce any breaking changes
• I have added screenshots or gifs to help explain the change if applicable.
• I have read the contribution guidelines.
• Create an issue and link to the pull request.

Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.

Publishing to New Package Managers

Please see here for more information.

Summary by CodeRabbit

• Style

  • Updated secondary tab colors across all dark and light theme variants for improved visual consistency
  • Adjusted colors for both active and inactive tab states throughout theme suite

• Refactor

  • Restructured tab component styling architecture

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Introduces a styled component wrapper for Tabs with centralized styling rules, refactors the Tabs component to use class-based styling instead of inline theme logic, and updates secondary tab colors across multiple dark and light themes to improve visual consistency.

Changes

Cohort / File(s)	Summary
Tabs Component Structure packages/bruno-app/src/components/Tabs/StyledWrapper.js, packages/bruno-app/src/components/Tabs/index.js	New styled-component wrapper (StyledWrapper) introduced with .tabs-list and .tab-trigger styles. Tabs component refactored to replace inline theme-based styling with class-based approach using classnames; theme import removed from component logic.
Dark Themes packages/bruno-app/src/themes/dark/{catppuccin-frappe,catppuccin-macchiato,catppuccin-mocha}.js	tabs.secondary.inactive.bg changed from SURFACE1 → SURFACE0 across all three Catppuccin dark variants.
Dark Themes (Continued) packages/bruno-app/src/themes/dark/{dark-monochrome,dark-pastel,nord,vscode}.js	Color updates for secondary tabs: dark-monochrome (active.bg #2D2D2D → #3F3F3F, inactive.color #CCCCCC → #999999), dark-pastel & vscode (inactive.bg GRAY_4 → GRAY_3), nord (inactive.bg NORD3 → NORD2).
Dark Theme Refactor packages/bruno-app/src/themes/dark/dark.js	Secondary tab colors replaced with palette tokens: active.bg #2D2D2D → palette.background.SURFACE0, active.color #CCCCCC → palette.text.BASE, inactive.bg #3F3F3F → palette.background.SURFACE0, inactive.color #CCCCCC → palette.text.SUBTEXT1.
Light Themes packages/bruno-app/src/themes/light/{catppuccin-latte,light-monochrome,light-pastel,light,vscode}.js	Active secondary tab background color updates: catppuccin-latte (BASE → SURFACE0), light-monochrome (#FFFFFF → #ECECEE), light-pastel (white → GRAY_2), light (BASE → SURFACE1 for active; SURFACE1 → SURFACE0 for inactive; inactive text BASE → SUBTEXT1), vscode (white → gray2).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: theme + ux overhaul #6520: Modifies tabs styling and theme tokens using the same component and theme files.
• feat: design updates #6551: Overlapping theme file updates for tab color values and UI styling across dark and light themes.

Suggested labels

size/M

Suggested reviewers

• helloanoop
• naman-bruno
• lohit-bruno

Poem

Tabs wear fresh colors, styled with grace,
Palette tokens find their place,
From inline chaos, classes reign,
Catppuccin dreams, and Nord's refrain—
✨ UI consistency gained! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: refactoring the Tabs component structure and updating theme colors across multiple theme files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

---

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

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)

packages/bruno-app/src/themes/dark/catppuccin-mocha.js (1)

367-376: Active and inactive tabs unified to the same background.

The change from colors.SURFACE1 to colors.SURFACE0 for inactive tabs means both active (line 369) and inactive (line 373) now share the same background color, relying solely on text color for differentiation.

This pattern appears in all Catppuccin dark themes (Mocha, Frappe, Macchiato). If intentional, consider documenting the design rationale. If not, active tabs typically benefit from visual prominence through distinct backgrounds.

packages/bruno-app/src/themes/dark/vscode.js (1)

373-382: Active and inactive tabs now have identical backgrounds.

Line 375 sets active.bg to colors.GRAY_3, and Line 379 changes inactive.bg to the same colors.GRAY_3. This makes active and inactive tabs visually indistinguishable, breaking the core UX principle of tabs.

Based on the StyledWrapper implementation, hovering over an inactive tab will also apply inactive.bg, making hovered inactive tabs look identical to the active tab.

🔎 Proposed fix

Keep the inactive background as GRAY_4 to maintain visual distinction:

      inactive: {
-        bg: colors.GRAY_3,
+        bg: colors.GRAY_4,
        color: colors.TEXT_MUTED
      }

packages/bruno-app/src/themes/dark/dark-pastel.js (1)

371-381: Active and inactive tabs now have identical backgrounds.

Line 373 sets active.bg to colors.GRAY_3, and Line 377 changes inactive.bg to the same colors.GRAY_3. Users won't be able to distinguish which tab is active, breaking core tab functionality.

🔎 Proposed fix

Revert the inactive background to GRAY_4 for visual distinction:

      inactive: {
-        bg: colors.GRAY_3,
+        bg: colors.GRAY_4,
        color: colors.TEXT_MUTED
      }

♻️ Duplicate comments (1)

packages/bruno-app/src/themes/dark/catppuccin-macchiato.js (1)

367-376: Same background unification as Catppuccin Mocha.

Active and inactive tabs both use colors.SURFACE0. See the review comment on catppuccin-mocha.js for details on this pattern.

🧹 Nitpick comments (3)

packages/bruno-app/src/themes/light/light-monochrome.js (1)

354-354: LGTM - Active tab background updated.

The hex color value is valid and achieves the intended visual update.

Optional: Consider using a color token for maintainability

The file defines GRAY tokens that could be used instead of a literal hex value. For example, GRAY_2 ('#f3f3f3') is close to '#ECECEE'. Using tokens makes theme-wide color adjustments easier in the future.

       active: {
-        bg: '#ECECEE',
+        bg: colors.GRAY_2,
         color: '#343434'
       },

However, if '#ECECEE' is intentionally distinct from existing tokens, the current approach is fine.

packages/bruno-app/src/components/Tabs/StyledWrapper.js (1)

16-18: Consider using theme tokens for border-radius and font-size.

Lines 16-18 hardcode border-radius: 4px and font-size: 0.75rem. Using theme tokens like theme.border.radius.sm and theme.font.size.sm would improve consistency across the app.

🔎 Proposed refactor

    .tab-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
-     border-radius: 4px;
+     border-radius: ${(props) => props.theme.border.radius.sm};
      padding: 8px;
-     font-size: 0.75rem;
+     font-size: ${(props) => props.theme.font.size.sm};
      white-space: nowrap;
      cursor: pointer;

packages/bruno-app/src/components/Tabs/index.js (1)

10-10: Consider using classnames for className concatenation.

The template literal concatenation works but could be more robust with the classnames utility already imported.

🔎 Proposed refactor

  return (
    <TabsContext.Provider value={{ value, onValueChange }}>
-      <StyledWrapper className={`flex flex-col h-full flex-1 ${className}`}>{children}</StyledWrapper>
+      <StyledWrapper className={classnames('flex flex-col h-full flex-1', className)}>{children}</StyledWrapper>
    </TabsContext.Provider>
  );

Same approach could be applied to TabsContent at line 39.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d758645 and 95563dd.

📒 Files selected for processing (15)

• packages/bruno-app/src/components/Tabs/StyledWrapper.js
• packages/bruno-app/src/components/Tabs/index.js
• packages/bruno-app/src/themes/dark/catppuccin-frappe.js
• packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
• packages/bruno-app/src/themes/dark/catppuccin-mocha.js
• packages/bruno-app/src/themes/dark/dark-monochrome.js
• packages/bruno-app/src/themes/dark/dark-pastel.js
• packages/bruno-app/src/themes/dark/dark.js
• packages/bruno-app/src/themes/dark/nord.js
• packages/bruno-app/src/themes/dark/vscode.js
• packages/bruno-app/src/themes/light/catppuccin-latte.js
• packages/bruno-app/src/themes/light/light-monochrome.js
• packages/bruno-app/src/themes/light/light-pastel.js
• packages/bruno-app/src/themes/light/light.js
• packages/bruno-app/src/themes/light/vscode.js

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CODING_STANDARDS.md)

**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions. () => {} is good
No space between function name and parentheses. func() not func ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly

Files:

• packages/bruno-app/src/themes/dark/catppuccin-frappe.js
• packages/bruno-app/src/themes/light/light.js
• packages/bruno-app/src/themes/dark/dark-monochrome.js
• packages/bruno-app/src/themes/dark/dark-pastel.js
• packages/bruno-app/src/themes/dark/vscode.js
• packages/bruno-app/src/themes/dark/dark.js
• packages/bruno-app/src/themes/light/light-monochrome.js
• packages/bruno-app/src/components/Tabs/StyledWrapper.js
• packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
• packages/bruno-app/src/themes/light/catppuccin-latte.js
• packages/bruno-app/src/themes/dark/nord.js
• packages/bruno-app/src/components/Tabs/index.js
• packages/bruno-app/src/themes/dark/catppuccin-mocha.js
• packages/bruno-app/src/themes/light/vscode.js
• packages/bruno-app/src/themes/light/light-pastel.js

🧠 Learnings (5)

📓 Common learnings

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any React component using the styled component

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Styled Components are used as wrappers to define both self and children components style; Tailwind classes are used specifically for layout based styles

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors

📚 Learning: 2025-12-17T21:41:24.730Z

Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.

Applied to files:

• packages/bruno-app/src/themes/dark/catppuccin-frappe.js
• packages/bruno-app/src/themes/light/light.js
• packages/bruno-app/src/themes/dark/dark-monochrome.js
• packages/bruno-app/src/themes/dark/dark-pastel.js
• packages/bruno-app/src/themes/dark/vscode.js
• packages/bruno-app/src/themes/dark/dark.js
• packages/bruno-app/src/themes/light/light-monochrome.js
• packages/bruno-app/src/components/Tabs/StyledWrapper.js
• packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
• packages/bruno-app/src/themes/light/catppuccin-latte.js
• packages/bruno-app/src/themes/dark/nord.js
• packages/bruno-app/src/components/Tabs/index.js
• packages/bruno-app/src/themes/dark/catppuccin-mocha.js
• packages/bruno-app/src/themes/light/vscode.js
• packages/bruno-app/src/themes/light/light-pastel.js

📚 Learning: 2025-12-05T20:31:33.005Z

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any React component using the styled component

Applied to files:

• packages/bruno-app/src/themes/dark/dark-monochrome.js
• packages/bruno-app/src/themes/dark/dark-pastel.js
• packages/bruno-app/src/themes/dark/vscode.js
• packages/bruno-app/src/themes/dark/dark.js
• packages/bruno-app/src/components/Tabs/StyledWrapper.js
• packages/bruno-app/src/components/Tabs/index.js
• packages/bruno-app/src/themes/light/vscode.js

📚 Learning: 2025-12-05T20:31:33.005Z

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Styled Components are used as wrappers to define both self and children components style; Tailwind classes are used specifically for layout based styles

Applied to files:

• packages/bruno-app/src/components/Tabs/StyledWrapper.js
• packages/bruno-app/src/components/Tabs/index.js

📚 Learning: 2025-12-05T20:31:33.005Z

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors

Applied to files:

• packages/bruno-app/src/components/Tabs/StyledWrapper.js
• packages/bruno-app/src/components/Tabs/index.js

🧬 Code graph analysis (10)

packages/bruno-app/src/themes/dark/catppuccin-frappe.js (1)

packages/bruno-app/src/themes/dark/catppuccin-mocha.js (1)

• colors (6-52)

packages/bruno-app/src/themes/light/light.js (1)

packages/bruno-app/src/themes/dark/dark.js (2)

• palette (3-57)
• palette (3-57)

packages/bruno-app/src/themes/dark/dark-pastel.js (2)

packages/bruno-app/src/themes/dark/dark-monochrome.js (1)

• colors (3-39)

packages/bruno-app/src/themes/dark/dark.js (1)

• colors (88-93)

packages/bruno-app/src/themes/dark/vscode.js (2)

packages/bruno-app/src/themes/dark/dark-monochrome.js (1)

• colors (3-39)

packages/bruno-app/src/themes/dark/dark.js (1)

• colors (88-93)

packages/bruno-app/src/themes/dark/dark.js (1)

packages/bruno-app/src/themes/light/light.js (2)

• palette (2-56)
• palette (2-56)

packages/bruno-app/src/themes/light/catppuccin-latte.js (2)

packages/bruno-app/src/themes/dark/catppuccin-frappe.js (1)

• colors (6-52)

packages/bruno-app/src/themes/dark/catppuccin-mocha.js (1)

• colors (6-52)

packages/bruno-app/src/components/Tabs/index.js (1)

packages/bruno-app/src/components/Tabs/StyledWrapper.js (1)

• StyledWrapper (3-35)

packages/bruno-app/src/themes/dark/catppuccin-mocha.js (1)

packages/bruno-app/src/themes/light/catppuccin-latte.js (1)

• colors (6-52)

packages/bruno-app/src/themes/light/vscode.js (2)

packages/bruno-app/src/themes/light/light-monochrome.js (1)

• colors (3-40)

packages/bruno-app/src/themes/light/light-pastel.js (1)

• colors (8-57)

packages/bruno-app/src/themes/light/light-pastel.js (3)

packages/bruno-app/src/themes/dark/dark-monochrome.js (1)

• colors (3-39)

packages/bruno-app/src/themes/dark/dark.js (1)

• colors (88-93)

packages/bruno-app/src/themes/light/light-monochrome.js (1)

• colors (3-40)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: Playwright E2E Tests
• GitHub Check: CLI Tests
• GitHub Check: Unit Tests
• GitHub Check: SSL Tests - Linux
• GitHub Check: SSL Tests - Windows
• GitHub Check: SSL Tests - macOS

🔇 Additional comments (9)

packages/bruno-app/src/themes/light/light.js (1)

388-397: Verify visual hierarchy: inactive tabs have lighter backgrounds than active tabs.

In this light theme:

• Active tabs: SURFACE1 (#eaeaea - darker gray)
• Inactive tabs: SURFACE0 (#f1f1f1 - lighter gray)

This creates an inverted hierarchy where inactive tabs have a lighter, more prominent background. Typically, active elements are visually emphasized, not receded.

Confirm this is the intended design. The muted text color (SUBTEXT1) for inactive tabs helps, but the lighter background may reduce clarity of the active state.

packages/bruno-app/src/themes/dark/dark-monochrome.js (1)

354-363: Tab styling follows unified background pattern with proper contrast.

Active and inactive tabs now share background #3F3F3F, with active tabs becoming lighter (more prominent in dark theme) and inactive text more muted (#999999). The text color contrast (#CCCCCC vs #999999) provides clear state differentiation.

This implementation maintains adequate visual hierarchy despite unified backgrounds, consistent with the broader theme refactoring across this PR.

packages/bruno-app/src/themes/light/catppuccin-latte.js (1)

364-373: All Catppuccin themes (latte, frappe, macchiato, mocha) have identical tabs.secondary configurations with the same background color (SURFACE0) for both active and inactive states. This is a consistent design choice across all Catppuccin variants, not an inconsistency in latte.

Likely an incorrect or invalid review comment.

packages/bruno-app/src/themes/light/light-pastel.js (1)

370-370: LGTM - Active tab background updated to GRAY_2.

The color token is valid and aligns with the PR's objective to enhance visual consistency across theme files.

packages/bruno-app/src/themes/dark/catppuccin-frappe.js (1)

373-373: LGTM - Inactive tab background updated to SURFACE0.

The change from SURFACE1 to SURFACE0 is valid and consistent with similar updates across other Catppuccin theme variants in this PR.

packages/bruno-app/src/themes/light/vscode.js (1)

374-374: LGTM - Active tab background updated to GRAY_2.

The color token is valid and consistent with similar updates in other light themes in this PR.

packages/bruno-app/src/themes/dark/nord.js (1)

376-376: LGTM - Inactive tab background updated to NORD2.

The color token is valid and maintains consistency with the Nord theme's Polar Night palette.

packages/bruno-app/src/components/Tabs/StyledWrapper.js (1)

1-37: LGTM! Styled component approach follows project patterns.

The wrapper correctly uses the theme prop for colors and follows the coding guidelines. The transition and layout styles provide good UX.

Based on learnings, styled components should use theme props for colors (implemented correctly here) and can handle layout (also done correctly with inline-flex, padding, etc.).

packages/bruno-app/src/components/Tabs/index.js (1)

1-46: LGTM! Clean refactor to class-based styling.

The refactor successfully moves from inline theme-based styling to a cleaner class-based approach using StyledWrapper. This improves maintainability and follows the project's architectural patterns. The public API remains unchanged, ensuring backward compatibility.

Based on learnings, this correctly uses styled components for color management and Tailwind classes for layout.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Active and inactive tabs have identical backgrounds; palette-based approach is good.

Lines 401 and 405 both use palette.background.SURFACE0 for active and inactive backgrounds, making tabs indistinguishable. However, the refactor to use palette tokens instead of hardcoded hex values is a positive improvement for maintainability.

🔎 Proposed fix

Use different surface levels to distinguish active from inactive tabs:

      active: {
        bg: palette.background.SURFACE0,
        color: palette.text.BASE
      },
      inactive: {
-        bg: palette.background.SURFACE0,
+        bg: palette.background.SURFACE1,
        color: palette.text.SUBTEXT1
      }

This leverages the semantic palette structure where SURFACE1 is a different shade from SURFACE0.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	secondary: {
	active: {
	bg: '#2D2D2D',
	color: '#CCCCCC'
	bg: palette.background.SURFACE0,
	color: palette.text.BASE
	},
	inactive: {
	bg: '#3F3F3F',
	color: '#CCCCCC'
	bg: palette.background.SURFACE0,
	color: palette.text.SUBTEXT1
	}
	}
	},
	secondary: {
	active: {
	bg: palette.background.SURFACE0,
	color: palette.text.BASE
	},
	inactive: {
	bg: palette.background.SURFACE1,
	color: palette.text.SUBTEXT1
	}
	}
	},

🤖 Prompt for AI Agents

In packages/bruno-app/src/themes/dark/dark.js around lines 399 to 409, the
active and inactive tab backgrounds both use palette.background.SURFACE0 making
them visually identical; change the inactive (or active) bg to a different
surface token (e.g., palette.background.SURFACE1) so active and inactive tabs
are distinguishable while keeping palette tokens.