Conversation
|
Caution Review failedThe pull request is closed. 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. WalkthroughRefactors theming into structured palette tokens (primary/hues/intent/syntax), adds CodeMirror tag/token styling, replaces hardcoded colors with theme tokens in global styles, introduces Design System Storybook pages, removes legacy PaletteViewer stories, and updates multiple styled wrappers and theme schemas. Changes
Sequence Diagram(s)(omitted — changes are styling/theme and not a new multi-component control-flow feature) Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
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.
Actionable comments posted: 1
🧹 Nitpick comments (9)
packages/bruno-app/src/themes/dark/dark.js (1)
220-226: Optional: Consider using palette references for workspace colors.
workspace.accentandworkspace.borderuse hardcoded values that matchpalette.system.CONTROL_ACCENTandpalette.border.BORDER2. Could align for consistency.🔎 Suggested change
workspace: { - accent: '#D9A342', - border: '#444', + accent: palette.system.CONTROL_ACCENT, + border: palette.border.BORDER2, button: { bg: colors.GRAY_2 } },packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js (1)
53-56: Minor inconsistency:bg-transparentclass usage.Line 55 omits
bg-transparentwhile line 70 includes it. Both buttons have similar styling intent—consider aligning them for consistency.Proposed fix
<button type="button" - className="text-link cursor-pointer hover:underline text-left bg-transparent" + className="text-link cursor-pointer hover:underline text-left" onClick={() => {Or add
bg-transparentto line 55 if it's intentionally needed.Also applies to: 68-71
packages/bruno-app/src/themes/DesignSystem/Theme.stories.jsx (3)
91-94: HSL parsing regex may fail fordegsuffix format.The regex
/hsl\((\d+)/won't correctly parse HSL values that use thedegsuffix (e.g.,hsl(0deg 0% 10%)). The dark palette'sbackground.BASEuses this format. While this only affects the hues object currently, consider a more robust pattern:-const hueA = parseInt(a[1].match(/hsl\((\d+)/)?.[1] || 0); +const hueA = parseInt(a[1].match(/hsl\(\s*(\d+)/)?.[1] || 0);Same consideration applies to line 156-157.
Also applies to: 156-157
192-203:parseHSLwon't match thedegsuffix format.Similar to the HueWheel regex,
parseHSLwon't correctly parse values likehsl(0deg 0% 10%). If the hues palette ever includes such values, the function returnsnull.Suggested fix
const parseHSL = (hslString) => { - const match = hslString.match(/hsl\(\s*(\d+)\s*,?\s*(\d+)%?\s*,?\s*(\d+)%?\s*\)/); + const match = hslString.match(/hsl\(\s*(\d+)(?:deg)?\s*,?\s*(\d+)%?\s*,?\s*(\d+)%?\s*\)/); if (match) {
235-330: Consider extractingStatCardoutside the render function.
StatCardis defined inside the render function, causing it to be recreated on every render. For a Storybook demo this is low-impact, but extracting it to module scope (or memoizing) would be cleaner.packages/bruno-app/src/themes/DesignSystem/Overview.jsx (4)
7-17:Sectiondoesn't inherit text color from theme.The
h2andpelements don't setcolorfrom the theme. They'll inherit from parent containers, which works here but could be more explicit.
470-482: Hardcoded color values instead of theme tokens.Lines 472 and 491 use hardcoded colors (
#1a1a1a,#ffffff) for button text. Per coding guidelines, prefer theme tokens (e.g.,palette.utility.BLACK/WHITEor a semantic token).Suggested fix
<button style={{ backgroundColor: palette.primary.SOLID, - color: isDark ? '#1a1a1a' : '#ffffff', + color: isDark ? palette.utility.BLACK : palette.utility.WHITE,Based on learnings, use styled component's theme prop to manage CSS colors.
587-588: Unused variablepalette.
paletteis declared but never used inBackgroundLayersRender.const theme = useTheme(); const isDark = theme.mode === 'dark'; -const palette = isDark ? darkPalette : lightPalette;
660-662: Hardcoded fallback colors.Lines 660-662 use hardcoded hex fallbacks (
#ff5f57,#ffbd2e,#28c840). Line 727 uses hardcoded#ffffff. Consider using theme or palette tokens for consistency.Also applies to: 727-727
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (31)
packages/bruno-app/src/components/CodeEditor/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Overview/Info/index.jspackages/bruno-app/src/components/RequestTabs/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseBookmark/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseCopy/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseDownload/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseLayoutToggle/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.jspackages/bruno-app/src/components/WorkspaceTabs/StyledWrapper.jspackages/bruno-app/src/globalStyles.jspackages/bruno-app/src/themes/DesignSystem/DesignSystem.stories.jsxpackages/bruno-app/src/themes/DesignSystem/Overview.jsxpackages/bruno-app/src/themes/DesignSystem/Theme.stories.jsxpackages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsxpackages/bruno-app/src/themes/PaletteViewer/Light.stories.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 (2)
- packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx
- packages/bruno-app/src/themes/PaletteViewer/Light.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/WorkspaceTabs/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseCopy/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.jspackages/bruno-app/src/components/ResponsePane/ResponseDownload/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseLayoutToggle/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.jspackages/bruno-app/src/themes/light/light-pastel.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/globalStyles.jspackages/bruno-app/src/themes/dark/dark-pastel.jspackages/bruno-app/src/components/RequestTabs/StyledWrapper.jspackages/bruno-app/src/themes/DesignSystem/DesignSystem.stories.jsxpackages/bruno-app/src/themes/DesignSystem/Theme.stories.jsxpackages/bruno-app/src/components/CodeEditor/StyledWrapper.jspackages/bruno-app/src/themes/dark/catppuccin-macchiato.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseBookmark/StyledWrapper.jspackages/bruno-app/src/themes/dark/dark-monochrome.jspackages/bruno-app/src/components/CollectionSettings/Overview/Info/index.jspackages/bruno-app/src/themes/light/catppuccin-latte.jspackages/bruno-app/src/themes/dark/catppuccin-frappe.jspackages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/themes/dark/catppuccin-mocha.jspackages/bruno-app/src/themes/schema/oss.jspackages/bruno-app/src/themes/light/vscode.jspackages/bruno-app/src/themes/DesignSystem/Overview.jsxpackages/bruno-app/src/themes/light/light.jspackages/bruno-app/src/themes/light/light-monochrome.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/DesignSystem/DesignSystem.stories.jsxpackages/bruno-app/src/themes/DesignSystem/Theme.stories.jsxpackages/bruno-app/src/themes/DesignSystem/Overview.jsx
🧠 Learnings (6)
📓 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-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/WorkspaceTabs/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseCopy/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.jspackages/bruno-app/src/components/ResponsePane/ResponseDownload/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseLayoutToggle/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.jspackages/bruno-app/src/globalStyles.jspackages/bruno-app/src/components/RequestTabs/StyledWrapper.jspackages/bruno-app/src/themes/DesignSystem/Theme.stories.jsxpackages/bruno-app/src/components/CodeEditor/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseBookmark/StyledWrapper.jspackages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/themes/light/light.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/WorkspaceTabs/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseCopy/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseDownload/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseLayoutToggle/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.jspackages/bruno-app/src/globalStyles.jspackages/bruno-app/src/components/RequestTabs/StyledWrapper.jspackages/bruno-app/src/themes/DesignSystem/Theme.stories.jsxpackages/bruno-app/src/components/CodeEditor/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseBookmark/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Overview/Info/index.jspackages/bruno-app/src/themes/DesignSystem/Overview.jsx
📚 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/WorkspaceTabs/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseCopy/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseDownload/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.jspackages/bruno-app/src/components/RequestTabs/StyledWrapper.jspackages/bruno-app/src/components/CodeEditor/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseBookmark/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Overview/Info/index.jspackages/bruno-app/src/themes/DesignSystem/Overview.jsx
📚 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/WorkspaceTabs/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseCopy/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.jspackages/bruno-app/src/components/ResponsePane/ResponseDownload/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseLayoutToggle/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.jspackages/bruno-app/src/themes/light/light-pastel.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/globalStyles.jspackages/bruno-app/src/themes/dark/dark-pastel.jspackages/bruno-app/src/components/RequestTabs/StyledWrapper.jspackages/bruno-app/src/components/CodeEditor/StyledWrapper.jspackages/bruno-app/src/themes/dark/catppuccin-macchiato.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/ResponseBookmark/StyledWrapper.jspackages/bruno-app/src/themes/dark/dark-monochrome.jspackages/bruno-app/src/components/CollectionSettings/Overview/Info/index.jspackages/bruno-app/src/themes/light/catppuccin-latte.jspackages/bruno-app/src/themes/dark/catppuccin-frappe.jspackages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/themes/dark/catppuccin-mocha.jspackages/bruno-app/src/themes/schema/oss.jspackages/bruno-app/src/themes/light/vscode.jspackages/bruno-app/src/themes/light/light.jspackages/bruno-app/src/themes/light/light-monochrome.js
📚 Learning: 2025-12-02T09:45:31.709Z
Learnt from: sid-bruno
Repo: usebruno/bruno PR: 6266
File: packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js:38-38
Timestamp: 2025-12-02T09:45:31.709Z
Learning: In the ResponseCopy component (packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js), the copy button is intentionally disabled using `!response.data` to prevent copying stream resets which result in empty strings.
Applied to files:
packages/bruno-app/src/components/ResponsePane/ResponseCopy/StyledWrapper.js
🧬 Code graph analysis (13)
packages/bruno-app/src/themes/light/light-pastel.js (3)
packages/bruno-app/src/themes/dark/dark-monochrome.js (1)
colors(1-37)packages/bruno-app/src/themes/dark/dark-pastel.js (1)
colors(8-58)packages/bruno-app/src/themes/light/light-monochrome.js (1)
colors(1-38)
packages/bruno-app/src/themes/dark/nord.js (1)
packages/bruno-app/src/themes/dark/dark-monochrome.js (1)
colors(1-37)
packages/bruno-app/src/themes/dark/dark-pastel.js (5)
packages/bruno-app/src/themes/dark/catppuccin-macchiato.js (1)
colors(6-52)packages/bruno-app/src/themes/dark/dark-monochrome.js (1)
colors(1-37)packages/bruno-app/src/themes/dark/dark.js (1)
colors(80-85)packages/bruno-app/src/themes/dark/nord.js (1)
colors(9-57)packages/bruno-app/src/themes/dark/vscode.js (1)
colors(4-59)
packages/bruno-app/src/themes/DesignSystem/DesignSystem.stories.jsx (1)
packages/bruno-app/src/themes/DesignSystem/Overview.jsx (10)
IntroductionRender(116-322)IntroductionRender(116-322)PrimaryColorsRender(324-583)PrimaryColorsRender(324-583)BackgroundLayersRender(585-983)BackgroundLayersRender(585-983)TextColorsRender(985-1175)TextColorsRender(985-1175)BordersAndOverlaysRender(1177-1385)BordersAndOverlaysRender(1177-1385)
packages/bruno-app/src/themes/DesignSystem/Theme.stories.jsx (2)
packages/bruno-app/src/themes/dark/dark.js (2)
palette(3-57)palette(3-57)packages/bruno-app/src/themes/light/light.js (2)
palette(1-55)palette(1-55)
packages/bruno-app/src/themes/dark/catppuccin-macchiato.js (1)
packages/bruno-app/src/themes/dark/catppuccin-frappe.js (2)
require(4-4)colors(6-52)
packages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.js (5)
packages/bruno-app/src/components/CodeEditor/StyledWrapper.js (1)
StyledWrapper(3-194)packages/bruno-app/src/components/ResponsePane/ResponseBookmark/StyledWrapper.js (1)
StyledWrapper(3-13)packages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.js (1)
StyledWrapper(3-12)packages/bruno-app/src/components/ResponsePane/ResponseCopy/StyledWrapper.js (1)
StyledWrapper(3-12)packages/bruno-app/src/components/ResponsePane/ResponseDownload/StyledWrapper.js (1)
StyledWrapper(3-12)
packages/bruno-app/src/themes/dark/dark-monochrome.js (2)
packages/bruno-app/src/themes/dark/vscode.js (1)
colors(4-59)packages/bruno-app/src/themes/light/light-monochrome.js (1)
colors(1-38)
packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js (1)
packages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.js (1)
StyledWrapper(4-42)
packages/bruno-app/src/themes/dark/catppuccin-mocha.js (1)
packages/bruno-app/src/themes/dark/catppuccin-macchiato.js (1)
colors(6-52)
packages/bruno-app/src/themes/light/vscode.js (2)
packages/bruno-app/src/themes/dark/vscode.js (1)
colors(4-59)packages/bruno-app/src/themes/light/light-monochrome.js (1)
colors(1-38)
packages/bruno-app/src/themes/DesignSystem/Overview.jsx (2)
packages/bruno-app/src/themes/dark/dark.js (2)
palette(3-57)palette(3-57)packages/bruno-app/src/themes/light/light.js (2)
palette(1-55)palette(1-55)
packages/bruno-app/src/themes/light/light.js (3)
packages/bruno-app/src/themes/DesignSystem/Overview.jsx (3)
palette(119-119)palette(327-327)palette(588-588)packages/bruno-app/src/themes/DesignSystem/Theme.stories.jsx (4)
palette(18-18)palette(55-55)palette(86-86)palette(221-221)packages/bruno-app/src/themes/dark/dark.js (2)
palette(3-57)palette(3-57)
⏰ 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). (8)
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: Agent
- GitHub Check: Unit Tests
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - macOS
- GitHub Check: Playwright E2E Tests
- GitHub Check: SSL Tests - Linux
- GitHub Check: CLI Tests
🔇 Additional comments (84)
packages/bruno-app/src/themes/light/light-monochrome.js (3)
34-36: LGTM!New TAG and TAG_BRACKET tokens are well-integrated. Color choices (#404040, #a3a3a3) align with the existing monochrome palette and maintain visual consistency with similar token types (keyword, comment).
361-363: LGTM!Token mappings correctly reference the new
CODEMIRROR_TOKENSconstants. Structure is consistent with existing token definitions.
347-351: Removal ofcodemirror.variable.infois complete and safe.No references to this property exist in the codebase. All consumers use only
valid,invalid, andprompt, which remain intact. All theme files are consistent with this cleanup.packages/bruno-app/src/themes/dark/dark-pastel.js (3)
54-56: LGTM! CodeMirror token additions align with other themes.The TAG and TAG_BRACKET additions bring dark-pastel to parity with other theme files. Color choices fit the "luminous pastels" aesthetic, and the semantic comments are helpful.
369-369: Good simplification!Removing the nested info block and consolidating to a single prompt color reference improves readability while maintaining theme consistency.
380-382: LGTM! Token mappings are consistent.The operator, tag, and tagBracket mappings properly reference the new CODEMIRROR_TOKENS constants and follow the established pattern. This enables proper syntax highlighting for HTML/XML constructs.
packages/bruno-app/src/themes/light/catppuccin-latte.js (2)
46-48: LGTM! Clean token additions.The new TAG and TAG_BRACKET tokens follow the existing pattern and use appropriate palette colors. The mappings in
codemirror.tokensare consistent with the defined constants.Also applies to: 373-375
362-362: No action needed—removed property is not used.The
infoproperty removal fromcodemirror.variableposes no risk; no components reference it anywhere in the codebase.packages/bruno-app/src/themes/light/light.js (6)
2-7: Well-structured primary color tokens.Clean HSL-based primary variants (SOLID, TEXT, STRONG, SUBTLE) that align with the dark theme structure. This provides consistent theming control.
57-76: Post-export mutation pattern for derived tokens.This pattern allows
intentandsyntaxto referencepalette.huesandpalette.text. While defining these inline would be cleaner, the current approach works and maintains consistency with the dark theme.
80-94: Clean migration from accents to primary/hues.Good approach keeping
accents.primaryfor backward compatibility while introducing the newprimaryobject structure. Aligns with dark theme.
144-156: Appropriate semantic token usage.Using
palette.intent.*for semantic colors (SUCCESS, DANGER, WARNING) andpalette.hues.*for literal color names (purple, yellow) is the right approach.
397-409: Clean CodeMirror token abstraction.All tokens now reference
palette.syntax.*, centralizing syntax highlighting colors. The newtagandtagBrackettokens add HTML/XML support.
219-233: Request method colors appropriately mapped.HTTP methods mapped to semantic hue colors (GET→GREEN, DELETE→RED, etc.) provides intuitive visual cues.
packages/bruno-app/src/themes/dark/dark.js (5)
4-9: Dark mode primary variants with appropriate lightness.HSL values adjusted for dark mode visibility. Structure mirrors light theme.
66-78: Intentional syntax color differences for dark mode.The differing token colors (e.g., DEFINITION→GREEN, ATOM→YELLOW) optimize readability on dark backgrounds. This is standard practice for dark themes.
172-172: Good use ofrgba()for focus borders.Using
polished'srgba()withpalette.primary.SOLIDcreates a cohesive, semi-transparent focus state appropriate for dark mode.
228-242: Minor: HTTP method color differences between themes.Note that
patchusesORANGEhere butPURPLEin the light theme.postusesINDIGOvsPURPLE. If intentional for dark mode visibility, this is fine. Otherwise, consider aligning for consistency.
409-421: CodeMirror tokens consistently abstracted.Token structure matches light theme, with colors derived from
palette.syntax.*.packages/bruno-app/src/themes/light/light-pastel.js (3)
367-367: Intentional simplification aligns with PR objectives.The removal of the nested info block from
codemirror.variableis consistent with the PR's stated goal to clean up the CodeMirror info tip. The remaining properties (valid, invalid, prompt) provide sufficient variable state styling.
378-380: Correct token mapping completes the theme integration.The tag and tagBracket mappings correctly reference the newly defined CODEMIRROR_TOKENS, following the established pattern for all other syntax tokens.
52-54: LGTM! New CodeMirror tokens added consistently.The TAG and TAG_BRACKET token additions are properly defined and fully consumed by the CodeMirror styling system. TAG reuses the muted azure color from PROPERTY, while TAG_BRACKET matches COMMENT's warm muted gray—sensible choices for tag and delimiter elements. These tokens are referenced across all theme files and applied in
CodeEditor/StyledWrapper.jsfor syntax highlighting.packages/bruno-app/src/components/ResponsePane/ResponseDownload/StyledWrapper.js (1)
5-5: LGTM! Consistent with the theme token migration.This change matches the pattern across other ResponsePane StyledWrapper components.
packages/bruno-app/src/components/ResponsePane/ResponseBookmark/StyledWrapper.js (1)
6-6: LGTM! Follows the consistent theme token migration pattern.packages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.js (1)
5-5: LGTM! Consistent theme token migration.packages/bruno-app/src/components/ResponsePane/ResponseLayoutToggle/StyledWrapper.js (1)
11-11: LGTM! Completes the theme token migration across ResponsePane components.packages/bruno-app/src/themes/dark/nord.js (3)
368-368: LGTM! Simplified variable styling aligns with cleanup goals.The removal of the nested
infoblock and retention of onlypromptsimplifies the codemirror variable theming, consistent with the PR's "Cleaned up Codemirror info tip" objective.
379-381: LGTM! Token mappings properly reference the new constants.
53-56: TAG and TAG_BRACKET tokens are properly consumed throughout the theme system.The tokens are actively used in the CodeMirror styling configuration (lines 380-381) and required by the schema validation. Color choices align well with the Nord palette: TAG uses the frost blue accent (
#81a1c1, matching KEYWORD/ATOM) while TAG_BRACKET uses the muted comment gray (#616e88), providing semantic visual distinction.packages/bruno-app/src/themes/dark/catppuccin-mocha.js (5)
48-50: LGTM! New TAG and TAG_BRACKET tokens consistent with other themes.Token values are semantically appropriate (TAG uses the primary blue, TAG_BRACKET uses the comment color).
174-174: LGTM! Semi-transparent border addresses Catppuccin dropdown styling.The rgba-based border with 50% opacity aligns with the PR's goal to fix dark mode dropdown borders in Catppuccin themes.
367-367: LGTM! Simplified variable styling consistent with theme cleanup.
378-380: LGTM! Token mappings properly wire up the new constants.
4-5: LGTM! rgba import supports semi-transparent border styling.The
polishedlibrary is properly declared as a dependency, and thergbaimport enables semi-transparent border styling throughout the theme, which aligns with the PR's goal to fix dark mode dropdown borders in the Catppuccin theme.packages/bruno-app/src/themes/dark/vscode.js (3)
55-57: LGTM! Completes TAG/TAG_BRACKET token support across dark themes.The VS Code theme now aligns with nord and catppuccin themes, using semantically appropriate colors (TAG uses the primary blue, TAG_BRACKET uses muted text).
370-370: LGTM! Variable styling simplified consistently with other themes.
381-383: LGTM! Token mappings complete the theming extension.packages/bruno-app/src/components/ResponsePane/ResponseCopy/StyledWrapper.js (1)
5-5: LGTM! Color token migration aligns with theming refactor.The change from
theme.codemirror.variable.info.iconColortotheme.dropdown.iconColoris part of the broader theme token consolidation. This aligns with similar updates across other ResponsePane StyledWrapper components (ResponseLayoutToggle, ResponseBookmark, ResponseClear, ResponseDownload). The old token path has been completely removed from the codebase.packages/bruno-app/src/themes/dark/catppuccin-frappe.js (5)
4-5: LGTM: Clean import for rgba utility.The
rgbafunction frompolishedis properly imported and used for semi-transparent border styling.
48-50: LGTM: CodeMirror tag tokens added.The new TAG and TAG_BRACKET tokens enhance syntax highlighting for markup languages. Colors are consistent with the Catppuccin Frappé palette.
174-174: LGTM: Semi-transparent border improves visual hierarchy.Using
rgba(colors.SURFACE1, 0.5)creates a subtle, translucent dropdown border that better suits dark mode aesthetics.
364-368: LGTM: Simplified variable styling.The removal of the nested info block streamlines the variable configuration, retaining only essential styling (valid, invalid, prompt).
378-381: LGTM: Token mappings properly wired.The new tag and tagBracket tokens are correctly mapped to their corresponding CODEMIRROR_TOKENS definitions, following the established pattern for other token types.
packages/bruno-app/src/themes/dark/catppuccin-macchiato.js (6)
4-5: LGTM: rgba utility imported.Consistent with the Frappé theme,
rgbafrompolishedis imported for semi-transparent border styling.
48-50: LGTM: CodeMirror tag tokens match Macchiato palette.TAG and TAG_BRACKET tokens added with appropriate Catppuccin Macchiato colors (#8aadf4 and #6e738d respectively).
171-171: LGTM: Dropdown background adjusted.Switching from MANTLE to SURFACE0 refines the dropdown's visual hierarchy within the Macchiato theme.
174-174: LGTM: Semi-transparent border applied.The
rgba(colors.SURFACE1, 0.5)creates a subtle translucent border, consistent with the visual improvements in other Catppuccin variants.
364-368: LGTM: Variable styling streamlined.Simplified structure retains essential styling (valid, invalid, prompt) while removing the nested info block.
378-381: LGTM: Token mappings complete.New tag and tagBracket tokens are correctly wired to their CODEMIRROR_TOKENS definitions.
packages/bruno-app/src/themes/light/vscode.js (3)
56-59: LGTM: TAG tokens added for VS Code Light theme.The TAG and TAG_BRACKET tokens use #800000 (dark maroon), which provides good contrast in the light theme and aligns with VS Code's Light+ syntax highlighting.
368-372: LGTM: Variable styling simplified.Streamlined structure retains valid, invalid, and prompt styling while removing the nested info block.
382-385: LGTM: Token mappings properly configured.New tag and tagBracket tokens are correctly mapped, following the established pattern for other CodeMirror token types.
packages/bruno-app/src/components/WorkspaceTabs/StyledWrapper.js (2)
154-162: LGTM: Short tab styling consolidated.Migrating from
theme.requestTabs.shortTab.colortotheme.textsimplifies the theming hierarchy and improves maintainability.Based on learnings, styled component's theme prop is correctly used for managing CSS colors.
182-187: LGTM: Hover state styling consolidated.Hover background and color now use generic theme tokens (
theme.background.surface0andtheme.text), consistent with the overall simplification approach.Based on learnings, styled component's theme prop is correctly used for managing CSS colors.
packages/bruno-app/src/components/CodeEditor/StyledWrapper.js (2)
131-133: LGTM: Tag token styling added.The
span.cm-tagselector properly maps totheme.codemirror.tokens.tag, following the established pattern for other CodeMirror token types.
134-136: LGTM: Tag bracket styling added.The compound selector
span.cm-tag.cm-bracketcorrectly targets bracket tokens within tags, mapping totheme.codemirror.tokens.tagBracket.packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js (1)
12-26: LGTM: Icon color migrated to dropdown theme token.Switching from
theme.codemirror.variable.info.iconColortotheme.dropdown.iconColorcorrectly aligns the menu icon with the UI chrome color scheme rather than editor-specific tokens.Based on learnings, styled component's theme prop is correctly used for managing CSS colors.
packages/bruno-app/src/components/RequestTabs/StyledWrapper.js (2)
149-162: LGTM: Short tab color consolidated.Using
theme.textinstead oftheme.requestTabs.shortTab.colorsimplifies theming and maintains consistency with WorkspaceTabs.Based on learnings, styled component's theme prop is correctly used for managing CSS colors.
187-192: LGTM: Hover state styling simplified.Hover background and color now use generic theme tokens (
theme.background.surface0andtheme.text), consistent with the WorkspaceTabs implementation.Based on learnings, styled component's theme prop is correctly used for managing CSS colors.
packages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.js (5)
1-2: LGTM: Proper imports for styled component.
styled-componentsandrgbafrompolishedare correctly imported for the component's styling needs.
5-13: LGTM: Location icon-box styled with theme tokens.The use of
rgba()withtheme.textLinkat 8% and 9% opacity creates subtle, cohesive backgrounds and borders. SVG color correctly uses the base theme token.Based on learnings, styled component's theme prop is correctly used for managing CSS colors.
15-22: LGTM: Environments icon-box uses green theme token.Consistent opacity pattern (8%/9%) applied with
theme.colors.text.green, providing appropriate visual distinction for environment-related UI.Based on learnings, styled component's theme prop is correctly used for managing CSS colors.
24-31: LGTM: Requests icon-box uses purple theme token.Maintains consistency with the established pattern, using
theme.colors.text.purpleat 8%/9% opacity for request-related visual elements.Based on learnings, styled component's theme prop is correctly used for managing CSS colors.
33-40: LGTM: Share icon-box reuses textLink theme token.Appropriately reuses
theme.textLink(same as location) for share-related actions, maintaining the consistent 8%/9% opacity pattern.Based on learnings, styled component's theme prop is correctly used for managing CSS colors.
packages/bruno-app/src/themes/dark/dark-monochrome.js (2)
33-36: LGTM! New CodeMirror token definitions.The addition of
OPERATOR,TAG, andTAG_BRACKETtokens is consistent with other themes (vscode.js, light-monochrome.js). The monochrome color choices (#d4d4d4for tags,#6a6a6afor brackets) align well with the theme's grayscale palette.
349-366: LGTM! Simplified variable structure and token mappings.The removal of the nested
infoobject and addition ofpromptas a direct property simplifies the structure. The newoperator,tag, andtagBracketmappings correctly reference their respectiveCODEMIRROR_TOKENSconstants.packages/bruno-app/src/globalStyles.js (3)
1-2: LGTM! Added rgba utility import.The
rgbaimport frompolishedenables semi-transparent color calculations from theme values, which is used for the scope badge styling.
250-261: LGTM! Theme-driven tooltip styling.Good use of theme tokens for the CodeMirror variable info tooltip. The conditional shadow and border handling elegantly accounts for themes that may disable these decorations with
'none'.
312-322: LGTM! Brand-colored scope badge with transparency.Nice use of
rgba(props.theme.brand, 0.07)andrgba(props.theme.brand, 0.08)for subtle brand tinting. This keeps the badge visually cohesive across all themes.packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js (2)
9-9: LGTM! StyledWrapper integration.Good refactor to use StyledWrapper for theme-based color management. This aligns with coding standards: colors via styled-components, layout via Tailwind.
Also applies to: 29-29, 116-116
34-36: LGTM! Theme-based icon styling.The
icon-boxpattern with variant classes (location,environments,requests,share) cleanly delegates color management to the StyledWrapper, which applies appropriate theme colors via thergbautility.Also applies to: 47-49, 89-91, 103-105
packages/bruno-app/src/themes/schema/oss.js (3)
585-587: LGTM! Removed shortTab from requestTabs requirements.Schema correctly updated to remove
shortTab, aligning with the theme file changes across the PR.
611-619: LGTM! Simplified codemirror.variable schema.The removal of the nested
infoobject and retention ofpromptas a direct string property simplifies the schema. This matches the corresponding theme file updates.
632-637: All themes already definetagandtagBrackettokens.Verification confirms all 13 theme files (8 dark + 5 light) include the required properties. No validation failures will occur.
packages/bruno-app/src/themes/DesignSystem/Theme.stories.jsx (3)
1-12: LGTM!Standard Storybook setup with proper imports and metadata configuration.
14-49: LGTM!Clean implementation using theme prop for colors. Properly switches between dark/light palettes.
75-76: No issues found. Theintentandsyntaxproperties are properly defined in bothdark.js(lines 59, 66) andlight.js(lines 57, 64) and are actively used throughout the codebase. TheColorSectioncomponent receives valid objects.Likely an incorrect or invalid review comment.
packages/bruno-app/src/themes/DesignSystem/DesignSystem.stories.jsx (1)
1-34: LGTM!Clean CSF3 Storybook wrapper. Proper separation of story definitions from render implementations.
packages/bruno-app/src/themes/DesignSystem/Overview.jsx (6)
19-76: LGTM!Properly uses theme prop for colors (
theme.dropdown.hoverBg,theme.border.border1).
78-113: LGTM!Clean layer visualization component with proper theme usage.
149-159: Using index as key is acceptable here.Since
hueColorsis a static, non-reorderable array, using index as key is fine for this use case.
988-1001: LGTM!Clean hierarchy and semantic color definitions. Relies on expected
theme.colors.text.*structure.
1177-1385: LGTM overall!Well-structured demonstration of borders, overlays, and radii. Proper use of theme tokens throughout.
1186-1192: No issues found.theme.border.radiusis properly defined in both theme files with all required properties.The theme structure includes
border.radiuswith keyssm,base,md,lg, andxlin both dark.js and light.js, so the component will render valid values.
| .CodeMirror-brunoVarInfo .copy-success { | ||
| color: #22c55e !important; | ||
| color: ${(props) => props.theme.accents.GREEN} !important; | ||
| } | ||
|
|
||
| /* Read-only Note */ | ||
| .CodeMirror-brunoVarInfo .var-readonly-note { | ||
| font-size: ${(props) => props.theme.font.size.xs}; | ||
| color: ${(props) => props.theme.colors.text.muted}; | ||
| color: ${(props) => props.theme.dropdown.mutedText}; | ||
| opacity: 0.6; | ||
| margin-top: 0.25rem; | ||
| } | ||
|
|
||
| .CodeMirror-brunoVarInfo .var-warning-note { | ||
| font-size: 0.75rem; | ||
| color: #ef4444; | ||
| color: ${(props) => props.theme.accents.RED}; | ||
| margin-top: 0.375rem; | ||
| line-height: 1.25rem; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Verify accents.GREEN and accents.RED are defined in all theme files
echo "=== Checking for accents.GREEN ==="
rg -n "accents\.GREEN|accents:\s*\{[^}]*GREEN" --type=js packages/bruno-app/src/themes/
echo ""
echo "=== Checking for accents.RED ==="
rg -n "accents\.RED|accents:\s*\{[^}]*RED" --type=js packages/bruno-app/src/themes/
echo ""
echo "=== Listing all theme files for comparison ==="
fd -e js . packages/bruno-app/src/themes/ --exclude schema --exclude index.jsRepository: usebruno/bruno
Length of output: 834
🏁 Script executed:
#!/bin/bash
# Examine theme file structure to understand accents organization
echo "=== Examining dark.js theme structure ==="
head -100 packages/bruno-app/src/themes/dark/dark.js
echo ""
echo "=== Searching for 'accents' pattern across themes ==="
rg -n "accents" --type=js packages/bruno-app/src/themes/
echo ""
echo "=== Searching for 'GREEN\|RED' in themes ==="
rg -n "GREEN|RED" --type=js packages/bruno-app/src/themes/Repository: usebruno/bruno
Length of output: 24349
🏁 Script executed:
#!/bin/bash
# Examine accents object in multiple themes
echo "=== dark.js accents structure ==="
sed -n '101,115p' packages/bruno-app/src/themes/dark/dark.js
echo ""
echo "=== light.js accents structure ==="
sed -n '92,106p' packages/bruno-app/src/themes/light/light.js
echo ""
echo "=== Check schema for accents definition ==="
sed -n '10,30p' packages/bruno-app/src/themes/schema/oss.jsRepository: usebruno/bruno
Length of output: 1681
🏁 Script executed:
#!/bin/bash
# Check the globalStyles.js file for the exact usage
echo "=== Confirming usage in globalStyles.js ==="
sed -n '476,493p' packages/bruno-app/src/globalStyles.js
echo ""
echo "=== Check if CodeMirror-brunoVarInfo class is used ==="
rg "CodeMirror-brunoVarInfo|copy-success|var-readonly-note|var-warning-note" --type=js packages/bruno-app/src/ | head -20Repository: usebruno/bruno
Length of output: 2471
Add GREEN and RED to the accents object in all theme files.
props.theme.accents.GREEN and props.theme.accents.RED are referenced in .copy-success and .var-warning-note styles, but neither property exists in any theme definition. This results in undefined CSS values. Add these tokens to the schema (packages/bruno-app/src/themes/schema/oss.js) and all 13 theme files.
🤖 Prompt for AI Agents
In packages/bruno-app/src/globalStyles.js around lines 476 to 493, the styles
reference props.theme.accents.GREEN and props.theme.accents.RED which do not
exist in the theme definitions; update
packages/bruno-app/src/themes/schema/oss.js to add GREEN and RED keys to the
accents object (choose matching hex values consistent with existing accent
naming or mirror existing success/error tokens), then add the same GREEN and RED
entries to all 13 theme files so every theme provides these tokens and
rebuild/verify CSS no longer outputs undefined.
There was a problem hiding this comment.
Pull request overview
This PR modernizes the design system with several key improvements: it restructures the theme palette from a flat accents structure to a semantic organization with primary, hues, intent, and syntax categories; removes obsolete shortTab and codemirror.variable.info theme properties; adds support for XML/HTML tag syntax highlighting; fixes dropdown border visibility in Catppuccin dark themes; and introduces comprehensive Storybook documentation for the design system.
Key Changes:
- Restructured theme palettes with semantic color organization (
primary,hues,intent,syntax) - Removed unused
shortTabandcodemirror.variable.infotheme properties - Added
tagandtagBrackettokens for CodeMirror syntax highlighting - Fixed Catppuccin theme dropdown borders using
rgba()for better visibility - Replaced old PaletteViewer stories with new comprehensive Design System documentation
Reviewed changes
Copilot reviewed 31 out of 31 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/bruno-app/src/themes/schema/oss.js | Removed shortTab and variable.info from schema; added tag and tagBracket token requirements |
| packages/bruno-app/src/themes/light/light.js | Restructured palette: accents → primary/hues/intent/syntax; removed shortTab/variable.info |
| packages/bruno-app/src/themes/dark/dark.js | Applied same palette restructuring as light theme |
| packages/bruno-app/src/themes/dark/catppuccin-*.js | Fixed dropdown borders with rgba() for transparency; added TAG tokens; consistent with other themes |
| packages/bruno-app/src/globalStyles.js | Updated CodeMirror info tip styling to use dropdown theme tokens instead of removed variable.info |
| packages/bruno-app/src/components/RequestTabs/StyledWrapper.js | Replaced removed shortTab colors with standard theme properties |
| packages/bruno-app/src/components/CollectionSettings/Overview/Info/* | Fixed icon styling with proper semantic colors and new StyledWrapper |
| packages/bruno-app/src/themes/DesignSystem/* | Added comprehensive design system documentation via Storybook |
| packages/bruno-app/src/themes/PaletteViewer/*.stories.jsx | Removed old palette viewer stories (replaced by Design System) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Summary by CodeRabbit
New Features
Style
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.