feat(theme): update secondary button styles (#6621)

2026-06-28 15:14:06 +00:00 · 2026-01-02 14:21:28 +05:30
parent a1a90d19e8
commit 156e798f90
13 changed files with 52 additions and 37 deletions
--- 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,
--- 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,
--- 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,
--- 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',
--- 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,
--- 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,
--- 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,
--- 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',
--- 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,
--- 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',
--- 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,
--- 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,
--- 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,