rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-06-22 20:25:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: design system doc + cleanup codemirror info + collection overview icons (#6551)

Browse Source
This commit is contained in:
Anoop M D
2025-12-30 06:58:52 +05:30
committed by GitHub
parent c0ac24d090
commit 6afbaa0d91
31 changed files with 2367 additions and 718 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
View File

@@ -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 */

44
packages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.js Normal file
View File

@@ -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;

31
packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js
View File

@@ -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 (
<div className="w-full flex flex-col h-fit">
<StyledWrapper className="w-full flex flex-col h-fit">
<div className="rounded-lg py-6">
<div className="grid gap-5">
{/* Location Row */}
<div className="flex items-start">
<div className="flex-shrink-0 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<IconFolder className="w-5 h-5 text-blue-500" stroke={1.5} />
<div className="icon-box location flex-shrink-0 p-3 rounded-lg">
<IconFolder className="w-5 h-5" stroke={1.5} />
</div>
<div className="ml-4">
<div className="font-medium">Location</div>
<div className="mt-1 text-muted break-all text-xs">
<div className="mt-1 text-muted break-all">
{collection.pathname}
</div>
</div>
@@ -43,15 +44,15 @@ const Info = ({ collection }) => {
{/* Environments Row */}
<div className="flex items-start">
<div className="flex-shrink-0 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
<IconWorld className="w-5 h-5 text-green-500" stroke={1.5} />
<div className="icon-box environments flex-shrink-0 p-3 rounded-lg">
<IconWorld className="w-5 h-5" stroke={1.5} />
</div>
<div className="ml-4">
<div className="font-medium text-sm">Environments</div>
<div className="font-medium">Environments</div>
<div className="mt-1 flex flex-col gap-1">
<button
type="button"
className="text-sm text-link cursor-pointer hover:underline text-left bg-transparent"
className="text-link cursor-pointer hover:underline text-left bg-transparent"
onClick={() => {
dispatch(
addTab({
@@ -85,12 +86,12 @@ const Info = ({ collection }) => {
{/* Requests Row */}
<div className="flex items-start">
<div className="flex-shrink-0 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
<IconApi className="w-5 h-5 text-purple-500" stroke={1.5} />
<div className="icon-box requests flex-shrink-0 p-3 rounded-lg">
<IconApi className="w-5 h-5" stroke={1.5} />
</div>
<div className="ml-4">
<div className="font-medium">Requests</div>
<div className="mt-1 text-muted text-xs">
<div className="mt-1 text-muted">
{
isCollectionLoading ? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in collection`
}
@@ -99,12 +100,12 @@ const Info = ({ collection }) => {
</div>
<div className="flex items-start group cursor-pointer" onClick={handleToggleShowShareCollectionModal(true)}>
<div className="flex-shrink-0 p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
<IconShare className="w-5 h-5 text-indigo-500" stroke={1.5} />
<div className="icon-box share flex-shrink-0 p-3 rounded-lg">
<IconShare className="w-5 h-5" stroke={1.5} />
</div>
<div className="ml-4 h-full flex flex-col justify-start">
<div className="font-medium h-fit my-auto">Share</div>
<div className="group-hover:underline text-link text-xs">
<div className="group-hover:underline text-link">
Share Collection
</div>
</div>
@@ -112,7 +113,7 @@ const Info = ({ collection }) => {
{showShareCollectionModal && <ShareCollection collectionUid={collection.uid} onClose={handleToggleShowShareCollectionModal(false)} />}
</div>
</div>
</div>
</StyledWrapper>
);
};

6
packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
View File

@@ -154,7 +154,7 @@ const Wrapper = styled.div`
display: inline-flex;
justify-content: center;
align-items: center;
color: ${(props) => props.theme.requestTabs.shortTab.color};
color: ${(props) => props.theme.text};
background-color: transparent;
border: 1px solid transparent;
border-radius: ${(props) => props.theme.border.radius.base};
@@ -186,8 +186,8 @@ const Wrapper = styled.div`
&:hover {
> div {
background-color: ${(props) => props.theme.requestTabs.shortTab.hoverBg};
color: ${(props) => props.theme.requestTabs.shortTab.hoverColor};
background-color: ${(props) => props.theme.background.surface0};
color: ${(props) => props.theme.text};
}
}
}

2
packages/bruno-app/src/components/ResponsePane/ResponseBookmark/StyledWrapper.js
View File

@@ -3,7 +3,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
display: flex;
align-items: center;
color: ${(props) => props.theme.codemirror.variable.info.iconColor};
color: ${(props) => props.theme.dropdown.iconColor};
border-radius: 4px;
&:hover {

2
packages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.js
View File

@@ -2,7 +2,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
font-size: ${(props) => props.theme.font.size.base};
color: ${(props) => props.theme.codemirror.variable.info.iconColor};
color: ${(props) => props.theme.dropdown.iconColor};
border-radius: 4px;
&:hover {

2
packages/bruno-app/src/components/ResponsePane/ResponseCopy/StyledWrapper.js
View File

@@ -2,7 +2,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
font-size: 0.8125rem;
color: ${(props) => props.theme.codemirror.variable.info.iconColor};
color: ${(props) => props.theme.dropdown.iconColor};
border-radius: 4px;
&:hover {

2
packages/bruno-app/src/components/ResponsePane/ResponseDownload/StyledWrapper.js
View File

@@ -2,7 +2,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
font-size: ${(props) => props.theme.font.size.base};
color: ${(props) => props.theme.codemirror.variable.info.iconColor};
color: ${(props) => props.theme.dropdown.iconColor};
border-radius: 4px;
&:hover {

2
packages/bruno-app/src/components/ResponsePane/ResponseLayoutToggle/StyledWrapper.js
View File

@@ -8,7 +8,7 @@ const Wrapper = styled.div`
background: transparent;
border: none;
cursor: pointer;
color: ${(props) => props.theme.codemirror.variable.info.iconColor};
color: ${(props) => props.theme.dropdown.iconColor};
border-radius: 4px;
&:hover {

2
packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js
View File

@@ -16,7 +16,7 @@ const StyledMenuIcon = styled.button`
height: 1.25rem;
width: 1.5rem;
border: 1px solid ${(props) => props.theme.workspace.border};
color: ${(props) => props.theme.codemirror.variable.info.iconColor};
color: ${(props) => props.theme.dropdown.iconColor};
border-radius: 4px;
&:hover {

6
packages/bruno-app/src/components/WorkspaceTabs/StyledWrapper.js
View File

@@ -159,7 +159,7 @@ const Wrapper = styled.div`
display: inline-flex;
justify-content: center;
align-items: center;
color: ${(props) => props.theme.requestTabs.shortTab.color};
color: ${(props) => props.theme.text};
background-color: transparent;
border: 1px solid transparent;
border-radius: ${(props) => props.theme.border.radius.base};
@@ -181,8 +181,8 @@ const Wrapper = styled.div`
&:hover {
> div {
background-color: ${(props) => props.theme.requestTabs.shortTab.hoverBg};
color: ${(props) => props.theme.requestTabs.shortTab.hoverColor};
background-color: ${(props) => props.theme.background.surface0};
color: ${(props) => props.theme.text};
}
}
}

67
packages/bruno-app/src/globalStyles.js
View File

@@ -1,4 +1,5 @@
import { createGlobalStyle } from 'styled-components';
import { rgba } from 'polished';
const GlobalStyle = createGlobalStyle`
@@ -247,11 +248,17 @@ const GlobalStyle = createGlobalStyle`
}
}
.CodeMirror-brunoVarInfo {
color: ${(props) => props.theme.codemirror.variable.info.color};
background: ${(props) => props.theme.codemirror.variable.info.bg};
border: 0.0625rem solid ${(props) => props.theme.codemirror.variable.info.border};
border-radius: 0.375rem;
box-shadow: ${(props) => props.theme.codemirror.variable.info.boxShadow};
color: ${(props) => props.theme.text};
background: ${(props) => props.theme.dropdown.bg};
${(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};`
: ''}
box-sizing: border-box;
font-size: ${(props) => props.theme.font.size.base};
line-height: 1.25rem;
@@ -292,7 +299,7 @@ const GlobalStyle = createGlobalStyle`
.CodeMirror-brunoVarInfo .var-name {
font-size: ${(props) => props.theme.font.size.base};
color: ${(props) => props.theme.codemirror.variable.info.color};
color: ${(props) => props.theme.dropdown.color};
font-weight: 500;
flex: 1;
min-width: 0;
@@ -305,10 +312,11 @@ const GlobalStyle = createGlobalStyle`
.CodeMirror-brunoVarInfo .var-scope-badge {
display: inline-block;
padding: 0.125rem 0.375rem;
background: #D977061A;
border-radius: 0.25rem;
font-size: ${(props) => props.theme.font.size.sm};
color: #D97706;
background: ${(props) => rgba(props.theme.brand, 0.07)};
border: 1px solid ${(props) => rgba(props.theme.brand, 0.08)};
border-radius: ${(props) => props.theme.border.radius.base};
font-size: ${(props) => props.theme.font.size.xs};
color: ${(props) => props.theme.brand};
letter-spacing: 0.03125rem;
flex-shrink: 0;
}
@@ -316,9 +324,9 @@ const GlobalStyle = createGlobalStyle`
/* Value Container */
.CodeMirror-brunoVarInfo .var-value-container {
position: relative;
border: 0.0625rem solid ${(props) => props.theme.codemirror.variable.info.editorBorder};
border-radius: 0.375rem;
background: ${(props) => props.theme.codemirror.variable.info.editorBg};
border: 1px solid ${(props) => props.theme.border.border2};
border-radius: ${(props) => props.theme.border.radius.base};
background: ${(props) => props.theme.dropdown.hoverBg};
overflow-y: auto;
overflow-x: hidden;
min-width: 17.3125rem;
@@ -333,7 +341,7 @@ const GlobalStyle = createGlobalStyle`
font-weight: 400;
word-break: break-word;
line-height: 1.25rem;
color: ${(props) => props.theme.codemirror.variable.info.color};
color: ${(props) => props.theme.dropdown.color};
min-height: 1.75rem;
max-width: 13.1875rem;
}
@@ -355,10 +363,10 @@ const GlobalStyle = createGlobalStyle`
font-family: Inter, sans-serif;
font-weight: 400;
line-height: 1.25rem;
border: 0.0625rem solid ${(props) => props.theme.codemirror.variable.info.editorBorder};
border-radius: 0.375rem;
background: ${(props) => props.theme.codemirror.variable.info.editorBg};
color: ${(props) => props.theme.codemirror.variable.info.color};
border: 1px solid ${(props) => props.theme.input.focusBorder};
border-radius: ${(props) => props.theme.border.radius.base};
background: ${(props) => props.theme.dropdown.hoverBg};
color: ${(props) => props.theme.dropdown.color};
transition: border-color 0.15s;
}
@@ -370,8 +378,8 @@ const GlobalStyle = createGlobalStyle`
}
.CodeMirror-brunoVarInfo .var-value-editor .CodeMirror-focused {
background: ${(props) => props.theme.codemirror.variable.info.editorBg};
border-color: ${(props) => props.theme.codemirror.variable.info.editorFocusBorder};
background: ${(props) => props.theme.input.bg};
border-color: ${(props) => props.theme.input.focusBorder};
}
.CodeMirror-brunoVarInfo .var-value-editor .CodeMirror-lines {
@@ -394,7 +402,7 @@ const GlobalStyle = createGlobalStyle`
word-wrap: break-word;
overflow-wrap: break-word;
white-space: pre-wrap;
color: ${(props) => props.theme.codemirror.variable.info.color};
color: ${(props) => props.theme.dropdown.color};
}
.CodeMirror-brunoVarInfo .var-value-editor .CodeMirror-line {
@@ -407,7 +415,7 @@ const GlobalStyle = createGlobalStyle`
word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
color: ${(props) => props.theme.codemirror.variable.info.color};
color: ${(props) => props.theme.dropdown.color};
}
.CodeMirror-brunoVarInfo .var-value-editor .CodeMirror-sizer {
@@ -429,10 +437,10 @@ const GlobalStyle = createGlobalStyle`
overflow-wrap: break-word;
white-space: pre-wrap;
line-height: 1.25rem;
color: ${(props) => props.theme.codemirror.variable.info.color};
color: ${(props) => props.theme.dropdown.color};
min-height: 1.75rem;
cursor: text;
border-radius: 0.375rem;
border-radius: ${(props) => props.theme.border.radius.base};
}
/* Icons Container */
@@ -453,7 +461,8 @@ const GlobalStyle = createGlobalStyle`
padding: 0.125rem;
opacity: 1;
transition: opacity 0.2s;
color: ${(props) => props.theme.codemirror.variable.info.iconColor};
color: ${(props) => props.theme.dropdown.iconColor};
opacity: 0.7;
display: flex;
align-items: center;
justify-content: center;
@@ -461,24 +470,24 @@ const GlobalStyle = createGlobalStyle`
.CodeMirror-brunoVarInfo .secret-toggle-button:hover,
.CodeMirror-brunoVarInfo .copy-button:hover {
opacity: 0.7;
opacity: 1;
}
.CodeMirror-brunoVarInfo .copy-success {
color: #22c55e !important;
color: ${(props) => props.theme.colors.text.green} !important;
}
/* Read-only Note */
.CodeMirror-brunoVarInfo .var-readonly-note {
font-size: ${(props) => props.theme.font.size.xs};
color: ${(props) => props.theme.colors.text.muted};
color: ${(props) => props.theme.dropdown.mutedText};
opacity: 0.6;
margin-top: 0.25rem;
}
.CodeMirror-brunoVarInfo .var-warning-note {
font-size: 0.75rem;
color: #ef4444;
color: ${(props) => props.theme.colors.text.danger};
margin-top: 0.375rem;
line-height: 1.25rem;
}

34
packages/bruno-app/src/themes/DesignSystem/DesignSystem.stories.jsx Normal file
View File

@@ -0,0 +1,34 @@
import {
IntroductionRender,
PrimaryColorsRender,
BackgroundLayersRender,
TextColorsRender,
BordersAndOverlaysRender
} from './Overview';
export default {
title: 'Design System/Overview',
parameters: {
layout: 'padded'
}
};
export const Introduction = {
render: IntroductionRender
};
export const PrimaryColors = {
render: PrimaryColorsRender
};
export const BackgroundLayers = {
render: BackgroundLayersRender
};
export const TextColors = {
render: TextColorsRender
};
export const BordersAndOverlays = {
render: BordersAndOverlaysRender
};

1385
packages/bruno-app/src/themes/DesignSystem/Overview.jsx Normal file
View File

File diff suppressed because it is too large Load Diff

553
packages/bruno-app/src/themes/DesignSystem/Theme.stories.jsx Normal file
View File

@@ -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 (
<div style={{ padding: '24px', backgroundColor: theme.bg, minHeight: '100vh' }}>
<div style={{ marginBottom: '32px' }}>
<h1 style={{ fontSize: '32px', fontWeight: 700, marginBottom: '12px', color: theme.text }}>
Palette
</h1>
<p style={{
fontSize: '16px',
opacity: 0.7,
maxWidth: '540px',
lineHeight: 1.7,
color: theme.text
}}
>
The foundational color tokens that make up the {isDark ? 'dark' : 'light'} theme. All semantic colors are derived from these base values.
</p>
</div>
<ColorSection title="Primary" colors={palette.primary} textColor={theme.text} size={48} />
<ColorSection title="Hues" colors={palette.hues} textColor={theme.text} size={48} />
<ColorSection title="System" colors={palette.system} textColor={theme.text} size={48} />
<ColorSection title="Background" colors={palette.background} textColor={theme.text} size={48} />
<ColorSection title="Text" colors={palette.text} textColor={theme.text} size={48} />
<ColorSection title="Overlay" colors={palette.overlay} textColor={theme.text} size={48} />
<ColorSection title="Border" colors={palette.border} textColor={theme.text} size={48} />
<ColorSection title="Utility" colors={palette.utility} textColor={theme.text} size={48} />
</div>
);
}
};
export const IntentAndSyntax = {
render: () => {
const theme = useTheme();
const isDark = theme.mode === 'dark';
const palette = isDark ? darkPalette : lightPalette;
return (
<div style={{ padding: '24px', backgroundColor: theme.bg, minHeight: '100vh' }}>
<div style={{ marginBottom: '32px' }}>
<h1 style={{ fontSize: '32px', fontWeight: 700, marginBottom: '12px', color: theme.text }}>
Intent & Syntax
</h1>
<p style={{
fontSize: '16px',
opacity: 0.7,
maxWidth: '540px',
lineHeight: 1.7,
color: theme.text
}}
>
Semantic color mappings derived from the base palette. Intent colors convey meaning, while syntax colors provide code highlighting.
</p>
</div>
<ColorSection title="Intent" colors={palette.intent} textColor={theme.text} size={48} />
<ColorSection title="Syntax" colors={palette.syntax} textColor={theme.text} size={48} />
</div>
);
}
};
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 (
<div style={{ padding: '24px', backgroundColor: theme.bg, minHeight: '100vh' }}>
<div style={{ marginBottom: '32px' }}>
<h1 style={{ fontSize: '32px', fontWeight: 700, marginBottom: '12px', color: theme.text }}>
Hue Wheel
</h1>
<p style={{
fontSize: '16px',
opacity: 0.7,
maxWidth: '540px',
lineHeight: 1.7,
color: theme.text
}}
>
Distribution of the 14 hue colors across the color wheel (0° to 360°). Provides full spectrum coverage for diverse UI needs.
</p>
</div>
{/* Visual wheel representation */}
<div style={{
display: 'flex',
justifyContent: 'center',
marginBottom: '48px'
}}
>
<div style={{
width: '280px',
height: '280px',
borderRadius: '50%',
background: `conic-gradient(${sorted.map(([, color], i) => `${color} ${(i / sorted.length) * 100}% ${((i + 1) / sorted.length) * 100}%`).join(', ')})`,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<div style={{
width: '140px',
height: '140px',
borderRadius: '50%',
backgroundColor: theme.bg,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column'
}}
>
<div style={{ fontSize: '24px', fontWeight: 700, color: theme.text }}>14</div>
<div style={{ fontSize: '12px', opacity: 0.6, color: theme.text }}>hues</div>
</div>
</div>
</div>
{/* Hue distribution bars */}
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '8px'
}}
>
{sorted.map(([name, color]) => {
const hueMatch = color.match(/hsl\((\d+)/);
const hue = hueMatch ? parseInt(hueMatch[1]) : 0;
return (
<div key={name} style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<div style={{ width: '70px', fontSize: '12px', fontWeight: 600, color: theme.text }}>{name}</div>
<div style={{ width: '40px', fontSize: '11px', opacity: 0.5, fontFamily: 'monospace', color: theme.text }}>{hue}°</div>
<div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
<div
style={{
width: `${(hue / 360) * 100}%`,
minWidth: '20px',
height: '28px',
backgroundColor: color,
borderRadius: '4px'
}}
/>
</div>
<code style={{
fontSize: '10px',
fontFamily: 'monospace',
opacity: 0.4,
width: '140px',
color: theme.text
}}
>
{color}
</code>
</div>
);
})}
</div>
</div>
);
}
};
// 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 }) => (
<div style={{
padding: '20px',
backgroundColor: theme.background.surface0,
borderRadius: '12px',
border: `1px solid ${theme.border.border0}`,
marginBottom: '24px'
}}
>
<h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', color: theme.text }}>{title}</h3>
{/* Stats grid */}
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(5, 1fr)',
gap: '12px',
marginBottom: '20px'
}}
>
{[
{ 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 }) => (
<div key={label} style={{ textAlign: 'center' }}>
<div style={{ fontSize: '20px', fontWeight: 700, color: theme.text }}>{value}{unit}</div>
<div style={{ fontSize: '11px', opacity: 0.5, color: theme.text }}>{label}</div>
</div>
))}
</div>
{/* Distribution visualization */}
<div style={{ marginTop: '16px' }}>
<div style={{ fontSize: '12px', opacity: 0.5, marginBottom: '8px', color: theme.text }}>Distribution</div>
<div style={{
position: 'relative',
height: '60px',
backgroundColor: theme.background.surface1,
borderRadius: '6px',
overflow: 'hidden'
}}
>
{/* Mean line */}
<div style={{
position: 'absolute',
left: `${stats.mean}%`,
top: 0,
bottom: 0,
width: '2px',
backgroundColor: theme.primary?.strong || theme.brand,
zIndex: 2
}}
/>
{/* Std dev range */}
<div style={{
position: 'absolute',
left: `${Math.max(0, stats.mean - stats.stdDev)}%`,
width: `${Math.min(100, stats.stdDev * 2)}%`,
top: '15px',
bottom: '15px',
backgroundColor: theme.primary?.subtle || theme.brand,
opacity: 0.3,
borderRadius: '4px'
}}
/>
{/* Individual values */}
{hueData.map((h, i) => (
<div
key={h.name}
title={`${h.name}: ${values[i]}%`}
style={{
position: 'absolute',
left: `${values[i]}%`,
top: '50%',
transform: 'translate(-50%, -50%)',
width: '12px',
height: '12px',
borderRadius: '50%',
backgroundColor: h.color,
border: `2px solid ${theme.bg}`,
zIndex: 1
}}
/>
))}
</div>
{/* Scale */}
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '4px' }}>
<span style={{ fontSize: '10px', opacity: 0.4, color: theme.text }}>0%</span>
<span style={{ fontSize: '10px', opacity: 0.4, color: theme.text }}>50%</span>
<span style={{ fontSize: '10px', opacity: 0.4, color: theme.text }}>100%</span>
</div>
</div>
</div>
);
return (
<div style={{ padding: '24px', backgroundColor: theme.bg, minHeight: '100vh' }}>
<div style={{ marginBottom: '32px' }}>
<h1 style={{ fontSize: '32px', fontWeight: 700, marginBottom: '12px', color: theme.text }}>
Hue Analysis
</h1>
<p style={{
fontSize: '16px',
opacity: 0.7,
maxWidth: '540px',
lineHeight: 1.7,
color: theme.text
}}
>
Statistical analysis of saturation and lightness consistency across the 14 hue colors. Lower standard deviation indicates more uniform values.
</p>
</div>
<StatCard
title="Saturation Distribution"
stats={satStats}
values={saturations}
hueData={hues}
/>
<StatCard
title="Lightness Distribution"
stats={lightStats}
values={lightnesses}
hueData={hues}
/>
{/* Saturation Breakdown */}
<div style={{
padding: '20px',
backgroundColor: theme.background.surface0,
borderRadius: '12px',
border: `1px solid ${theme.border.border0}`,
marginBottom: '24px'
}}
>
<h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', color: theme.text }}>
Saturation by Hue
</h3>
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
{hues.map((h) => {
const diff = h.s - satStats.mean;
const isOutlier = Math.abs(diff) > satStats.stdDev;
return (
<div
key={h.name}
style={{
display: 'flex',
alignItems: 'center',
gap: '12px'
}}
>
<div style={{ width: '70px', fontSize: '12px', fontWeight: 500, color: theme.text }}>{h.name}</div>
<div style={{
width: '24px',
height: '24px',
borderRadius: '4px',
backgroundColor: h.color,
flexShrink: 0
}}
/>
<div style={{ flex: 1, position: 'relative', height: '24px' }}>
{/* Background track */}
<div style={{
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
left: 0,
right: 0,
height: '8px',
backgroundColor: theme.background.surface1,
borderRadius: '4px'
}}
/>
{/* Mean line */}
<div style={{
position: 'absolute',
left: `${satStats.mean}%`,
top: '2px',
bottom: '2px',
width: '2px',
backgroundColor: theme.primary?.subtle || theme.brand,
opacity: 0.5,
borderRadius: '1px'
}}
/>
{/* Value bar */}
<div style={{
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
left: 0,
width: `${h.s}%`,
height: '8px',
backgroundColor: h.color,
borderRadius: '4px'
}}
/>
</div>
<div style={{
width: '70px',
fontSize: '12px',
fontFamily: 'monospace',
textAlign: 'right',
color: isOutlier ? palette.hues.ORANGE : theme.text
}}
>
{h.s}%
<span style={{ fontSize: '10px', opacity: 0.5, marginLeft: '2px' }}>
{diff > 0 ? '+' : ''}{diff.toFixed(0)}
</span>
</div>
</div>
);
})}
</div>
<div style={{ marginTop: '12px', fontSize: '11px', opacity: 0.4, color: theme.text }}>
Mean line shown at {satStats.mean.toFixed(0)}% · Outliers ({'>'} 1σ) highlighted
</div>
</div>
{/* Lightness Breakdown */}
<div style={{
padding: '20px',
backgroundColor: theme.background.surface0,
borderRadius: '12px',
border: `1px solid ${theme.border.border0}`
}}
>
<h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', color: theme.text }}>
Lightness by Hue
</h3>
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
{hues.map((h) => {
const diff = h.l - lightStats.mean;
const isOutlier = Math.abs(diff) > lightStats.stdDev;
return (
<div
key={h.name}
style={{
display: 'flex',
alignItems: 'center',
gap: '12px'
}}
>
<div style={{ width: '70px', fontSize: '12px', fontWeight: 500, color: theme.text }}>{h.name}</div>
<div style={{
width: '24px',
height: '24px',
borderRadius: '4px',
backgroundColor: h.color,
flexShrink: 0
}}
/>
<div style={{ flex: 1, position: 'relative', height: '24px' }}>
{/* Background track */}
<div style={{
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
left: 0,
right: 0,
height: '8px',
backgroundColor: theme.background.surface1,
borderRadius: '4px'
}}
/>
{/* Mean line */}
<div style={{
position: 'absolute',
left: `${lightStats.mean}%`,
top: '2px',
bottom: '2px',
width: '2px',
backgroundColor: theme.primary?.subtle || theme.brand,
opacity: 0.5,
borderRadius: '1px'
}}
/>
{/* Value bar */}
<div style={{
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
left: 0,
width: `${h.l}%`,
height: '8px',
backgroundColor: h.color,
borderRadius: '4px'
}}
/>
</div>
<div style={{
width: '70px',
fontSize: '12px',
fontFamily: 'monospace',
textAlign: 'right',
color: isOutlier ? palette.hues.ORANGE : theme.text
}}
>
{h.l}%
<span style={{ fontSize: '10px', opacity: 0.5, marginLeft: '2px' }}>
{diff > 0 ? '+' : ''}{diff.toFixed(0)}
</span>
</div>
</div>
);
})}
</div>
<div style={{ marginTop: '12px', fontSize: '11px', opacity: 0.4, color: theme.text }}>
Mean line shown at {lightStats.mean.toFixed(0)}% · Outliers ({'>'} 1σ) highlighted
</div>
</div>
</div>
);
}
};

123
packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx
View File

@@ -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: () => (
<div style={{ padding: '24px', backgroundColor: palette.background.BASE, minHeight: '100vh' }}>
<h1 style={{ fontSize: '24px', fontWeight: 700, marginBottom: '8px', color: textColor }}>
Dark Theme Palette
</h1>
<p style={{ fontSize: '14px', color: mutedColor, marginBottom: '32px' }}>
14 accent colors with full hue coverage
</p>
<ColorSection title="Accents" colors={palette.accents} textColor={textColor} />
<ColorSection title="Background" colors={palette.background} textColor={textColor} />
<ColorSection title="Text" colors={palette.text} textColor={textColor} />
<ColorSection title="Overlay" colors={palette.overlay} textColor={textColor} />
<ColorSection title="Border" colors={palette.border} textColor={textColor} />
<ColorSection title="Utility" colors={palette.utility} textColor={textColor} />
</div>
)
};
export const Accents = {
render: () => (
<div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
<h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '8px', color: textColor }}>
Accent Colors
</h2>
<p style={{ fontSize: '13px', color: mutedColor, marginBottom: '24px' }}>
Warm &rarr; Cool progression across the color wheel
</p>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
{Object.entries(palette.accents).map(([name, color]) => (
<ColorSwatch key={name} name={name} color={color} textColor={textColor} />
))}
</div>
</div>
)
};
export const Background = {
render: () => (
<div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
<h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '16px', color: textColor }}>
Background Colors
</h2>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
{Object.entries(palette.background).map(([name, color]) => (
<ColorSwatch key={name} name={name} color={color} textColor={textColor} />
))}
</div>
</div>
)
};
export const Text = {
render: () => (
<div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
<h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '16px', color: textColor }}>
Text Colors
</h2>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
{Object.entries(palette.text).map(([name, color]) => (
<ColorSwatch key={name} name={name} color={color} textColor={textColor} />
))}
</div>
</div>
)
};
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 (
<div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
<h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '8px', color: textColor }}>
Hue Distribution
</h2>
<p style={{ fontSize: '13px', color: mutedColor, marginBottom: '24px' }}>
Colors sorted by hue value (0&deg; &rarr; 360&deg;)
</p>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
{sorted.map(([name, color]) => {
const hueMatch = color.match(/hsl\((\d+)/);
const hue = hueMatch ? parseInt(hueMatch[1]) : 0;
return (
<div key={name} style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<div style={{ width: '70px', fontSize: '12px', fontWeight: 600, color: textColor }}>{name}</div>
<div style={{ width: '40px', fontSize: '11px', color: mutedColor, fontFamily: 'monospace' }}>{hue}&deg;</div>
<div
style={{
width: `${(hue / 360) * 280 + 50}px`,
height: '28px',
backgroundColor: color,
borderRadius: '4px'
}}
/>
</div>
);
})}
</div>
</div>
);
}
};

124
packages/bruno-app/src/themes/PaletteViewer/Light.stories.jsx
View File

@@ -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: () => (
<div style={{ padding: '24px', backgroundColor: palette.background.BASE, minHeight: '100vh' }}>
<h1 style={{ fontSize: '24px', fontWeight: 700, marginBottom: '8px', color: textColor }}>
Light Theme Palette
</h1>
<p style={{ fontSize: '14px', color: mutedColor, marginBottom: '32px' }}>
14 accent colors with full hue coverage
</p>
<ColorSection title="Accents" colors={palette.accents} textColor={textColor} />
<ColorSection title="System" colors={palette.system} textColor={textColor} />
<ColorSection title="Background" colors={palette.background} textColor={textColor} />
<ColorSection title="Text" colors={palette.text} textColor={textColor} />
<ColorSection title="Overlay" colors={palette.overlay} textColor={textColor} />
<ColorSection title="Border" colors={palette.border} textColor={textColor} />
<ColorSection title="Utility" colors={palette.utility} textColor={textColor} />
</div>
)
};
export const Accents = {
render: () => (
<div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
<h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '8px', color: textColor }}>
Accent Colors
</h2>
<p style={{ fontSize: '13px', color: mutedColor, marginBottom: '24px' }}>
Warm &rarr; Cool progression across the color wheel
</p>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
{Object.entries(palette.accents).map(([name, color]) => (
<ColorSwatch key={name} name={name} color={color} textColor={textColor} />
))}
</div>
</div>
)
};
export const Background = {
render: () => (
<div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
<h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '16px', color: textColor }}>
Background Colors
</h2>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
{Object.entries(palette.background).map(([name, color]) => (
<ColorSwatch key={name} name={name} color={color} textColor={textColor} />
))}
</div>
</div>
)
};
export const Text = {
render: () => (
<div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
<h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '16px', color: textColor }}>
Text Colors
</h2>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
{Object.entries(palette.text).map(([name, color]) => (
<ColorSwatch key={name} name={name} color={color} textColor={textColor} />
))}
</div>
</div>
)
};
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 (
<div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
<h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '8px', color: textColor }}>
Hue Distribution
</h2>
<p style={{ fontSize: '13px', color: mutedColor, marginBottom: '24px' }}>
Colors sorted by hue value (0&deg; &rarr; 360&deg;)
</p>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
{sorted.map(([name, color]) => {
const hueMatch = color.match(/hsl\((\d+)/);
const hue = hueMatch ? parseInt(hueMatch[1]) : 0;
return (
<div key={name} style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<div style={{ width: '70px', fontSize: '12px', fontWeight: 600, color: textColor }}>{name}</div>
<div style={{ width: '40px', fontSize: '11px', color: mutedColor, fontFamily: 'monospace' }}>{hue}&deg;</div>
<div
style={{
width: `${(hue / 360) * 280 + 50}px`,
height: '28px',
backgroundColor: color,
borderRadius: '4px'
}}
/>
</div>
);
})}
</div>
</div>
);
}
};

31
packages/bruno-app/src/themes/dark/catppuccin-frappe.js
View File

@@ -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,

33
packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
View File

@@ -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,

33
packages/bruno-app/src/themes/dark/catppuccin-mocha.js
View File

@@ -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,

27
packages/bruno-app/src/themes/dark/dark-monochrome.js
View File

@@ -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',

27
packages/bruno-app/src/themes/dark/dark-pastel.js
View File

@@ -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,

174
packages/bruno-app/src/themes/dark/dark.js
View File

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

27
packages/bruno-app/src/themes/dark/nord.js
View File

@@ -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,

27
packages/bruno-app/src/themes/dark/vscode.js
View File

@@ -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',

27
packages/bruno-app/src/themes/light/catppuccin-latte.js
View File

@@ -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,

27
packages/bruno-app/src/themes/light/light-monochrome.js
View File

@@ -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',

27
packages/bruno-app/src/themes/light/light-pastel.js
View File

@@ -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',

168
packages/bruno-app/src/themes/light/light.js
View File

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

27
packages/bruno-app/src/themes/light/vscode.js
View File

@@ -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',

39
packages/bruno-app/src/themes/schema/oss.js
View File

@@ -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' },