From 156e798f905fd402acc4b31787c64a1e9742a106 Mon Sep 17 00:00:00 2001 From: Bijin A B Date: Fri, 2 Jan 2026 14:21:28 +0530 Subject: [PATCH] feat(theme): update secondary button styles (#6621) --- packages/bruno-app/src/themes/dark/catppuccin-frappe.js | 6 +++--- .../bruno-app/src/themes/dark/catppuccin-macchiato.js | 6 +++--- packages/bruno-app/src/themes/dark/catppuccin-mocha.js | 6 +++--- packages/bruno-app/src/themes/dark/dark-monochrome.js | 6 ++++-- packages/bruno-app/src/themes/dark/dark-pastel.js | 8 +++++--- packages/bruno-app/src/themes/dark/dark.js | 6 +++--- packages/bruno-app/src/themes/dark/nord.js | 8 +++++--- packages/bruno-app/src/themes/dark/vscode.js | 8 +++++--- packages/bruno-app/src/themes/light/catppuccin-latte.js | 8 +++++--- packages/bruno-app/src/themes/light/light-monochrome.js | 6 ++++-- packages/bruno-app/src/themes/light/light-pastel.js | 7 ++++--- packages/bruno-app/src/themes/light/light.js | 8 +++++--- packages/bruno-app/src/themes/light/vscode.js | 6 +++--- 13 files changed, 52 insertions(+), 37 deletions(-) diff --git a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js index 63f866bf8..e6701708e 100644 --- a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js +++ b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js @@ -303,9 +303,9 @@ const catppuccinFrappeTheme = { border: colors.MAUVE }, secondary: { - bg: colors.SURFACE0, - text: colors.TEXT, - border: colors.SURFACE1 + bg: rgba(colors.MAUVE, 0.08), + text: colors.MAUVE, + border: rgba(colors.MAUVE, 0.06) }, success: { bg: colors.GREEN, diff --git a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js index d64798fd6..f951204a3 100644 --- a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js +++ b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js @@ -303,9 +303,9 @@ const catppuccinMacchiatoTheme = { border: colors.MAUVE }, secondary: { - bg: colors.SURFACE0, - text: colors.TEXT, - border: colors.SURFACE1 + bg: rgba(colors.MAUVE, 0.08), + text: colors.MAUVE, + border: rgba(colors.MAUVE, 0.06) }, success: { bg: colors.GREEN, diff --git a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js index 8060ea5cb..2ced3a19a 100644 --- a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js +++ b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js @@ -303,9 +303,9 @@ const catppuccinMochaTheme = { border: colors.MAUVE }, secondary: { - bg: colors.SURFACE0, - text: colors.TEXT, - border: colors.SURFACE1 + bg: rgba(colors.MAUVE, 0.08), + text: colors.MAUVE, + border: rgba(colors.MAUVE, 0.06) }, success: { bg: colors.GREEN, diff --git a/packages/bruno-app/src/themes/dark/dark-monochrome.js b/packages/bruno-app/src/themes/dark/dark-monochrome.js index 59ca7dec2..e70eecac8 100644 --- a/packages/bruno-app/src/themes/dark/dark-monochrome.js +++ b/packages/bruno-app/src/themes/dark/dark-monochrome.js @@ -1,3 +1,5 @@ +import { rgba } from 'polished'; + const colors = { BRAND: '#a3a3a3', TEXT: '#d4d4d4', @@ -288,9 +290,9 @@ const darkMonochromeTheme = { border: colors.BRAND }, secondary: { - bg: colors.BG, + bg: rgba(colors.TEXT, 0.08), text: colors.TEXT, - border: colors.GRAY_5 + border: rgba(colors.TEXT, 0.06) }, success: { bg: '#666666', diff --git a/packages/bruno-app/src/themes/dark/dark-pastel.js b/packages/bruno-app/src/themes/dark/dark-pastel.js index a235724aa..d50e3f018 100644 --- a/packages/bruno-app/src/themes/dark/dark-pastel.js +++ b/packages/bruno-app/src/themes/dark/dark-pastel.js @@ -5,6 +5,8 @@ * Deep enough to be easy on the eyes, vibrant enough to inspire. */ +import { rgba } from 'polished'; + const colors = { // Primary palette - glowing pastels against deep purple-black BRAND: '#f0a6ca', // Soft rose - warm and inviting @@ -305,9 +307,9 @@ const darkPastelTheme = { border: colors.BRAND }, secondary: { - bg: colors.GRAY_4, - text: colors.TEXT, - border: colors.GRAY_5 + bg: rgba(colors.BRAND, 0.08), + text: colors.BRAND, + border: rgba(colors.BRAND, 0.06) }, success: { bg: colors.GREEN, diff --git a/packages/bruno-app/src/themes/dark/dark.js b/packages/bruno-app/src/themes/dark/dark.js index 604eebe99..51d106971 100644 --- a/packages/bruno-app/src/themes/dark/dark.js +++ b/packages/bruno-app/src/themes/dark/dark.js @@ -344,9 +344,9 @@ const darkTheme = { border: palette.primary.SOLID }, secondary: { - bg: palette.background.MANTLE, - text: palette.text.BASE, - border: palette.border.BORDER1 + bg: rgba(palette.primary.SOLID, 0.08), + text: palette.primary.SOLID, + border: rgba(palette.primary.SOLID, 0.06) }, success: { bg: palette.hues.GREEN, diff --git a/packages/bruno-app/src/themes/dark/nord.js b/packages/bruno-app/src/themes/dark/nord.js index 4dd600138..20a769ec8 100644 --- a/packages/bruno-app/src/themes/dark/nord.js +++ b/packages/bruno-app/src/themes/dark/nord.js @@ -6,6 +6,8 @@ // Frost: nord7-nord10 (#8fbcbb, #88c0d0, #81a1c1, #5e81ac) // Aurora: nord11-nord15 (#bf616a, #d08770, #ebcb8b, #a3be8c, #b48ead) +import { rgba } from 'polished'; + const colors = { // Polar Night NORD0: '#2e3440', @@ -304,9 +306,9 @@ const nordTheme = { border: colors.BRAND }, secondary: { - bg: colors.NORD1, - text: colors.NORD4, - border: colors.NORD3 + bg: rgba(colors.BRAND, 0.08), + text: colors.BRAND, + border: rgba(colors.BRAND, 0.06) }, success: { bg: colors.NORD14, diff --git a/packages/bruno-app/src/themes/dark/vscode.js b/packages/bruno-app/src/themes/dark/vscode.js index c8bba5e11..65432d126 100644 --- a/packages/bruno-app/src/themes/dark/vscode.js +++ b/packages/bruno-app/src/themes/dark/vscode.js @@ -1,5 +1,6 @@ // VS Code Dark+ Theme for Bruno // Based on the default Visual Studio Code Dark+ theme +import { rgba } from 'polished'; const colors = { // VS Code Dark+ Core Colors @@ -12,6 +13,7 @@ const colors = { TEXT: '#d4d4d4', TEXT_MUTED: '#808080', TEXT_LINK: '#3794ff', + BRAND_TEXT: '#47a9eb', // Brand - VS Code blue BRAND: '#007acc', @@ -306,9 +308,9 @@ const vscodeDarkTheme = { border: colors.BRAND }, secondary: { - bg: colors.GRAY_4, - text: colors.WHITE, - border: colors.GRAY_5 + bg: rgba(colors.BRAND_TEXT, 0.08), + text: colors.BRAND_TEXT, + border: rgba(colors.BRAND_TEXT, 0.06) }, success: { bg: '#388a34', diff --git a/packages/bruno-app/src/themes/light/catppuccin-latte.js b/packages/bruno-app/src/themes/light/catppuccin-latte.js index 91c4a7bb8..066dcd116 100644 --- a/packages/bruno-app/src/themes/light/catppuccin-latte.js +++ b/packages/bruno-app/src/themes/light/catppuccin-latte.js @@ -1,6 +1,8 @@ // Catppuccin Latte - Light Theme // Based on https://catppuccin.com/palette/ +import { rgba } from 'polished'; + const colors = { // Catppuccin Latte Palette ROSEWATER: '#dc8a78', @@ -299,9 +301,9 @@ const catppuccinLatteTheme = { border: colors.MAUVE }, secondary: { - bg: colors.SURFACE1, - text: colors.TEXT, - border: colors.SURFACE2 + bg: rgba(colors.MAUVE, 0.08), + text: colors.MAUVE, + border: rgba(colors.MAUVE, 0.06) }, success: { bg: colors.GREEN, diff --git a/packages/bruno-app/src/themes/light/light-monochrome.js b/packages/bruno-app/src/themes/light/light-monochrome.js index 16a30b315..0477d041d 100644 --- a/packages/bruno-app/src/themes/light/light-monochrome.js +++ b/packages/bruno-app/src/themes/light/light-monochrome.js @@ -1,3 +1,5 @@ +import { rgba } from 'polished'; + const colors = { BRAND: '#525252', TEXT: 'rgb(52, 52, 52)', @@ -287,9 +289,9 @@ const lightMonochromeTheme = { border: colors.BRAND }, secondary: { - bg: '#e5e7eb', + bg: rgba(colors.TEXT, 0.08), text: colors.TEXT, - border: '#d1d5db' + border: rgba(colors.TEXT, 0.06) }, success: { bg: '#525252', diff --git a/packages/bruno-app/src/themes/light/light-pastel.js b/packages/bruno-app/src/themes/light/light-pastel.js index 683712cef..95ec8c6a2 100644 --- a/packages/bruno-app/src/themes/light/light-pastel.js +++ b/packages/bruno-app/src/themes/light/light-pastel.js @@ -3,6 +3,7 @@ * Soft, deep pastels with warm undertones for a calm, refined look. * Gentle contrast that stays readable and inviting. */ +import { rgba } from 'polished'; const colors = { // Primary palette - soft yet deep @@ -303,9 +304,9 @@ const lightPastelTheme = { border: colors.BRAND }, secondary: { - bg: colors.GRAY_3, - text: colors.TEXT, - border: colors.GRAY_4 + bg: rgba(colors.BRAND, 0.08), + text: colors.BRAND, + border: rgba(colors.BRAND, 0.06) }, success: { bg: colors.GREEN, diff --git a/packages/bruno-app/src/themes/light/light.js b/packages/bruno-app/src/themes/light/light.js index 4d307e9b2..db50dc047 100644 --- a/packages/bruno-app/src/themes/light/light.js +++ b/packages/bruno-app/src/themes/light/light.js @@ -1,3 +1,5 @@ +import { rgba } from 'polished'; + export const palette = { primary: { SOLID: 'hsl(33, 80%, 46%)', @@ -333,9 +335,9 @@ const lightTheme = { border: palette.primary.SOLID }, secondary: { - bg: palette.background.MANTLE, - border: palette.border.BORDER2, - text: palette.text.BASE + bg: rgba(palette.primary.SOLID, 0.08), + text: palette.primary.SOLID, + border: rgba(palette.primary.SOLID, 0.06) }, success: { bg: palette.hues.GREEN, diff --git a/packages/bruno-app/src/themes/light/vscode.js b/packages/bruno-app/src/themes/light/vscode.js index 39646c826..694db2be7 100644 --- a/packages/bruno-app/src/themes/light/vscode.js +++ b/packages/bruno-app/src/themes/light/vscode.js @@ -308,9 +308,9 @@ const vscodeLightTheme = { border: colors.BRAND }, secondary: { - bg: colors.GRAY_3, - text: colors.TEXT, - border: colors.GRAY_4 + bg: rgba(colors.BRAND, 0.08), + text: colors.BRAND, + border: rgba(colors.BRAND, 0.06) }, success: { bg: colors.GREEN,