style: update color references to use theme.draftColor for unsaved changes across multiple components (#6641)

2026-06-25 21:55:49 +00:00 · 2026-01-02 23:32:55 +05:30
parent 475707848e
commit 33f47ca5e4
31 changed files with 184 additions and 47 deletions
--- 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 ${
--- 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};
--- 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 {
  }
--- 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'}`}
--- 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};
  }
 `;

--- 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'}`}
--- 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};
  }
 `;

--- 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'}`}
--- 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;
--- 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>
--- 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"
        >
--- 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;
--- 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 {
--- 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">
--- 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;
  }
--- 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>
--- 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}
--- 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,
--- 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,
--- 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,
--- 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',
--- 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,
--- 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,
--- 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,
--- 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,
--- 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,
--- 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',
--- 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,
--- 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,
--- 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,
--- 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',