feat: default dark mode theme tweaks#6531
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughCentralizes palette tokens, migrates many styled-components to use theme tokens (borders, backgrounds, radii, shadows), removes deprecated preferences/sidebar.search fields from themes/schema, tweaks multiple component styles (search bar, dropdown, modal, response pane, sidebar, CodeMirror variable token), and reorganizes Storybook palette viewers into componentized stories. Changes
Sequence Diagram(s)(omitted — changes are primarily styling/theme updates without new multi-component control flow) Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used📓 Path-based instructions (2)**/*.{js,jsx,ts,tsx}📄 CodeRabbit inference engine (CODING_STANDARDS.md)
Files:
**/*.{jsx,tsx}📄 CodeRabbit inference engine (CODING_STANDARDS.md)
Files:
🧠 Learnings (3)📓 Common learnings📚 Learning: 2025-12-05T20:31:33.005ZApplied to files:
📚 Learning: 2025-12-05T20:31:33.005ZApplied to files:
🧬 Code graph analysis (1)packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx (3)
⏰ 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)
🔇 Additional comments (1)
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. Comment |
There was a problem hiding this comment.
Pull request overview
This PR implements UX tweaks for the default dark mode theme, focusing on improving visual consistency and maintainability across all theme variants. The changes include schema updates, theme refactoring with new palette structures, and component styling adjustments.
Key Changes:
- Removed obsolete
searchandpreferencestheme properties from schema and all theme files - Added
borderproperty to dropdown components with conditional rendering support - Refactored dark.js and light.js themes to export reusable color palettes
- Updated component styling to use more direct theme property access
- Consolidated Storybook palette viewer components for better code reuse
Reviewed changes
Copilot reviewed 33 out of 33 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/bruno-app/src/themes/schema/oss.js | Removed sidebar.search and preferences schema properties; added dropdown.border property with description |
| packages/bruno-app/src/themes/light/vscode.js | Removed sidebar.search and preferences properties; added dropdown.border |
| packages/bruno-app/src/themes/light/light.js | Exported palette for Storybook; removed obsolete theme properties; updated shadow styling |
| packages/bruno-app/src/themes/light/light-pastel.js | Removed obsolete theme properties; added dropdown.border |
| packages/bruno-app/src/themes/light/light-monochrome.js | Removed obsolete theme properties; added dropdown.border |
| packages/bruno-app/src/themes/light/catppuccin-latte.js | Removed obsolete theme properties; added dropdown.border |
| packages/bruno-app/src/themes/dark/vscode.js | Removed obsolete theme properties; changed shadow to 'none' and added border for dark mode |
| packages/bruno-app/src/themes/dark/nord.js | Removed obsolete theme properties; changed shadow to 'none' and added border |
| packages/bruno-app/src/themes/dark/dark.js | Major refactor with exported palette; replaced hardcoded colors with palette references throughout |
| packages/bruno-app/src/themes/dark/dark-pastel.js | Removed obsolete theme properties; changed shadow to 'none' and added border |
| packages/bruno-app/src/themes/dark/dark-monochrome.js | Removed obsolete theme properties; updated button colors and borders |
| packages/bruno-app/src/themes/dark/catppuccin-mocha.js | Updated dragbar borders; removed obsolete theme properties; changed hoverBg and focusBorder colors |
| packages/bruno-app/src/themes/dark/catppuccin-macchiato.js | Updated dragbar borders; removed obsolete theme properties; changed hoverBg and focusBorder colors |
| packages/bruno-app/src/themes/dark/catppuccin-frappe.js | Updated dragbar borders; changed dropdown.bg to SURFACE0; removed obsolete theme properties |
| packages/bruno-app/src/themes/PaletteViewer/components.jsx | New shared component for rendering color swatches and sections in Storybook |
| packages/bruno-app/src/themes/PaletteViewer/Light.stories.jsx | New Storybook file importing palette from light theme |
| packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx | New Storybook file importing palette from dark theme |
| packages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsx | Removed - replaced by Light.stories.jsx |
| packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx | Refactored to use shared components |
| packages/bruno-app/src/components/Sidebar/StyledWrapper.js | Removed unused .second-tab-placeholder style |
| packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js | Added transparent background for keyboard-focused collection actions |
| packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js | Changed indent-block border to use theme.border.border1 directly; added transparent background for menu icons |
| packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js | Changed indent-block border to use theme.border.border1 directly |
| packages/bruno-app/src/components/ResponsePane/StyledWrapper.js | Removed .separator style that referenced preferences.sidebar.border |
| packages/bruno-app/src/components/ResponsePane/ScriptError/index.js | Changed separator from hardcoded Tailwind classes to themed separator class |
| packages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.js | Simplified styling to use theme properties; added separator style |
| packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js | Updated input styling to use theme properties instead of removed search properties |
| packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js | Simplified styling to use theme properties with consistent border approach |
| packages/bruno-app/src/components/Modal/StyledWrapper.js | Added border using theme.border.border0 |
| packages/bruno-app/src/components/Dropdown/StyledWrapper.js | Added conditional rendering for shadow and border properties |
| packages/bruno-app/src/components/CodeMirrorSearch/index.js | Removed "compact" class from search bar |
| packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js | Consolidated styling; removed compact variant; added polished rgba import |
| packages/bruno-app/src/components/CodeEditor/StyledWrapper.js | Added span.cm-variable-2 selector for consistent variable styling |
Comments suppressed due to low confidence (1)
packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js:68
- There are duplicate style definitions for '.bruno-search-bar input'. The first block is at lines 24-34, and the second block is at lines 60-68. These should be consolidated into a single definition to avoid confusion and potential conflicts. Some properties overlap (background, border, outline, padding, font-size) while some differ (min-width position, color).
.bruno-search-bar input {
background: transparent;
color: ${(props) => props.theme.colors.text.subtext2};
border: none;
outline: none;
font-size: ${(props) => props.theme.font.size.base};
padding: 1px 2px;
min-width: 80px;
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
...ages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
Show resolved
Hide resolved
...ages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
Show resolved
Hide resolved
...pp/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
Show resolved
Hide resolved
packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js
Outdated
Show resolved
Hide resolved
packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js (1)
114-126: Hardcoded colors contradict theme centralization objectives.Lines 115 and 124 use hardcoded
#ccc3values, which conflicts with this PR's goal of centralizing theme palette definitions. These should be replaced with appropriate theme tokens to ensure proper dark mode support.🔎 Suggested refactor
&.item-target { - background: #ccc3; + background: ${(props) => props.theme.dragAndDrop.hoverBg}; } &.item-seperator { .seperator { bottom: 0px; position: absolute; height: 3px; width: 100%; - background: #ccc3; + background: ${(props) => props.theme.dragAndDrop.hoverBg}; } }packages/bruno-app/src/components/CodeEditor/StyledWrapper.js (1)
39-39: Migrate hardcoded colors to theme tokens for dark mode support.The file contains hardcoded color values that override the theme system and prevent proper dark mode rendering. Theme tokens are available for all mentioned colors:
- Lines 39, 44: Use
props.theme.colors.text.dangerandprops.theme.colors.text.warning(pattern already used in file)- Lines 59, 99: Use
props.theme.scrollbar.color- Line 70: Use
props.theme.input.border- Line 86: Use
props.theme.colors.text.muted- Lines 135, 138: Use
props.theme.codemirror.variable.validand.invalid- Lines 157, 161: Use
props.theme.codemirror.searchMatchand.searchMatchActive- Line 148: Needs color token addition or alternative approach
🧹 Nitpick comments (13)
packages/bruno-app/src/components/Modal/StyledWrapper.js (2)
26-26: Consider migrating hardcoded backdrop color to theme token.Line 26 uses a hardcoded
rgba(0, 0, 0, 0.5)for the modal backdrop. For consistency with the theme token approach (as applied on line 44), consider using a theme token instead.🔎 Suggested refactor
- background-color: rgba(0, 0, 0, 0.5); + background-color: ${(props) => props.theme.modal.backdrop.bg};Note: This assumes
theme.modal.backdrop.bgexists or can be added to theme definitions. Alternatively, consider using a more generic theme token if appropriate.Based on learnings, styled components should use theme props for colors instead of hardcoded values.
113-113: Replace hardcoded border color with theme token.Line 113 uses hardcoded
#cccfor the textbox border. This should use a theme token for consistency with the theming approach.🔎 Suggested refactor
- border: 1px solid #ccc; + border: 1px solid ${(props) => props.theme.modal.input.border};Note: Line 122 already correctly sets the border using the theme token, so line 113 appears redundant and can be removed entirely, or updated to match.
Based on learnings, styled components should use theme props for colors instead of hardcoded values.
packages/bruno-app/src/themes/dark/dark-monochrome.js (1)
156-157: Consider using color token for consistency.The hardcoded border value
'#444'closely matchescolors.GRAY_3('#444444'). For consistency with the token-based theming approach used elsewhere in the file, consider using the color token instead.🔎 Suggested refactor
- border: '#444', + border: colors.GRAY_3,packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js (1)
24-34: Consider consolidating duplicate input styling.The
.bruno-search-bar inputblock appears twice (lines 24-34 and 60-68) with overlapping properties. While CSS cascading will handle this, consolidating would improve maintainability.🔎 Suggested consolidation
-.bruno-search-bar input { - min-width: 80px; - background: transparent; - color: inherit; - border: none; - outline: none; - padding: 1px 2px; - font-size: ${(props) => props.theme.font.size.base}; - margin: 0 1px; - height: 28px; -} - -// ... other styles ... - .bruno-search-bar input { + min-width: 80px; background: transparent; color: ${(props) => props.theme.colors.text.subtext2}; border: none; outline: none; font-size: ${(props) => props.theme.font.size.base}; padding: 1px 2px; - min-width: 80px; + margin: 0 1px; + height: 28px; }Also applies to: 60-68
packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js (1)
18-25: Consider investigating specificity to avoid!important.The
!importantflag on line 23 suggests a specificity conflict. While it achieves the desired transparent background for action buttons, consider whether the underlying cascade can be refactored to avoid the override.packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js (1)
36-42: Inconsistent hover state styling with related components.Unlike the changes in
Collection/StyledWrapper.js(line 23) andCollectionItem/StyledWrapper.js(line 110), this file doesn't explicitly setbackground-color: transparentfor.menu-iconin hover states. For visual consistency across collection components, consider adding it here as well.🔎 Suggested addition
&:hover, &.item-hovered { background: ${(props) => props.theme.sidebar.collection.item.hoverBg}; .menu-icon { visibility: visible; + background-color: transparent; } }packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js (2)
102-112: Consider refactoring specificity to avoid!important.Similar to the other files in this PR, the
!importantflag on line 110 indicates a specificity conflict. While functionally correct, consider whether the cascade can be restructured to avoid the override.
128-138: Another!importantusage - same specificity concern.Line 136 also uses
!importantto force the border styling. This is the third instance across the reviewed files, suggesting a broader specificity architecture issue that could benefit from a refactor.packages/bruno-app/src/themes/PaletteViewer/components.jsx (1)
10-19: Consider edge cases for color format handling.The regex pattern handles common HSL formats well. However, it doesn't account for:
- HSLA colors with alpha channel (e.g.,
hsl(0 70% 71% / 0.5))- Decimal hue values (e.g.,
hsl(180.5 70% 71%))For the current palette usage, this is likely sufficient.
🔎 Optional enhancement for broader format support
const formatColor = (color) => { if (color.startsWith('hsl')) { - // Handle all HSL formats: "hsl(0 70% 71%)", "hsl(0, 70%, 71%)", "hsl(0deg 0% 10%)" - const match = color.match(/hsl\((\d+)(?:deg)?\s*,?\s*(\d+)%\s*,?\s*(\d+)%\)/); + // Handle all HSL/HSLA formats: "hsl(0 70% 71%)", "hsl(0, 70%, 71%)", "hsl(0deg 0% 10%)", "hsla(...)" + const match = color.match(/hsla?\((\d+(?:\.\d+)?)(?:deg)?\s*,?\s*(\d+(?:\.\d+)?)%\s*,?\s*(\d+(?:\.\d+)?)%/); if (match) { return `${match[1]}/${match[2]}/${match[3]}`; } } return color; };packages/bruno-app/src/themes/dark/dark.js (1)
1-46: Palette structure is well-organized.The centralized palette with logical groupings (accents, background, text, border, overlay, utility) improves maintainability.
Minor observation: HSL format spacing is inconsistent (e.g.,
'hsl(0 70% 71%)'vs'hsl(0deg 0% 10%)'). While all formats are valid CSS, consistency would improve readability.🔎 Optional: Normalize HSL format spacing
Consider standardizing to either space-separated or comma-separated format throughout:
// Option 1: Space-separated (modern CSS) RED: 'hsl(0 70% 71%)', BROWN: 'hsl(41 52% 77%)', // Option 2: Comma-separated (traditional) RED: 'hsl(0, 70%, 71%)', BROWN: 'hsl(41, 52%, 77%)',packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx (2)
84-90: Hex colors default to hue 0 in sort.The regex pattern extracts hue from HSL colors, with a fallback to
0for non-matches. Sincepalette.accents.PRIMARYis hex ('#d9a342'), it will sort as hue 0° (red) rather than its actual golden/yellow hue (~43°). The visualization will still render correctly, but the sort order may be unexpected.🔎 Optional: Handle hex colors in hue sorting
Consider converting hex to HSL for accurate hue extraction:
const sorted = [...accents].sort((a, b) => { const getHue = (color) => { if (color.startsWith('hsl')) { const match = color.match(/hsl\((\d+)/); return match ? parseInt(match[1]) : 0; } // For hex colors, you could skip sorting or implement hex-to-hsl conversion return 0; }; return getHue(a[1]) - getHue(b[1]); });
92-122: Consider caching hue values.The hue regex parsing is performed twice: once during sorting (lines 87-88) and again during rendering (lines 102-103). For a small dataset this is negligible, but caching the parsed values would improve efficiency.
🔎 Optional: Cache parsed hue values
const sorted = [...accents].sort((a, b) => { const hueA = parseInt(a[1].match(/hsl\((\d+)/)?.[1] || 0); const hueB = parseInt(b[1].match(/hsl\((\d+)/)?.[1] || 0); return hueA - hueB; -}); +}).map(([name, color]) => ({ + name, + color, + hue: parseInt(color.match(/hsl\((\d+)/)?.[1] || 0) +})); return ( <div style={{ padding: '24px', backgroundColor: palette.background.BASE }}> {/* ... */} <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}> - {sorted.map(([name, color]) => { - const hueMatch = color.match(/hsl\((\d+)/); - const hue = hueMatch ? parseInt(hueMatch[1]) : 0; + {sorted.map(({ name, color, hue }) => { return ( <div key={name} style={{ display: 'flex', alignItems: 'center', gap: '16px' }}> {/* ... */} </div> ); })} </div> </div> );packages/bruno-app/src/themes/PaletteViewer/Light.stories.jsx (1)
83-124: Same observations as Dark theme HueWheel.The HueWheel story has the same implementation as the dark theme, including:
- Hex colors (PRIMARY = '#bd7a28') defaulting to hue 0 in sort
- Duplicate hue parsing during sort and render
Refer to the optional refactor suggestions in Dark.stories.jsx (lines 84-90 and 92-122) for potential improvements.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (33)
packages/bruno-app/src/components/CodeEditor/StyledWrapper.jspackages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.jspackages/bruno-app/src/components/CodeMirrorSearch/index.jspackages/bruno-app/src/components/Dropdown/StyledWrapper.jspackages/bruno-app/src/components/Modal/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ScriptError/index.jspackages/bruno-app/src/components/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/StyledWrapper.jspackages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsxpackages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsxpackages/bruno-app/src/themes/PaletteViewer/Light.stories.jsxpackages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsxpackages/bruno-app/src/themes/PaletteViewer/components.jsxpackages/bruno-app/src/themes/dark/catppuccin-frappe.jspackages/bruno-app/src/themes/dark/catppuccin-macchiato.jspackages/bruno-app/src/themes/dark/catppuccin-mocha.jspackages/bruno-app/src/themes/dark/dark-monochrome.jspackages/bruno-app/src/themes/dark/dark-pastel.jspackages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/themes/light/catppuccin-latte.jspackages/bruno-app/src/themes/light/light-monochrome.jspackages/bruno-app/src/themes/light/light-pastel.jspackages/bruno-app/src/themes/light/light.jspackages/bruno-app/src/themes/light/vscode.jspackages/bruno-app/src/themes/schema/oss.js
💤 Files with no reviewable changes (3)
- packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
- packages/bruno-app/src/components/Sidebar/StyledWrapper.js
- packages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{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()notfunc ()
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/components/Modal/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ScriptError/index.jspackages/bruno-app/src/themes/light/light-pastel.jspackages/bruno-app/src/components/CodeMirrorSearch/index.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/themes/light/light.jspackages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.jspackages/bruno-app/src/themes/light/catppuccin-latte.jspackages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.jspackages/bruno-app/src/themes/light/light-monochrome.jspackages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsxpackages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsxpackages/bruno-app/src/themes/PaletteViewer/components.jsxpackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.jspackages/bruno-app/src/themes/light/vscode.jspackages/bruno-app/src/themes/schema/oss.jspackages/bruno-app/src/components/CodeEditor/StyledWrapper.jspackages/bruno-app/src/themes/dark/catppuccin-mocha.jspackages/bruno-app/src/themes/dark/dark-monochrome.jspackages/bruno-app/src/components/Dropdown/StyledWrapper.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.jspackages/bruno-app/src/themes/PaletteViewer/Light.stories.jsxpackages/bruno-app/src/themes/dark/dark-pastel.jspackages/bruno-app/src/themes/dark/catppuccin-frappe.jspackages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/themes/dark/catppuccin-macchiato.jspackages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{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
Styled Components are used as wrappers to define both self and children components style; Tailwind classes are used specifically for layout based styles
Styled Component CSS might also change layout but Tailwind classes shouldn't define colors
Files:
packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsxpackages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsxpackages/bruno-app/src/themes/PaletteViewer/components.jsxpackages/bruno-app/src/themes/PaletteViewer/Light.stories.jsx
🧠 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
📚 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/Modal/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.jspackages/bruno-app/src/components/Dropdown/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.jspackages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.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/Modal/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.jspackages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsxpackages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsxpackages/bruno-app/src/themes/PaletteViewer/components.jsxpackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.jspackages/bruno-app/src/components/CodeEditor/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.jspackages/bruno-app/src/themes/PaletteViewer/Light.stories.jsxpackages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.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/components/Modal/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.jspackages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsxpackages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsxpackages/bruno-app/src/themes/PaletteViewer/components.jsxpackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.jspackages/bruno-app/src/components/CodeEditor/StyledWrapper.jspackages/bruno-app/src/components/Dropdown/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.jspackages/bruno-app/src/themes/PaletteViewer/Light.stories.jsxpackages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js
📚 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/components/Modal/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ScriptError/index.jspackages/bruno-app/src/themes/light/light-pastel.jspackages/bruno-app/src/components/CodeMirrorSearch/index.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/themes/light/light.jspackages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.jspackages/bruno-app/src/themes/light/catppuccin-latte.jspackages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.jspackages/bruno-app/src/themes/light/light-monochrome.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.jspackages/bruno-app/src/themes/light/vscode.jspackages/bruno-app/src/themes/schema/oss.jspackages/bruno-app/src/components/CodeEditor/StyledWrapper.jspackages/bruno-app/src/themes/dark/catppuccin-mocha.jspackages/bruno-app/src/themes/dark/dark-monochrome.jspackages/bruno-app/src/components/Dropdown/StyledWrapper.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.jspackages/bruno-app/src/themes/dark/dark-pastel.jspackages/bruno-app/src/themes/dark/catppuccin-frappe.jspackages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/themes/dark/catppuccin-macchiato.jspackages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js
🧬 Code graph analysis (7)
packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx (1)
packages/bruno-app/src/themes/PaletteViewer/components.jsx (4)
ColorSection(39-48)ColorSection(39-48)ColorSwatch(21-37)ColorSwatch(21-37)
packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx (3)
packages/bruno-app/src/themes/PaletteViewer/components.jsx (2)
ColorSection(39-48)ColorSection(39-48)packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx (1)
textColor(5-5)packages/bruno-app/src/themes/PaletteViewer/Light.stories.jsx (1)
textColor(5-5)
packages/bruno-app/src/themes/dark/catppuccin-mocha.js (1)
packages/bruno-app/src/themes/dark/dark.js (1)
colors(48-53)
packages/bruno-app/src/themes/dark/dark-monochrome.js (2)
packages/bruno-app/src/themes/dark/dark.js (1)
colors(48-53)packages/bruno-app/src/themes/dark/nord.js (1)
colors(9-55)
packages/bruno-app/src/themes/dark/vscode.js (1)
packages/bruno-app/src/themes/dark/dark.js (1)
colors(48-53)
packages/bruno-app/src/themes/dark/dark-pastel.js (2)
packages/bruno-app/src/themes/dark/dark-monochrome.js (1)
colors(1-35)packages/bruno-app/src/themes/dark/dark.js (1)
colors(48-53)
packages/bruno-app/src/themes/dark/dark.js (1)
packages/bruno-app/src/themes/light/light.js (2)
palette(1-50)palette(1-50)
⏰ 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). (7)
- GitHub Check: Agent
- GitHub Check: Unit Tests
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - Linux
- GitHub Check: SSL Tests - macOS
- GitHub Check: Playwright E2E Tests
- GitHub Check: CLI Tests
🔇 Additional comments (50)
packages/bruno-app/src/components/Modal/StyledWrapper.js (1)
44-44: LGTM! Border now uses theme token.The addition of a border using
theme.border.border0properly follows the theme-based styling pattern and aligns with the PR's objective to use dynamic theme tokens.packages/bruno-app/src/themes/dark/dark-pastel.js (1)
175-176: LGTM! Consistent token-based border styling.The dropdown styling correctly migrates from shadows to borders using the
colors.GRAY_4token, maintaining consistency with the theme's color system.packages/bruno-app/src/themes/dark/dark-monochrome.js (1)
282-283: LGTM! Excellent token-based refactoring.The button2.secondary styling now correctly uses
colors.BGandcolors.TEXTtokens instead of hardcoded values, improving maintainability and consistency with the theme system.packages/bruno-app/src/themes/light/vscode.js (1)
178-178: Dropdown border removed in light theme.The border is set to
'none', relying on the shadow (line 177) for visual separation. This contrasts with the dark theme approach (which uses a border instead of shadow), but is a reasonable design pattern—light themes typically leverage shadows while dark themes benefit from explicit borders for definition.Verify that the visual consistency between light and dark dropdown styles meets the intended UX.
packages/bruno-app/src/themes/dark/vscode.js (1)
176-177: Dropdown styling updated to use border instead of shadow.The dark theme now uses an explicit border (
colors.BORDER) and removes the shadow, which is effective for providing visual separation against dark backgrounds. This complements the light theme's shadow-based approach.The use of the
colors.BORDERtoken aligns with the PR's objective to centralize theming tokens.packages/bruno-app/src/components/ResponsePane/ScriptError/index.js (1)
41-41: LGTM - Clean migration to styled separator.The change from Tailwind's
border-tto the customseparatorclass aligns well with the theme tokenization approach. The corresponding.separatorstyling in StyledWrapper.js properly uses theme tokens for consistent theming.packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js (1)
7-10: LGTM - Proper theme token implementation.The migration to theme tokens is clean and follows the established pattern. Using
theme.background.base,theme.border.border2,theme.colors.text.danger, andtheme.border.radius.baseensures consistent theming across dark and light modes.packages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.js (2)
7-10: LGTM - Consistent theme token usage.The wrapper styling correctly migrates to theme tokens, matching the pattern used in GrpcError/StyledWrapper.js. This ensures consistent theming behavior across error components.
39-42: LGTM - New separator class properly defined.The
.separatorclass is cleanly implemented withtheme.border.border1. Note that this usesborder1while the wrapper usesborder2, which appears intentional for creating visual hierarchy (lighter separator between errors vs. heavier outer border).packages/bruno-app/src/themes/dark/catppuccin-frappe.js (4)
140-141: LGTM! Clean border token updates.The dragbar border styling now uses consistent surface tokens that align with the theme harmonization goals.
147-148: Verify focus indicator visibility for accessibility.The
focusBorderwas changed fromLAVENDER(a prominent accent) toSURFACE1(subtle surface token). While this aligns with the harmonization goal, ensure the focus indicator remains clearly visible for keyboard navigation users to meet WCAG accessibility standards.Consider testing keyboard navigation in the collection items to confirm adequate contrast and visibility.
167-170: LGTM! Dropdown styling modernized.The dropdown now uses a border-based approach (
SURFACE1) instead of shadows for depth, with the background harmonized toSURFACE0. This creates a cleaner, more consistent visual hierarchy.
208-208: LGTM! Consistent with dragbar border harmonization.The border token now matches the sidebar dragbar pattern (line 140), creating visual consistency across dragbars.
packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js (1)
49-51: Good refactoring to centralized theme tokens.The migration from sidebar-specific tokens (
theme.sidebar.search.*) to generic theme tokens (theme.border.*,theme.background.*) improves consistency across the codebase. All theme tokens are properly defined across the theme implementations.Correct use of styled component's theme prop for managing colors.
packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js (2)
2-2: LGTM!Good addition of
rgbafrom polished to support translucent brand-based backgrounds.
13-21: Nice theme token migration.The replacement of hardcoded values with theme tokens (
background.base,text.base,border.border2,border.radius.sm) is solid and aligns with the PR's dark mode theming objectives.packages/bruno-app/src/components/CodeMirrorSearch/index.js (1)
169-169: LGTM!Removing the "compact" class modifier aligns with the StyledWrapper refactoring where compact-specific styling was eliminated in favor of unified theme-based styling.
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js (1)
20-22: LGTM - Border token centralization.The switch to
theme.border.border1aligns with the PR's theme palette centralization efforts and maintains consistency with similar changes in related files.packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js (1)
19-21: LGTM - Consistent border token usage.The border token centralization using
theme.border.border1is consistent with the changes across collection components.packages/bruno-app/src/themes/light/catppuccin-latte.js (1)
170-170: LGTM - Dropdown border standardizationThe explicit
border: 'none'addition to the dropdown theme aligns with the PR's styling standardization across light themes.packages/bruno-app/src/themes/light/light-monochrome.js (1)
158-158: LGTM - Consistent with theme standardizationThe dropdown border styling matches the pattern applied across other light themes in this PR.
packages/bruno-app/src/themes/light/light-pastel.js (1)
174-174: Dropdown border styling added consistently across light themes.The
border: 'none'property is correctly added to the dropdown object in light-pastel.js, matching the implementation in all other light theme variants (light.js, light-monochrome.js, vscode.js, catppuccin-latte.js).Likely an incorrect or invalid review comment.
packages/bruno-app/src/themes/dark/nord.js (1)
174-175: Dropdown styling changes verified and safe to merge.The shadow and border values are correctly consumed by dropdown components. The main Dropdown component conditionally applies these values, skipping
'none'values, while ThemeDropdown directly applies them—both approaches work correctly. The border color (NORD3) will render properly in components that support it.packages/bruno-app/src/themes/dark/catppuccin-mocha.js (2)
169-170: Verify dropdown visual separation without shadow.Removing the shadow and replacing it with a border changes the dropdown from a depth-based (floating) visual treatment to a flat, border-defined one. Ensure the dropdown remains visually distinct from underlying content and that the border provides adequate separation in all contexts where dropdowns appear.
Consider testing scenarios where dropdowns overlay:
- Light/dark content variations within the theme
- Complex UI elements (tables, forms, code editors)
- Nested or adjacent interactive elements
140-141: LGTM - Consistent dragbar styling refinement.The dragbar border updates follow a consistent pattern: using
SURFACE0for a more subtle default state andOVERLAY0for improved active state contrast. This refinement reduces visual noise while maintaining clear feedback during interaction.Also applies to: 208-209
packages/bruno-app/src/themes/dark/catppuccin-macchiato.js (3)
139-142: LGTM! Dragbar styling refined.The shift to SURFACE0 and OVERLAY0 makes the dragbar borders more subtle and consistent with the overall theme refinement approach.
169-170: LGTM! Dropdown styling modernized.The shift from shadow-based depth to a border-based approach creates a cleaner, more minimal aesthetic while maintaining visual separation.
207-210: LGTM! Consistent dragbar styling.The border token aligns with the sidebar dragbar changes, creating visual consistency across all dragbar instances in the theme.
packages/bruno-app/src/themes/schema/oss.js (3)
211-211: Verify removal ofsidebar.searchis unnecessary—no such property exists in the schema or theme files.The sidebar schema does not define a
searchproperty, and no theme files referencesidebar.search. If the intent was to document a cleanup of a deprecated property, clarify what was actually removed or consolidate this with related schema changes.Likely an incorrect or invalid review comment.
222-228: Dropdown schema properly updated across all themes.All 13 theme implementations already define
dropdown.border, confirming the breaking change has been properly handled. The new property descriptions clearly document the "none" convention forshadowandborder, which is helpful for theme maintainers.
1141-1147: Verify removal ofpreferencesblock across all theme implementations.Removing
preferencesfrom the root required array is a breaking schema change. Ensure all theme files have removed thepreferencesconfiguration block entirely.packages/bruno-app/src/components/CodeEditor/StyledWrapper.js (1)
119-121: LGTM! Consistent with existing variable token pattern.The addition of
span.cm-variable-2to share the same theme color ascm-variableis correct and maintains consistency with the theme-based styling approach.packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx (2)
2-2: LGTM!The import statement correctly brings in the new palette viewer components.
174-175: LGTM!Clean refactor to use the new
ColorSectioncomponent. Props are correctly passed and align with the component's expected API.packages/bruno-app/src/themes/PaletteViewer/components.jsx (3)
4-7: LGTM!Simple display name shortening logic is clear and correct.
21-37: LGTM!The
ColorSwatchcomponent is well-structured with sensible defaults. Inline styles are appropriate for this Storybook visualization component.
39-48: LGTM!The
ColorSectioncomponent correctly iterates over color entries and delegates toColorSwatch. Clean implementation.packages/bruno-app/src/themes/dark/dark.js (2)
57-127: LGTM!Excellent refactoring to use centralized palette references throughout the theme. This significantly improves maintainability and ensures color consistency across the theme.
169-397: LGTM!The dropdown and codemirror sections correctly utilize palette references. The
shadow: 'none'value properly integrates with the conditional rendering logic in the StyledWrapper component.packages/bruno-app/src/themes/light/light.js (3)
1-50: LGTM!The light theme palette is well-structured. The
systemgroup withCONTROL_ACCENTis a useful addition for form controls. Inline comments like "// warm coral - NEW" provide helpful context for palette evolution.
162-163: Note: bg and hoverBg use the same value.Both
bgandhoverBgare set topalette.background.SURFACE1. This means there's no visual change on hover for sidebar collection items. If this is intentional for the light theme, no action needed.Verify that the lack of hover distinction is the intended design for light theme sidebar collection items.
185-186: LGTM!The light theme dropdown uses a shadow without a border, contrasting with the dark theme's approach (no shadow, with border). The StyledWrapper's conditional logic correctly handles both scenarios.
packages/bruno-app/src/components/Dropdown/StyledWrapper.js (2)
9-12: LGTM!The conditional shadow logic correctly handles themes that define
shadow: 'none'or omit the shadow property entirely.
14-17: LGTM!The conditional border logic is consistent with the shadow approach and correctly handles themes with
border: 'none'or without a border property.packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx (3)
1-6: LGTM!Imports and constants are correctly defined. The textColor and mutedColor provide consistent styling throughout the stories.
15-32: LGTM!The Overview story comprehensively displays all palette groups with consistent styling.
34-80: LGTM!The Accents, Background, and Text stories follow a consistent pattern and correctly render palette groups.
packages/bruno-app/src/themes/PaletteViewer/Light.stories.jsx (3)
1-6: LGTM!Imports and text colors are correctly configured for the light theme.
15-32: LGTM!The Overview correctly includes the light theme's unique "System" palette group with
CONTROL_ACCENT.
35-81: LGTM!The Accents, Background, and Text stories follow the same consistent pattern as the dark theme.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/bruno-app/src/themes/light/light.js (1)
185-186: Consider reusing theme.shadow.sm for consistency.The inline shadow value on Line 185 matches
theme.shadow.smdefined at Line 104. Using the theme reference would maintain consistency with the rest of the file.🔎 Proposed refactor
- shadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05)', + shadow: lightTheme.shadow.sm,Note: This would require moving the shadow definition earlier or restructuring the theme object.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/themes/light/light.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()notfunc ()
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/light/light.jspackages/bruno-app/src/themes/dark/dark.js
🧠 Learnings (3)
📓 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 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/light/light.jspackages/bruno-app/src/themes/dark/dark.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.js
🧬 Code graph analysis (1)
packages/bruno-app/src/themes/light/light.js (1)
packages/bruno-app/src/themes/dark/dark.js (2)
palette(1-46)palette(1-46)
⏰ 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: Unit Tests
- GitHub Check: CLI Tests
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - macOS
- GitHub Check: SSL Tests - Linux
🔇 Additional comments (4)
packages/bruno-app/src/themes/light/light.js (2)
1-50: LGTM: Palette export and structure look good.The palette is now exported for reuse across the codebase, enabling centralized color management. HSL formatting is consistent with proper comma spacing.
162-163: Visual tweak aligns with PR objectives.Both
bgandhoverBgconsistently useSURFACE1for the sidebar collection item styling.packages/bruno-app/src/themes/dark/dark.js (2)
1-46: Palette export enables centralized color management.The palette is well-structured and comprehensive. Minor note: HSL values have inconsistent spacing after commas (e.g., Line 4:
hsl(0, 70%, 71%)has extra spaces). This is cosmetic and doesn't affect functionality.
57-63: Excellent refactor: comprehensive palette migration.The migration from hard-coded color values to palette references is thorough and consistent across all theme sections (brand, text, backgrounds, borders, sidebar, dropdown, modals, buttons, codemirror, grpc, and toolbar). This significantly improves maintainability and ensures visual consistency.
Also applies to: 67-70, 106-108, 113-122, 141-178, 191-202, 207-219, 251-256, 295-317, 342-357, 362-396, 484-554, 595-620
Default Dark Mode UX tweaks
Summary by CodeRabbit
Style
Documentation / Design
Chores
Tests
✏️ Tip: You can customize this high-level summary in your review settings.