From 6aa5e44b11fee30a19c43fe3b7abe25c1ccd8e87 Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Mon, 29 Dec 2025 05:46:31 +0530 Subject: [PATCH] feat: default dark mode theme tweaks --- .../components/CodeEditor/StyledWrapper.js | 2 +- .../CodeMirrorSearch/StyledWrapper.js | 38 +-- .../src/components/CodeMirrorSearch/index.js | 2 +- .../src/components/Dropdown/StyledWrapper.js | 9 +- .../src/components/Modal/StyledWrapper.js | 1 + .../GrpcError/StyledWrapper.js | 7 +- .../ResponsePane/QueryResult/StyledWrapper.js | 6 +- .../ResponsePane/ScriptError/StyledWrapper.js | 26 +- .../ResponsePane/ScriptError/index.js | 2 +- .../components/ResponsePane/StyledWrapper.js | 6 - .../ExampleItem/StyledWrapper.js | 2 +- .../CollectionItem/StyledWrapper.js | 5 +- .../Collections/Collection/StyledWrapper.js | 1 + .../src/components/Sidebar/StyledWrapper.js | 9 - .../PaletteViewer/Catppuccin.stories.jsx | 38 +-- .../src/themes/PaletteViewer/Dark.stories.jsx | 123 +++++++ .../themes/PaletteViewer/Light.stories.jsx | 124 +++++++ .../PaletteViewer/PaletteViewer.stories.jsx | 215 ------------ .../src/themes/PaletteViewer/components.jsx | 48 +++ .../src/themes/dark/catppuccin-frappe.js | 26 +- .../src/themes/dark/catppuccin-macchiato.js | 24 +- .../src/themes/dark/catppuccin-mocha.js | 24 +- .../src/themes/dark/dark-monochrome.js | 18 +- .../bruno-app/src/themes/dark/dark-pastel.js | 13 +- packages/bruno-app/src/themes/dark/dark.js | 317 +++++++++--------- packages/bruno-app/src/themes/dark/nord.js | 13 +- packages/bruno-app/src/themes/dark/vscode.js | 13 +- .../src/themes/light/catppuccin-latte.js | 12 +- .../src/themes/light/light-monochrome.js | 12 +- .../src/themes/light/light-pastel.js | 11 +- packages/bruno-app/src/themes/light/light.js | 20 +- packages/bruno-app/src/themes/light/vscode.js | 11 +- packages/bruno-app/src/themes/schema/oss.js | 36 +- 33 files changed, 553 insertions(+), 661 deletions(-) create mode 100644 packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx create mode 100644 packages/bruno-app/src/themes/PaletteViewer/Light.stories.jsx delete mode 100644 packages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsx create mode 100644 packages/bruno-app/src/themes/PaletteViewer/components.jsx diff --git a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js index fee6b92bc..7f463b51e 100644 --- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js +++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js @@ -116,7 +116,7 @@ const StyledWrapper = styled.div` span.cm-atom { color: ${(props) => props.theme.codemirror.tokens.atom} !important; } - span.cm-variable { + span.cm-variable, span.cm-variable-2 { color: ${(props) => props.theme.codemirror.tokens.variable} !important; } span.cm-keyword { diff --git a/packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js b/packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js index d6265fe3e..e853e6b8f 100644 --- a/packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js +++ b/packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { rgba } from 'polished'; const StyledWrapper = styled.div` .bruno-search-bar { @@ -9,15 +10,15 @@ const StyledWrapper = styled.div` display: flex; align-items: center; flex-wrap: nowrap; - padding: 0 2px; - min-height: 36px; - background: ${(props) => props.theme.sidebar.search.bg} !important; - border-radius: 4px; - border: 1px solid ${(props) => props.theme.sidebar.search.bg} !important; - box-shadow: 0 2px 8px rgba(0,0,0,0.08); + gap: 0; + padding: 1px 3px; width: auto; - min-width: 180px; max-width: 320px; + min-height: 22px; + background: ${(props) => props.theme.background.base}; + color: ${(props) => props.theme.text.base}; + border: solid 1px ${(props) => props.theme.border.border2}; + border-radius: ${(props) => props.theme.border.radius.sm}; } .bruno-search-bar input { @@ -38,7 +39,7 @@ const StyledWrapper = styled.div` padding: 0 1px; margin: 0 1px; cursor: pointer; - color: #aaa; + color: ${(props) => props.theme.colors.text.subtext1}; border-radius: 3px; height: 18px; width: 18px; @@ -51,27 +52,14 @@ const StyledWrapper = styled.div` min-width: 28px; text-align: center; font-size: ${(props) => props.theme.font.size.xs}; - color: #aaa; + color: ${(props) => props.theme.colors.text.subtext1}; margin: 0 8px 0 1px; white-space: nowrap; } - .bruno-search-bar.compact { - background: ${(props) => props.theme.codemirror.bg}; - color: ${(props) => props.theme.codemirror.text || props.theme.text}; - border: none; - box-shadow: 0 2px 8px rgba(0,0,0,0.08); - border-radius: 4px; - padding: 1px 3px; - min-height: 22px; - display: flex; - align-items: center; - gap: 0; - } - .bruno-search-bar input { background: transparent; - color: inherit; + color: ${(props) => props.theme.colors.text.subtext2}; border: none; outline: none; font-size: ${(props) => props.theme.font.size.base}; @@ -92,7 +80,9 @@ const StyledWrapper = styled.div` } .searchbar-icon-btn.active { - color: #f39c12 !important; + color: ${(props) => props.theme.brand}; + background-color: ${(props) => rgba(props.theme.brand, 0.1)}; + font-weght: 500; } `; diff --git a/packages/bruno-app/src/components/CodeMirrorSearch/index.js b/packages/bruno-app/src/components/CodeMirrorSearch/index.js index 9a14dbe64..489b1e71e 100644 --- a/packages/bruno-app/src/components/CodeMirrorSearch/index.js +++ b/packages/bruno-app/src/components/CodeMirrorSearch/index.js @@ -166,7 +166,7 @@ const CodeMirrorSearch = ({ visible, editor, onClose }) => { return ( -
+
props.theme.font.size.base}; color: ${(props) => props.theme.dropdown.color}; background-color: ${(props) => props.theme.dropdown.bg}; - box-shadow: ${(props) => props.theme.shadow.sm}; + ${(props) => + props.theme.dropdown.shadow && props.theme.dropdown.shadow !== 'none' + ? `box-shadow: ${props.theme.dropdown.shadow};` + : ''} border-radius: ${(props) => props.theme.border.radius.base}; + ${(props) => + props.theme.dropdown.border && props.theme.dropdown.border !== 'none' + ? `border: 1px solid ${props.theme.dropdown.border};` + : ''} max-height: 90vh; overflow-y: auto; max-width: unset !important; diff --git a/packages/bruno-app/src/components/Modal/StyledWrapper.js b/packages/bruno-app/src/components/Modal/StyledWrapper.js index 343a23993..f0df844a0 100644 --- a/packages/bruno-app/src/components/Modal/StyledWrapper.js +++ b/packages/bruno-app/src/components/Modal/StyledWrapper.js @@ -41,6 +41,7 @@ const Wrapper = styled.div` flex-grow: 0; margin: 3vh 10vw; margin-top: 50px; + border: 1px solid ${(props) => props.theme.border.border0}; &.modal-sm { min-width: 300px; diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js index 3b104dee9..fa4fe4c41 100644 --- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js @@ -1,12 +1,13 @@ import styled from 'styled-components'; const StyledWrapper = styled.div` - border-left: 3px solid ${(props) => props.theme.colors.text.danger}; - border-radius: ${(props) => props.theme.border.radius.sm}; max-height: 160px; overflow-y: auto; - background-color: color-mix(in srgb, ${(props) => props.theme.colors.text.danger} 6%, transparent); margin-bottom: 8px; + background-color: ${(props) => props.theme.background.base}; + border: solid 1px ${(props) => props.theme.border.border2}; + border-left: 4px solid ${(props) => props.theme.colors.text.danger}; + border-radius: ${(props) => props.theme.border.radius.base}; .close-button { opacity: 0.6; diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js index 5f5652e35..838cd3d02 100644 --- a/packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js @@ -46,9 +46,9 @@ const StyledWrapper = styled.div` width: 100%; input { - border: ${(props) => props.theme.sidebar.search.border}; - border-radius: 2px; - background-color: ${(props) => props.theme.sidebar.search.bg}; + border: solid 1px ${(props) => props.theme.border.border2}; + border-radius: ${(props) => props.theme.border.radius.sm}; + background-color: ${(props) => props.theme.background.base}; &:focus { outline: none; diff --git a/packages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.js index 79a4668df..844f51f9b 100644 --- a/packages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.js @@ -1,27 +1,13 @@ import styled from 'styled-components'; const StyledWrapper = styled.div` - border-left: 4px solid ${(props) => props.theme.colors.text.danger}; - border-top: 1px solid transparent; - border-right: 1px solid transparent; - border-bottom: 1px solid transparent; - border-radius: 0.375rem; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); max-height: 200px; min-height: 70px; overflow-y: auto; - background-color: ${(props) => props.theme.bg === '#1e1e1e' ? 'rgba(40, 40, 40, 0.5)' : 'rgba(250, 250, 250, 0.9)'}; - - .error-icon-container { - margin-top: 0.125rem; - padding: 0.375rem; - border-radius: 9999px; - background-color: ${(props) => props.theme.bg === '#1e1e1e' ? 'rgba(40, 40, 40, 0.8)' : 'rgba(240, 240, 240, 0.8)'}; - - svg { - color: ${(props) => props.theme.colors.text.danger}; - } - } + background-color: ${(props) => props.theme.background.base}; + border: solid 1px ${(props) => props.theme.border.border2}; + border-left: 4px solid ${(props) => props.theme.colors.text.danger}; + border-radius: ${(props) => props.theme.border.radius.base}; .close-button { opacity: 0.7; @@ -50,6 +36,10 @@ const StyledWrapper = styled.div` word-break: break-all; color: ${(props) => props.theme.text}; } + + .separator { + border-top: 1px solid ${(props) => props.theme.border.border1}; + } `; export default StyledWrapper; diff --git a/packages/bruno-app/src/components/ResponsePane/ScriptError/index.js b/packages/bruno-app/src/components/ResponsePane/ScriptError/index.js index 72b717512..b03d47268 100644 --- a/packages/bruno-app/src/components/ResponsePane/ScriptError/index.js +++ b/packages/bruno-app/src/components/ResponsePane/ScriptError/index.js @@ -38,7 +38,7 @@ const ScriptError = ({ item, onClose }) => {
{errors.map((error, index) => (
- {index > 0 &&
} + {index > 0 &&
}
{error.title}
diff --git a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js index f8db8051f..3e3fb6814 100644 --- a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js @@ -75,12 +75,6 @@ const StyledWrapper = styled.div` color: ${(props) => props.theme.colors.text.green} !important; } - .separator { - height: 16px; - border-left: 1px solid ${(props) => props.theme.preferences.sidebar.border}; - margin: 0 8px; - } - .result-view-tabs { display: flex; align-items: center; diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js index 8a5465413..2c508f3f1 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js @@ -18,7 +18,7 @@ const StyledWrapper = styled.div` } .indent-block { - border-right: ${(props) => props.theme.sidebar.collection.item.indentBorder}; + border-right: 1px solid ${(props) => props.theme.border.border1}; } .collection-item-name { diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js index c4ed228d0..cd1846d0c 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js @@ -17,7 +17,7 @@ const Wrapper = styled.div` } .indent-block { - border-right: ${(props) => props.theme.sidebar.collection.item.indentBorder}; + border-right: 1px solid ${(props) => props.theme.border.border1}; } .collection-item-name { @@ -107,6 +107,7 @@ const Wrapper = styled.div` .menu-icon, .collection-item-menu-icon { visibility: visible; + background-color: transparent !important; } } @@ -132,7 +133,7 @@ const Wrapper = styled.div` } .indent-block { - border-right: ${(props) => props.theme.sidebar.collection.item.active.indentBorder} !important; + border-right: 1px solid ${(props) => props.theme.border.border1} !important; } } diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js index a845064a0..f1dd970f0 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js @@ -20,6 +20,7 @@ const Wrapper = styled.div` &.collection-keyboard-focused { .collection-actions { visibility: visible; + background-color: transparent !important; } } diff --git a/packages/bruno-app/src/components/Sidebar/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/StyledWrapper.js index fd48f9c32..976ab99bf 100644 --- a/packages/bruno-app/src/components/Sidebar/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/StyledWrapper.js @@ -125,15 +125,6 @@ const Wrapper = styled.div` border-left: solid 1px ${(props) => props.theme.sidebar.dragbar.activeBorder}; } } - - .second-tab-placeholder { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - flex: 1; - color: ${(props) => props.theme.sidebar.muted}; - } `; export default Wrapper; diff --git a/packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx b/packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx index c92aab0b6..e862a8245 100644 --- a/packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx +++ b/packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { ColorSwatch, ColorSection } from './components'; // Catppuccin Latte (Light) const latte = { @@ -150,24 +151,6 @@ const mocha = { const themes = [latte, frappe, macchiato, mocha]; -const ColorSwatch = ({ name, color, textColor }) => ( -
-
-
-
{name}
-
{color}
-
-
-); - const ThemeSection = ({ theme }) => { const textColor = theme.mode === 'dark' ? '#cdd6f4' : '#4c4f69'; const mutedColor = theme.mode === 'dark' ? '#a6adc8' : '#6c6f85'; @@ -188,23 +171,8 @@ const ThemeSection = ({ theme }) => { {theme.mode === 'light' ? 'Light theme' : 'Dark theme'} — Base: {theme.base}

-

- Accents -

-
- {Object.entries(theme.accents).map(([name, color]) => ( - - ))} -
- -

- Surface & Text -

-
- {Object.entries(theme.surface).map(([name, color]) => ( - - ))} -
+ +
); }; diff --git a/packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx b/packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx new file mode 100644 index 000000000..cba5c1ffc --- /dev/null +++ b/packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx @@ -0,0 +1,123 @@ +import React from 'react'; +import { palette } from '../dark/dark'; +import { ColorSwatch, ColorSection } from './components'; + +const textColor = '#cccccc'; +const mutedColor = '#858585'; + +export default { + title: 'Themes/Dark Palette', + parameters: { + layout: 'padded' + } +}; + +export const Overview = { + render: () => ( +
+

+ Dark Theme Palette +

+

+ 14 accent colors with full hue coverage +

+ + + + + + +
+ ) +}; + +export const Accents = { + render: () => ( +
+

+ Accent Colors +

+

+ Warm → Cool progression across the color wheel +

+
+ {Object.entries(palette.accents).map(([name, color]) => ( + + ))} +
+
+ ) +}; + +export const Background = { + render: () => ( +
+

+ Background Colors +

+
+ {Object.entries(palette.background).map(([name, color]) => ( + + ))} +
+
+ ) +}; + +export const Text = { + render: () => ( +
+

+ Text Colors +

+
+ {Object.entries(palette.text).map(([name, color]) => ( + + ))} +
+
+ ) +}; + +export const HueWheel = { + render: () => { + const accents = Object.entries(palette.accents); + // Sort by hue for visualization + 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; + }); + + return ( +
+

+ Hue Distribution +

+

+ Colors sorted by hue value (0° → 360°) +

+
+ {sorted.map(([name, color]) => { + const hueMatch = color.match(/hsl\((\d+)/); + const hue = hueMatch ? parseInt(hueMatch[1]) : 0; + return ( +
+
{name}
+
{hue}°
+
+
+ ); + })} +
+
+ ); + } +}; diff --git a/packages/bruno-app/src/themes/PaletteViewer/Light.stories.jsx b/packages/bruno-app/src/themes/PaletteViewer/Light.stories.jsx new file mode 100644 index 000000000..895f47b48 --- /dev/null +++ b/packages/bruno-app/src/themes/PaletteViewer/Light.stories.jsx @@ -0,0 +1,124 @@ +import React from 'react'; +import { palette } from '../light/light'; +import { ColorSwatch, ColorSection } from './components'; + +const textColor = '#343434'; +const mutedColor = '#666666'; + +export default { + title: 'Themes/Light Palette', + parameters: { + layout: 'padded' + } +}; + +export const Overview = { + render: () => ( +
+

+ Light Theme Palette +

+

+ 14 accent colors with full hue coverage +

+ + + + + + + +
+ ) +}; + +export const Accents = { + render: () => ( +
+

+ Accent Colors +

+

+ Warm → Cool progression across the color wheel +

+
+ {Object.entries(palette.accents).map(([name, color]) => ( + + ))} +
+
+ ) +}; + +export const Background = { + render: () => ( +
+

+ Background Colors +

+
+ {Object.entries(palette.background).map(([name, color]) => ( + + ))} +
+
+ ) +}; + +export const Text = { + render: () => ( +
+

+ Text Colors +

+
+ {Object.entries(palette.text).map(([name, color]) => ( + + ))} +
+
+ ) +}; + +export const HueWheel = { + render: () => { + const accents = Object.entries(palette.accents); + // Sort by hue for visualization + 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; + }); + + return ( +
+

+ Hue Distribution +

+

+ Colors sorted by hue value (0° → 360°) +

+
+ {sorted.map(([name, color]) => { + const hueMatch = color.match(/hsl\((\d+)/); + const hue = hueMatch ? parseInt(hueMatch[1]) : 0; + return ( +
+
{name}
+
{hue}°
+
+
+ ); + })} +
+
+ ); + } +}; diff --git a/packages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsx b/packages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsx deleted file mode 100644 index 1d8439133..000000000 --- a/packages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsx +++ /dev/null @@ -1,215 +0,0 @@ -import React from 'react'; - -// Light theme palette - 14 accent colors -const palette = { - accents: { - PRIMARY: '#bd7a28', - RED: 'hsl(8 60% 52%)', // warm coral - NEW - ROSE: 'hsl(352 45% 50%)', // soft red (approved) - BROWN: 'hsl(28 55% 38%)', // warm brown (liked) - ORANGE: 'hsl(35 85% 42%)', // vibrant orange - YELLOW: 'hsl(45 75% 42%)', // golden yellow - LIME: 'hsl(85 45% 40%)', // yellow-green - NEW - GREEN: 'hsl(145 50% 36%)', // forest green - TEAL: 'hsl(178 50% 36%)', // true teal - CYAN: 'hsl(195 55% 42%)', // cyan-blue - NEW - BLUE: 'hsl(214 55% 45%)', // true blue (liked) - INDIGO: 'hsl(235 45% 45%)', // deep indigo - VIOLET: 'hsl(258 42% 50%)', // soft violet - NEW - PURPLE: 'hsl(280 45% 48%)', // rich purple - PINK: 'hsl(328 50% 48%)' // magenta-pink - NEW - }, - system: { - CONTROL_ACCENT: '#b96f1d' // for accent-color - }, - background: { - BASE: '#ffffff', - MANTLE: '#f8f8f8', - CRUST: '#f1f1f1', - SURFACE0: '#f1f1f1', - SURFACE1: '#eaeaea', - SURFACE2: '#e5e5e5' - }, - text: { - BASE: '#343434', - SUBTEXT2: '#666666', - SUBTEXT1: '#838383', - SUBTEXT0: '#9B9B9B' - }, - overlay: { - OVERLAY2: '#8b8b8b', - OVERLAY1: '#B0B0B0', - OVERLAY0: '#C0C0C0' - }, - border: { - BORDER2: '#cccccc', - BORDER1: '#e5e5e5', - BORDER0: '#efefef' - }, - utility: { - WHITE: '#ffffff', - BLACK: '#000000' - } -}; - -const ColorSwatch = ({ name, color, textColor = '#343434' }) => ( -
-
-
-
{name}
-
{color}
-
-
-); - -const ColorSection = ({ title, colors, textColor }) => ( -
-

{title}

-
- {Object.entries(colors).map(([name, color]) => ( - - ))} -
-
-); - -export default { - title: 'Themes/Light Palette', - parameters: { - layout: 'padded' - } -}; - -export const Overview = { - render: () => ( -
-

- Light Theme Palette -

-

- 14 accent colors with full hue coverage -

- - - - - - -
- ) -}; - -export const Accents = { - render: () => ( -
-

- Accent Colors -

-

- Warm → Cool progression across the color wheel -

-
- {Object.entries(palette.accents).map(([name, color]) => ( - - ))} -
-
- ) -}; - -export const Background = { - render: () => ( -
-

- Background Colors -

-
- {Object.entries(palette.background).map(([name, color]) => ( - - ))} -
-
- ) -}; - -export const Text = { - render: () => ( -
-

- Text Colors -

-
- {Object.entries(palette.text).map(([name, color]) => ( -
-
-
-
{name}
-
{color}
-
-
- ))} -
-
- ) -}; - -export const HueWheel = { - render: () => { - const accents = Object.entries(palette.accents); - // Sort by hue for visualization - 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; - }); - - return ( -
-

- Hue Distribution -

-

- Colors sorted by hue value (0° → 360°) -

-
- {sorted.map(([name, color]) => { - const hueMatch = color.match(/hsl\((\d+)/); - const hue = hueMatch ? parseInt(hueMatch[1]) : 0; - return ( -
-
{name}
-
{hue}°
-
-
- ); - })} -
-
- ); - } -}; diff --git a/packages/bruno-app/src/themes/PaletteViewer/components.jsx b/packages/bruno-app/src/themes/PaletteViewer/components.jsx new file mode 100644 index 000000000..9f136adc6 --- /dev/null +++ b/packages/bruno-app/src/themes/PaletteViewer/components.jsx @@ -0,0 +1,48 @@ +import React from 'react'; + +// Shorten long names for display +const formatName = (name) => { + if (name === 'CONTROL_ACCENT') return 'CTRL_ACC'; + return name; +}; + +// Shorten HSL colors for display +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+)%\)/); + if (match) { + return `${match[1]}/${match[2]}/${match[3]}`; + } + } + return color; +}; + +export const ColorSwatch = ({ name, color, textColor = '#cccccc', size = 56 }) => ( +
+
+
+
{formatName(name)}
+
{formatColor(color)}
+
+
+); + +export const ColorSection = ({ title, colors, textColor = '#cccccc', size = 56 }) => ( +
+

{title}

+
+ {Object.entries(colors).map(([name, color]) => ( + + ))} +
+
+); diff --git a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js index aceeca994..80e4ec0ce 100644 --- a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js +++ b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js @@ -137,20 +137,15 @@ const catppuccinFrappeTheme = { muted: colors.SUBTEXT0, bg: colors.BASE, dragbar: { - border: colors.SURFACE1, - activeBorder: colors.SURFACE2 - }, - - search: { - border: '1px solid transparent', - bg: colors.SURFACE0 + border: colors.SURFACE0, + activeBorder: colors.OVERLAY0 }, collection: { item: { bg: colors.SURFACE0, - hoverBg: colors.SURFACE1, - focusBorder: colors.LAVENDER, + hoverBg: colors.SURFACE0, + focusBorder: colors.SURFACE1, indentBorder: `solid 1px ${colors.SURFACE2}`, active: { indentBorder: `solid 1px ${colors.MAUVE}` @@ -169,9 +164,10 @@ const catppuccinFrappeTheme = { dropdown: { color: colors.TEXT, iconColor: colors.SUBTEXT1, - bg: colors.MANTLE, + bg: colors.SURFACE0, hoverBg: 'rgba(115, 121, 148, 0.16)', - shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', + shadow: 'none', + border: colors.SURFACE1, separator: colors.SURFACE1, selectedColor: colors.MAUVE, mutedText: colors.SUBTEXT0 @@ -209,7 +205,7 @@ const catppuccinFrappeTheme = { border: `solid 1px ${colors.SURFACE0}` }, dragbar: { - border: colors.SURFACE1, + border: colors.SURFACE0, activeBorder: colors.OVERLAY0 }, responseStatus: colors.TEXT, @@ -566,12 +562,6 @@ const catppuccinFrappeTheme = { text: colors.SUBTEXT1 }, - preferences: { - sidebar: { - border: colors.SURFACE1 - } - }, - examples: { buttonBg: 'rgba(202, 158, 230, 0.1)', buttonColor: colors.MAUVE, diff --git a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js index 81a73bee6..0cad2f27f 100644 --- a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js +++ b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js @@ -137,20 +137,15 @@ const catppuccinMacchiatoTheme = { muted: colors.SUBTEXT0, bg: colors.BASE, dragbar: { - border: colors.SURFACE1, - activeBorder: colors.SURFACE2 - }, - - search: { - border: '1px solid transparent', - bg: colors.SURFACE0 + border: colors.SURFACE0, + activeBorder: colors.OVERLAY0 }, collection: { item: { bg: colors.SURFACE0, - hoverBg: colors.SURFACE1, - focusBorder: colors.LAVENDER, + hoverBg: colors.SURFACE0, + focusBorder: colors.SURFACE1, indentBorder: `solid 1px ${colors.SURFACE2}`, active: { indentBorder: `solid 1px ${colors.MAUVE}` @@ -171,7 +166,8 @@ const catppuccinMacchiatoTheme = { iconColor: colors.SUBTEXT1, bg: colors.MANTLE, hoverBg: 'rgba(110, 115, 141, 0.16)', - shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', + shadow: 'none', + border: colors.SURFACE1, separator: colors.SURFACE1, selectedColor: colors.MAUVE, mutedText: colors.SUBTEXT0 @@ -209,7 +205,7 @@ const catppuccinMacchiatoTheme = { border: `solid 1px ${colors.SURFACE0}` }, dragbar: { - border: colors.SURFACE1, + border: colors.SURFACE0, activeBorder: colors.OVERLAY0 }, responseStatus: colors.TEXT, @@ -566,12 +562,6 @@ const catppuccinMacchiatoTheme = { text: colors.SUBTEXT1 }, - preferences: { - sidebar: { - border: colors.SURFACE1 - } - }, - examples: { buttonBg: 'rgba(198, 160, 246, 0.1)', buttonColor: colors.MAUVE, diff --git a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js index 6889277f4..6a0797ca4 100644 --- a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js +++ b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js @@ -137,20 +137,15 @@ const catppuccinMochaTheme = { muted: colors.SUBTEXT0, bg: colors.BASE, dragbar: { - border: colors.SURFACE1, - activeBorder: colors.SURFACE2 - }, - - search: { - border: '1px solid transparent', - bg: colors.SURFACE0 + border: colors.SURFACE0, + activeBorder: colors.OVERLAY0 }, collection: { item: { bg: colors.SURFACE0, - hoverBg: colors.SURFACE1, - focusBorder: colors.LAVENDER, + hoverBg: colors.SURFACE0, + focusBorder: colors.SURFACE1, indentBorder: `solid 1px ${colors.SURFACE2}`, active: { indentBorder: `solid 1px ${colors.MAUVE}` @@ -171,7 +166,8 @@ const catppuccinMochaTheme = { iconColor: colors.SUBTEXT1, bg: colors.MANTLE, hoverBg: 'rgba(108, 112, 134, 0.16)', - shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', + shadow: 'none', + border: colors.SURFACE1, separator: colors.SURFACE1, selectedColor: colors.MAUVE, mutedText: colors.SUBTEXT0 @@ -209,7 +205,7 @@ const catppuccinMochaTheme = { border: `solid 1px ${colors.SURFACE0}` }, dragbar: { - border: colors.SURFACE1, + border: colors.SURFACE0, activeBorder: colors.OVERLAY0 }, responseStatus: colors.TEXT, @@ -566,12 +562,6 @@ const catppuccinMochaTheme = { text: colors.SUBTEXT1 }, - preferences: { - sidebar: { - border: colors.SURFACE1 - } - }, - examples: { buttonBg: 'rgba(203, 166, 247, 0.1)', buttonColor: colors.MAUVE, diff --git a/packages/bruno-app/src/themes/dark/dark-monochrome.js b/packages/bruno-app/src/themes/dark/dark-monochrome.js index b23e6c50a..3f32c36b1 100644 --- a/packages/bruno-app/src/themes/dark/dark-monochrome.js +++ b/packages/bruno-app/src/themes/dark/dark-monochrome.js @@ -128,11 +128,6 @@ const darkMonochromeTheme = { activeBorder: colors.GRAY_4 }, - search: { - border: '1px solid transparent', - bg: colors.GRAY_2 - }, - collection: { item: { bg: '#37373D', @@ -158,7 +153,8 @@ const darkMonochromeTheme = { iconColor: 'rgb(204, 204, 204)', bg: 'rgb(48, 48, 49)', hoverBg: '#6A6A6A29', - shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', + shadow: 'none', + border: '#444', separator: '#444', selectedColor: '#a3a3a3', mutedText: '#9B9B9B' @@ -283,8 +279,8 @@ const darkMonochromeTheme = { border: colors.BRAND }, secondary: { - bg: colors.GRAY_4, - text: '#fff', + bg: colors.BG, + text: colors.TEXT, border: colors.GRAY_5 }, success: { @@ -553,12 +549,6 @@ const darkMonochromeTheme = { text: '#B8B8B8' }, - preferences: { - sidebar: { - border: '#444444' - } - }, - examples: { buttonBg: '#a3a3a31A', buttonColor: '#a3a3a3', diff --git a/packages/bruno-app/src/themes/dark/dark-pastel.js b/packages/bruno-app/src/themes/dark/dark-pastel.js index 42aa5c875..643de0889 100644 --- a/packages/bruno-app/src/themes/dark/dark-pastel.js +++ b/packages/bruno-app/src/themes/dark/dark-pastel.js @@ -148,10 +148,6 @@ const darkPastelTheme = { border: colors.GRAY_3, activeBorder: colors.BRAND }, - search: { - border: '1px solid transparent', - bg: colors.GRAY_2 - }, collection: { item: { bg: colors.GRAY_2, @@ -176,7 +172,8 @@ const darkPastelTheme = { iconColor: colors.TEXT_MUTED, bg: colors.GRAY_2, hoverBg: colors.GRAY_3, - shadow: 'rgba(0, 0, 0, 0.5) 0px 6px 16px -2px', + shadow: 'none', + border: colors.GRAY_4, separator: colors.GRAY_4, selectedColor: colors.BRAND, mutedText: colors.GRAY_6 @@ -571,12 +568,6 @@ const darkPastelTheme = { text: colors.TEXT }, - preferences: { - sidebar: { - border: colors.GRAY_4 - } - }, - examples: { buttonBg: `${colors.BRAND}20`, buttonColor: colors.BRAND, diff --git a/packages/bruno-app/src/themes/dark/dark.js b/packages/bruno-app/src/themes/dark/dark.js index 869456c41..db4b85e2f 100644 --- a/packages/bruno-app/src/themes/dark/dark.js +++ b/packages/bruno-app/src/themes/dark/dark.js @@ -1,56 +1,73 @@ +export const palette = { + accents: { + PRIMARY: '#d9a342', + RED: 'hsl(0 70% 71%)', + ROSE: 'hsl(350 65% 78%)', + BROWN: 'hsl(41 52% 77%)', + ORANGE: 'hsl(24 75% 75%)', + YELLOW: 'hsl(48 68% 74%)', + LIME: 'hsl(75 65% 71%)', + GREEN: 'hsl(140 59% 71%)', + TEAL: 'hsl(170 55% 71%)', + CYAN: 'hsl(190 70% 76%)', + BLUE: 'hsl(202 82% 80%)', + INDIGO: 'hsl(225 73% 82%)', + VIOLET: 'hsl(260 65% 81%)', + PURPLE: 'hsl(285 60% 78%)', + PINK: 'hsl(320 65% 81%)' + }, + background: { + BASE: 'hsl(0deg 0% 10%)', + MANTLE: '#252526', + CRUST: '#1e1e1e', + SURFACE0: '#26292b', + SURFACE1: 'hsl(204, 4%, 23%)' + }, + text: { + BASE: 'hsl(0deg 0% 80%)', + SUBTEXT2: '#bbb', + SUBTEXT1: '#aaa', + SUBTEXT0: '#999' + }, + border: { + BORDER2: '#444444', + BORDER1: '#333333', + BORDER0: '#2a2a2a' + }, + overlay: { + OVERLAY2: '#666666', + OVERLAY1: '#555555', + OVERLAY0: '#444444' + }, + utility: { + WHITE: '#ffffff', + BLACK: '#000000' + } +}; + const colors = { - // BRAND: '#d9a342', - BRAND: '#d9a342', - TEXT: '#d4d4d4', - TEXT_MUTED: '#858585', - TEXT_LINK: '#8BB7E0', - BG: '#1e1e1e', - - GREEN: '#4ec9b0', - YELLOW: '#d9a342', - WHITE: '#fff', - BLACK: '#000', - - GRAY_1: '#252526', GRAY_2: '#3D3D3D', GRAY_3: '#444444', GRAY_4: '#666666', - GRAY_5: '#b0b0b0', - GRAY_6: '#cbcbcb', - GRAY_7: '#e5e5e5', - GRAY_8: '#eaeaea', - GRAY_9: '#f3f3f3', - GRAY_10: '#f8f8f8', - - CODEMIRROR_TOKENS: { - DEFINITION: '#9ccc9c', // Softer, brighter sage — better contrast - PROPERTY: 'hsl(202 90% 80% / 1)', // Soft sky blue, high clarity without being loud - STRING: 'hsl(41 50% 69% / 1)', // VSCode-like warm string tone - NUMBER: 'hsl(168 50% 57% / 1)', // Standard teal with higher clarity - ATOM: 'hsl(305 32% 69% / 1)', // Brighter lavender, matches VSCode purple - VARIABLE: 'hsl(201 90% 73% / 1)', // Clear aqua-blue (used widely in dark themes) - KEYWORD: 'hsl(10 36% 65% / 1)', // Coral-ish but muted to avoid eye strain - COMMENT: '#6a9955', // Greenish-slate — very readable & subtle - OPERATOR: '#d4d4d4' // Light gray — consistent with dark mode operators - } + GRAY_5: '#b0b0b0' }; const darkTheme = { mode: 'dark', - brand: colors.BRAND, - text: colors.TEXT, - textLink: colors.TEXT_LINK, - bg: colors.BG, + brand: palette.accents.PRIMARY, + text: palette.text.BASE, + textLink: palette.accents.BLUE, + bg: palette.background.BASE, accents: { - primary: colors.BRAND + primary: palette.accents.PRIMARY }, background: { - base: colors.BG, - mantle: colors.GRAY_1, + base: palette.background.BASE, + mantle: palette.background.MANTLE, crust: '#333333', - surface0: colors.GRAY_2, + surface0: palette.background.SURFACE0, surface1: colors.GRAY_3, surface2: colors.GRAY_4 }, @@ -86,28 +103,28 @@ const darkTheme = { lg: '10px', xl: '12px' }, - border2: colors.GRAY_4, - border1: colors.GRAY_3, - border0: colors.GRAY_2 + border2: palette.border.BORDER2, + border1: palette.border.BORDER1, + border0: palette.border.BORDER0 }, colors: { text: { - white: colors.WHITE, - green: colors.GREEN, - danger: '#f06f57', - warning: '#f57c00', - muted: colors.TEXT_MUTED, - purple: '#cd56d6', - yellow: colors.YELLOW, - subtext2: colors.GRAY_6, - subtext1: colors.GRAY_5, - subtext0: colors.GRAY_4 + white: palette.text.BASE, + green: palette.accents.GREEN, + danger: palette.accents.RED, + warning: palette.accents.ORANGE, + muted: palette.text.SUBTEXT1, + purple: palette.accents.PURPLE, + yellow: palette.accents.YELLOW, + subtext2: palette.text.SUBTEXT2, + subtext1: palette.text.SUBTEXT1, + subtext0: palette.text.SUBTEXT0 }, bg: { danger: '#d03544' }, - accent: colors.BRAND + accent: palette.accents.PRIMARY }, input: { @@ -121,48 +138,44 @@ const darkTheme = { }, sidebar: { - color: '#ccc', - muted: '#9d9d9d', - bg: colors.BG, + color: palette.text.BASE, + muted: palette.text.SUBTEXT1, + bg: palette.background.BASE, dragbar: { - border: colors.GRAY_2, - activeBorder: colors.GRAY_4 - }, - - search: { - border: '1px solid transparent', - bg: colors.GRAY_2 + border: palette.border.BORDER1, + activeBorder: palette.border.BORDER2 }, collection: { item: { - bg: '#37373D', - hoverBg: '#2A2D2F', - focusBorder: '#4e4e4e', - indentBorder: 'solid 1px #585858', + bg: palette.background.SURFACE0, + hoverBg: palette.background.SURFACE0, + focusBorder: palette.border.BORDER2, + indentBorder: `solid 1px ${palette.border.BORDER1}`, active: { indentBorder: 'solid 1px #4c4c4c' }, example: { - iconColor: colors.GRAY_5 + iconColor: palette.text.BASE } } }, dropdownIcon: { - color: '#ccc' + color: palette.text.BASE } }, dropdown: { - color: 'rgb(204, 204, 204)', - iconColor: 'rgb(204, 204, 204)', - bg: 'rgb(48, 48, 49)', - hoverBg: '#6A6A6A29', - shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', - separator: '#444', - selectedColor: '#d9a342', - mutedText: '#9B9B9B' + color: palette.text.BASE, + iconColor: palette.text.SUBTEXT2, + bg: palette.background.MANTLE, + hoverBg: palette.background.SURFACE1, + shadow: 'none', + border: palette.border.BORDER1, + separator: palette.border.BORDER1, + selectedColor: palette.accents.PRIMARY, + mutedText: palette.text.SUBTEXT1 }, workspace: { @@ -175,35 +188,35 @@ const darkTheme = { request: { methods: { - get: '#5fbf7a', // Fresh jade — readable, calm success tone - post: 'hsl(270 49% 74% / 1)', // Soft amethyst — cool, composed accent - put: '#d7a35a', // Warm amber-bronze — bridges BRAND + STRING - delete: '#e06c75', // VSCode red — destructive but readable - patch: '#d7a35a', // Same as PUT - options: '#c8b072', // Muted olive-gold — neutral method - head: '#9da5b4' // Cool gray-blue — subtle, low priority + get: palette.accents.GREEN, + post: palette.accents.INDIGO, + put: palette.accents.ORANGE, + delete: palette.accents.RED, + patch: palette.accents.ORANGE, + options: palette.accents.TEAL, + head: palette.accents.CYAN }, - grpc: '#5fb3c4', // Steel cyan — technical, protocol-heavy, calm - ws: '#d9a342', // Brand gold — perfect as-is - gql: '#c96ab1' // Softened GraphQL pink — less neon, still iconic + grpc: palette.accents.BROWN, + ws: palette.accents.ORANGE, + gql: palette.accents.PINK }, requestTabPanel: { url: { - bg: colors.BG, + bg: palette.background.BASE, icon: 'rgb(204, 204, 204)', iconDanger: '#fa5343', - border: `solid 1px ${colors.GRAY_3}` + border: `solid 1px ${palette.border.BORDER1}` }, dragbar: { - border: '#444', - activeBorder: '#8a8a8a' + border: palette.border.BORDER1, + activeBorder: palette.border.BORDER2 }, responseStatus: '#ccc', - responseOk: '#8cd656', - responseError: '#f06f57', - responsePending: '#569cd6', + responseOk: palette.accents.GREEN, + responseError: palette.accents.RED, + responsePending: palette.accents.BLUE, responseOverlayBg: 'rgba(30, 30, 30, 0.6)', card: { @@ -235,12 +248,12 @@ const darkTheme = { modal: { title: { - color: '#ccc', - bg: 'rgb(38, 38, 39)' + color: palette.text.BASE, + bg: palette.background.BASE }, body: { - color: '#ccc', - bg: 'rgb(48, 48, 49)' + color: palette.text.BASE, + bg: palette.background.MANTLE }, input: { bg: 'rgb(65, 65, 65)', @@ -279,29 +292,29 @@ const darkTheme = { button2: { color: { primary: { - bg: colors.BRAND, - text: colors.BLACK, - border: colors.BRAND + bg: palette.accents.PRIMARY, + text: palette.utility.BLACK, + border: palette.accents.PRIMARY }, secondary: { - bg: '#2a2a2a', - text: 'hsl(39 67% 64% / 1)', - border: '#3a3a3a' + bg: palette.background.MANTLE, + text: palette.text.BASE, + border: palette.border.BORDER1 }, success: { - bg: '#059669', - text: '#fff', - border: '#059669' + bg: palette.accents.GREEN, + text: palette.utility.WHITE, + border: palette.accents.GREEN }, warning: { - bg: '#f59e0b', + bg: palette.accents.ORANGE, text: '#1e1e1e', - border: '#f59e0b' + border: palette.accents.ORANGE }, danger: { - bg: '#f43f5e', - text: '#fff', - border: '#f43f5e' + bg: palette.accents.RED, + text: palette.utility.WHITE, + border: palette.accents.RED } } }, @@ -326,9 +339,9 @@ const darkTheme = { }, requestTabs: { - color: '#ccc', - bg: '#2A2D2F', - bottomBorder: '#444', + color: palette.text.BASE, + bg: palette.background.SURFACE0, + bottomBorder: palette.border.BORDER2, icon: { color: '#9f9f9f', hoverColor: 'rgb(204, 204, 204)', @@ -338,22 +351,22 @@ const darkTheme = { iconColor: colors.GRAY_5 }, shortTab: { - color: '#ccc', + color: palette.text.BASE, bg: 'transparent', - hoverColor: '#ccc', + hoverColor: palette.text.BASE, hoverBg: colors.GRAY_3 } }, codemirror: { - bg: colors.BG, - border: colors.BG, + bg: palette.background.BASE, + border: palette.background.BASE, placeholder: { color: '#a2a2a2', opacity: 0.5 }, gutter: { - bg: colors.BG + bg: palette.background.BASE }, variable: { valid: 'rgb(11 178 126)', @@ -372,15 +385,15 @@ const darkTheme = { } }, tokens: { - definition: colors.CODEMIRROR_TOKENS.DEFINITION, - property: colors.CODEMIRROR_TOKENS.PROPERTY, - string: colors.CODEMIRROR_TOKENS.STRING, - number: colors.CODEMIRROR_TOKENS.NUMBER, - atom: colors.CODEMIRROR_TOKENS.ATOM, - variable: colors.CODEMIRROR_TOKENS.VARIABLE, - keyword: colors.CODEMIRROR_TOKENS.KEYWORD, - comment: colors.CODEMIRROR_TOKENS.COMMENT, - operator: colors.CODEMIRROR_TOKENS.OPERATOR + definition: palette.accents.GREEN, + property: palette.accents.BLUE, + string: palette.accents.BROWN, + number: palette.accents.GREEN, + atom: palette.accents.YELLOW, + variable: palette.accents.ROSE, + keyword: palette.accents.ROSE, + comment: palette.text.SUBTEXT1, + operator: palette.accents.BROWN }, searchLineHighlightCurrent: 'rgba(120,120,120,0.18)', searchMatch: '#FFD700', @@ -444,7 +457,7 @@ const darkTheme = { optionHoverBg: 'rgba(255, 255, 255, 0.05)', optionLabelColor: '#cccccc', optionCountColor: '#858585', - checkboxColor: colors.BRAND, + checkboxColor: palette.accents.PRIMARY, scrollbarTrack: '#2d2d30', scrollbarThumb: '#5a5a5a', scrollbarThumbHover: '#6a6a6a' @@ -468,9 +481,9 @@ const darkTheme = { }, importPaths: { header: { - text: '#9d9d9d', + text: palette.text.SUBTEXT1, button: { - color: '#9d9d9d', + color: palette.text.SUBTEXT1, hoverColor: '#d4d4d4' } }, @@ -486,7 +499,7 @@ const darkTheme = { bg: 'transparent', hoverBg: 'rgba(255, 255, 255, 0.05)', text: '#d4d4d4', - icon: '#9d9d9d', + icon: palette.text.SUBTEXT1, checkbox: { color: '#d4d4d4' }, @@ -496,7 +509,7 @@ const darkTheme = { } }, empty: { - text: '#9d9d9d' + text: palette.text.SUBTEXT1 }, button: { bg: '#185387', @@ -507,9 +520,9 @@ const darkTheme = { }, protoFiles: { header: { - text: '#9d9d9d', + text: palette.text.SUBTEXT1, button: { - color: '#9d9d9d', + color: palette.text.SUBTEXT1, hoverColor: '#d4d4d4' } }, @@ -529,15 +542,15 @@ const darkTheme = { border: '#d9a342' }, text: '#d4d4d4', - secondaryText: '#9d9d9d', - icon: '#9d9d9d', + secondaryText: palette.text.SUBTEXT1, + icon: palette.text.SUBTEXT1, invalid: { opacity: 0.6, text: '#f06f57' } }, empty: { - text: '#9d9d9d' + text: palette.text.SUBTEXT1 }, button: { bg: '#185387', @@ -554,12 +567,6 @@ const darkTheme = { text: '#B8B8B8' }, - preferences: { - sidebar: { - border: '#444444' - } - }, - examples: { buttonBg: '#d9a3421A', buttonColor: '#d9a342', @@ -585,31 +592,31 @@ const darkTheme = { collection: { toolbar: { environmentSelector: { - bg: colors.BG, + bg: palette.background.BASE, border: colors.GRAY_3, - icon: colors.BRAND, - text: colors.TEXT, - caret: colors.TEXT_MUTED, + icon: palette.accents.PRIMARY, + text: palette.text.BASE, + caret: palette.text.SUBTEXT1, separator: colors.GRAY_3, - hoverBg: colors.BG, + hoverBg: palette.background.BASE, hoverBorder: colors.GRAY_4, noEnvironment: { - text: colors.TEXT_MUTED, - bg: colors.BG, + text: palette.text.SUBTEXT1, + bg: palette.background.BASE, border: colors.GRAY_3, - hoverBg: colors.BG, + hoverBg: palette.background.BASE, hoverBorder: colors.GRAY_4 } }, sandboxMode: { safeMode: { bg: 'rgba(78, 201, 176, 0.12)', - color: colors.GREEN + color: palette.accents.GREEN }, developerMode: { bg: 'rgba(217, 163, 66, 0.11)', - color: colors.YELLOW + color: palette.accents.YELLOW } } } diff --git a/packages/bruno-app/src/themes/dark/nord.js b/packages/bruno-app/src/themes/dark/nord.js index e1360371a..4ddb4439d 100644 --- a/packages/bruno-app/src/themes/dark/nord.js +++ b/packages/bruno-app/src/themes/dark/nord.js @@ -147,10 +147,6 @@ const nordTheme = { border: colors.NORD2, activeBorder: colors.NORD3 }, - search: { - border: '1px solid transparent', - bg: colors.NORD1 - }, collection: { item: { bg: colors.NORD1, @@ -175,7 +171,8 @@ const nordTheme = { iconColor: colors.NORD4, bg: colors.NORD1, hoverBg: colors.NORD2, - shadow: 'rgba(0, 0, 0, 0.3) 0px 2px 8px', + shadow: 'none', + border: colors.NORD3, separator: colors.NORD3, selectedColor: colors.NORD8, mutedText: colors.TEXT_MUTED @@ -570,12 +567,6 @@ const nordTheme = { text: colors.NORD4 }, - preferences: { - sidebar: { - border: colors.NORD3 - } - }, - examples: { buttonBg: 'rgba(136, 192, 208, 0.1)', buttonColor: colors.BRAND, diff --git a/packages/bruno-app/src/themes/dark/vscode.js b/packages/bruno-app/src/themes/dark/vscode.js index a332a358c..0ebec4064 100644 --- a/packages/bruno-app/src/themes/dark/vscode.js +++ b/packages/bruno-app/src/themes/dark/vscode.js @@ -149,10 +149,6 @@ const vscodeDarkTheme = { border: colors.BORDER_LIGHT, activeBorder: colors.GRAY_5 }, - search: { - border: '1px solid transparent', - bg: colors.GRAY_2 - }, collection: { item: { bg: colors.GRAY_2, @@ -177,7 +173,8 @@ const vscodeDarkTheme = { iconColor: colors.TEXT, bg: colors.SIDEBAR_BG, hoverBg: colors.GRAY_3, - shadow: 'rgba(0, 0, 0, 0.36) 0px 2px 8px', + shadow: 'none', + border: colors.BORDER, separator: colors.BORDER, selectedColor: colors.TEXT_LINK, mutedText: colors.TEXT_MUTED @@ -572,12 +569,6 @@ const vscodeDarkTheme = { text: colors.TEXT }, - preferences: { - sidebar: { - border: colors.BORDER - } - }, - examples: { buttonBg: 'rgba(0, 122, 204, 0.15)', buttonColor: colors.TEXT_LINK, diff --git a/packages/bruno-app/src/themes/light/catppuccin-latte.js b/packages/bruno-app/src/themes/light/catppuccin-latte.js index 20902f58c..dbad2e4fc 100644 --- a/packages/bruno-app/src/themes/light/catppuccin-latte.js +++ b/packages/bruno-app/src/themes/light/catppuccin-latte.js @@ -141,11 +141,6 @@ const catppuccinLatteTheme = { activeBorder: colors.SURFACE2 }, - search: { - border: `1px solid ${colors.SURFACE1}`, - bg: colors.BASE - }, - collection: { item: { bg: colors.SURFACE0, @@ -172,6 +167,7 @@ const catppuccinLatteTheme = { bg: colors.BASE, hoverBg: colors.SURFACE0, shadow: 'rgba(76, 79, 105, 0.25) 0px 6px 12px -2px, rgba(76, 79, 105, 0.3) 0px 3px 7px -3px', + border: 'none', separator: colors.SURFACE1, selectedColor: colors.MAUVE, mutedText: colors.SUBTEXT0 @@ -564,12 +560,6 @@ const catppuccinLatteTheme = { text: colors.TEXT }, - preferences: { - sidebar: { - border: colors.SURFACE1 - } - }, - examples: { buttonBg: 'rgba(136, 57, 239, 0.1)', buttonColor: colors.MAUVE, diff --git a/packages/bruno-app/src/themes/light/light-monochrome.js b/packages/bruno-app/src/themes/light/light-monochrome.js index 9dd9bb165..6fe73f530 100644 --- a/packages/bruno-app/src/themes/light/light-monochrome.js +++ b/packages/bruno-app/src/themes/light/light-monochrome.js @@ -129,11 +129,6 @@ const lightMonochromeTheme = { activeBorder: colors.GRAY_5 }, - search: { - border: '1px solid rgb(211 211 211)', - bg: '#fff' - }, - collection: { item: { bg: colors.GRAY_3, @@ -160,6 +155,7 @@ const lightMonochromeTheme = { bg: '#fff', hoverBg: '#e9ecef', shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px', + border: 'none', separator: '#e7e7e7', selectedColor: '#525252', mutedText: '#9B9B9B' @@ -551,12 +547,6 @@ const lightMonochromeTheme = { text: '#343434' }, - preferences: { - sidebar: { - border: '#EFEFEF' - } - }, - examples: { buttonBg: '#5252521A', buttonColor: '#525252', diff --git a/packages/bruno-app/src/themes/light/light-pastel.js b/packages/bruno-app/src/themes/light/light-pastel.js index f8568912a..6740b23f5 100644 --- a/packages/bruno-app/src/themes/light/light-pastel.js +++ b/packages/bruno-app/src/themes/light/light-pastel.js @@ -146,10 +146,6 @@ const lightPastelTheme = { border: colors.GRAY_4, activeBorder: colors.BRAND }, - search: { - border: `1px solid ${colors.GRAY_4}`, - bg: colors.WHITE - }, collection: { item: { bg: colors.GRAY_2, @@ -175,6 +171,7 @@ const lightPastelTheme = { bg: colors.GRAY_1, hoverBg: colors.GRAY_2, shadow: 'rgba(0, 0, 0, 0.15) 0px 6px 16px -2px, rgba(0, 0, 0, 0.1) 0px 3px 8px -3px', + border: 'none', separator: colors.GRAY_3, selectedColor: colors.BRAND, mutedText: colors.GRAY_6 @@ -569,12 +566,6 @@ const lightPastelTheme = { text: colors.TEXT }, - preferences: { - sidebar: { - border: colors.GRAY_3 - } - }, - examples: { buttonBg: `${colors.BRAND}15`, buttonColor: colors.BRAND, diff --git a/packages/bruno-app/src/themes/light/light.js b/packages/bruno-app/src/themes/light/light.js index f57c289d7..d23a9b8a3 100644 --- a/packages/bruno-app/src/themes/light/light.js +++ b/packages/bruno-app/src/themes/light/light.js @@ -1,4 +1,4 @@ -const palette = { +export const palette = { accents: { PRIMARY: '#bd7a28', RED: 'hsl(8 60% 52%)', // warm coral - NEW @@ -157,15 +157,10 @@ const lightTheme = { activeBorder: palette.background.SURFACE2 }, - search: { - border: `1px solid ${palette.border.BORDER2}`, - bg: palette.utility.WHITE - }, - collection: { item: { - bg: palette.background.SURFACE0, - hoverBg: palette.background.SURFACE0, + bg: palette.background.SURFACE1, + hoverBg: palette.background.SURFACE1, focusBorder: palette.border.BORDER2, indentBorder: `solid 1px ${palette.border.BORDER1}`, active: { @@ -187,7 +182,8 @@ const lightTheme = { iconColor: palette.text.SUBTEXT2, bg: palette.utility.WHITE, hoverBg: palette.background.CRUST, - shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px', + shadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05)', + border: 'none', separator: palette.border.BORDER1, selectedColor: palette.accents.PRIMARY, mutedText: palette.text.SUBTEXT0 @@ -579,12 +575,6 @@ const lightTheme = { text: palette.text.BASE }, - preferences: { - sidebar: { - border: palette.border.BORDER0 - } - }, - examples: { buttonBg: '#D977061A', buttonColor: '#D97706', diff --git a/packages/bruno-app/src/themes/light/vscode.js b/packages/bruno-app/src/themes/light/vscode.js index bb2b85e4b..13f405672 100644 --- a/packages/bruno-app/src/themes/light/vscode.js +++ b/packages/bruno-app/src/themes/light/vscode.js @@ -150,10 +150,6 @@ const vscodeLightTheme = { border: colors.BORDER, activeBorder: colors.GRAY_5 }, - search: { - border: `1px solid ${colors.BORDER_DARK}`, - bg: colors.WHITE - }, collection: { item: { bg: colors.GRAY_2, @@ -179,6 +175,7 @@ const vscodeLightTheme = { bg: colors.WHITE, hoverBg: colors.GRAY_2, shadow: 'rgba(0, 0, 0, 0.16) 0px 6px 12px -2px, rgba(0, 0, 0, 0.1) 0px 3px 7px -3px', + border: 'none', separator: colors.BORDER, selectedColor: colors.BRAND, mutedText: colors.TEXT_MUTED @@ -573,12 +570,6 @@ const vscodeLightTheme = { text: colors.TEXT }, - preferences: { - sidebar: { - border: colors.BORDER - } - }, - examples: { buttonBg: 'rgba(0, 122, 204, 0.1)', buttonColor: colors.BRAND, diff --git a/packages/bruno-app/src/themes/schema/oss.js b/packages/bruno-app/src/themes/schema/oss.js index a1815e21c..cea0bb418 100644 --- a/packages/bruno-app/src/themes/schema/oss.js +++ b/packages/bruno-app/src/themes/schema/oss.js @@ -165,15 +165,6 @@ export const ossSchema = { required: ['border', 'activeBorder'], additionalProperties: false }, - search: { - type: 'object', - properties: { - border: { type: 'string' }, - bg: { type: 'string' } - }, - required: ['border', 'bg'], - additionalProperties: false - }, collection: { type: 'object', properties: { @@ -217,7 +208,7 @@ export const ossSchema = { additionalProperties: false } }, - required: ['color', 'muted', 'bg', 'dragbar', 'search', 'collection', 'dropdownIcon'], + required: ['color', 'muted', 'bg', 'dragbar', 'collection', 'dropdownIcon'], additionalProperties: false }, @@ -228,12 +219,13 @@ export const ossSchema = { iconColor: { type: 'string' }, bg: { type: 'string' }, hoverBg: { type: 'string' }, - shadow: { type: 'string' }, + shadow: { type: 'string', description: 'Box shadow. Use "none" for no shadow.' }, separator: { type: 'string' }, selectedColor: { type: 'string' }, - mutedText: { type: 'string' } + mutedText: { type: 'string' }, + border: { type: 'string', description: 'Border color. Use "none" for no border.' } }, - required: ['color', 'iconColor', 'bg', 'hoverBg', 'shadow', 'separator', 'selectedColor', 'mutedText'], + required: ['color', 'iconColor', 'bg', 'hoverBg', 'shadow', 'separator', 'selectedColor', 'mutedText', 'border'], additionalProperties: false }, @@ -1026,22 +1018,6 @@ export const ossSchema = { additionalProperties: false }, - preferences: { - type: 'object', - properties: { - sidebar: { - type: 'object', - properties: { - border: { type: 'string' } - }, - required: ['border'], - additionalProperties: false - } - }, - required: ['sidebar'], - additionalProperties: false - }, - examples: { type: 'object', properties: { @@ -1167,7 +1143,7 @@ export const ossSchema = { 'sidebar', 'dropdown', 'workspace', 'request', 'requestTabPanel', 'notifications', 'modal', 'button', 'button2', 'tabs', 'requestTabs', 'codemirror', 'table', 'plainGrid', 'scrollbar', 'dragAndDrop', - 'infoTip', 'statusBar', 'console', 'grpc', 'deprecationWarning', 'preferences', 'examples', 'app' + 'infoTip', 'statusBar', 'console', 'grpc', 'deprecationWarning', 'examples', 'app' ], additionalProperties: false };