diff --git a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js index 7f463b51e..c587661a7 100644 --- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js +++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js @@ -128,6 +128,12 @@ const StyledWrapper = styled.div` span.cm-operator { color: ${(props) => props.theme.codemirror.tokens.operator} !important; } + span.cm-tag { + color: ${(props) => props.theme.codemirror.tokens.tag} !important; + } + span.cm-tag.cm-bracket { + color: ${(props) => props.theme.codemirror.tokens.tagBracket} !important; + } } /* Variable validation colors */ diff --git a/packages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.js new file mode 100644 index 000000000..053e32475 --- /dev/null +++ b/packages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.js @@ -0,0 +1,44 @@ +import styled from 'styled-components'; +import { rgba } from 'polished'; + +const StyledWrapper = styled.div` + .icon-box { + &.location { + background-color: ${(props) => rgba(props.theme.textLink, 0.08)}; + border: 1px solid ${(props) => rgba(props.theme.textLink, 0.09)}; + + svg { + color: ${(props) => props.theme.textLink}; + } + } + + &.environments { + background-color: ${(props) => rgba(props.theme.colors.text.green, 0.08)}; + border: 1px solid ${(props) => rgba(props.theme.colors.text.green, 0.09)}; + + svg { + color: ${(props) => props.theme.colors.text.green}; + } + } + + &.requests { + background-color: ${(props) => rgba(props.theme.colors.text.purple, 0.08)}; + border: 1px solid ${(props) => rgba(props.theme.colors.text.purple, 0.09)}; + + svg { + color: ${(props) => props.theme.colors.text.purple}; + } + } + + &.share { + background-color: ${(props) => rgba(props.theme.textLink, 0.08)}; + border: 1px solid ${(props) => rgba(props.theme.textLink, 0.09)}; + + svg { + color: ${(props) => props.theme.textLink}; + } + } + } +`; + +export default StyledWrapper; diff --git a/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js b/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js index b90fe1f35..90c6ff0d8 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js @@ -6,6 +6,7 @@ import { useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import ShareCollection from 'components/ShareCollection/index'; import { addTab } from 'providers/ReduxStore/slices/tabs'; +import StyledWrapper from './StyledWrapper'; const Info = ({ collection }) => { const dispatch = useDispatch(); @@ -25,17 +26,17 @@ const Info = ({ collection }) => { }; return ( -
+
{/* Location Row */}
-
- +
+
Location
-
+
{collection.pathname}
@@ -43,15 +44,15 @@ const Info = ({ collection }) => { {/* Environments Row */}
-
- +
+
-
Environments
+
Environments
+
+
Active +
+
Inactive +
+
+
+ + {/* Text example */} +
+
text
+ + View documentation → + + + Click here to learn more + +
+ + {/* Strong example */} +
+
strong
+
+
Active Tab +
+
Other Tab +
+
+
+
+
+
+ + {/* Subtle example */} +
+
subtle
+ +
+
+ +
+ ); +}; + +export const BackgroundLayersRender = () => { + const theme = useTheme(); + const isDark = theme.mode === 'dark'; + const palette = isDark ? darkPalette : lightPalette; + + const layers = [ + { + name: 'base', + token: 'background.base', + color: theme.background.base, + purpose: 'Main content area', + desc: 'Where primary content and interactions live' + }, + { + name: 'mantle', + token: 'background.mantle', + color: theme.background.mantle, + purpose: 'Sidebars, panels', + desc: 'Secondary areas that frame the content' + }, + { + name: 'crust', + token: 'background.crust', + color: theme.background.crust, + purpose: 'Status bars, app shell', + desc: 'The deepest layer forming the foundation' + } + ]; + + return ( +
+ {/* Hero */} +
+

+ Background Layers +

+

+ A layered background system inspired by geological strata. Each layer serves a distinct purpose in creating visual hierarchy. +

+
+ + {/* App Skeleton */} +
+
+ {/* App frame */} +
+ {/* Title bar */} +
+
+
+
+
+
+
Bruno
+
+ + {/* Main area */} +
+ {/* Sidebar - Mantle */} +
+
mantle +
+ {['Stripe API', 'GitHub REST', 'Internal Auth', 'Analytics', 'Payments'].map((item, i) => ( +
{item} +
+ ))} +
+ + {/* Content - Base */} +
+
base +
+ + {/* URL bar */} +
+ GET + + https://api.example.com/users + +
+ + {/* Two-pane content */} +
+ {/* Payload pane */} +
+
Payload +
+
+ {'{\n "name": "...",\n "email": "..."\n}'} +
+
+ {/* Response pane */} +
+
Response +
+
+ {'{\n "status": 200,\n "data": [...]\n}'} +
+
+
+
+
+ + {/* Status bar - Crust */} +
+
crust +
+
Ready
+
+
+
+
+ + {/* Layer Definitions */} +
+
+ {layers.map(({ name, token, color, purpose, desc }) => ( +
+
+
+
+ {purpose} + + {token} + +
+
+ {desc} +
+
+ + {color} + +
+ ))} +
+
+ + {/* Surface Variants */} +
+
+ {[ + { name: 'surface0', token: 'background.surface0', color: theme.background.surface0, purpose: 'Cards & Inputs', desc: 'Slightly elevated from base, used for cards, input fields, and contained elements.' }, + { name: 'surface1', token: 'background.surface1', color: theme.background.surface1, purpose: 'Hover States', desc: 'One step brighter, indicates hover or light interaction feedback.' }, + { name: 'surface2', token: 'background.surface2', color: theme.background.surface2, purpose: 'Active States', desc: 'Highest elevation surface, used for active selections and pressed states.' } + ].map(({ name, token, color, purpose, desc }) => ( +
+
+
+
+ {purpose} + + {token} + +
+
+ {desc} +
+
+ + {color} + +
+ ))} +
+
+
+ ); +}; + +export const TextColorsRender = () => { + const theme = useTheme(); + + const hierarchyLevels = [ + { name: 'Base', color: theme.text, desc: 'Primary content, headings, and emphasized information' }, + { name: 'Subtext2', color: theme.colors.text.subtext2, desc: 'Strong secondary text, labels, and descriptions' }, + { name: 'Subtext1', color: theme.colors.text.subtext1, desc: 'Supporting content and supplementary details' }, + { name: 'Subtext0', color: theme.colors.text.subtext0, desc: 'Timestamps, hints, placeholders, and disabled states' } + ]; + + const semanticColors = [ + { name: 'Success', color: theme.colors.text.green, desc: 'Positive states and confirmations', example: 'GET method, success messages' }, + { name: 'Danger', color: theme.colors.text.danger, desc: 'Errors and destructive actions', example: 'DELETE method, error messages' }, + { name: 'Warning', color: theme.colors.text.warning, desc: 'Caution states and notices', example: 'PUT/PATCH methods, deprecation notices' }, + { name: 'Accent', color: theme.colors.text.purple, desc: 'Special content markers', example: 'GraphQL indicators, unique tags' }, + { name: 'Link', color: theme.textLink, desc: 'Interactive text and navigation', example: 'Hyperlinks, clickable references' } + ]; + + return ( +
+ {/* Hero */} +
+

+ Text Colors +

+

+ Text colors create visual hierarchy and convey meaning. Use progressively muted colors for less important information. +

+
+ + {/* Text Hierarchy Demo */} +
+ {/* Demo: Collection item style */} +
+ {/* Request item 1 */} +
+ GET +
+
Get Users
+
/api/v1/users
+
+
+ {/* Request item 2 */} +
+ POST +
+
Create User
+
/api/v1/users
+
+
+
+ + {/* Hierarchy Definitions */} +
+ {hierarchyLevels.map(({ name, color, desc }) => ( +
+
+
+
{name}
+
{desc}
+
+ + {color} + +
+ ))} +
+
+ + {/* Semantic Colors */} +
+
+ {semanticColors.map(({ name, color, desc, example }) => ( +
+
+
+
+ {name} + {example} +
+
{desc}
+
+ + {color} + +
+ ))} +
+
+
+ ); +}; + +export const BordersAndOverlaysRender = () => { + const theme = useTheme(); + + const overlays = [ + { name: 'Overlay0', color: theme.overlay.overlay0, purpose: 'Subtle', desc: 'Light dimming, gentle hover states' }, + { name: 'Overlay1', color: theme.overlay.overlay1, purpose: 'Medium', desc: 'Standard overlays, dropdown backdrops' }, + { name: 'Overlay2', color: theme.overlay.overlay2, purpose: 'Strong', desc: 'Modal backdrops, disabled content' } + ]; + + const radii = [ + { name: 'sm', value: theme.border.radius.sm }, + { name: 'base', value: theme.border.radius.base }, + { name: 'md', value: theme.border.radius.md }, + { name: 'lg', value: theme.border.radius.lg }, + { name: 'xl', value: theme.border.radius.xl } + ]; + + return ( +
+ {/* Hero */} +
+

+ Borders & Overlays +

+

+ Borders define boundaries and create structure. Overlays add depth for focus states and modal backdrops. +

+
+ +
+
+
+
border0 (Subtle)
+
Gentle separations, card outlines
+
+ +
+
border1 (Default)
+
Standard dividers, input borders
+
+ +
+
border2 (Prominent)
+
Focus states, selected items
+
+
+
+ +
+
+ {overlays.map(({ name, color, purpose, desc }) => ( +
+
+
+
{purpose}
+
{desc}
+
+ + {color} + +
+ ))} +
+
+ +
+
+ {[ + { name: 'border0', color: theme.border.border0, desc: 'Subtle separations, card outlines' }, + { name: 'border1', color: theme.border.border1, desc: 'Standard dividers, input borders' }, + { name: 'border2', color: theme.border.border2, desc: 'Focus states, selected items' } + ].map(({ name, color, desc }) => ( +
+
+
+
{name}
+
{desc}
+
+ + {color} + +
+ ))} +
+
+ +
+
+ {radii.map(({ name, value }) => ( +
+
+
+ {name} +
+ {value} +
+ ))} +
+
+
+ ); +}; diff --git a/packages/bruno-app/src/themes/DesignSystem/Theme.stories.jsx b/packages/bruno-app/src/themes/DesignSystem/Theme.stories.jsx new file mode 100644 index 000000000..1b82f8e5e --- /dev/null +++ b/packages/bruno-app/src/themes/DesignSystem/Theme.stories.jsx @@ -0,0 +1,553 @@ +import React from 'react'; +import { useTheme } from 'styled-components'; +import { palette as darkPalette } from '../dark/dark'; +import { palette as lightPalette } from '../light/light'; +import { ColorSection } from '../PaletteViewer/components'; + +export default { + title: 'Design System/Theme', + parameters: { + layout: 'padded' + } +}; + +export const Palette = { + render: () => { + const theme = useTheme(); + const isDark = theme.mode === 'dark'; + const palette = isDark ? darkPalette : lightPalette; + + return ( +
+
+

+ Palette +

+

+ The foundational color tokens that make up the {isDark ? 'dark' : 'light'} theme. All semantic colors are derived from these base values. +

+
+ + + + + + + + + +
+ ); + } +}; + +export const IntentAndSyntax = { + render: () => { + const theme = useTheme(); + const isDark = theme.mode === 'dark'; + const palette = isDark ? darkPalette : lightPalette; + + return ( +
+
+

+ Intent & Syntax +

+

+ Semantic color mappings derived from the base palette. Intent colors convey meaning, while syntax colors provide code highlighting. +

+
+ + + +
+ ); + } +}; + +export const HueWheel = { + render: () => { + const theme = useTheme(); + const isDark = theme.mode === 'dark'; + const palette = isDark ? darkPalette : lightPalette; + + const hues = Object.entries(palette.hues); + // Sort by hue for visualization + const sorted = [...hues].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 Wheel +

+

+ Distribution of the 14 hue colors across the color wheel (0° to 360°). Provides full spectrum coverage for diverse UI needs. +

+
+ + {/* Visual wheel representation */} +
+
`${color} ${(i / sorted.length) * 100}% ${((i + 1) / sorted.length) * 100}%`).join(', ')})`, + display: 'flex', + alignItems: 'center', + justifyContent: 'center' + }} + > +
+
14
+
hues
+
+
+
+ + {/* Hue distribution bars */} +
+ {sorted.map(([name, color]) => { + const hueMatch = color.match(/hsl\((\d+)/); + const hue = hueMatch ? parseInt(hueMatch[1]) : 0; + return ( +
+
{name}
+
{hue}°
+
+
+
+ + {color} + +
+ ); + })} +
+
+ ); + } +}; + +// Helper to parse HSL values +const parseHSL = (hslString) => { + const match = hslString.match(/hsl\(\s*(\d+)\s*,?\s*(\d+)%?\s*,?\s*(\d+)%?\s*\)/); + if (match) { + return { + h: parseInt(match[1]), + s: parseInt(match[2]), + l: parseInt(match[3]) + }; + } + return null; +}; + +// Calculate statistics +const calcStats = (values) => { + const n = values.length; + const mean = values.reduce((a, b) => a + b, 0) / n; + const variance = values.reduce((sum, v) => sum + Math.pow(v - mean, 2), 0) / n; + const stdDev = Math.sqrt(variance); + const min = Math.min(...values); + const max = Math.max(...values); + const range = max - min; + return { mean, stdDev, min, max, range }; +}; + +export const HueAnalysis = { + render: () => { + const theme = useTheme(); + const isDark = theme.mode === 'dark'; + const palette = isDark ? darkPalette : lightPalette; + + const hues = Object.entries(palette.hues).map(([name, color]) => ({ + name, + color, + ...parseHSL(color) + })).filter((h) => h.h !== null); + + const saturations = hues.map((h) => h.s); + const lightnesses = hues.map((h) => h.l); + + const satStats = calcStats(saturations); + const lightStats = calcStats(lightnesses); + + const StatCard = ({ title, stats, unit = '%', values, hueData }) => ( +
+

