From 33f47ca5e42c8549b0bf63a44bff173f02740253 Mon Sep 17 00:00:00 2001
From: Abhishek S Lal <abhishek@usebruno.com>
Date: Fri, 2 Jan 2026 23:32:55 +0530
Subject: [PATCH] style: update color references to use theme.draftColor for
 unsaved changes across multiple components (#6641)

---
 .../ApiSpecPanel/FileEditor/index.js          |  2 +-
 .../FolderSettings/Auth/StyledWrapper.js      |  2 +-
 .../RequestPane/Auth/StyledWrapper.js         |  2 +-
 .../RequestPane/GrpcQueryUrl/index.js         |  2 +-
 .../GrpcRequestPane/GrpcAuth/StyledWrapper.js |  2 +-
 .../components/RequestPane/QueryUrl/index.js  |  2 +-
 .../WSRequestPane/WSAuth/StyledWrapper.js     |  2 +-
 .../RequestPane/WsQueryUrl/index.js           |  2 +-
 .../RequestTabs/RequestTab/DraftTabIcon.js    | 32 +++++++++++--------
 .../LargeResponseWarning/index.js             |  3 ++
 .../components/ResponsePane/Overlay/index.js  |  2 ++
 .../ResponseHeaders/StyledWrapper.js          |  3 +-
 .../RunConfigurationPanel/StyledWrapper.jsx   | 12 +++++++
 .../RunConfigurationPanel/index.jsx           | 30 +++++++++++++++--
 .../WorkspaceDocs/StyledWrapper.js            |  2 --
 .../WorkspaceHome/WorkspaceDocs/index.js      |  6 ++--
 .../WorkspaceHome/WorkspaceOverview/index.js  |  6 ++--
 .../src/themes/dark/catppuccin-frappe.js      |  8 ++++-
 .../src/themes/dark/catppuccin-macchiato.js   |  8 ++++-
 .../src/themes/dark/catppuccin-mocha.js       |  8 ++++-
 .../src/themes/dark/dark-monochrome.js        |  8 ++++-
 .../bruno-app/src/themes/dark/dark-pastel.js  |  8 ++++-
 packages/bruno-app/src/themes/dark/dark.js    |  8 ++++-
 packages/bruno-app/src/themes/dark/nord.js    |  8 ++++-
 packages/bruno-app/src/themes/dark/vscode.js  |  8 ++++-
 .../src/themes/light/catppuccin-latte.js      |  8 ++++-
 .../src/themes/light/light-monochrome.js      |  8 ++++-
 .../src/themes/light/light-pastel.js          |  8 ++++-
 packages/bruno-app/src/themes/light/light.js  |  8 ++++-
 packages/bruno-app/src/themes/light/vscode.js |  8 ++++-
 packages/bruno-app/src/themes/schema/oss.js   | 15 +++++++--
 31 files changed, 184 insertions(+), 47 deletions(-)

diff --git a/packages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.js b/packages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.js
index 49c569bd7..4d27290f4 100644
--- a/packages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.js
+++ b/packages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.js
@@ -37,7 +37,7 @@ const FileEditor = ({ apiSpec }) => {
       />
       <IconDeviceFloppy
         onClick={onSave}
-        color={hasChanges ? theme.colors.text.yellow : theme.requestTabs.icon.color}
+        color={hasChanges ? theme.draftColor : theme.requestTabs.icon.color}
         strokeWidth={1.5}
         size={22}
         className={`absolute right-0 top-0 m-4 ${
diff --git a/packages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.js
index f1fda52e9..c5305bce1 100644
--- a/packages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.js
@@ -12,7 +12,7 @@ const Wrapper = styled.div`
     background-color: ${(props) => props.theme.input.bg};
   }
   .inherit-mode-text {
-    color: ${(props) => props.theme.colors.text.yellow};
+    color: ${(props) => props.theme.primary.text};
   }
   .auth-mode-label {
     color: ${(props) => props.theme.colors.text.yellow};
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.js
index e1283ea42..ba47fbf09 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .inherit-mode-text {
-    color: ${(props) => props.theme.colors.text.yellow};
+    color: ${(props) => props.theme.primary.text};
   }
   .inherit-mode-label {
   }
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js
index 62ff7bc36..f82f5bb6a 100644
--- a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js
@@ -381,7 +381,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => {
             }}
           >
             <IconDeviceFloppy
-              color={item.draft ? theme.colors.text.yellow : theme.requestTabs.icon.color}
+              color={item.draft ? theme.draftColor : theme.requestTabs.icon.color}
               strokeWidth={1.5}
               size={20}
               className={`${item.draft ? 'cursor-pointer' : 'cursor-default'}`}
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.js
index f76b0d9a4..1129072b1 100644
--- a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .inherit-mode-text {
-    color: ${(props) => props.theme.colors.text.yellow};
+    color: ${(props) => props.theme.primary.text};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
index fb4ce8dc4..23da07519 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
@@ -412,7 +412,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
             }}
           >
             <IconDeviceFloppy
-              color={hasChanges ? theme.colors.text.yellow : theme.requestTabs.icon.color}
+              color={hasChanges ? theme.draftColor : theme.requestTabs.icon.color}
               strokeWidth={1.5}
               size={20}
               className={`${hasChanges ? 'cursor-pointer' : 'cursor-default'}`}
diff --git a/packages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/StyledWrapper.js
index f76b0d9a4..1129072b1 100644
--- a/packages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .inherit-mode-text {
-    color: ${(props) => props.theme.colors.text.yellow};
+    color: ${(props) => props.theme.primary.text};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js
index e34fa9563..d94c384f8 100644
--- a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js
@@ -148,7 +148,7 @@ const WsQueryUrl = ({ item, collection, handleRun }) => {
               }}
             >
               <IconDeviceFloppy
-                color={hasChanges ? theme.colors.text.yellow : theme.requestTabs.icon.color}
+                color={hasChanges ? theme.draftColor : theme.requestTabs.icon.color}
                 strokeWidth={1.5}
                 size={20}
                 className={`${hasChanges ? 'cursor-pointer' : 'cursor-default'}`}
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/DraftTabIcon.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/DraftTabIcon.js
index ab097c536..2ac676b56 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/DraftTabIcon.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/DraftTabIcon.js
@@ -1,15 +1,21 @@
-const DraftTabIcon = () => (
-  <svg
-    focusable="false"
-    xmlns="http://www.w3.org/2000/svg"
-    width="8"
-    height="16"
-    fill="#cc7b1b"
-    className="has-changes-icon"
-    viewBox="0 0 8 8"
-  >
-    <circle cx="4" cy="4" r="3" />
-  </svg>
-);
+import { useTheme } from 'providers/Theme';
+
+const DraftTabIcon = () => {
+  const { theme } = useTheme();
+
+  return (
+    <svg
+      focusable="false"
+      xmlns="http://www.w3.org/2000/svg"
+      width="8"
+      height="16"
+      fill={theme.draftColor}
+      className="has-changes-icon"
+      viewBox="0 0 8 8"
+    >
+      <circle cx="4" cy="4" r="3" />
+    </svg>
+  );
+};
 
 export default DraftTabIcon;
diff --git a/packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/index.js b/packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/index.js
index c261d4d99..c0d7811e0 100644
--- a/packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/index.js
@@ -65,6 +65,7 @@ const LargeResponseWarning = ({ item, responseSize, onRevealResponse }) => {
           onClick={onRevealResponse}
           title="Show response content"
           color="secondary"
+          size="sm"
         >
           View
         </Button>
@@ -75,6 +76,7 @@ const LargeResponseWarning = ({ item, responseSize, onRevealResponse }) => {
           disabled={!response.dataBuffer}
           title="Save response to file"
           color="secondary"
+          size="sm"
         >
           Save
         </Button>
@@ -85,6 +87,7 @@ const LargeResponseWarning = ({ item, responseSize, onRevealResponse }) => {
           disabled={!response.data}
           title="Copy response to clipboard"
           color="secondary"
+          size="sm"
         >
           Copy
         </Button>
diff --git a/packages/bruno-app/src/components/ResponsePane/Overlay/index.js b/packages/bruno-app/src/components/ResponsePane/Overlay/index.js
index bd8b6a8aa..d926a7ebf 100644
--- a/packages/bruno-app/src/components/ResponsePane/Overlay/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Overlay/index.js
@@ -25,6 +25,8 @@ const ResponseLoadingOverlay = ({ item, collection }) => {
         </div>
         <IconRefresh size={24} className="loading-icon" />
         <Button
+          color="secondary"
+          size="sm"
           onClick={handleCancelRequest}
           className="mt-4"
         >
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js
index 98c6680f5..bde8205d2 100644
--- a/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js
@@ -5,6 +5,7 @@ const Wrapper = styled.div`
     border: 1px solid ${(props) => props.theme.table.border};
     border-radius: 4px;
     overflow: hidden;
+    font-size: ${(props) => props.theme.font.size.sm};
   }
 
   table {
@@ -23,7 +24,7 @@ const Wrapper = styled.div`
 
     td {
       border: 1px solid ${(props) => props.theme.table.border};
-      padding: 6px 10px;
+      padding: 4px 8px;
 
       &:first-child {
         border-left: none;
diff --git a/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx b/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
index 1fded6cb9..7597df135 100644
--- a/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
+++ b/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
@@ -201,6 +201,18 @@ const StyledWrapper = styled.div`
       &.method-head {
         color: ${(props) => props.theme.request.methods.head};
       }
+
+      &.method-grpc {
+        color: ${(props) => props.theme.request.grpc};
+      }
+
+      &.method-ws {
+        color: ${(props) => props.theme.request.ws};
+      }
+
+      &.method-gql {
+        color: ${(props) => props.theme.request.gql};
+      }
     }
 
     .request-name {
diff --git a/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsx b/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsx
index 994be21c3..f9eb07e87 100644
--- a/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsx
+++ b/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsx
@@ -14,6 +14,32 @@ const ItemTypes = {
   REQUEST_ITEM: 'request-item'
 };
 
+const getMethodInfo = (item) => {
+  const isGrpc = item.type === 'grpc-request';
+  const isWS = item.type === 'ws-request';
+  const isGraphQL = item.type === 'graphql-request';
+
+  let methodText;
+  let methodClass;
+
+  if (isGrpc) {
+    methodText = 'GRPC';
+    methodClass = 'method-grpc';
+  } else if (isWS) {
+    methodText = 'WS';
+    methodClass = 'method-ws';
+  } else if (isGraphQL) {
+    methodText = 'GQL';
+    methodClass = 'method-gql';
+  } else {
+    const method = item.request?.method || '';
+    methodText = method.length > 5 ? method.substring(0, 3).toUpperCase() : method.toUpperCase();
+    methodClass = `method-${method.toLowerCase()}`;
+  }
+
+  return { methodText, methodClass };
+};
+
 const RequestItem = ({ item, index, moveItem, isSelected, onSelect, onDrop }) => {
   const ref = useRef(null);
   const [dropType, setDropType] = useState(null);
@@ -111,8 +137,8 @@ const RequestItem = ({ item, index, moveItem, isSelected, onSelect, onDrop }) =>
         </div>
       </div>
 
-      <div className={`method method-${item.request?.method.toLowerCase()}`}>
-        {item.request?.method.toUpperCase()}
+      <div className={`method ${getMethodInfo(item).methodClass}`}>
+        {getMethodInfo(item).methodText}
       </div>
 
       <div className="request-name">
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js
index efec586f9..0583b6206 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js
@@ -88,8 +88,6 @@ const StyledWrapper = styled.div`
     width: 52px;
     height: 52px;
     border-radius: 8px;
-    background: ${(props) => props.theme.background.mantle};
-    border: 1px solid ${(props) => props.theme.workspace.border};
     color: ${(props) => props.theme.colors.text.muted};
     margin-bottom: 16px;
   }
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js
index 7c4dc42d9..0fb5fed2e 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js
@@ -7,7 +7,7 @@ import { saveWorkspaceDocs } from 'providers/ReduxStore/slices/workspaces/action
 import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
-import { IconFileText, IconEdit, IconX } from '@tabler/icons';
+import { IconFileText, IconEdit, IconX, IconPlus } from '@tabler/icons';
 import Button from 'ui/Button';
 import toast from 'react-hot-toast';
 import ActionIcon from 'ui/ActionIcon/index';
@@ -103,7 +103,7 @@ const WorkspaceDocs = ({ workspace }) => {
         ) : (
           <div className="empty-state">
             <div className="empty-icon-wrapper">
-              <IconFileText size={28} strokeWidth={1} />
+              <IconFileText size={52} strokeWidth={1} />
             </div>
             <p className="empty-text">
               Add documentation to help your team work smoothly.
@@ -115,7 +115,7 @@ const WorkspaceDocs = ({ workspace }) => {
               <li>Key workflows</li>
               <li>Resources & FAQs</li>
             </ul>
-            <Button color="secondary" size="md" onClick={handleAddDocumentation}>
+            <Button color="light" size="sm" icon={<IconPlus size={14} strokeWidth={1.5} />} onClick={handleAddDocumentation}>
               Add Documentation
             </Button>
           </div>
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js
index 85d49ab99..b8b688922 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js
@@ -109,7 +109,7 @@ const WorkspaceOverview = ({ workspace }) => {
             <div className="section-title">Quick Actions</div>
             <div className="quick-actions-buttons">
               <Button
-                color="secondary"
+                color="light"
                 size="sm"
                 icon={<IconPlus size={14} strokeWidth={1.5} />}
                 onClick={handleCreateCollection}
@@ -117,7 +117,7 @@ const WorkspaceOverview = ({ workspace }) => {
                 Create Collection
               </Button>
               <Button
-                color="secondary"
+                color="light"
                 size="sm"
                 icon={<IconFolder size={14} strokeWidth={1.5} />}
                 onClick={handleOpenCollection}
@@ -125,7 +125,7 @@ const WorkspaceOverview = ({ workspace }) => {
                 Open Collection
               </Button>
               <Button
-                color="secondary"
+                color="light"
                 size="sm"
                 icon={<IconDownload size={14} strokeWidth={1.5} />}
                 onClick={handleImportCollection}
diff --git a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
index e78be36e9..7a9113f6d 100644
--- a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
@@ -65,6 +65,7 @@ const catppuccinFrappeTheme = {
   brand: colors.MAUVE,
   text: colors.TEXT,
   textLink: colors.BLUE,
+  draftColor: '#cc7b1b',
   bg: colors.BASE,
 
   primary: {
@@ -334,11 +335,16 @@ const catppuccinFrappeTheme = {
         text: colors.CRUST,
         border: colors.MAUVE
       },
-      secondary: {
+      light: {
         bg: rgba(colors.MAUVE, 0.08),
         text: colors.MAUVE,
         border: rgba(colors.MAUVE, 0.06)
       },
+      secondary: {
+        bg: colors.SURFACE0,
+        text: colors.TEXT,
+        border: colors.SURFACE1
+      },
       success: {
         bg: colors.GREEN,
         text: colors.CRUST,
diff --git a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
index 3afad323e..cf8881696 100644
--- a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
@@ -65,6 +65,7 @@ const catppuccinMacchiatoTheme = {
   brand: colors.MAUVE,
   text: colors.TEXT,
   textLink: colors.BLUE,
+  draftColor: '#cc7b1b',
   bg: colors.BASE,
 
   primary: {
@@ -334,11 +335,16 @@ const catppuccinMacchiatoTheme = {
         text: colors.CRUST,
         border: colors.MAUVE
       },
-      secondary: {
+      light: {
         bg: rgba(colors.MAUVE, 0.08),
         text: colors.MAUVE,
         border: rgba(colors.MAUVE, 0.06)
       },
+      secondary: {
+        bg: colors.SURFACE0,
+        text: colors.TEXT,
+        border: colors.SURFACE1
+      },
       success: {
         bg: colors.GREEN,
         text: colors.CRUST,
diff --git a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
index 2a9cfc837..6d9f4a0a7 100644
--- a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
@@ -65,6 +65,7 @@ const catppuccinMochaTheme = {
   brand: colors.MAUVE,
   text: colors.TEXT,
   textLink: colors.BLUE,
+  draftColor: '#cc7b1b',
   bg: colors.BASE,
 
   primary: {
@@ -334,11 +335,16 @@ const catppuccinMochaTheme = {
         text: colors.CRUST,
         border: colors.MAUVE
       },
-      secondary: {
+      light: {
         bg: rgba(colors.MAUVE, 0.08),
         text: colors.MAUVE,
         border: rgba(colors.MAUVE, 0.06)
       },
+      secondary: {
+        bg: colors.SURFACE0,
+        text: colors.TEXT,
+        border: colors.SURFACE1
+      },
       success: {
         bg: colors.GREEN,
         text: colors.CRUST,
diff --git a/packages/bruno-app/src/themes/dark/dark-monochrome.js b/packages/bruno-app/src/themes/dark/dark-monochrome.js
index 6a5d40756..33f1c7227 100644
--- a/packages/bruno-app/src/themes/dark/dark-monochrome.js
+++ b/packages/bruno-app/src/themes/dark/dark-monochrome.js
@@ -52,6 +52,7 @@ const darkMonochromeTheme = {
   brand: colors.BRAND,
   text: colors.TEXT,
   textLink: colors.TEXT_LINK,
+  draftColor: '#8a8a8a',
   bg: colors.BG,
 
   primary: {
@@ -321,11 +322,16 @@ const darkMonochromeTheme = {
         text: colors.BLACK,
         border: colors.BRAND
       },
-      secondary: {
+      light: {
         bg: rgba(colors.TEXT, 0.08),
         text: colors.TEXT,
         border: rgba(colors.TEXT, 0.06)
       },
+      secondary: {
+        bg: colors.BG,
+        text: colors.TEXT,
+        border: colors.GRAY_5
+      },
       success: {
         bg: '#666666',
         text: '#fff',
diff --git a/packages/bruno-app/src/themes/dark/dark-pastel.js b/packages/bruno-app/src/themes/dark/dark-pastel.js
index 8b4e9c77b..40b554e89 100644
--- a/packages/bruno-app/src/themes/dark/dark-pastel.js
+++ b/packages/bruno-app/src/themes/dark/dark-pastel.js
@@ -73,6 +73,7 @@ const darkPastelTheme = {
   brand: colors.BRAND,
   text: colors.TEXT,
   textLink: colors.TEXT_LINK,
+  draftColor: '#cc7b1b',
   bg: colors.BG,
 
   primary: {
@@ -338,11 +339,16 @@ const darkPastelTheme = {
         text: colors.BLACK,
         border: colors.BRAND
       },
-      secondary: {
+      light: {
         bg: rgba(colors.BRAND, 0.08),
         text: colors.BRAND,
         border: rgba(colors.BRAND, 0.06)
       },
+      secondary: {
+        bg: colors.GRAY_4,
+        text: colors.TEXT,
+        border: colors.GRAY_5
+      },
       success: {
         bg: colors.GREEN,
         text: colors.BLACK,
diff --git a/packages/bruno-app/src/themes/dark/dark.js b/packages/bruno-app/src/themes/dark/dark.js
index 858ac1ca3..22e82844d 100644
--- a/packages/bruno-app/src/themes/dark/dark.js
+++ b/packages/bruno-app/src/themes/dark/dark.js
@@ -97,6 +97,7 @@ const darkTheme = {
   brand: palette.primary.SOLID,
   text: palette.text.BASE,
   textLink: palette.hues.BLUE,
+  draftColor: '#cc7b1b',
   bg: palette.background.BASE,
 
   primary: {
@@ -366,11 +367,16 @@ const darkTheme = {
         text: palette.utility.BLACK,
         border: palette.primary.SOLID
       },
-      secondary: {
+      light: {
         bg: rgba(palette.primary.SOLID, 0.08),
         text: palette.primary.SOLID,
         border: rgba(palette.primary.SOLID, 0.06)
       },
+      secondary: {
+        bg: palette.background.MANTLE,
+        text: palette.text.BASE,
+        border: palette.border.BORDER1
+      },
       success: {
         bg: palette.hues.GREEN,
         text: palette.utility.WHITE,
diff --git a/packages/bruno-app/src/themes/dark/nord.js b/packages/bruno-app/src/themes/dark/nord.js
index 60221478a..e24a9ddc8 100644
--- a/packages/bruno-app/src/themes/dark/nord.js
+++ b/packages/bruno-app/src/themes/dark/nord.js
@@ -72,6 +72,7 @@ const nordTheme = {
   brand: colors.BRAND,
   text: colors.TEXT,
   textLink: colors.TEXT_LINK,
+  draftColor: '#cc7b1b',
   bg: colors.BG,
 
   primary: {
@@ -337,11 +338,16 @@ const nordTheme = {
         text: colors.NORD0,
         border: colors.BRAND
       },
-      secondary: {
+      light: {
         bg: rgba(colors.BRAND, 0.08),
         text: colors.BRAND,
         border: rgba(colors.BRAND, 0.06)
       },
+      secondary: {
+        bg: colors.NORD1,
+        text: colors.NORD4,
+        border: colors.NORD3
+      },
       success: {
         bg: colors.NORD14,
         text: colors.NORD0,
diff --git a/packages/bruno-app/src/themes/dark/vscode.js b/packages/bruno-app/src/themes/dark/vscode.js
index eecf21c4f..40587b9c4 100644
--- a/packages/bruno-app/src/themes/dark/vscode.js
+++ b/packages/bruno-app/src/themes/dark/vscode.js
@@ -75,6 +75,7 @@ const vscodeDarkTheme = {
   brand: colors.BRAND,
   text: colors.TEXT,
   textLink: colors.TEXT_LINK,
+  draftColor: '#cc7b1b',
   bg: colors.EDITOR_BG,
 
   primary: {
@@ -340,11 +341,16 @@ const vscodeDarkTheme = {
         text: colors.WHITE,
         border: colors.BRAND
       },
-      secondary: {
+      light: {
         bg: rgba(colors.BRAND_TEXT, 0.08),
         text: colors.BRAND_TEXT,
         border: rgba(colors.BRAND_TEXT, 0.06)
       },
+      secondary: {
+        bg: colors.GRAY_4,
+        text: colors.WHITE,
+        border: colors.GRAY_5
+      },
       success: {
         bg: '#388a34',
         text: colors.WHITE,
diff --git a/packages/bruno-app/src/themes/light/catppuccin-latte.js b/packages/bruno-app/src/themes/light/catppuccin-latte.js
index 19c47f591..188d4964d 100644
--- a/packages/bruno-app/src/themes/light/catppuccin-latte.js
+++ b/packages/bruno-app/src/themes/light/catppuccin-latte.js
@@ -65,6 +65,7 @@ const catppuccinLatteTheme = {
   brand: colors.MAUVE,
   text: colors.TEXT,
   textLink: colors.BLUE,
+  draftColor: '#cc7b1b',
   bg: colors.BASE,
 
   primary: {
@@ -332,11 +333,16 @@ const catppuccinLatteTheme = {
         text: colors.BASE,
         border: colors.MAUVE
       },
-      secondary: {
+      light: {
         bg: rgba(colors.MAUVE, 0.08),
         text: colors.MAUVE,
         border: rgba(colors.MAUVE, 0.06)
       },
+      secondary: {
+        bg: colors.SURFACE1,
+        text: colors.TEXT,
+        border: colors.SURFACE2
+      },
       success: {
         bg: colors.GREEN,
         text: colors.BASE,
diff --git a/packages/bruno-app/src/themes/light/light-monochrome.js b/packages/bruno-app/src/themes/light/light-monochrome.js
index da19c5d57..3d543ab5c 100644
--- a/packages/bruno-app/src/themes/light/light-monochrome.js
+++ b/packages/bruno-app/src/themes/light/light-monochrome.js
@@ -53,6 +53,7 @@ const lightMonochromeTheme = {
   brand: colors.BRAND,
   text: colors.TEXT,
   textLink: colors.TEXT_LINK,
+  draftColor: '#8a8a8a',
   bg: colors.BACKGROUND,
 
   primary: {
@@ -320,11 +321,16 @@ const lightMonochromeTheme = {
         text: '#fff',
         border: colors.BRAND
       },
-      secondary: {
+      light: {
         bg: rgba(colors.TEXT, 0.08),
         text: colors.TEXT,
         border: rgba(colors.TEXT, 0.06)
       },
+      secondary: {
+        bg: '#e5e7eb',
+        text: colors.TEXT,
+        border: '#d1d5db'
+      },
       success: {
         bg: '#525252',
         text: '#fff',
diff --git a/packages/bruno-app/src/themes/light/light-pastel.js b/packages/bruno-app/src/themes/light/light-pastel.js
index 52bc933a7..61f0125f0 100644
--- a/packages/bruno-app/src/themes/light/light-pastel.js
+++ b/packages/bruno-app/src/themes/light/light-pastel.js
@@ -70,6 +70,7 @@ const lightPastelTheme = {
   brand: colors.BRAND,
   text: colors.TEXT,
   textLink: colors.TEXT_LINK,
+  draftColor: '#cc7b1b',
   bg: colors.BACKGROUND,
 
   primary: {
@@ -335,11 +336,16 @@ const lightPastelTheme = {
         text: colors.WHITE,
         border: colors.BRAND
       },
-      secondary: {
+      light: {
         bg: rgba(colors.BRAND, 0.08),
         text: colors.BRAND,
         border: rgba(colors.BRAND, 0.06)
       },
+      secondary: {
+        bg: colors.GRAY_3,
+        text: colors.TEXT,
+        border: colors.GRAY_4
+      },
       success: {
         bg: colors.GREEN,
         text: colors.WHITE,
diff --git a/packages/bruno-app/src/themes/light/light.js b/packages/bruno-app/src/themes/light/light.js
index 283d8df4c..d7fb74285 100644
--- a/packages/bruno-app/src/themes/light/light.js
+++ b/packages/bruno-app/src/themes/light/light.js
@@ -89,6 +89,7 @@ const lightTheme = {
   brand: palette.primary.SOLID,
   text: palette.text.BASE,
   textLink: palette.hues.BLUE,
+  draftColor: '#cc7b1b',
   bg: palette.background.BASE,
 
   primary: {
@@ -356,11 +357,16 @@ const lightTheme = {
         text: palette.utility.WHITE,
         border: palette.primary.SOLID
       },
-      secondary: {
+      light: {
         bg: rgba(palette.primary.SOLID, 0.08),
         text: palette.primary.SOLID,
         border: rgba(palette.primary.SOLID, 0.06)
       },
+      secondary: {
+        bg: palette.background.MANTLE,
+        border: palette.border.BORDER2,
+        text: palette.text.BASE
+      },
       success: {
         bg: palette.hues.GREEN,
         text: palette.utility.WHITE,
diff --git a/packages/bruno-app/src/themes/light/vscode.js b/packages/bruno-app/src/themes/light/vscode.js
index b7687c7a4..504e5062b 100644
--- a/packages/bruno-app/src/themes/light/vscode.js
+++ b/packages/bruno-app/src/themes/light/vscode.js
@@ -74,6 +74,7 @@ const vscodeLightTheme = {
   brand: colors.BRAND,
   text: colors.TEXT,
   textLink: colors.TEXT_LINK,
+  draftColor: '#cc7b1b',
   bg: colors.EDITOR_BG,
 
   primary: {
@@ -339,11 +340,16 @@ const vscodeLightTheme = {
         text: colors.WHITE,
         border: colors.BRAND
       },
-      secondary: {
+      light: {
         bg: rgba(colors.BRAND, 0.08),
         text: colors.BRAND,
         border: rgba(colors.BRAND, 0.06)
       },
+      secondary: {
+        bg: colors.GRAY_3,
+        text: colors.TEXT,
+        border: colors.GRAY_4
+      },
       success: {
         bg: colors.GREEN,
         text: colors.WHITE,
diff --git a/packages/bruno-app/src/themes/schema/oss.js b/packages/bruno-app/src/themes/schema/oss.js
index ace1cc476..10d9e27a2 100644
--- a/packages/bruno-app/src/themes/schema/oss.js
+++ b/packages/bruno-app/src/themes/schema/oss.js
@@ -5,6 +5,7 @@ export const ossSchema = {
     brand: { type: 'string', description: 'Primary brand color' },
     text: { type: 'string', description: 'Default text color' },
     textLink: { type: 'string', description: 'Link text color' },
+    draftColor: { type: 'string', description: 'Color for draft/unsaved indicator' },
     bg: { type: 'string', description: 'Background color' },
 
     primary: {
@@ -525,6 +526,16 @@ export const ossSchema = {
               required: ['bg', 'text', 'border'],
               additionalProperties: false
             },
+            light: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                text: { type: 'string' },
+                border: { type: 'string' }
+              },
+              required: ['bg', 'text', 'border'],
+              additionalProperties: false
+            },
             secondary: {
               type: 'object',
               properties: {
@@ -566,7 +577,7 @@ export const ossSchema = {
               additionalProperties: false
             }
           },
-          required: ['primary', 'secondary', 'success', 'warning', 'danger'],
+          required: ['primary', 'light', 'secondary', 'success', 'warning', 'danger'],
           additionalProperties: false
         }
       },
@@ -1175,7 +1186,7 @@ export const ossSchema = {
     }
   },
   required: [
-    'mode', 'brand', 'text', 'textLink', 'bg', 'primary', 'accents', 'background', 'status', 'overlay', 'font', 'shadow', 'border', 'colors', 'input',
+    'mode', 'brand', 'text', 'textLink', 'draftColor', 'bg', 'primary', 'accents', 'background', 'status', 'overlay', 'font', 'shadow', 'border', 'colors', 'input',
     'sidebar', 'dropdown', 'workspace', 'request',
     'requestTabPanel', 'notifications', 'modal', 'button', 'button2', 'tabs',
     'requestTabs', 'codemirror', 'table', 'plainGrid', 'scrollbar', 'dragAndDrop',