{title}

+ + {/* Stats grid */} +
+ {[ + { label: 'Mean', value: stats.mean.toFixed(1) }, + { label: 'Std Dev', value: stats.stdDev.toFixed(1) }, + { label: 'Min', value: stats.min }, + { label: 'Max', value: stats.max }, + { label: 'Range', value: stats.range } + ].map(({ label, value }) => ( +
+
{value}{unit}
+
{label}
+
+ ))} +
+ + {/* Distribution visualization */} +
+
Distribution
+
+ {/* Mean line */} +
+ {/* Std dev range */} +
+ {/* Individual values */} + {hueData.map((h, i) => ( +
+ ))} +
+ {/* Scale */} +
+ 0% + 50% + 100% +
+
+
+ ); + + return ( +
+
+

+ Hue Analysis +

+

+ Statistical analysis of saturation and lightness consistency across the 14 hue colors. Lower standard deviation indicates more uniform values. +

+
+ + + + + + {/* Saturation Breakdown */} +
+

+ Saturation by Hue +

+
+ {hues.map((h) => { + const diff = h.s - satStats.mean; + const isOutlier = Math.abs(diff) > satStats.stdDev; + return ( +
+
{h.name}
+
+
+ {/* Background track */} +
+ {/* Mean line */} +
+ {/* Value bar */} +
+
+
+ {h.s}% + + {diff > 0 ? '+' : ''}{diff.toFixed(0)} + +
+
+ ); + })} +
+
+ Mean line shown at {satStats.mean.toFixed(0)}% · Outliers ({'>'} 1σ) highlighted +
+
+ + {/* Lightness Breakdown */} +
+

+ Lightness by Hue +

+
+ {hues.map((h) => { + const diff = h.l - lightStats.mean; + const isOutlier = Math.abs(diff) > lightStats.stdDev; + return ( +
+
{h.name}
+
+
+ {/* Background track */} +
+ {/* Mean line */} +
+ {/* Value bar */} +
+
+
+ {h.l}% + + {diff > 0 ? '+' : ''}{diff.toFixed(0)} + +
+
+ ); + })} +
+
+ Mean line shown at {lightStats.mean.toFixed(0)}% · Outliers ({'>'} 1σ) highlighted +
+
+
+ ); + } +}; diff --git a/packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx b/packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx deleted file mode 100644 index cba5c1ffc..000000000 --- a/packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx +++ /dev/null @@ -1,123 +0,0 @@ -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 deleted file mode 100644 index 895f47b48..000000000 --- a/packages/bruno-app/src/themes/PaletteViewer/Light.stories.jsx +++ /dev/null @@ -1,124 +0,0 @@ -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/dark/catppuccin-frappe.js b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js index a2aeb1fef..e6fce18b4 100644 --- a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js +++ b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js @@ -1,6 +1,8 @@ // Catppuccin Frappé - Dark Theme // Based on https://catppuccin.com/palette/ +const { rgba } = require('polished'); + const colors = { // Catppuccin Frappé Palette ROSEWATER: '#f2d5cf', @@ -43,7 +45,9 @@ const colors = { VARIABLE: '#85c1dc', KEYWORD: '#e78284', COMMENT: '#737994', - OPERATOR: '#81c8be' + OPERATOR: '#81c8be', + TAG: '#8caaee', + TAG_BRACKET: '#737994' } }; @@ -167,7 +171,7 @@ const catppuccinFrappeTheme = { bg: colors.SURFACE0, hoverBg: 'rgba(115, 121, 148, 0.16)', shadow: 'none', - border: colors.SURFACE1, + border: rgba(colors.SURFACE1, 0.5), separator: colors.SURFACE1, selectedColor: colors.MAUVE, mutedText: colors.SUBTEXT0 @@ -344,12 +348,6 @@ const catppuccinFrappeTheme = { }, example: { iconColor: colors.OVERLAY1 - }, - shortTab: { - color: colors.TEXT, - bg: 'transparent', - hoverColor: colors.TEXT, - hoverBg: colors.SURFACE0 } }, @@ -366,18 +364,7 @@ const catppuccinFrappeTheme = { variable: { valid: colors.GREEN, invalid: colors.RED, - prompt: colors.BLUE, - info: { - color: colors.TEXT, - bg: colors.SURFACE0, - boxShadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', - editorBg: colors.MANTLE, - iconColor: colors.OVERLAY0, - editorBorder: colors.SURFACE0, - editorFocusBorder: colors.LAVENDER, - editableDisplayHoverBg: 'rgba(198, 208, 245, 0.03)', - border: colors.SURFACE2 - } + prompt: colors.BLUE }, tokens: { definition: colors.CODEMIRROR_TOKENS.DEFINITION, @@ -388,7 +375,9 @@ const catppuccinFrappeTheme = { variable: colors.CODEMIRROR_TOKENS.VARIABLE, keyword: colors.CODEMIRROR_TOKENS.KEYWORD, comment: colors.CODEMIRROR_TOKENS.COMMENT, - operator: colors.CODEMIRROR_TOKENS.OPERATOR + operator: colors.CODEMIRROR_TOKENS.OPERATOR, + tag: colors.CODEMIRROR_TOKENS.TAG, + tagBracket: colors.CODEMIRROR_TOKENS.TAG_BRACKET }, searchLineHighlightCurrent: 'rgba(115, 121, 148, 0.18)', searchMatch: colors.YELLOW, diff --git a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js index 7c67738d4..f21879aa2 100644 --- a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js +++ b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js @@ -1,6 +1,8 @@ // Catppuccin Macchiato - Dark Theme // Based on https://catppuccin.com/palette/ +const { rgba } = require('polished'); + const colors = { // Catppuccin Macchiato Palette ROSEWATER: '#f4dbd6', @@ -43,7 +45,9 @@ const colors = { VARIABLE: '#7dc4e4', KEYWORD: '#ed8796', COMMENT: '#6e738d', - OPERATOR: '#8bd5ca' + OPERATOR: '#8bd5ca', + TAG: '#8aadf4', + TAG_BRACKET: '#6e738d' } }; @@ -164,10 +168,10 @@ const catppuccinMacchiatoTheme = { dropdown: { color: colors.TEXT, iconColor: colors.SUBTEXT1, - bg: colors.MANTLE, + bg: colors.SURFACE0, hoverBg: 'rgba(110, 115, 141, 0.16)', shadow: 'none', - border: colors.SURFACE1, + border: rgba(colors.SURFACE1, 0.5), separator: colors.SURFACE1, selectedColor: colors.MAUVE, mutedText: colors.SUBTEXT0 @@ -344,12 +348,6 @@ const catppuccinMacchiatoTheme = { }, example: { iconColor: colors.OVERLAY1 - }, - shortTab: { - color: colors.TEXT, - bg: 'transparent', - hoverColor: colors.TEXT, - hoverBg: colors.SURFACE0 } }, @@ -366,18 +364,7 @@ const catppuccinMacchiatoTheme = { variable: { valid: colors.GREEN, invalid: colors.RED, - prompt: colors.BLUE, - info: { - color: colors.TEXT, - bg: colors.SURFACE0, - boxShadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', - editorBg: colors.MANTLE, - iconColor: colors.OVERLAY0, - editorBorder: colors.SURFACE0, - editorFocusBorder: colors.LAVENDER, - editableDisplayHoverBg: 'rgba(202, 211, 245, 0.03)', - border: colors.SURFACE2 - } + prompt: colors.BLUE }, tokens: { definition: colors.CODEMIRROR_TOKENS.DEFINITION, @@ -388,7 +375,9 @@ const catppuccinMacchiatoTheme = { variable: colors.CODEMIRROR_TOKENS.VARIABLE, keyword: colors.CODEMIRROR_TOKENS.KEYWORD, comment: colors.CODEMIRROR_TOKENS.COMMENT, - operator: colors.CODEMIRROR_TOKENS.OPERATOR + operator: colors.CODEMIRROR_TOKENS.OPERATOR, + tag: colors.CODEMIRROR_TOKENS.TAG, + tagBracket: colors.CODEMIRROR_TOKENS.TAG_BRACKET }, searchLineHighlightCurrent: 'rgba(110, 115, 141, 0.18)', searchMatch: colors.YELLOW, diff --git a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js index 7b1931e11..b26a346ce 100644 --- a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js +++ b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js @@ -1,6 +1,8 @@ // Catppuccin Mocha - Dark Theme (Original) // Based on https://catppuccin.com/palette/ +import { rgba } from 'polished'; + const colors = { // Catppuccin Mocha Palette ROSEWATER: '#f5e0dc', @@ -43,7 +45,9 @@ const colors = { VARIABLE: '#74c7ec', KEYWORD: '#f38ba8', COMMENT: '#6c7086', - OPERATOR: '#94e2d5' + OPERATOR: '#94e2d5', + TAG: '#89b4fa', + TAG_BRACKET: '#6c7086' } }; @@ -164,10 +168,10 @@ const catppuccinMochaTheme = { dropdown: { color: colors.TEXT, iconColor: colors.SUBTEXT1, - bg: colors.MANTLE, + bg: colors.SURFACE0, hoverBg: 'rgba(108, 112, 134, 0.16)', shadow: 'none', - border: colors.SURFACE1, + border: rgba(colors.SURFACE1, 0.5), separator: colors.SURFACE1, selectedColor: colors.MAUVE, mutedText: colors.SUBTEXT0 @@ -344,12 +348,6 @@ const catppuccinMochaTheme = { }, example: { iconColor: colors.OVERLAY1 - }, - shortTab: { - color: colors.TEXT, - bg: 'transparent', - hoverColor: colors.TEXT, - hoverBg: colors.SURFACE0 } }, @@ -366,18 +364,7 @@ const catppuccinMochaTheme = { variable: { valid: colors.GREEN, invalid: colors.RED, - prompt: colors.BLUE, - info: { - color: colors.TEXT, - bg: colors.SURFACE0, - boxShadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', - editorBg: colors.MANTLE, - iconColor: colors.OVERLAY0, - editorBorder: colors.SURFACE0, - editorFocusBorder: colors.LAVENDER, - editableDisplayHoverBg: 'rgba(205, 214, 244, 0.03)', - border: colors.SURFACE2 - } + prompt: colors.BLUE }, tokens: { definition: colors.CODEMIRROR_TOKENS.DEFINITION, @@ -388,7 +375,9 @@ const catppuccinMochaTheme = { variable: colors.CODEMIRROR_TOKENS.VARIABLE, keyword: colors.CODEMIRROR_TOKENS.KEYWORD, comment: colors.CODEMIRROR_TOKENS.COMMENT, - operator: colors.CODEMIRROR_TOKENS.OPERATOR + operator: colors.CODEMIRROR_TOKENS.OPERATOR, + tag: colors.CODEMIRROR_TOKENS.TAG, + tagBracket: colors.CODEMIRROR_TOKENS.TAG_BRACKET }, searchLineHighlightCurrent: 'rgba(108, 112, 134, 0.18)', searchMatch: colors.YELLOW, diff --git a/packages/bruno-app/src/themes/dark/dark-monochrome.js b/packages/bruno-app/src/themes/dark/dark-monochrome.js index da5c54b2d..02f8f316b 100644 --- a/packages/bruno-app/src/themes/dark/dark-monochrome.js +++ b/packages/bruno-app/src/themes/dark/dark-monochrome.js @@ -30,7 +30,9 @@ const colors = { VARIABLE: '#b0b0b0', KEYWORD: '#d4d4d4', COMMENT: '#6a6a6a', - OPERATOR: '#d4d4d4' + OPERATOR: '#d4d4d4', + TAG: '#d4d4d4', + TAG_BRACKET: '#6a6a6a' } }; @@ -331,12 +333,6 @@ const darkMonochromeTheme = { }, example: { iconColor: colors.GRAY_5 - }, - shortTab: { - color: '#ccc', - bg: 'transparent', - hoverColor: '#ccc', - hoverBg: colors.GRAY_3 } }, @@ -353,18 +349,7 @@ const darkMonochromeTheme = { variable: { valid: '#a3a3a3', invalid: '#b0b0b0', - prompt: '#a3a3a3', - info: { - color: '#FFFFFF', - bg: '#343434', - boxShadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', - editorBg: '#292929', - iconColor: '#989898', - editorBorder: colors.GRAY_3, - editorFocusBorder: '#CCCCCC', - editableDisplayHoverBg: 'rgba(255,255,255,0.03)', - border: '#4F4F4F' - } + prompt: '#a3a3a3' }, tokens: { definition: colors.CODEMIRROR_TOKENS.DEFINITION, @@ -375,7 +360,9 @@ const darkMonochromeTheme = { variable: colors.CODEMIRROR_TOKENS.VARIABLE, keyword: colors.CODEMIRROR_TOKENS.KEYWORD, comment: colors.CODEMIRROR_TOKENS.COMMENT, - operator: colors.CODEMIRROR_TOKENS.OPERATOR + operator: colors.CODEMIRROR_TOKENS.OPERATOR, + tag: colors.CODEMIRROR_TOKENS.TAG, + tagBracket: colors.CODEMIRROR_TOKENS.TAG_BRACKET }, searchLineHighlightCurrent: 'rgba(120,120,120,0.18)', searchMatch: '#a3a3a3', diff --git a/packages/bruno-app/src/themes/dark/dark-pastel.js b/packages/bruno-app/src/themes/dark/dark-pastel.js index 7243f3328..28330cd73 100644 --- a/packages/bruno-app/src/themes/dark/dark-pastel.js +++ b/packages/bruno-app/src/themes/dark/dark-pastel.js @@ -51,7 +51,9 @@ const colors = { VARIABLE: '#a8c5f0', // Periwinkle - variables flow KEYWORD: '#e09fd9', // Orchid - keywords command attention COMMENT: '#7a7294', // Muted violet - comments recede - OPERATOR: '#b8b0cc' // Pale violet - operators connect + OPERATOR: '#b8b0cc', // Pale violet - operators connect + TAG: '#7db8f0', // Sky blue - tags are structural + TAG_BRACKET: '#7a7294' // Muted violet - brackets recede } }; @@ -348,12 +350,6 @@ const darkPastelTheme = { }, example: { iconColor: colors.GRAY_6 - }, - shortTab: { - color: colors.TEXT_MUTED, - bg: 'transparent', - hoverColor: colors.TEXT, - hoverBg: colors.GRAY_3 } }, @@ -370,18 +366,7 @@ const darkPastelTheme = { variable: { valid: colors.GREEN, invalid: colors.RED, - prompt: colors.BLUE, - info: { - color: colors.TEXT, - bg: colors.GRAY_2, - boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', - editorBg: colors.GRAY_3, - iconColor: colors.GRAY_6, - editorBorder: colors.GRAY_4, - editorFocusBorder: colors.BRAND, - editableDisplayHoverBg: colors.GRAY_3, - border: colors.GRAY_4 - } + prompt: colors.BLUE }, tokens: { definition: colors.CODEMIRROR_TOKENS.DEFINITION, @@ -392,7 +377,9 @@ const darkPastelTheme = { variable: colors.CODEMIRROR_TOKENS.VARIABLE, keyword: colors.CODEMIRROR_TOKENS.KEYWORD, comment: colors.CODEMIRROR_TOKENS.COMMENT, - operator: colors.CODEMIRROR_TOKENS.OPERATOR + operator: colors.CODEMIRROR_TOKENS.OPERATOR, + tag: colors.CODEMIRROR_TOKENS.TAG, + tagBracket: colors.CODEMIRROR_TOKENS.TAG_BRACKET }, searchLineHighlightCurrent: `${colors.BRAND}20`, searchMatch: colors.YELLOW, diff --git a/packages/bruno-app/src/themes/dark/dark.js b/packages/bruno-app/src/themes/dark/dark.js index 762f541e6..813db6542 100644 --- a/packages/bruno-app/src/themes/dark/dark.js +++ b/packages/bruno-app/src/themes/dark/dark.js @@ -1,8 +1,13 @@ import { rgba } from 'polished'; export const palette = { - accents: { - PRIMARY: 'hsl(39, 74%, 59%)', + primary: { + SOLID: 'hsl(39, 74%, 59%)', + TEXT: 'hsl(39, 74%, 64%)', + STRONG: 'hsl(39, 74%, 69%)', + SUBTLE: 'hsl(39, 74%, 54%)' + }, + hues: { RED: 'hsl(0, 70%, 71%)', ROSE: 'hsl(350, 65%, 78%)', BROWN: 'hsl(41, 52%, 77%)', @@ -18,12 +23,16 @@ export const palette = { PURPLE: 'hsl(285, 60%, 78%)', PINK: 'hsl(320, 65%, 81%)' }, + system: { + CONTROL_ACCENT: '#D9A342' + }, background: { BASE: 'hsl(0deg 0% 10%)', MANTLE: '#252526', CRUST: '#1e1e1e', SURFACE0: '#26292b', - SURFACE1: 'hsl(204, 4%, 23%)' + SURFACE1: 'hsl(204, 4%, 23%)', + SURFACE2: '#666666' }, text: { BASE: 'hsl(0deg 0% 80%)', @@ -31,22 +40,43 @@ export const palette = { SUBTEXT1: '#aaa', SUBTEXT0: '#999' }, - border: { - BORDER2: '#444444', - BORDER1: '#333333', - BORDER0: '#2a2a2a' - }, overlay: { OVERLAY2: '#666666', OVERLAY1: '#555555', OVERLAY0: '#444444' }, + border: { + BORDER2: '#444444', + BORDER1: '#333333', + BORDER0: '#2a2a2a' + }, utility: { WHITE: '#ffffff', BLACK: '#000000' } }; +palette.intent = { + INFO: palette.hues.BLUE, + SUCCESS: palette.hues.GREEN, + WARNING: palette.hues.ORANGE, + DANGER: palette.hues.RED +}; + +palette.syntax = { + DEFINITION: palette.hues.GREEN, + PROPERTY: palette.hues.BLUE, + STRING: palette.hues.BROWN, + NUMBER: palette.hues.GREEN, + ATOM: palette.hues.YELLOW, + VARIABLE: palette.hues.ROSE, + KEYWORD: palette.hues.ROSE, + COMMENT: palette.text.SUBTEXT1, + OPERATOR: palette.hues.BROWN, + TAG: palette.hues.ROSE, + TAG_BRACKET: palette.text.SUBTEXT1 +}; + const colors = { GRAY_2: '#3D3D3D', GRAY_3: '#444444', @@ -56,13 +86,20 @@ const colors = { const darkTheme = { mode: 'dark', - brand: palette.accents.PRIMARY, + brand: palette.primary.SOLID, text: palette.text.BASE, - textLink: palette.accents.BLUE, + textLink: palette.hues.BLUE, bg: palette.background.BASE, + primary: { + solid: palette.primary.SOLID, + text: palette.primary.TEXT, + strong: palette.primary.STRONG, + subtle: palette.primary.SUBTLE + }, + accents: { - primary: palette.accents.PRIMARY + primary: palette.primary.SOLID }, background: { @@ -113,26 +150,26 @@ const darkTheme = { colors: { text: { white: palette.text.BASE, - green: palette.accents.GREEN, - danger: palette.accents.RED, - warning: palette.accents.ORANGE, + green: palette.intent.SUCCESS, + danger: palette.intent.DANGER, + warning: palette.intent.WARNING, muted: palette.text.SUBTEXT1, - purple: palette.accents.PURPLE, - yellow: palette.accents.YELLOW, + purple: palette.hues.PURPLE, + yellow: palette.hues.YELLOW, subtext2: palette.text.SUBTEXT2, subtext1: palette.text.SUBTEXT1, subtext0: palette.text.SUBTEXT0 }, bg: { - danger: '#d03544' + danger: palette.hues.RED }, - accent: palette.accents.PRIMARY + accent: palette.system.CONTROL_ACCENT }, input: { bg: 'transparent', border: palette.border.BORDER2, - focusBorder: rgba(palette.accents.PRIMARY, 0.8), + focusBorder: rgba(palette.primary.SOLID, 0.8), placeholder: { color: palette.text.SUBTEXT1, opacity: 0.6 @@ -176,7 +213,7 @@ const darkTheme = { shadow: 'none', border: palette.border.BORDER1, separator: palette.border.BORDER1, - selectedColor: palette.accents.PRIMARY, + selectedColor: palette.primary.TEXT, mutedText: palette.text.SUBTEXT1 }, @@ -190,18 +227,18 @@ const darkTheme = { request: { methods: { - 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 + get: palette.hues.GREEN, + post: palette.hues.INDIGO, + put: palette.hues.ORANGE, + delete: palette.hues.RED, + patch: palette.hues.ORANGE, + options: palette.hues.TEAL, + head: palette.hues.CYAN }, - grpc: palette.accents.BROWN, - ws: palette.accents.ORANGE, - gql: palette.accents.PINK + grpc: palette.hues.BROWN, + ws: palette.hues.ORANGE, + gql: palette.hues.PINK }, requestTabPanel: { @@ -216,9 +253,9 @@ const darkTheme = { activeBorder: palette.border.BORDER2 }, responseStatus: '#ccc', - responseOk: palette.accents.GREEN, - responseError: palette.accents.RED, - responsePending: palette.accents.BLUE, + responseOk: palette.hues.GREEN, + responseError: palette.hues.RED, + responsePending: palette.hues.BLUE, responseOverlayBg: 'rgba(30, 30, 30, 0.6)', card: { @@ -260,7 +297,7 @@ const darkTheme = { input: { bg: 'transparent', border: palette.border.BORDER2, - focusBorder: rgba(palette.accents.PRIMARY, 0.8) + focusBorder: rgba(palette.primary.SOLID, 0.8) }, backdrop: { opacity: 0.2 @@ -294,9 +331,9 @@ const darkTheme = { button2: { color: { primary: { - bg: palette.accents.PRIMARY, + bg: palette.primary.SOLID, text: palette.utility.BLACK, - border: palette.accents.PRIMARY + border: palette.primary.SOLID }, secondary: { bg: palette.background.MANTLE, @@ -304,19 +341,19 @@ const darkTheme = { border: palette.border.BORDER1 }, success: { - bg: palette.accents.GREEN, + bg: palette.hues.GREEN, text: palette.utility.WHITE, - border: palette.accents.GREEN + border: palette.hues.GREEN }, warning: { - bg: palette.accents.ORANGE, + bg: palette.hues.ORANGE, text: '#1e1e1e', - border: palette.accents.ORANGE + border: palette.hues.ORANGE }, danger: { - bg: palette.accents.RED, + bg: palette.hues.RED, text: palette.utility.WHITE, - border: palette.accents.RED + border: palette.hues.RED } } }, @@ -326,7 +363,7 @@ const darkTheme = { active: { fontWeight: 400, color: '#CCCCCC', - border: palette.accents.PRIMARY + border: palette.primary.STRONG }, secondary: { active: { @@ -351,12 +388,6 @@ const darkTheme = { }, example: { iconColor: colors.GRAY_5 - }, - shortTab: { - color: palette.text.BASE, - bg: 'transparent', - hoverColor: palette.text.BASE, - hoverBg: colors.GRAY_3 } }, @@ -371,31 +402,22 @@ const darkTheme = { bg: palette.background.BASE }, variable: { - valid: 'rgb(11 178 126)', - invalid: '#f06f57', - prompt: '#3D8DF5', - info: { - color: '#FFFFFF', - bg: '#343434', - boxShadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', - editorBg: '#292929', - iconColor: '#989898', - editorBorder: colors.GRAY_3, - editorFocusBorder: '#CCCCCC', - editableDisplayHoverBg: 'rgba(255,255,255,0.03)', - border: '#4F4F4F' - } + valid: palette.hues.GREEN, + invalid: palette.hues.RED, + prompt: palette.hues.BLUE }, tokens: { - 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 + definition: palette.syntax.DEFINITION, + property: palette.syntax.PROPERTY, + string: palette.syntax.STRING, + number: palette.syntax.NUMBER, + atom: palette.syntax.ATOM, + variable: palette.syntax.VARIABLE, + keyword: palette.syntax.KEYWORD, + comment: palette.syntax.COMMENT, + operator: palette.syntax.OPERATOR, + tag: palette.syntax.TAG, + tagBracket: palette.syntax.TAG_BRACKET }, searchLineHighlightCurrent: 'rgba(120,120,120,0.18)', searchMatch: '#FFD700', @@ -459,7 +481,7 @@ const darkTheme = { optionHoverBg: 'rgba(255, 255, 255, 0.05)', optionLabelColor: '#cccccc', optionCountColor: '#858585', - checkboxColor: palette.accents.PRIMARY, + checkboxColor: palette.primary.SOLID, scrollbarTrack: '#2d2d30', scrollbarThumb: '#5a5a5a', scrollbarThumbHover: '#6a6a6a' @@ -596,7 +618,7 @@ const darkTheme = { environmentSelector: { bg: palette.background.BASE, border: colors.GRAY_3, - icon: palette.accents.PRIMARY, + icon: palette.primary.TEXT, text: palette.text.BASE, caret: palette.text.SUBTEXT1, separator: colors.GRAY_3, @@ -614,11 +636,11 @@ const darkTheme = { sandboxMode: { safeMode: { bg: 'rgba(78, 201, 176, 0.12)', - color: palette.accents.GREEN + color: palette.hues.GREEN }, developerMode: { bg: 'rgba(217, 163, 66, 0.11)', - color: palette.accents.YELLOW + color: palette.hues.YELLOW } } } diff --git a/packages/bruno-app/src/themes/dark/nord.js b/packages/bruno-app/src/themes/dark/nord.js index e23400e71..cf33fb354 100644 --- a/packages/bruno-app/src/themes/dark/nord.js +++ b/packages/bruno-app/src/themes/dark/nord.js @@ -50,7 +50,9 @@ const colors = { VARIABLE: '#d8dee9', KEYWORD: '#81a1c1', COMMENT: '#616e88', - OPERATOR: '#81a1c1' + OPERATOR: '#81a1c1', + TAG: '#81a1c1', + TAG_BRACKET: '#616e88' } }; @@ -347,12 +349,6 @@ const nordTheme = { }, example: { iconColor: colors.TEXT_MUTED - }, - shortTab: { - color: colors.NORD4, - bg: 'transparent', - hoverColor: colors.NORD4, - hoverBg: colors.NORD2 } }, @@ -369,18 +365,7 @@ const nordTheme = { variable: { valid: colors.NORD14, invalid: colors.NORD11, - prompt: colors.NORD8, - info: { - color: colors.NORD6, - bg: colors.NORD2, - boxShadow: 'rgba(0, 0, 0, 0.3) 0px 2px 8px', - editorBg: colors.NORD1, - iconColor: colors.TEXT_MUTED, - editorBorder: colors.NORD3, - editorFocusBorder: colors.NORD4, - editableDisplayHoverBg: 'rgba(255, 255, 255, 0.03)', - border: colors.NORD3 - } + prompt: colors.NORD8 }, tokens: { definition: colors.CODEMIRROR_TOKENS.DEFINITION, @@ -391,7 +376,9 @@ const nordTheme = { variable: colors.CODEMIRROR_TOKENS.VARIABLE, keyword: colors.CODEMIRROR_TOKENS.KEYWORD, comment: colors.CODEMIRROR_TOKENS.COMMENT, - operator: colors.CODEMIRROR_TOKENS.OPERATOR + operator: colors.CODEMIRROR_TOKENS.OPERATOR, + tag: colors.CODEMIRROR_TOKENS.TAG, + tagBracket: colors.CODEMIRROR_TOKENS.TAG_BRACKET }, searchLineHighlightCurrent: 'rgba(136, 192, 208, 0.15)', searchMatch: colors.NORD13, diff --git a/packages/bruno-app/src/themes/dark/vscode.js b/packages/bruno-app/src/themes/dark/vscode.js index c9592f91b..8891dca71 100644 --- a/packages/bruno-app/src/themes/dark/vscode.js +++ b/packages/bruno-app/src/themes/dark/vscode.js @@ -52,7 +52,9 @@ const colors = { VARIABLE: '#9cdcfe', KEYWORD: '#c586c0', COMMENT: '#6a9955', - OPERATOR: '#d4d4d4' + OPERATOR: '#d4d4d4', + TAG: '#569cd6', + TAG_BRACKET: '#808080' } }; @@ -349,12 +351,6 @@ const vscodeDarkTheme = { }, example: { iconColor: colors.GRAY_7 - }, - shortTab: { - color: colors.TEXT, - bg: 'transparent', - hoverColor: colors.TEXT, - hoverBg: colors.GRAY_3 } }, @@ -371,18 +367,7 @@ const vscodeDarkTheme = { variable: { valid: colors.GREEN, invalid: colors.RED, - prompt: colors.BRAND, - info: { - color: colors.WHITE, - bg: colors.GRAY_3, - boxShadow: 'rgba(0, 0, 0, 0.36) 0px 2px 8px', - editorBg: colors.GRAY_2, - iconColor: colors.TEXT_MUTED, - editorBorder: colors.BORDER, - editorFocusBorder: colors.TEXT, - editableDisplayHoverBg: 'rgba(255, 255, 255, 0.03)', - border: colors.BORDER - } + prompt: colors.BRAND }, tokens: { definition: colors.CODEMIRROR_TOKENS.DEFINITION, @@ -393,7 +378,9 @@ const vscodeDarkTheme = { variable: colors.CODEMIRROR_TOKENS.VARIABLE, keyword: colors.CODEMIRROR_TOKENS.KEYWORD, comment: colors.CODEMIRROR_TOKENS.COMMENT, - operator: colors.CODEMIRROR_TOKENS.OPERATOR + operator: colors.CODEMIRROR_TOKENS.OPERATOR, + tag: colors.CODEMIRROR_TOKENS.TAG, + tagBracket: colors.CODEMIRROR_TOKENS.TAG_BRACKET }, searchLineHighlightCurrent: 'rgba(255, 255, 0, 0.1)', searchMatch: '#515c6a', diff --git a/packages/bruno-app/src/themes/light/catppuccin-latte.js b/packages/bruno-app/src/themes/light/catppuccin-latte.js index dbad2e4fc..8c9d4016e 100644 --- a/packages/bruno-app/src/themes/light/catppuccin-latte.js +++ b/packages/bruno-app/src/themes/light/catppuccin-latte.js @@ -43,7 +43,9 @@ const colors = { VARIABLE: '#209fb5', KEYWORD: '#d20f39', COMMENT: '#6c6f85', - OPERATOR: '#179299' + OPERATOR: '#179299', + TAG: '#1e66f5', + TAG_BRACKET: '#6c6f85' } }; @@ -341,12 +343,6 @@ const catppuccinLatteTheme = { }, example: { iconColor: colors.OVERLAY1 - }, - shortTab: { - color: colors.SUBTEXT1, - bg: colors.BASE, - hoverColor: colors.TEXT, - hoverBg: colors.SURFACE0 } }, @@ -363,18 +359,7 @@ const catppuccinLatteTheme = { variable: { valid: colors.GREEN, invalid: colors.RED, - prompt: colors.BLUE, - info: { - color: colors.TEXT, - bg: colors.BASE, - boxShadow: '0 1px 3px rgba(76, 79, 105, 0.45)', - editorBg: colors.MANTLE, - iconColor: colors.OVERLAY0, - editorBorder: colors.SURFACE1, - editorFocusBorder: colors.LAVENDER, - editableDisplayHoverBg: 'rgba(76, 79, 105, 0.02)', - border: colors.SURFACE1 - } + prompt: colors.BLUE }, tokens: { definition: colors.CODEMIRROR_TOKENS.DEFINITION, @@ -385,7 +370,9 @@ const catppuccinLatteTheme = { variable: colors.CODEMIRROR_TOKENS.VARIABLE, keyword: colors.CODEMIRROR_TOKENS.KEYWORD, comment: colors.CODEMIRROR_TOKENS.COMMENT, - operator: colors.CODEMIRROR_TOKENS.OPERATOR + operator: colors.CODEMIRROR_TOKENS.OPERATOR, + tag: colors.CODEMIRROR_TOKENS.TAG, + tagBracket: colors.CODEMIRROR_TOKENS.TAG_BRACKET }, searchLineHighlightCurrent: 'rgba(124, 127, 147, 0.10)', searchMatch: colors.YELLOW, diff --git a/packages/bruno-app/src/themes/light/light-monochrome.js b/packages/bruno-app/src/themes/light/light-monochrome.js index 6fe73f530..a4c063f6e 100644 --- a/packages/bruno-app/src/themes/light/light-monochrome.js +++ b/packages/bruno-app/src/themes/light/light-monochrome.js @@ -31,7 +31,9 @@ const colors = { VARIABLE: '#525252', KEYWORD: '#404040', COMMENT: '#a3a3a3', - OPERATOR: '#737373' + OPERATOR: '#737373', + TAG: '#404040', + TAG_BRACKET: '#a3a3a3' } }; @@ -329,12 +331,6 @@ const lightMonochromeTheme = { }, example: { iconColor: colors.GRAY_7 - }, - shortTab: { - color: 'rgb(117 117 117)', - bg: 'white', - hoverColor: 'rgb(76 76 76)', - hoverBg: '#eaeaea' } }, @@ -351,18 +347,7 @@ const lightMonochromeTheme = { variable: { valid: '#525252', invalid: '#404040', - prompt: '#525252', - info: { - color: '#343434', - bg: '#FFFFFF', - boxShadow: '0 1px 3px rgba(0, 0, 0, 0.45)', - editorBg: '#F7F7F7', - iconColor: '#989898', - editorBorder: '#EFEFEF', - editorFocusBorder: '#989898', - editableDisplayHoverBg: 'rgba(0,0,0,0.02)', - border: '#EFEFEF' - } + prompt: '#525252' }, tokens: { definition: colors.CODEMIRROR_TOKENS.DEFINITION, @@ -373,7 +358,9 @@ const lightMonochromeTheme = { variable: colors.CODEMIRROR_TOKENS.VARIABLE, keyword: colors.CODEMIRROR_TOKENS.KEYWORD, comment: colors.CODEMIRROR_TOKENS.COMMENT, - operator: colors.CODEMIRROR_TOKENS.OPERATOR + operator: colors.CODEMIRROR_TOKENS.OPERATOR, + tag: colors.CODEMIRROR_TOKENS.TAG, + tagBracket: colors.CODEMIRROR_TOKENS.TAG_BRACKET }, searchLineHighlightCurrent: 'rgba(120,120,120,0.10)', searchMatch: '#737373', diff --git a/packages/bruno-app/src/themes/light/light-pastel.js b/packages/bruno-app/src/themes/light/light-pastel.js index 6740b23f5..a74f61fca 100644 --- a/packages/bruno-app/src/themes/light/light-pastel.js +++ b/packages/bruno-app/src/themes/light/light-pastel.js @@ -49,7 +49,9 @@ const colors = { VARIABLE: '#3f7cac', // Steel blue KEYWORD: '#c57a92', // Dusty rose COMMENT: '#9a9488', // Warm muted gray - OPERATOR: '#7c7a73' // Soft graphite + OPERATOR: '#7c7a73', // Soft graphite + TAG: '#3a7cc4', // Muted azure + TAG_BRACKET: '#9a9488' // Warm muted gray } }; @@ -346,12 +348,6 @@ const lightPastelTheme = { }, example: { iconColor: colors.GRAY_7 - }, - shortTab: { - color: colors.TEXT_MUTED, - bg: colors.WHITE, - hoverColor: colors.TEXT, - hoverBg: colors.GRAY_2 } }, @@ -368,18 +364,7 @@ const lightPastelTheme = { variable: { valid: colors.GREEN, invalid: colors.RED, - prompt: colors.BLUE, - info: { - color: colors.TEXT, - bg: colors.WHITE, - boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', - editorBg: colors.GRAY_1, - iconColor: colors.GRAY_6, - editorBorder: colors.GRAY_3, - editorFocusBorder: colors.BRAND, - editableDisplayHoverBg: colors.GRAY_1, - border: colors.GRAY_3 - } + prompt: colors.BLUE }, tokens: { definition: colors.CODEMIRROR_TOKENS.DEFINITION, @@ -390,7 +375,9 @@ const lightPastelTheme = { variable: colors.CODEMIRROR_TOKENS.VARIABLE, keyword: colors.CODEMIRROR_TOKENS.KEYWORD, comment: colors.CODEMIRROR_TOKENS.COMMENT, - operator: colors.CODEMIRROR_TOKENS.OPERATOR + operator: colors.CODEMIRROR_TOKENS.OPERATOR, + tag: colors.CODEMIRROR_TOKENS.TAG, + tagBracket: colors.CODEMIRROR_TOKENS.TAG_BRACKET }, searchLineHighlightCurrent: `${colors.BRAND}12`, searchMatch: '#e5c27a', diff --git a/packages/bruno-app/src/themes/light/light.js b/packages/bruno-app/src/themes/light/light.js index 77b6ca4f8..68556b14e 100644 --- a/packages/bruno-app/src/themes/light/light.js +++ b/packages/bruno-app/src/themes/light/light.js @@ -1,6 +1,11 @@ export const palette = { - accents: { - PRIMARY: '#bd7a28', + primary: { + SOLID: 'hsl(33, 80%, 46%)', + TEXT: 'hsl(33, 67%, 45%)', + STRONG: 'hsl(33, 67%, 50%)', + SUBTLE: 'hsl(33, 69%, 56%)' + }, + hues: { RED: 'hsl(8, 60%, 52%)', ROSE: 'hsl(352, 45%, 50%)', BROWN: 'hsl(28, 55%, 38%)', @@ -49,29 +54,43 @@ export const palette = { } }; -const colors = { - CODEMIRROR_TOKENS: { - DEFINITION: palette.accents.INDIGO, - PROPERTY: palette.accents.BLUE, - STRING: palette.accents.BROWN, - NUMBER: palette.accents.GREEN, - ATOM: palette.accents.PURPLE, - VARIABLE: palette.accents.PINK, - KEYWORD: palette.accents.ROSE, - COMMENT: palette.text.SUBTEXT0, - OPERATOR: palette.accents.BLUE - } +palette.intent = { + INFO: palette.hues.BLUE, + SUCCESS: palette.hues.GREEN, + WARNING: palette.hues.ORANGE, + DANGER: palette.hues.RED +}; + +palette.syntax = { + DEFINITION: palette.hues.INDIGO, + PROPERTY: palette.hues.BLUE, + STRING: palette.hues.BROWN, + NUMBER: palette.hues.GREEN, + ATOM: palette.hues.PURPLE, + VARIABLE: palette.hues.PINK, + KEYWORD: palette.hues.ROSE, + COMMENT: palette.text.SUBTEXT0, + OPERATOR: palette.hues.BLUE, + TAG: palette.hues.ROSE, + TAG_BRACKET: palette.text.SUBTEXT0 }; const lightTheme = { mode: 'light', - brand: palette.accents.PRIMARY, + brand: palette.primary.SOLID, text: palette.text.BASE, - textLink: palette.accents.BLUE, + textLink: palette.hues.BLUE, bg: palette.background.BASE, + primary: { + solid: palette.primary.SOLID, + text: palette.primary.TEXT, + strong: palette.primary.STRONG, + subtle: palette.primary.SUBTLE + }, + accents: { - primary: palette.accents.PRIMARY + primary: palette.primary.SOLID }, background: { @@ -122,18 +141,18 @@ const lightTheme = { colors: { text: { white: palette.utility.WHITE, - green: palette.accents.GREEN, - danger: palette.accents.RED, - warning: palette.accents.ORANGE, + green: palette.intent.SUCCESS, + danger: palette.intent.DANGER, + warning: palette.intent.WARNING, muted: palette.text.SUBTEXT1, - purple: palette.accents.PURPLE, - yellow: palette.accents.YELLOW, + purple: palette.hues.PURPLE, + yellow: palette.hues.YELLOW, subtext2: palette.text.SUBTEXT2, subtext1: palette.text.SUBTEXT1, subtext0: palette.text.SUBTEXT0 }, bg: { - danger: palette.accents.RED + danger: palette.hues.RED }, accent: palette.system.CONTROL_ACCENT }, @@ -182,10 +201,10 @@ const lightTheme = { iconColor: palette.text.SUBTEXT2, bg: palette.utility.WHITE, hoverBg: palette.background.CRUST, - shadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05)', + shadow: '0 0px 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, + selectedColor: palette.primary.TEXT, mutedText: palette.text.SUBTEXT0 }, @@ -199,25 +218,25 @@ const lightTheme = { request: { methods: { - get: palette.accents.GREEN, - post: palette.accents.PURPLE, - put: palette.accents.ORANGE, - delete: palette.accents.RED, - patch: palette.accents.PURPLE, - options: palette.accents.TEAL, - head: palette.accents.CYAN + get: palette.hues.GREEN, + post: palette.hues.PURPLE, + put: palette.hues.ORANGE, + delete: palette.hues.RED, + patch: palette.hues.PURPLE, + options: palette.hues.TEAL, + head: palette.hues.CYAN }, - grpc: palette.accents.INDIGO, - ws: palette.accents.ORANGE, - gql: palette.accents.PINK + grpc: palette.hues.INDIGO, + ws: palette.hues.ORANGE, + gql: palette.hues.PINK }, requestTabPanel: { url: { bg: palette.utility.WHITE, icon: palette.text.SUBTEXT2, - iconDanger: palette.accents.RED, + iconDanger: palette.hues.RED, border: `solid 1px ${palette.border.BORDER1}` }, dragbar: { @@ -225,9 +244,9 @@ const lightTheme = { activeBorder: palette.border.BORDER2 }, responseStatus: palette.text.SUBTEXT1, - responseOk: palette.accents.GREEN, - responseError: palette.accents.RED, - responsePending: palette.accents.BLUE, + responseOk: palette.hues.GREEN, + responseError: palette.hues.RED, + responsePending: palette.hues.BLUE, responseOverlayBg: 'rgba(255, 255, 255, 0.6)', card: { bg: palette.background.BASE, @@ -248,7 +267,7 @@ const lightTheme = { borderBottom: palette.border.BORDER2, hoverBg: palette.background.SURFACE1, active: { - border: palette.accents.BLUE, + border: palette.hues.BLUE, bg: palette.background.SURFACE1, hoverBg: palette.background.SURFACE2 } @@ -301,9 +320,9 @@ const lightTheme = { button2: { color: { primary: { - bg: palette.accents.PRIMARY, + bg: palette.primary.SOLID, text: palette.utility.WHITE, - border: palette.accents.PRIMARY + border: palette.primary.SOLID }, secondary: { bg: palette.background.MANTLE, @@ -311,19 +330,19 @@ const lightTheme = { text: palette.text.BASE }, success: { - bg: palette.accents.GREEN, + bg: palette.hues.GREEN, text: palette.utility.WHITE, - border: palette.accents.GREEN + border: palette.hues.GREEN }, warning: { - bg: palette.accents.ORANGE, + bg: palette.hues.ORANGE, text: palette.utility.WHITE, - border: palette.accents.ORANGE + border: palette.hues.ORANGE }, danger: { - bg: palette.accents.RED, + bg: palette.hues.RED, text: palette.utility.WHITE, - border: palette.accents.RED + border: palette.hues.RED } } }, @@ -332,7 +351,7 @@ const lightTheme = { active: { fontWeight: 400, color: palette.text.BASE, - border: palette.accents.PRIMARY + border: palette.primary.STRONG }, secondary: { active: { @@ -357,12 +376,6 @@ const lightTheme = { }, example: { iconColor: palette.text.SUBTEXT2 - }, - shortTab: { - color: palette.text.SUBTEXT1, - bg: palette.utility.WHITE, - hoverColor: palette.text.SUBTEXT2, - hoverBg: palette.background.SURFACE1 } }, @@ -377,31 +390,22 @@ const lightTheme = { bg: palette.utility.WHITE }, variable: { - valid: palette.accents.GREEN, - invalid: palette.accents.RED, - prompt: palette.accents.BLUE, - info: { - color: palette.text.BASE, - bg: palette.utility.WHITE, - boxShadow: '0 1px 3px rgba(0, 0, 0, 0.45)', - editorBg: palette.background.CRUST, - iconColor: palette.text.SUBTEXT0, - editorBorder: palette.border.BORDER0, - editorFocusBorder: palette.text.SUBTEXT0, - editableDisplayHoverBg: 'rgba(0,0,0,0.02)', - border: palette.border.BORDER0 - } + valid: palette.hues.GREEN, + invalid: palette.hues.RED, + prompt: palette.hues.BLUE }, 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.syntax.DEFINITION, + property: palette.syntax.PROPERTY, + string: palette.syntax.STRING, + number: palette.syntax.NUMBER, + atom: palette.syntax.ATOM, + variable: palette.syntax.VARIABLE, + keyword: palette.syntax.KEYWORD, + comment: palette.syntax.COMMENT, + operator: palette.syntax.OPERATOR, + tag: palette.syntax.TAG, + tagBracket: palette.syntax.TAG_BRACKET }, searchLineHighlightCurrent: 'rgba(120,120,120,0.10)', searchMatch: '#B8860B', @@ -465,7 +469,7 @@ const lightTheme = { optionHoverBg: '#f8f9fa', optionLabelColor: '#212529', optionCountColor: '#6c757d', - checkboxColor: palette.accents.PRIMARY, + checkboxColor: palette.primary.SOLID, scrollbarTrack: '#f8f9fa', scrollbarThumb: '#ced4da', scrollbarThumbHover: '#adb5bd' @@ -602,7 +606,7 @@ const lightTheme = { environmentSelector: { bg: palette.utility.WHITE, border: palette.border.BORDER1, - icon: palette.accents.PRIMARY, + icon: palette.primary.TEXT, text: palette.text.BASE, caret: palette.overlay.OVERLAY1, separator: palette.border.BORDER1, @@ -620,11 +624,11 @@ const lightTheme = { sandboxMode: { safeMode: { bg: 'rgba(4, 120, 87, 0.12)', - color: palette.accents.GREEN + color: palette.hues.GREEN }, developerMode: { bg: 'rgba(204, 145, 73, 0.15)', - color: palette.accents.YELLOW + color: palette.hues.YELLOW } } } diff --git a/packages/bruno-app/src/themes/light/vscode.js b/packages/bruno-app/src/themes/light/vscode.js index 13f405672..79f89750d 100644 --- a/packages/bruno-app/src/themes/light/vscode.js +++ b/packages/bruno-app/src/themes/light/vscode.js @@ -53,7 +53,9 @@ const colors = { VARIABLE: '#001080', KEYWORD: '#af00db', COMMENT: '#008000', - OPERATOR: '#000000' + OPERATOR: '#000000', + TAG: '#800000', + TAG_BRACKET: '#800000' } }; @@ -350,12 +352,6 @@ const vscodeLightTheme = { }, example: { iconColor: colors.GRAY_7 - }, - shortTab: { - color: colors.TEXT_SECONDARY, - bg: colors.WHITE, - hoverColor: colors.TEXT_SECONDARY, - hoverBg: colors.GRAY_2 } }, @@ -372,18 +368,7 @@ const vscodeLightTheme = { variable: { valid: colors.GREEN, invalid: colors.RED, - prompt: colors.BRAND, - info: { - color: colors.TEXT, - bg: colors.WHITE, - boxShadow: '0 1px 3px rgba(0, 0, 0, 0.3)', - editorBg: colors.GRAY_1, - iconColor: colors.GRAY_6, - editorBorder: colors.BORDER, - editorFocusBorder: colors.GRAY_6, - editableDisplayHoverBg: 'rgba(0, 0, 0, 0.02)', - border: colors.BORDER - } + prompt: colors.BRAND }, tokens: { definition: colors.CODEMIRROR_TOKENS.DEFINITION, @@ -394,7 +379,9 @@ const vscodeLightTheme = { variable: colors.CODEMIRROR_TOKENS.VARIABLE, keyword: colors.CODEMIRROR_TOKENS.KEYWORD, comment: colors.CODEMIRROR_TOKENS.COMMENT, - operator: colors.CODEMIRROR_TOKENS.OPERATOR + operator: colors.CODEMIRROR_TOKENS.OPERATOR, + tag: colors.CODEMIRROR_TOKENS.TAG, + tagBracket: colors.CODEMIRROR_TOKENS.TAG_BRACKET }, searchLineHighlightCurrent: 'rgba(255, 255, 0, 0.2)', searchMatch: '#a8ac94', diff --git a/packages/bruno-app/src/themes/schema/oss.js b/packages/bruno-app/src/themes/schema/oss.js index cea0bb418..d78f784b1 100644 --- a/packages/bruno-app/src/themes/schema/oss.js +++ b/packages/bruno-app/src/themes/schema/oss.js @@ -580,20 +580,9 @@ export const ossSchema = { }, required: ['iconColor'], additionalProperties: false - }, - shortTab: { - type: 'object', - properties: { - color: { type: 'string' }, - bg: { type: 'string' }, - hoverColor: { type: 'string' }, - hoverBg: { type: 'string' } - }, - required: ['color', 'bg', 'hoverColor', 'hoverBg'], - additionalProperties: false } }, - required: ['color', 'bg', 'bottomBorder', 'icon', 'example', 'shortTab'], + required: ['color', 'bg', 'bottomBorder', 'icon', 'example'], additionalProperties: false }, @@ -624,25 +613,9 @@ export const ossSchema = { properties: { valid: { type: 'string' }, invalid: { type: 'string' }, - prompt: { type: 'string' }, - info: { - type: 'object', - properties: { - color: { type: 'string' }, - bg: { type: 'string' }, - boxShadow: { type: 'string' }, - editorBg: { type: 'string' }, - iconColor: { type: 'string' }, - editorBorder: { type: 'string' }, - editorFocusBorder: { type: 'string' }, - editableDisplayHoverBg: { type: 'string' }, - border: { type: 'string' } - }, - required: ['color', 'bg', 'boxShadow', 'editorBg', 'iconColor', 'editorBorder', 'editorFocusBorder', 'editableDisplayHoverBg', 'border'], - additionalProperties: false - } + prompt: { type: 'string' } }, - required: ['valid', 'invalid', 'prompt', 'info'], + required: ['valid', 'invalid', 'prompt'], additionalProperties: false }, tokens: { @@ -656,9 +629,11 @@ export const ossSchema = { variable: { type: 'string' }, keyword: { type: 'string' }, comment: { type: 'string' }, - operator: { type: 'string' } + operator: { type: 'string' }, + tag: { type: 'string' }, + tagBracket: { type: 'string' } }, - required: ['definition', 'property', 'string', 'number', 'atom', 'variable', 'keyword', 'comment', 'operator'], + required: ['definition', 'property', 'string', 'number', 'atom', 'variable', 'keyword', 'comment', 'operator', 'tag', 'tagBracket'], additionalProperties: false }, searchLineHighlightCurrent: { type: 'string' },