diff --git a/package-lock.json b/package-lock.json index de5ced528..e58b7e782 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,10 +22,14 @@ "packages/bruno-requests", "packages/bruno-filestore" ], + "dependencies": { + "ajv": "^8.17.1" + }, "devDependencies": { "@eslint/compat": "^1.3.2", "@faker-js/faker": "^7.6.0", "@jest/globals": "^29.2.0", + "@opencollection/types": "~0.5.0", "@playwright/test": "^1.51.1", "@rollup/plugin-json": "^6.1.0", "@storybook/addon-webpack5-compiler-babel": "^4.0.0", @@ -20879,6 +20883,15 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/jsonschema": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/jsonschema/-/jsonschema-1.5.0.tgz", + "integrity": "sha512-K+A9hhqbn0f3pJX17Q/7H6yQfD/5OXgdrR5UE12gMXCiN9D5Xq2o5mddV2QEcX/bjla99ASsAAQUyMCCRWAEhw==", + "license": "MIT", + "engines": { + "node": "*" + } + }, "node_modules/jsprim": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz", @@ -30447,6 +30460,7 @@ "json5": "^2.2.3", "jsonc-parser": "^3.2.1", "jsonpath-plus": "^10.3.0", + "jsonschema": "^1.5.0", "know-your-http-well": "^0.5.0", "linkify-it": "^5.0.0", "lodash": "^4.17.21", @@ -35259,7 +35273,6 @@ "devDependencies": { "@babel/preset-env": "^7.22.0", "@babel/preset-typescript": "^7.22.0", - "@opencollection/types": "~0.5.0", "@rollup/plugin-commonjs": "^23.0.2", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^15.0.1", diff --git a/package.json b/package.json index ed7a4bfe2..af7cfd05d 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@eslint/compat": "^1.3.2", "@faker-js/faker": "^7.6.0", "@jest/globals": "^29.2.0", + "@opencollection/types": "~0.5.0", "@playwright/test": "^1.51.1", "@rollup/plugin-json": "^6.1.0", "@storybook/addon-webpack5-compiler-babel": "^4.0.0", @@ -61,6 +62,7 @@ "prettier:web": "npm run prettier --workspace=packages/bruno-app", "dev:electron": "npm run dev --workspace=packages/bruno-electron", "dev:electron:debug": "npm run debug --workspace=packages/bruno-electron", + "storybook": "npm run storybook --workspace=packages/bruno-app", "build:bruno-common": "npm run build --workspace=packages/bruno-common", "build:bruno-requests": "npm run build --workspace=packages/bruno-requests", "build:bruno-filestore": "npm run build --workspace=packages/bruno-filestore", @@ -96,5 +98,8 @@ "json-schema-typed": "8.0.1" } } + }, + "dependencies": { + "ajv": "^8.17.1" } } diff --git a/packages/bruno-app/package.json b/packages/bruno-app/package.json index 68642bbc0..b866aa15c 100644 --- a/packages/bruno-app/package.json +++ b/packages/bruno-app/package.json @@ -52,6 +52,7 @@ "json5": "^2.2.3", "jsonc-parser": "^3.2.1", "jsonpath-plus": "^10.3.0", + "jsonschema": "^1.5.0", "know-your-http-well": "^0.5.0", "linkify-it": "^5.0.0", "lodash": "^4.17.21", diff --git a/packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js b/packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js index c97cc72f3..028a116e3 100644 --- a/packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js +++ b/packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js @@ -246,12 +246,6 @@ const Wrapper = styled.div` color: white; } } - - .dropdown-item-active { - font-weight: 400 !important; - background-color: ${(props) => props.theme.dropdown.selectedBg} !important; - color: ${(props) => props.theme.dropdown.selectedColor} !important; - } `; export default Wrapper; diff --git a/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js b/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js index e810ef66d..202148456 100644 --- a/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js +++ b/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js @@ -19,7 +19,7 @@ const StyledWrapper = styled.div` } .selected-body-mode { - color: ${(props) => props.theme.colors.text.yellow}; + color: ${(props) => props.theme.brand}; } .dropdown-icon { diff --git a/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js index e9a9cd06f..2837918ce 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js +++ b/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js @@ -5,9 +5,9 @@ const StyledWrapper = styled.div` background-color: ${(props) => props.theme.requestTabPanel.card.bg}; .title { - border-top: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border}; - border-left: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border}; - border-right: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border}; + border-top: 1px solid ${(props) => props.theme.border.BORDER0}; + border-left: 1px solid ${(props) => props.theme.border.BORDER0}; + border-right: 1px solid ${(props) => props.theme.border.BORDER0}; border-top-left-radius: 3px; border-top-right-radius: 3px; @@ -15,8 +15,8 @@ const StyledWrapper = styled.div` .table { thead { - background-color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.bg}; - color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.color}; + color: ${(props) => props.theme.table.thead.color} !important; + background: ${(props) => props.theme.sidebar.bg}; } } } diff --git a/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js index 03aed74aa..e9f18b1b8 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js +++ b/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js @@ -8,7 +8,7 @@ const StyledWrapper = styled.div` } div.title { - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; } `; diff --git a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js index e1dcbf99a..6b2787ebf 100644 --- a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js +++ b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js @@ -7,7 +7,7 @@ const StyledWrapper = styled.div` border: none; border-bottom: solid 2px transparent; margin-right: ${(props) => props.theme.tabs.marginRight}; - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; cursor: pointer; &:focus, diff --git a/packages/bruno-app/src/components/CollectionSettings/Vars/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Vars/StyledWrapper.js index 26459a3c6..b70349101 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Vars/StyledWrapper.js +++ b/packages/bruno-app/src/components/CollectionSettings/Vars/StyledWrapper.js @@ -4,7 +4,7 @@ const StyledWrapper = styled.div` max-width: 800px; div.title { - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; } `; diff --git a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js index 8eada99ab..2fb31284f 100644 --- a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js +++ b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { rgba } from 'polished'; const Wrapper = styled.div` min-width: 160px; @@ -136,17 +137,21 @@ const Wrapper = styled.div` /* Active/selected state - applied to the currently selected item */ &.dropdown-item-active { - color: ${({ theme }) => theme.colors.text.yellow}; - background-color: ${({ theme }) => theme.dropdown.activeBg}; - font-weight: 500; + color: ${({ theme }) => theme.dropdown.selectedColor} !important; + background-color: ${({ theme }) => rgba(theme.dropdown.selectedColor, 0.07)} !important; .dropdown-icon { - color: ${({ theme }) => theme.colors.text.yellow}; + color: ${({ theme }) => theme.dropdown.selectedColor} !important; + } + + &:hover { + color: ${({ theme }) => theme.dropdown.selectedColor} !important; + background-color: ${({ theme }) => rgba(theme.dropdown.selectedColor, 0.07)} !important; } } /* Combined state - when active item is also focused */ &.dropdown-item-active.dropdown-item-focused { - background-color: ${({ theme }) => theme.dropdown.activeHoverBg}; + background-color: ${({ theme }) => rgba(theme.dropdown.selectedColor, 0.07)} !important; } /* Focus visible for accessibility */ diff --git a/packages/bruno-app/src/components/EditableTable/StyledWrapper.js b/packages/bruno-app/src/components/EditableTable/StyledWrapper.js index 1d3b7f4a7..98b307d97 100644 --- a/packages/bruno-app/src/components/EditableTable/StyledWrapper.js +++ b/packages/bruno-app/src/components/EditableTable/StyledWrapper.js @@ -9,7 +9,7 @@ const StyledWrapper = styled.div` .table-container { overflow-y: auto; border-radius: ${(props) => props.theme.border.radius.base}; - border: ${(props) => props.theme.workspace.environments.indentBorder}; + border: solid 1px ${(props) => props.theme.border.border0}; } table { @@ -31,8 +31,8 @@ const StyledWrapper = styled.div` padding: 5px 10px !important; border-top: none !important; border-left: none !important; - border-bottom: ${(props) => props.theme.workspace.environments.indentBorder}; - border-right: ${(props) => props.theme.workspace.environments.indentBorder}; + border-bottom: solid 1px ${(props) => props.theme.border.border0}; + border-right: solid 1px ${(props) => props.theme.border.border0}; vertical-align: middle; &:last-child { @@ -58,8 +58,8 @@ const StyledWrapper = styled.div` padding: 1px 10px !important; border-top: none !important; border-left: none !important; - border-bottom: ${(props) => props.theme.workspace.environments.indentBorder}; - border-right: ${(props) => props.theme.workspace.environments.indentBorder}; + border-bottom: solid 1px ${(props) => props.theme.border.border0}; + border-right: solid 1px ${(props) => props.theme.border.border0}; vertical-align: middle; &:last-child { diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js index e343e4b4c..0c74c6d9b 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js @@ -33,7 +33,7 @@ const EnvironmentListContent = ({ {environments.map((env) => (
onEnvironmentSelect(env)} data-tooltip-content={env.name} data-tooltip-hidden={env.name?.length < 90} diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js index d70c10b76..a82724469 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js @@ -65,35 +65,6 @@ const Wrapper = styled.div` overflow: hidden; } - .tippy-box .tippy-content { - padding: 0; - display: flex; - flex-direction: column; - height: 100%; - - .dropdown-item { - display: flex; - align-items: center; - padding: 0.35rem 0.6rem; - cursor: pointer; - font-size: ${(props) => props.theme.font.size.base}; - color: ${(props) => props.theme.dropdown.primaryText}; - - &:hover:not(:disabled) { - background-color: ${(props) => props.theme.dropdown.hoverBg}; - } - - &.active { - background-color: ${(props) => props.theme.dropdown.selectedBg}; - color: ${(props) => props.theme.dropdown.selectedColor}; - } - - &.no-environment { - color: ${(props) => props.theme.dropdown.mutedText}; - } - } - } - .configure-button { position: absolute; bottom: 0; @@ -109,7 +80,7 @@ const Wrapper = styled.div` } button { - color: ${(props) => props.theme.dropdown.primaryText}; + color: ${(props) => props.theme.text}; display: flex; align-items: center; justify-content: center; @@ -119,7 +90,7 @@ const Wrapper = styled.div` } .tab-button { - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; font-size: ${(props) => props.theme.font.size.base}; .tab-content-wrapper { @@ -170,7 +141,7 @@ const Wrapper = styled.div` min-height: 12.5rem; h3 { - color: ${(props) => props.theme.dropdown.primaryText}; + color: ${(props) => props.theme.text}; font-size: 1rem; font-weight: 500; margin-bottom: 0.5rem; @@ -178,7 +149,7 @@ const Wrapper = styled.div` } p { - color: ${(props) => props.theme.dropdown.primaryText}; + color: ${(props) => props.theme.text}; opacity: 0.75; font-size: ${(props) => props.theme.font.size.xs}; line-height: 1.5; @@ -194,9 +165,9 @@ const Wrapper = styled.div` } .space-y-2 > button { - border: 0.0625rem solid ${(props) => props.theme.dropdown.primaryText}; + border: 0.0625rem solid ${(props) => props.theme.text}; background: transparent; - color: ${(props) => props.theme.dropdown.primaryText}; + color: ${(props) => props.theme.text}; padding: 0.5rem 1rem; border-radius: 0.375rem; width: 100%; @@ -224,7 +195,7 @@ const Wrapper = styled.div` align-items: center; justify-content: center; padding: 2rem 1rem; - color: ${(props) => props.theme.dropdown.primaryText}; + color: ${(props) => props.theme.text}; font-size: ${(props) => props.theme.font.size.base}; line-height: 1.5; text-align: center; @@ -232,7 +203,7 @@ const Wrapper = styled.div` svg { margin: 0 auto 1rem auto; - color: ${(props) => props.theme.dropdown.primaryText}; + color: ${(props) => props.theme.text}; opacity: 0.5; } } diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js index faf196a9d..b356ab017 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js @@ -9,7 +9,7 @@ const Wrapper = styled.div` .table-container { overflow-y: auto; border-radius: 8px; - border: ${(props) => props.theme.workspace.environments.indentBorder}; + border: solid 1px ${(props) => props.theme.border.border0}; } table { @@ -46,8 +46,8 @@ const Wrapper = styled.div` td { padding: 5px 10px !important; - border-bottom: ${(props) => props.theme.workspace.environments.indentBorder}; - border-right: ${(props) => props.theme.workspace.environments.indentBorder}; + border-bottom: solid 1px ${(props) => props.theme.border.border0}; + border-right: solid 1px ${(props) => props.theme.border.border0}; &:last-child { border-right: none; @@ -64,8 +64,8 @@ const Wrapper = styled.div` } td { - border-bottom: ${(props) => props.theme.workspace.environments.indentBorder}; - border-right: ${(props) => props.theme.workspace.environments.indentBorder}; + border-bottom: solid 1px ${(props) => props.theme.border.border0}; + border-right: solid 1px ${(props) => props.theme.border.border0}; &:last-child { border-right: none; @@ -75,26 +75,6 @@ const Wrapper = styled.div` } } - .btn-add-param { - font-size: 12px; - color: ${(props) => props.theme.textLink}; - font-weight: 500; - padding: 7px 14px; - cursor: pointer; - display: inline-flex; - align-items: center; - gap: 6px; - border-radius: 6px; - border: ${(props) => props.theme.sidebar.collection.item.indentBorder}; - background: transparent; - transition: all 0.15s ease; - - &:hover { - background: ${(props) => props.theme.listItem.hoverBg}; - border-color: ${(props) => props.theme.textLink}; - } - } - .tooltip-mod { font-size: 11px !important; max-width: 200px !important; diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js index 0fa99802c..ad083f5b1 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { rgba } from 'polished'; const StyledWrapper = styled.div` display: flex; @@ -174,7 +175,7 @@ const StyledWrapper = styled.div` } &.active { - background: ${(props) => props.theme.workspace.environments.activeBg}; + background: ${(props) => props.theme.background.surface0}; color: ${(props) => props.theme.text}; } @@ -235,35 +236,34 @@ const StyledWrapper = styled.div` gap: 2px; margin-left: 4px; } + } + + .inline-action-btn { + display: flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + padding: 0; + background: transparent; + border: none; + border-radius: 4px; + cursor: pointer; + transition: all 0.15s ease; - .inline-action-btn { - display: flex; - align-items: center; - justify-content: center; - width: 22px; - height: 22px; - padding: 0; - background: transparent; - border: none; - border-radius: 4px; - cursor: pointer; - transition: all 0.15s ease; + &.save { + color: ${(props) => props.theme.colors.text.green}; - &.save { - color: ${(props) => props.theme.textLink}; - - &:hover { - background: ${(props) => props.theme.listItem.hoverBg}; - } + &:hover { + background: ${(props) => rgba(props.theme.colors.text.green, 0.1)}; } + } + + &.cancel { + color: ${(props) => props.theme.colors.text.danger}; - &.cancel { - color: ${(props) => props.theme.colors.text.muted}; - - &:hover { - background: ${(props) => props.theme.listItem.hoverBg}; - color: ${(props) => props.theme.text}; - } + &:hover { + background: ${(props) => rgba(props.theme.colors.text.danger, 0.1)}; } } } diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js index 4ddcc5586..2f0a9e1c8 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js @@ -11,7 +11,7 @@ const StyledWrapper = styled.div` display: flex; flex-direction: column; align-items: center; - justify-content: center; + padding-top: 10%; flex: 1; color: ${(props) => props.theme.colors.text.muted}; @@ -32,22 +32,6 @@ const StyledWrapper = styled.div` gap: 8px; } } - - .shared-button { - padding: 5px 10px; - font-size: 12px; - border-radius: 5px; - border: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder}; - background: ${(props) => props.theme.sidebar.bg}; - color: ${(props) => props.theme.text}; - cursor: pointer; - transition: all 0.1s ease; - - &:hover { - background: ${(props) => props.theme.listItem.hoverBg}; - border-color: ${(props) => props.theme.textLink}; - } - } `; export default StyledWrapper; diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js index 2d3492087..b04dd8405 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js @@ -5,18 +5,19 @@ import StyledWrapper from './StyledWrapper'; import { IconFileAlert } from '@tabler/icons'; import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal'; import ExportEnvironmentModal from 'components/Environments/Common/ExportEnvironmentModal'; +import Button from 'ui/Button'; const DefaultTab = ({ setTab }) => (
No Environments
- - + +
); diff --git a/packages/bruno-app/src/components/FolderSettings/Script/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/Script/StyledWrapper.js index 66ba1ed3d..6016566bc 100644 --- a/packages/bruno-app/src/components/FolderSettings/Script/StyledWrapper.js +++ b/packages/bruno-app/src/components/FolderSettings/Script/StyledWrapper.js @@ -6,7 +6,7 @@ const StyledWrapper = styled.div` } div.title { - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; } `; diff --git a/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js index 1cde03f32..37256c6cc 100644 --- a/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js +++ b/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js @@ -9,7 +9,7 @@ const StyledWrapper = styled.div` border: none; border-bottom: solid 2px transparent; margin-right: ${(props) => props.theme.tabs.marginRight}; - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; cursor: pointer; &:focus, diff --git a/packages/bruno-app/src/components/FolderSettings/Vars/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/Vars/StyledWrapper.js index 44b01b464..0c6bf2f28 100644 --- a/packages/bruno-app/src/components/FolderSettings/Vars/StyledWrapper.js +++ b/packages/bruno-app/src/components/FolderSettings/Vars/StyledWrapper.js @@ -2,7 +2,7 @@ import styled from 'styled-components'; const StyledWrapper = styled.div` div.title { - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; } `; diff --git a/packages/bruno-app/src/components/ManageWorkspace/StyledWrapper.js b/packages/bruno-app/src/components/ManageWorkspace/StyledWrapper.js index f9e80ca2e..8f9df247e 100644 --- a/packages/bruno-app/src/components/ManageWorkspace/StyledWrapper.js +++ b/packages/bruno-app/src/components/ManageWorkspace/StyledWrapper.js @@ -100,15 +100,14 @@ const StyledWrapper = styled.div` .default-badge { padding: 1px 6px; border-radius: ${(props) => props.theme.border.radius.sm}; - background: ${(props) => props.theme.sidebar.badge.bg}; - color: ${(props) => props.theme.colors.text.muted}; + background: ${(props) => props.theme.background.surface1}; + color: ${(props) => props.theme.text}; font-size: ${(props) => props.theme.font.size.xs}; - font-weight: 500; } .workspace-path { font-size: ${(props) => props.theme.font.size.xs}; - color: ${(props) => props.theme.colors.text.muted}; + color: ${(props) => props.theme.text.muted}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/packages/bruno-app/src/components/Modal/StyledWrapper.js b/packages/bruno-app/src/components/Modal/StyledWrapper.js index 5e6d44f44..343a23993 100644 --- a/packages/bruno-app/src/components/Modal/StyledWrapper.js +++ b/packages/bruno-app/src/components/Modal/StyledWrapper.js @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { rgba } from 'polished'; const Wrapper = styled.div` color: ${(props) => props.theme.text}; @@ -72,7 +73,6 @@ const Wrapper = styled.div` background-color: ${(props) => props.theme.modal.title.bg}; font-size: ${(props) => props.theme.font.size.md}; padding: 0.5rem 1rem; - font-weight: 500; border-top-left-radius: ${(props) => props.theme.border.radius.base}; border-top-right-radius: ${(props) => props.theme.border.radius.base}; @@ -98,7 +98,7 @@ const Wrapper = styled.div` &:hover { opacity: 1; - background-color: ${(props) => props.theme.modal.closeButton.hoverBg}; + background-color: ${(props) => rgba(props.theme.modal.title.color, 0.1)}; } } } diff --git a/packages/bruno-app/src/components/Preferences/Display/index.js b/packages/bruno-app/src/components/Preferences/Display/index.js index 15a16882c..0c7280446 100644 --- a/packages/bruno-app/src/components/Preferences/Display/index.js +++ b/packages/bruno-app/src/components/Preferences/Display/index.js @@ -1,17 +1,9 @@ import React from 'react'; import Font from './Font/index'; -import Theme from './Theme/index'; const Display = ({ close }) => { return (
-
- - Theme - - -
-
diff --git a/packages/bruno-app/src/components/Preferences/Themes/StyledWrapper.js b/packages/bruno-app/src/components/Preferences/Themes/StyledWrapper.js new file mode 100644 index 000000000..75f8e72b3 --- /dev/null +++ b/packages/bruno-app/src/components/Preferences/Themes/StyledWrapper.js @@ -0,0 +1,97 @@ +import styled from 'styled-components'; +import { rgba } from 'polished'; + +const StyledWrapper = styled.div` + .theme-mode-selector { + display: flex; + gap: 16px; + margin-bottom: 24px; + } + + .theme-mode-option { + display: flex; + align-items: center; + gap: 6px; + cursor: pointer; + } + + .theme-variant-section { + margin-top: 20px; + } + + .theme-variant-label { + font-size: ${(props) => props.theme.font.size.sm}; + color: ${(props) => props.theme.colors.text.muted}; + margin-bottom: 12px; + font-weight: 500; + } + + .theme-variants { + display: flex; + flex-wrap: wrap; + gap: 12px; + } + + .theme-variant-card { + display: flex; + flex-direction: column; + align-items: center; + padding: 12px 16px; + border: 2px solid ${(props) => props.theme.input.border}; + border-radius: ${(props) => props.theme.border.radius.md}; + cursor: pointer; + transition: all 0.15s ease; + min-width: 120px; + + &:hover { + border-color: ${(props) => props.theme.input.focusBorder}; + } + + &.selected { + border-color: ${(props) => props.theme.accents.primary}; + background: ${(props) => rgba(props.theme.accents.primary, 0.07)}; + } + } + + .theme-preview { + width: 60px; + height: 40px; + border-radius: ${(props) => props.theme.border.radius.sm}; + margin-bottom: 8px; + display: flex; + overflow: hidden; + } + + .theme-preview-sidebar { + width: 15px; + height: 100%; + } + + .theme-preview-main { + flex: 1; + height: 100%; + display: flex; + flex-direction: column; + padding: 4px; + gap: 3px; + } + + .theme-preview-line { + height: 4px; + border-radius: 2px; + width: 80%; + } + + .theme-variant-name { + font-size: ${(props) => props.theme.font.size.sm}; + color: ${(props) => props.theme.text}; + } + + .section-divider { + height: 1px; + background: ${(props) => props.theme.input.border}; + margin: 24px 0; + } +`; + +export default StyledWrapper; diff --git a/packages/bruno-app/src/components/Preferences/Themes/index.js b/packages/bruno-app/src/components/Preferences/Themes/index.js new file mode 100644 index 000000000..5d494ea70 --- /dev/null +++ b/packages/bruno-app/src/components/Preferences/Themes/index.js @@ -0,0 +1,130 @@ +import React from 'react'; +import { useTheme } from 'providers/Theme'; +import { getLightThemes, getDarkThemes } from 'themes/index'; +import StyledWrapper from './StyledWrapper'; + +const ThemePreview = ({ themeId, isDark }) => { + const bgColor = isDark ? '#1e1e1e' : '#ffffff'; + const sidebarColor = isDark ? '#252526' : '#f8f8f8'; + const lineColor = isDark ? '#3d3d3d' : '#e5e5e5'; + + return ( +
+
+
+
+
+
+
+
+ ); +}; + +const ThemeVariantCard = ({ theme, isSelected, onClick }) => { + const isDark = theme.mode === 'dark'; + + return ( +
+ + {theme.name} +
+ ); +}; + +const Themes = () => { + const { + storedTheme, + setStoredTheme, + themeVariantLight, + setThemeVariantLight, + themeVariantDark, + setThemeVariantDark + } = useTheme(); + + const lightThemes = getLightThemes(); + const darkThemes = getDarkThemes(); + + const handleModeChange = (mode) => { + setStoredTheme(mode); + }; + + const renderThemeVariants = (themes, selectedVariant, onSelect, label) => ( +
+
{label}
+
+ {themes.map((theme) => ( + onSelect(theme.id)} + /> + ))} +
+
+ ); + + return ( + +
+
+
Appearance
+
+ + + +
+
+ + {storedTheme === 'light' && ( + <> + {renderThemeVariants(lightThemes, themeVariantLight, setThemeVariantLight, 'Light Theme')} + + )} + + {storedTheme === 'dark' && ( + <> + {renderThemeVariants(darkThemes, themeVariantDark, setThemeVariantDark, 'Dark Theme')} + + )} + + {storedTheme === 'system' && ( + <> + {renderThemeVariants(lightThemes, themeVariantLight, setThemeVariantLight, 'Light Theme')} +
+ {renderThemeVariants(darkThemes, themeVariantDark, setThemeVariantDark, 'Dark Theme')} + + )} +
+ + ); +}; + +export default Themes; diff --git a/packages/bruno-app/src/components/Preferences/index.js b/packages/bruno-app/src/components/Preferences/index.js index 2814ed855..b8f365f5d 100644 --- a/packages/bruno-app/src/components/Preferences/index.js +++ b/packages/bruno-app/src/components/Preferences/index.js @@ -4,6 +4,7 @@ import React, { useState } from 'react'; import Support from './Support'; import General from './General'; +import Themes from './Themes'; import Proxy from './ProxySettings'; import Display from './Display'; import Keybindings from './Keybindings'; @@ -26,6 +27,10 @@ const Preferences = ({ onClose }) => { return ; } + case 'themes': { + return ; + } + case 'proxy': { return ; } @@ -56,6 +61,9 @@ const Preferences = ({ onClose }) => {
setTab('general')}> General
+
setTab('themes')}> + Themes +
setTab('display')}> Display
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcBody/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GrpcBody/StyledWrapper.js index 6f529e7ac..3161c3afd 100644 --- a/packages/bruno-app/src/components/RequestPane/GrpcBody/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/GrpcBody/StyledWrapper.js @@ -4,55 +4,124 @@ const Wrapper = styled.div` display: flex; flex-direction: column; width: 100%; - flex: 1; - /* height: 100%; */ + height: 100%; position: relative; - .grpc-message-header { - .font-medium { - color: ${(props) => props.theme.text}; + .messages-container { + flex: 1; + display: flex; + flex-direction: column; + + &.single { + height: 100%; } - - button { + + &.multi { + overflow-y: auto; + padding-bottom: 48px; + } + } + + .message-container { + display: flex; + flex-direction: column; + + &.single { + height: 100%; + + .editor-container { + height: calc(100% - 32px); + } + } + + &:not(.single) { + min-height: 240px; + margin-bottom: 8px; + + &.last { + margin-bottom: 0; + } + } + } + + .message-toolbar { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 4px; + padding: 4px 0px; + height: 32px; + flex-shrink: 0; + + .message-label { + font-size: ${(props) => props.theme.font.size.sm}; + color: ${(props) => props.theme.colors.text.subtext1}; + margin-right: auto; + } + + .toolbar-actions { + display: flex; + align-items: center; + gap: 2px; + } + + .toolbar-btn { display: flex; align-items: center; justify-content: center; - transition: all 0.2s ease; - + width: 28px; + height: 28px; + border-radius: 4px; + color: ${(props) => props.theme.colors.text.muted}; + transition: all 0.15s ease; + &:hover { - transform: scale(1.1); + background-color: ${(props) => props.theme.dropdown.hoverBg}; + color: ${(props) => props.theme.text}; } - - &:active { - transform: scale(0.95); + + &.disabled { + opacity: 0.4; + cursor: not-allowed; + + &:hover { + background-color: transparent; + color: ${(props) => props.theme.colors.text.muted}; + } + } + + &.delete:hover { + color: ${(props) => props.theme.colors.text.danger}; } } } - #grpc-messages-container { - /* height: 100%; */ - position: relative; + .editor-container { + flex: 1; + min-height: 0; } - - .add-message-btn-container { + + .empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + gap: 12px; + + p { + color: ${(props) => props.theme.colors.text.muted}; + font-size: 13px; + } + } + + .add-message-footer { position: absolute; bottom: 0; left: 0; right: 0; - padding-top: 8px; - background: ${(props) => props.theme.bg || '#fff'}; - z-index: 15; - border-top: 1px solid ${(props) => props.theme.border || 'rgba(0, 0, 0, 0.1)'}; - - .add-message-btn { - width: 100%; - } - } - - .CodeMirror { - border-top: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; + padding: 8px; + background: ${(props) => props.theme.bg}; } `; diff --git a/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js b/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js index 4d0bcff63..47845111d 100644 --- a/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js +++ b/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef } from 'react'; +import React, { useEffect, useRef } from 'react'; import { get } from 'lodash'; import { useDispatch, useSelector } from 'react-redux'; import { useTheme } from 'providers/Theme'; @@ -8,37 +8,85 @@ import { sendGrpcMessage, generateGrpcSampleMessage } from 'utils/network/index' import useLocalStorage from 'hooks/useLocalStorage'; import CodeEditor from 'components/CodeEditor/index'; +import Button from 'ui/Button'; import StyledWrapper from './StyledWrapper'; -import { IconSend, IconRefresh, IconWand, IconPlus, IconTrash, IconChevronDown, IconChevronUp } from '@tabler/icons'; +import { IconSend, IconRefresh, IconWand, IconPlus, IconTrash } from '@tabler/icons'; import ToolHint from 'components/ToolHint/index'; import { toastError } from 'utils/common/error'; import toast from 'react-hot-toast'; import { getAbsoluteFilePath } from 'utils/common/path'; import { prettifyJsonString } from 'utils/common/index'; -const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCollapsed, onToggleCollapse, handleRun, canClientSendMultipleMessages }) => { +const MessageToolbar = ({ + index, + canClientStream, + isConnectionActive, + onSend, + onRegenerateMessage, + onPrettify, + onDeleteMessage, + showDelete +}) => { + return ( +
+ Message {index + 1} +
+ + + + + + + + + {canClientStream && ( + + + + )} + + {showDelete && ( + + + + )} +
+
+ ); +}; + +const SingleGrpcMessage = ({ message, item, collection, index, methodType, handleRun, canClientSendMultipleMessages, isLast }) => { const dispatch = useDispatch(); - const { displayedTheme, theme } = useTheme(); + const { displayedTheme } = useTheme(); const preferences = useSelector((state) => state.app.preferences); const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body'); const isConnectionActive = useSelector((state) => state.collections.activeConnections.includes(item.uid)); - // Access gRPC method metadata from local storage const [reflectionCache] = useLocalStorage('bruno.grpc.reflectionCache', {}); const [protofileCache] = useLocalStorage('bruno.grpc.protofileCache', {}); const canClientStream = methodType === 'client-streaming' || methodType === 'bidi-streaming'; - const { name, content } = message; const onEdit = (value) => { const currentMessages = [...(body.grpc || [])]; - currentMessages[index] = { name: name ? name : `message ${index + 1}`, content: value }; - dispatch(updateRequestBody({ content: currentMessages, itemUid: item.uid, @@ -53,60 +101,51 @@ const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCol console.error('Error sending message:', error); } }; + const onSave = () => dispatch(saveRequest(item.uid, collection.uid)); const onRegenerateMessage = async () => { try { const methodPath = item.draft?.request?.method || item.request?.method; - if (!methodPath) { toastError(new Error('Method path not found in request')); return; } - // Get the URL and protoPath to determine which cache to use const url = item.draft?.request?.url || item.request?.url; const protoPath = item.draft?.request?.protoPath || item.request?.protoPath; - // Find the method metadata from the appropriate cache let methodMetadata = null; if (protoPath) { - // Use protofile cache if protoPath is available const absolutePath = getAbsoluteFilePath(collection.pathname, protoPath); const cachedMethods = protofileCache[absolutePath]; if (cachedMethods) { methodMetadata = cachedMethods.find((method) => method.path === methodPath); } } else if (url) { - // Use reflection cache if no protoPath (reflection mode) const cachedMethods = reflectionCache[url]; if (cachedMethods) { methodMetadata = cachedMethods.find((method) => method.path === methodPath); } } - const result = await generateGrpcSampleMessage(methodPath, - content, - { - arraySize: 2, - methodMetadata // Pass the method metadata to the function - }); + const result = await generateGrpcSampleMessage(methodPath, content, { + arraySize: 2, + methodMetadata + }); if (result.success) { const currentMessages = [...(body.grpc || [])]; - currentMessages[index] = { name: name ? name : `message ${index + 1}`, content: result.message }; - dispatch(updateRequestBody({ content: currentMessages, itemUid: item.uid, collectionUid: collection.uid })); - - toast.success('Sample message generated successfully!'); + toast.success('Sample message generated'); } else { toastError(new Error(result.error || 'Failed to generate sample message')); } @@ -118,9 +157,7 @@ const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCol const onDeleteMessage = () => { const currentMessages = [...(body.grpc || [])]; - currentMessages.splice(index, 1); - dispatch(updateRequestBody({ content: currentMessages, itemUid: item.uid, @@ -131,7 +168,6 @@ const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCol const onPrettify = () => { try { const prettyBodyJson = prettifyJsonString(content); - const currentMessages = [...(body.grpc || [])]; currentMessages[index] = { name: name ? name : `message ${index + 1}`, @@ -147,101 +183,45 @@ const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCol } }; - const getContainerHeight = (canClientSendMultipleMessages && body.grpc.length > 1) ? `${isCollapsed ? '' : 'h-80'}` : 'h-full'; + const isSingleMessage = !canClientSendMultipleMessages || body.grpc.length === 1; return ( -
-
-
- {isCollapsed - ? - : } - {`Message ${canClientStream ? index + 1 : ''}`} -
-
e.stopPropagation()}> - - - - - - - - - {canClientStream && ( - - - - )} - - {index > 0 && ( - - - - )} -
+
+ 0} + /> +
+
- - {!isCollapsed && ( -
- -
- )}
); }; const GrpcBody = ({ item, collection, handleRun }) => { - const preferences = useSelector((state) => state.app.preferences); - const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical'; const dispatch = useDispatch(); - const [collapsedMessages, setCollapsedMessages] = useState([]); const messagesContainerRef = useRef(null); const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body'); - const methodType = item.draft ? get(item, 'draft.request.methodType') : get(item, 'request.methodType'); const canClientSendMultipleMessages = methodType === 'client-streaming' || methodType === 'bidi-streaming'; - // Auto-scroll to the latest message when messages are added useEffect(() => { if (messagesContainerRef.current && body?.grpc?.length > 0) { const container = messagesContainerRef.current; @@ -249,26 +229,12 @@ const GrpcBody = ({ item, collection, handleRun }) => { } }, [body?.grpc?.length]); - const toggleMessageCollapse = (index) => { - setCollapsedMessages((prev) => { - if (prev.includes(index)) { - return prev.filter((i) => i !== index); - } else { - return [...prev, index]; - } - }); - }; - const addNewMessage = () => { - const currentMessages = Array.isArray(body.grpc) - ? [...body.grpc] - : []; - + const currentMessages = Array.isArray(body.grpc) ? [...body.grpc] : []; currentMessages.push({ name: `message ${currentMessages.length + 1}`, content: '{}' }); - dispatch(updateRequestBody({ content: currentMessages, itemUid: item.uid, @@ -278,61 +244,60 @@ const GrpcBody = ({ item, collection, handleRun }) => { if (!body?.grpc || !Array.isArray(body.grpc)) { return ( - -
-

No gRPC messages available

- - - + +
+

No gRPC messages available

+
); } + const messagesToShow = body.grpc.filter((_, index) => canClientSendMultipleMessages || index === 0); + return ( - +
1 ? 'multi' : 'single'}`} > - {body.grpc - .filter((_, index) => canClientSendMultipleMessages || index === 0) - .map((message, index) => ( - toggleMessageCollapse(index)} - handleRun={handleRun} - canClientSendMultipleMessages={canClientSendMultipleMessages} - /> - ))} + {messagesToShow.map((message, index) => ( + + ))}
{canClientSendMultipleMessages && ( -
- - - +
+
)} diff --git a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js index 065c99330..a5d389266 100644 --- a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js @@ -49,7 +49,7 @@ const Wrapper = styled.div` .infotip-text { visibility: hidden; width: auto; - background-color: ${(props) => props.theme.requestTabs.active.bg}; + background-color: ${(props) => props.theme.background.surface2}; color: ${(props) => props.theme.text}; text-align: center; border-radius: 4px; @@ -72,7 +72,7 @@ const Wrapper = styled.div` margin-left: -4px; border-width: 4px; border-style: solid; - border-color: ${(props) => props.theme.requestTabs.active.bg} transparent transparent transparent; + border-color: ${(props) => props.theme.background.surface2} transparent transparent transparent; } .shortcut { diff --git a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js index 5b2fece89..30b37842d 100644 --- a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js +++ b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js @@ -348,7 +348,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => { @@ -367,7 +367,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => { Generate grpcurl command
@@ -383,7 +383,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => { @@ -394,7 +394,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => { {isConnectionActive && isStreamingMethod && (
- + Cancel
@@ -403,7 +403,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => {
@@ -420,7 +420,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => { handleRun(e); }} > - +
)}
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js index efcd744e2..eb061b83b 100644 --- a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js @@ -7,7 +7,7 @@ const StyledWrapper = styled.div` border: none; border-bottom: solid 2px transparent; margin-right: ${(props) => props.theme.tabs.marginRight}; - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; cursor: pointer; &:focus, diff --git a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js index 618575a97..38ef5cc3d 100644 --- a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js @@ -2,7 +2,7 @@ import styled from 'styled-components'; const Wrapper = styled.div` div.title { - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; } table { width: 100%; diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js index ae1b0557c..d77bfad69 100644 --- a/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js @@ -49,7 +49,7 @@ const Wrapper = styled.div` .infotiptext { visibility: hidden; width: auto; - background-color: ${(props) => props.theme.requestTabs.active.bg}; + background-color: ${(props) => props.theme.background.surface2}; color: ${(props) => props.theme.text}; text-align: center; border-radius: 4px; @@ -72,7 +72,7 @@ const Wrapper = styled.div` margin-left: -4px; border-width: 4px; border-style: solid; - border-color: ${(props) => props.theme.requestTabs.active.bg} transparent transparent transparent; + border-color: ${(props) => props.theme.background.surface2} transparent transparent transparent; } .shortcut { diff --git a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js index d81dd2f4c..d21b5e234 100644 --- a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js @@ -9,7 +9,7 @@ const Wrapper = styled.div` border-radius: 3px; .selected-body-mode { - color: ${(props) => props.theme.colors.text.yellow}; + color: ${(props) => props.theme.brand}; } } diff --git a/packages/bruno-app/src/components/RequestPane/Script/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Script/StyledWrapper.js index 66ba1ed3d..6016566bc 100644 --- a/packages/bruno-app/src/components/RequestPane/Script/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/Script/StyledWrapper.js @@ -6,7 +6,7 @@ const StyledWrapper = styled.div` } div.title { - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; } `; diff --git a/packages/bruno-app/src/components/RequestPane/Vars/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Vars/StyledWrapper.js index 44b01b464..0c6bf2f28 100644 --- a/packages/bruno-app/src/components/RequestPane/Vars/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/Vars/StyledWrapper.js @@ -2,7 +2,7 @@ import styled from 'styled-components'; const StyledWrapper = styled.div` div.title { - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; } `; diff --git a/packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js index 44afba38d..b39bc94dc 100644 --- a/packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js @@ -7,7 +7,7 @@ const StyledWrapper = styled.div` border: none; border-bottom: solid 2px transparent; margin-right: ${(props) => props.theme.tabs.marginRight}; - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; cursor: pointer; &:focus, diff --git a/packages/bruno-app/src/components/RequestPane/WsBody/BodyMode/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/WsBody/BodyMode/StyledWrapper.js index 983ab3cf7..88f661634 100644 --- a/packages/bruno-app/src/components/RequestPane/WsBody/BodyMode/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/WsBody/BodyMode/StyledWrapper.js @@ -17,13 +17,13 @@ const Wrapper = styled.div` } .selected-body-mode { - color: ${(props) => props.theme.colors.text.yellow}; + color: ${(props) => props.theme.brand}; } } .caret { - color: rgb(140, 140, 140); - fill: rgb(140 140 140); + color: ${(props) => props.theme.colors.text.muted}; + fill: ${(props) => props.theme.colors.text.muted}; } `; diff --git a/packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/StyledWrapper.js new file mode 100644 index 000000000..a161765e6 --- /dev/null +++ b/packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/StyledWrapper.js @@ -0,0 +1,72 @@ +import styled from 'styled-components'; + +const StyledWrapper = styled.div` + display: flex; + flex-direction: column; + + &.single { + height: 100%; + + .editor-container { + height: calc(100% - 32px); + } + } + + &:not(.single) { + min-height: 240px; + margin-bottom: 8px; + + &.last { + margin-bottom: 0; + } + } + + .message-toolbar { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 4px; + padding: 4px 0px; + height: 32px; + flex-shrink: 0; + + .message-label { + font-size: ${(props) => props.theme.font.size.sm}; + color: ${(props) => props.theme.colors.text.subtext1}; + margin-right: auto; + } + + .toolbar-actions { + display: flex; + align-items: center; + gap: 2px; + } + + .toolbar-btn { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: 4px; + color: ${(props) => props.theme.colors.text.muted}; + transition: all 0.15s ease; + + &:hover { + background-color: ${(props) => props.theme.dropdown.hoverBg}; + color: ${(props) => props.theme.text}; + } + + &.delete:hover { + color: ${(props) => props.theme.colors.text.danger}; + } + } + } + + .editor-container { + flex: 1; + min-height: 0; + } +`; + +export default StyledWrapper; diff --git a/packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/index.js b/packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/index.js index 2d56cf46a..275665dc0 100644 --- a/packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/index.js +++ b/packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/index.js @@ -1,4 +1,4 @@ -import { IconChevronDown, IconChevronUp, IconTrash, IconWand } from '@tabler/icons'; +import { IconTrash, IconWand } from '@tabler/icons'; import CodeEditor from 'components/CodeEditor/index'; import ToolHint from 'components/ToolHint/index'; import { get } from 'lodash'; @@ -13,6 +13,7 @@ import { toastError } from 'utils/common/error'; import { prettifyJsonString } from 'utils/common/index'; import xmlFormat from 'xml-formatter'; import WSRequestBodyMode from '../BodyMode/index'; +import StyledWrapper from './StyledWrapper'; export const TYPE_BY_DECODER = { base64: 'binary', @@ -28,10 +29,9 @@ export const SingleWSMessage = ({ collection, index, methodType, - isCollapsed, - onToggleCollapse, handleRun, - canClientSendMultipleMessages + canClientSendMultipleMessages, + isLast }) => { const dispatch = useDispatch(); const { displayedTheme } = useTheme(); @@ -88,9 +88,6 @@ export const SingleWSMessage = ({ })); }; - const getContainerHeight - = canClientSendMultipleMessages && body.ws.length > 1 ? `${isCollapsed ? '' : 'h-80'}` : 'h-full'; - let codeType = messageFormat; if (TYPE_BY_DECODER[type]) { codeType = TYPE_BY_DECODER[type]; @@ -144,60 +141,44 @@ export const SingleWSMessage = ({ } }; + const isSingleMessage = !canClientSendMultipleMessages || body.ws.length === 1; + return ( -
-
-
- {isCollapsed ? ( - - ) : ( - - )} -
-
e.stopPropagation()}> + +
+ Message {index + 1} +
- - {index > 0 && ( - - )}
- {!isCollapsed && ( -
- -
- )} -
+
+ +
+ ); }; diff --git a/packages/bruno-app/src/components/RequestPane/WsBody/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/WsBody/StyledWrapper.js index 49966056e..b0ae614d9 100644 --- a/packages/bruno-app/src/components/RequestPane/WsBody/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/WsBody/StyledWrapper.js @@ -4,49 +4,45 @@ const Wrapper = styled.div` display: flex; flex-direction: column; width: 100%; - flex: 1; + height: 100%; position: relative; - .ws-message-header { - .font-medium { - color: ${(props) => props.theme.text}; + .messages-container { + flex: 1; + display: flex; + flex-direction: column; + + &.single { + height: 100%; } - - button { - display: flex; - align-items: center; - justify-content: center; - transition: all 0.2s ease; - - &:hover { - transform: scale(1.1); - } - - &:active { - transform: scale(0.95); - } + + &.multi { + overflow-y: auto; + padding-bottom: 48px; } } - .add-message-btn-container { + .empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + gap: 12px; + + p { + color: ${(props) => props.theme.colors.text.muted}; + font-size: 13px; + } + } + + .add-message-footer { position: absolute; bottom: 0; left: 0; right: 0; - padding-top: 8px; - background: ${(props) => props.theme.bg || '#fff'}; - z-index: 15; - border-top: 1px solid ${(props) => props.theme.border || 'rgba(0, 0, 0, 0.1)'}; - - .add-message-btn { - width: 100%; - } - } - - .CodeMirror { - border-top: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; + padding: 8px; + background: ${(props) => props.theme.bg}; } `; diff --git a/packages/bruno-app/src/components/RequestPane/WsBody/index.js b/packages/bruno-app/src/components/RequestPane/WsBody/index.js index 22bc91594..67ca5abc8 100644 --- a/packages/bruno-app/src/components/RequestPane/WsBody/index.js +++ b/packages/bruno-app/src/components/RequestPane/WsBody/index.js @@ -1,17 +1,14 @@ import { get } from 'lodash'; import { updateRequestBody } from 'providers/ReduxStore/slices/collections'; import { IconPlus } from '@tabler/icons'; -import React, { useEffect, useRef, useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import ToolHint from 'components/ToolHint/index'; +import React, { useEffect, useRef } from 'react'; +import { useDispatch } from 'react-redux'; +import Button from 'ui/Button'; import StyledWrapper from './StyledWrapper'; import { SingleWSMessage } from './SingleWSMessage/index'; const WSBody = ({ item, collection, handleRun }) => { - const preferences = useSelector((state) => state.app.preferences); - const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical'; const dispatch = useDispatch(); - const [collapsedMessages, setCollapsedMessages] = useState([]); const messagesContainerRef = useRef(null); const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body'); @@ -26,16 +23,6 @@ const WSBody = ({ item, collection, handleRun }) => { } }, [body?.ws?.length]); - const toggleMessageCollapse = (index) => { - setCollapsedMessages((prev) => { - if (prev.includes(index)) { - return prev.filter((i) => i !== index); - } else { - return [...prev, index]; - } - }); - }; - const addNewMessage = () => { const currentMessages = Array.isArray(body.ws) ? [...body.ws] : []; @@ -53,60 +40,58 @@ const WSBody = ({ item, collection, handleRun }) => { if (!body?.ws || !Array.isArray(body.ws)) { return ( - -
-

No WebSocket messages available

- - - + +
+

No WebSocket messages available

+
); } + const messagesToShow = body.ws.filter((_, index) => canClientSendMultipleMessages || index === 0); + return ( - +
1 ? 'multi' : 'single'}`} > - {body.ws - .filter((_, index) => canClientSendMultipleMessages || index === 0) - .map((message, index) => ( - toggleMessageCollapse(index)} - handleRun={handleRun} - canClientSendMultipleMessages={canClientSendMultipleMessages} - /> - ))} + {messagesToShow.map((message, index) => ( + + ))}
{canClientSendMultipleMessages && ( -
- - - +
+
)} diff --git a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.js index 9383b47ef..af596a1ef 100644 --- a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.js @@ -62,7 +62,7 @@ const StyledWrapper = styled.div` .infotip-text { visibility: hidden; width: auto; - background-color: ${(props) => props.theme.requestTabs.active.bg}; + background-color: ${(props) => props.theme.background.surface2}; color: ${(props) => props.theme.text}; text-align: center; border-radius: 4px; @@ -85,7 +85,7 @@ const StyledWrapper = styled.div` margin-left: -4px; border-width: 4px; border-style: solid; - border-color: ${(props) => props.theme.requestTabs.active.bg} transparent transparent transparent; + border-color: ${(props) => props.theme.background.surface2} transparent transparent transparent; } .shortcut { @@ -95,7 +95,7 @@ const StyledWrapper = styled.div` .connection-controls { .infotip { &:hover { - background-color: ${(props) => props.theme.requestTabPanel.url.errorHoverBg}; + background-color: color-mix(in srgb, ${(props) => props.theme.colors.text.danger} 6%, transparent); } } } diff --git a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js index 61f550f3c..b18e83b2b 100644 --- a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js +++ b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js @@ -150,7 +150,7 @@ const WsQueryUrl = ({ item, collection, handleRun }) => { @@ -164,7 +164,7 @@ const WsQueryUrl = ({ item, collection, handleRun }) => { Close Connection @@ -181,7 +181,7 @@ const WsQueryUrl = ({ item, collection, handleRun }) => { })} color={theme.colors.text.green} strokeWidth={1.5} - size={22} + size={20} /> Connect
@@ -189,7 +189,7 @@ const WsQueryUrl = ({ item, collection, handleRun }) => { )}
- +
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js index 2ad6f9cd7..829a865cc 100644 --- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js +++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js @@ -7,8 +7,6 @@ import { clearGlobalEnvironmentDraft } from 'providers/ReduxStore/slices/global- import { saveGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments'; import { useTheme } from 'providers/Theme'; import { useDispatch, useSelector } from 'react-redux'; -import darkTheme from 'themes/dark'; -import lightTheme from 'themes/light'; import { findItemInCollection, hasRequestChanges } from 'utils/collections'; import ConfirmRequestClose from './ConfirmRequestClose'; import ConfirmCollectionClose from './ConfirmCollectionClose'; @@ -28,8 +26,7 @@ import toast from 'react-hot-toast'; const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUid, hasOverflow, setHasOverflow, dropdownContainerRef }) => { const dispatch = useDispatch(); - const { storedTheme } = useTheme(); - const theme = storedTheme === 'dark' ? darkTheme : lightTheme; + const { theme } = useTheme(); const tabNameRef = useRef(null); const tabLabelRef = useRef(null); const lastOverflowStateRef = useRef(null); diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js index 95804cba2..c0d034289 100644 --- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js @@ -26,7 +26,7 @@ const StyledWrapper = styled.div` } .selected-body-mode { - color: ${(props) => props.theme.colors.text.yellow}; + color: ${(props) => props.theme.brand}; } &.cursor-default { diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js index cf5a4d068..6fd4c499f 100644 --- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js @@ -18,7 +18,7 @@ const StyledWrapper = styled.div` } .selected-body-mode { - color: ${(props) => props.theme.colors.text.yellow}; + color: ${(props) => props.theme.brand}; } } diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js index 46a0b9a78..fc2574c88 100644 --- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js @@ -61,7 +61,7 @@ const StyledWrapper = styled.div` cursor: pointer; transition: background-color 0.15s ease; font-size: ${(props) => props.theme.font.size.base}; - color: ${(props) => props.theme.dropdown.primaryText}; + color: ${(props) => props.theme.text}; width: 100%; box-sizing: border-box; diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js index a4b6a0ab7..f160816c3 100644 --- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js @@ -7,7 +7,7 @@ const StyledWrapper = styled.div` border: none; border-bottom: solid 2px transparent; margin-right: ${(props) => props.theme.tabs.marginRight}; - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; cursor: pointer; &:focus, diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js index a6942c2df..3b104dee9 100644 --- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js @@ -1,42 +1,39 @@ import styled from 'styled-components'; const StyledWrapper = styled.div` - border-left: 4px solid ${(props) => props.theme.colors.text.danger}; - border-top: 1px solid transparent; - border-right: 1px solid transparent; - border-bottom: 1px solid transparent; - border-radius: 0.375rem; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - max-height: 200px; - min-height: 70px; + border-left: 3px solid ${(props) => props.theme.colors.text.danger}; + border-radius: ${(props) => props.theme.border.radius.sm}; + max-height: 160px; overflow-y: auto; - background-color: ${(props) => (props.theme.bg === '#1e1e1e' ? 'rgba(40, 40, 40, 0.5)' : 'rgba(250, 250, 250, 0.9)')}; + background-color: color-mix(in srgb, ${(props) => props.theme.colors.text.danger} 6%, transparent); + margin-bottom: 8px; .close-button { - opacity: 0.7; - transition: opacity 0.2s; + opacity: 0.6; + transition: opacity 0.15s ease; &:hover { opacity: 1; } svg { - color: ${(props) => props.theme.text}; + color: ${(props) => props.theme.colors.text.muted}; } } .error-title { + font-size: ${(props) => props.theme.font.size.sm}; font-weight: 500; - margin-bottom: 0.375rem; + margin-bottom: 4px; color: ${(props) => props.theme.colors.text.danger}; } .error-message { font-family: monospace; font-size: ${(props) => props.theme.font.size.xs}; - line-height: 1.25rem; + line-height: 1.4; white-space: pre-wrap; - word-break: break-all; + word-break: break-word; color: ${(props) => props.theme.text}; } `; diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/index.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/index.js index d2376401d..48c607dce 100644 --- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/index.js +++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/index.js @@ -6,7 +6,7 @@ const GrpcError = ({ error, onClose }) => { if (!error) return null; return ( - +
gRPC Server Error
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js index b374ef9fd..bd0e0e445 100644 --- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js @@ -3,94 +3,79 @@ import styled from 'styled-components'; const StyledWrapper = styled.div` height: 100%; overflow: hidden; - background: ${(props) => props.theme.bg}; - border-radius: 4px; - .CodeMirror { - height: 100%; - font-family: ${(props) => (props.font === 'default' ? 'monospace' : props.font)}; - font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')}; + .empty-state { + color: ${(props) => props.theme.colors.text.muted}; + padding: 1rem; } - .accordion-header { - background-color: ${(props) => props.theme.requestTabPanel.card.bg}; + .responses-container { + height: 100%; + + &.single { + height: 100%; + } + + &.multi { + overflow-y: auto; + } + } + + .messages-list { + display: flex; + flex-direction: column; + } + + .message-item { + display: flex; + flex-direction: column; + + &:not(.last) { + border-bottom: 1px solid ${(props) => props.theme.border.border1}; + } + } + + .message-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 0; + cursor: pointer; + user-select: none; &:hover { - background-color: ${(props) => props.theme.plainGrid.hoverBg}; - } - - &.open { - background-color: ${(props) => props.theme.plainGrid.hoverBg}; - } - } - - .error-header { - background-color: ${(props) => (props.theme.bg === '#1e1e1e' ? 'rgba(185, 28, 28, 0.1)' : '#fee2e2')}; - } - - .error-text { - color: ${(props) => props.theme.colors.text.danger}; - } - - div.tabs { - div.tab { - padding: 6px 0px; - border: none; - border-bottom: solid 2px transparent; - margin-right: ${(props) => props.theme.tabs.marginRight}; - color: var(--color-tab-inactive); - cursor: pointer; - - &:focus, - &:active, - &:focus-within, - &:focus-visible, - &:target { - outline: none !important; - box-shadow: none !important; - } - - &.active { - font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important; - color: ${(props) => props.theme.tabs.active.color} !important; - border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important; + .toggle-btn { + color: ${(props) => props.theme.text}; } } } - .stream-status { - display: inline-flex; + .message-label { + font-size: ${(props) => props.theme.font.size.sm}; + color: ${(props) => props.theme.colors.text.subtext1}; + } + + .latest-badge { + margin-left: 8px; + padding: 2px 6px; + font-size: ${(props) => props.theme.font.size.xs}; + font-weight: 500; + color: ${(props) => props.theme.colors.text.green}; + background-color: color-mix(in srgb, ${(props) => props.theme.colors.text.green} 10%, transparent); + border-radius: ${(props) => props.theme.border.radius.sm}; + } + + .toggle-btn { + display: flex; align-items: center; - - &.complete { - color: ${(props) => props.theme.colors.text.green}; - } - - &.cancelled { - color: ${(props) => props.theme.colors.text.danger}; - } - - &.streaming { - color: ${(props) => props.theme.colors.text.blue}; - } + justify-content: center; + color: ${(props) => props.theme.colors.text.muted}; + transition: color 0.15s ease; } - .message-counter { - display: inline-flex; - align-items: center; - margin-left: 10px; - } - - .response-list { - max-height: 500px; - overflow-y: auto; - } - - .response-message { + .message-content { + height: 240px; margin-bottom: 8px; - padding: 8px; - border-radius: 4px; - background-color: var(--color-panel-background); } `; diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/index.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/index.js index 6d6c646e3..b36c132e2 100644 --- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/index.js +++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/index.js @@ -1,46 +1,31 @@ import React, { useState, useEffect } from 'react'; -import Accordion from 'components/Accordion'; import CodeEditor from 'components/CodeEditor'; import { get } from 'lodash'; import { useSelector } from 'react-redux'; import { useTheme } from 'providers/Theme/index'; import StyledWrapper from './StyledWrapper'; -import { formatISO9075 } from 'date-fns'; import GrpcError from '../GrpcError'; +import { IconChevronDown, IconChevronUp } from '@tabler/icons'; const GrpcQueryResult = ({ item, collection }) => { const { displayedTheme } = useTheme(); const preferences = useSelector((state) => state.app.preferences); const [showErrorMessage, setShowErrorMessage] = useState(true); + const [expandedIndex, setExpandedIndex] = useState(0); const response = item.response || {}; const responsesList = response?.responses || []; - // Reverse the responses list to show the most recent at the top const reversedResponsesList = [...responsesList].reverse(); const hasError = response.isError; const hasResponses = responsesList.length > 0; const errorMessage = response.error; - // Reset error visibility when a new response is received useEffect(() => { if (hasError) { setShowErrorMessage(true); } }, [response, hasError]); - // Format a timestamp to a human-readable format - const formatTimestamp = (timestamp) => { - if (!timestamp) return 'Unknown time'; - - try { - const date = new Date(timestamp); - return formatISO9075(date); - } catch (e) { - return 'Invalid time'; - } - }; - - // Format JSON for display const formatJSON = (data) => { try { if (typeof data === 'string') { @@ -55,7 +40,7 @@ const GrpcQueryResult = ({ item, collection }) => { if (!hasResponses && !hasError) { return ( -
No messages received
+
No messages received
 ); } @@ -64,9 +49,8 @@ const GrpcQueryResult = ({ item, collection }) => { {hasError && showErrorMessage && setShowErrorMessage(false)} />} {hasResponses && ( -
+
{responsesList.length === 1 ? ( - // Single message - render directly without accordion
{ />
) : ( - // Multiple messages - use accordion - - {reversedResponsesList.map((response, index) => { - // Calculate the original response number (for display purposes) +
+ {reversedResponsesList.map((resp, index) => { const originalIndex = responsesList.length - index - 1; + const isExpanded = expandedIndex === index; return ( - - -
-
- Response {originalIndex + 1} {index === 0 ? '(Latest)' : ''} -
-
- - -
+
+
setExpandedIndex(isExpanded ? -1 : index)} + > + + Response {originalIndex + 1} + {index === 0 && Latest} + + +
+ {isExpanded && ( +
- - + )} +
); })} - +
)}
)} {hasError && !hasResponses && !showErrorMessage && ( -
+
No messages received. A server error occurred but has been dismissed.
)} diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js index 141057784..92e53fe8a 100644 --- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js @@ -6,17 +6,24 @@ const StyledWrapper = styled.div` border-collapse: collapse; thead { - color: #777777; - font-size: ${(props) => props.theme.font.size.sm}; + color: ${(props) => props.theme.colors.text.muted}; + font-size: ${(props) => props.theme.font.size.xs}; font-weight: 500; text-transform: uppercase; } td { - padding: 6px 10px; + padding: 8px 10px; + font-size: ${(props) => props.theme.font.size.sm}; + + &.key { + color: ${(props) => props.theme.colors.text.subtext1}; + font-weight: 500; + } &.value { word-break: break-all; + color: ${(props) => props.theme.text}; } } @@ -25,6 +32,10 @@ const StyledWrapper = styled.div` background-color: ${(props) => props.theme.table.striped}; } } + + .empty-message { + color: ${(props) => props.theme.colors.text.muted}; + } } `; diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/index.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/index.js index a7390558d..d16b1d05f 100644 --- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/index.js +++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/index.js @@ -24,7 +24,7 @@ const GrpcResponseHeaders = ({ metadata }) => { )) ) : ( - + No metadata received diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js index 141057784..92e53fe8a 100644 --- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js @@ -6,17 +6,24 @@ const StyledWrapper = styled.div` border-collapse: collapse; thead { - color: #777777; - font-size: ${(props) => props.theme.font.size.sm}; + color: ${(props) => props.theme.colors.text.muted}; + font-size: ${(props) => props.theme.font.size.xs}; font-weight: 500; text-transform: uppercase; } td { - padding: 6px 10px; + padding: 8px 10px; + font-size: ${(props) => props.theme.font.size.sm}; + + &.key { + color: ${(props) => props.theme.colors.text.subtext1}; + font-weight: 500; + } &.value { word-break: break-all; + color: ${(props) => props.theme.text}; } } @@ -25,6 +32,10 @@ const StyledWrapper = styled.div` background-color: ${(props) => props.theme.table.striped}; } } + + .empty-message { + color: ${(props) => props.theme.colors.text.muted}; + } } `; diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/index.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/index.js index 7df1f5b45..02fdc484d 100644 --- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/index.js +++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/index.js @@ -23,7 +23,7 @@ const ResponseTrailers = ({ trailers }) => { )) ) : ( - + No trailers received diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js index d702b1537..19ba7a698 100644 --- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js @@ -12,7 +12,7 @@ const StyledWrapper = styled.div` border: none; border-bottom: solid 2px transparent; margin-right: ${(props) => props.theme.tabs.marginRight}; - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; cursor: pointer; &:focus, diff --git a/packages/bruno-app/src/components/ResponsePane/Placeholder/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/Placeholder/StyledWrapper.js index 369637b01..9b78e44f4 100644 --- a/packages/bruno-app/src/components/ResponsePane/Placeholder/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/Placeholder/StyledWrapper.js @@ -7,7 +7,7 @@ const StyledWrapper = styled.div` width: 100%; .send-icon { - color: ${(props) => props.theme.requestTabPanel.responseSendIcon}; + color: ${(props) => props.theme.background.surface2}; } &.vertical-layout { diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js index 6a3b66566..5a3bbe437 100644 --- a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js @@ -7,7 +7,7 @@ const StyledWrapper = styled.div` } .button-dropdown-button { - color: ${(props) => props.theme.dropdown.primaryText}; + color: ${(props) => props.theme.text}; border-color: ${(props) => props.theme.workspace.border}; } diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseActions/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseActions/StyledWrapper.js index 6ba69090e..5b8d2e607 100644 --- a/packages/bruno-app/src/components/ResponsePane/ResponseActions/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/ResponseActions/StyledWrapper.js @@ -2,7 +2,7 @@ import styled from 'styled-components'; const StyledWrapper = styled.div` button { - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; cursor: pointer; &:hover { @@ -18,7 +18,7 @@ const StyledWrapper = styled.div` .cursor-pointer { display: flex; align-items: center; - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; &:hover { color: var(--color-tab-active); diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseStopWatch/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseStopWatch/StyledWrapper.js index 71e1d0591..ba919c56f 100644 --- a/packages/bruno-app/src/components/ResponsePane/ResponseStopWatch/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/ResponseStopWatch/StyledWrapper.js @@ -2,7 +2,7 @@ import styled from 'styled-components'; const Wrapper = styled.div` font-size: ${(props) => props.theme.font.size.sm}; - font-weight: 600; + font-weight: 500; color: ${(props) => props.theme.requestTabPanel.responseStatus}; text-align: center; `; diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseTime/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseTime/StyledWrapper.js index 3bb71610d..13bf109f6 100644 --- a/packages/bruno-app/src/components/ResponsePane/ResponseTime/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/ResponseTime/StyledWrapper.js @@ -2,7 +2,7 @@ import styled from 'styled-components'; const Wrapper = styled.div` font-size: ${(props) => props.theme.font.size.sm}; - font-weight: 600; + font-weight: 500; color: ${(props) => props.theme.requestTabPanel.responseStatus}; `; diff --git a/packages/bruno-app/src/components/ResponsePane/SkippedRequest/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/SkippedRequest/StyledWrapper.js index 922798c17..aae56b4c6 100644 --- a/packages/bruno-app/src/components/ResponsePane/SkippedRequest/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/SkippedRequest/StyledWrapper.js @@ -4,7 +4,7 @@ const StyledWrapper = styled.div` padding-top: 20%; width: 100%; .send-icon { - color: ${(props) => props.theme.requestTabPanel.responseSendIcon}; + color: ${(props) => props.theme.background.surface2}; } `; diff --git a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js index ed97f6a8b..f8db8051f 100644 --- a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js @@ -25,7 +25,7 @@ const StyledWrapper = styled.div` border: none; border-bottom: solid 2px transparent; margin-right: ${(props) => props.theme.tabs.marginRight}; - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; cursor: pointer; flex-shrink: 1; overflow: hidden; diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js index d702b1537..19ba7a698 100644 --- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js @@ -12,7 +12,7 @@ const StyledWrapper = styled.div` border: none; border-bottom: solid 2px transparent; margin-right: ${(props) => props.theme.tabs.marginRight}; - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; cursor: pointer; &:focus, diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js index da9947118..a0e8c744e 100644 --- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js @@ -1,31 +1,59 @@ import styled from 'styled-components'; const StyledWrapper = styled.div` - overflow-y: auto; + overflow-y: auto; - .ws-message.new { - background-color: ${({ theme }) => theme.table.striped}; + .empty-state { + padding: 1rem; + color: ${(props) => props.theme.colors.text.muted}; } - .ws-message:not(:last-child) { - border-bottom: 1px solid ${({ theme }) => theme.table.border}; - } - - .ws-message:not(:last-child).open { - border-bottom-width: 0px; - } - - .ws-incoming { + .ws-message { background: ${(props) => props.theme.bg}; - border-color: ${(props) => props.theme.table.border}; + + &.new { + background-color: ${({ theme }) => theme.table.striped}; + } + + &:not(:last-child) { + border-bottom: 1px solid ${({ theme }) => theme.border.border1}; + } + + &:not(:last-child).open { + border-bottom-width: 0px; + } + + .message-content { + color: ${(props) => props.theme.text}; + } + + .message-timestamp { + font-size: ${(props) => props.theme.font.size.xs}; + color: ${(props) => props.theme.colors.text.muted}; + } + + .chevron-icon { + color: ${(props) => props.theme.colors.text.muted}; + } } - .ws-outgoing { - background: ${(props) => props.theme.bg}; - border-color: ${(props) => props.theme.table.border}; + .ws-incoming .message-type-icon { + color: ${(props) => props.theme.colors.text.green}; } - .CodeMirror { + .ws-outgoing .message-type-icon { + color: ${(props) => props.theme.colors.text.yellow}; + } + + .ws-info .message-type-icon { + color: ${(props) => props.theme.colors.text.blue}; + } + + .ws-error .message-type-icon { + color: ${(props) => props.theme.colors.text.danger}; + } + + .CodeMirror { border-radius: 0.25rem; } @@ -34,11 +62,12 @@ const StyledWrapper = styled.div` } div[role='tablist'] { + color: ${(props) => props.theme.colors.text.muted}; + .active { color: ${(props) => props.theme.colors.text.yellow}; } } - `; export default StyledWrapper; diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js index ca560189f..c515c9ae6 100644 --- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js +++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js @@ -100,15 +100,17 @@ const WSMessageItem = ({ message, inFocus }) => { }} className={classnames('ws-message flex flex-col p-2', { 'ws-incoming': isIncoming, - 'ws-outgoing': !isIncoming, + 'ws-outgoing': isOutgoing, + 'ws-info': isInfo, + 'ws-error': isError, 'open': isOpen, 'new': isNew })} >
{ if (!canOpenMessage) return; @@ -116,35 +118,26 @@ const WSMessageItem = ({ message, inFocus }) => { }} >
- + - {parsedContent.content} + {parsedContent.content}
-
+
{message.timestamp && ( - {new Date(message.timestamp).toISOString()} + {new Date(message.timestamp).toISOString()} )} {canOpenMessage ? ( - + {isOpen ? ( - + ) : ( - + )} ) - : } + : }
{isOpen && ( @@ -188,11 +181,11 @@ const WSMessageItem = ({ message, inFocus }) => { const WSMessagesList = ({ order = -1, messages = [] }) => { if (!messages.length) { - return
No messages yet.
; + return
No messages yet.
; } const ordered = order === -1 ? messages : messages.slice().reverse(); return ( - + {ordered.map((msg, idx, src) => { const inFocus = order === -1 ? src.length - 1 === idx : idx === 0; return ; diff --git a/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js index 7d0909815..f551c5f80 100644 --- a/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js +++ b/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js @@ -7,7 +7,7 @@ const StyledWrapper = styled.div` border: none; border-bottom: solid 2px transparent; margin-right: ${(props) => props.theme.tabs.marginRight}; - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; cursor: pointer; &:focus, diff --git a/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx b/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx index a6d2315a4..4d7bfeb55 100644 --- a/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx +++ b/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx @@ -88,7 +88,7 @@ const StyledWrapper = styled.div` transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; &.is-selected { - background-color: ${(props) => props.theme.requestTabs.active.bg}; + background-color: ${(props) => props.theme.background.surface2}; } &.is-dragging { diff --git a/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js b/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js index 041efffa4..2cdb681be 100644 --- a/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js +++ b/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { rgba } from 'polished'; const StyledWrapper = styled.div` .tabs { @@ -7,7 +8,7 @@ const StyledWrapper = styled.div` border: none; border-bottom: solid 2px transparent; margin-right: ${(props) => props.theme.tabs.marginRight}; - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; cursor: pointer; &:focus, @@ -31,14 +32,24 @@ const StyledWrapper = styled.div` display: flex; border-radius: ${(props) => props.theme.border.radius.base}; padding: 10px; - border: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder}; - background-color: ${(props) => props.theme.sidebar.bg}; + border: 1px solid ${(props) => props.theme.border.border0}; + background-color: ${(props) => props.theme.background.base}; color: ${(props) => props.theme.text}; cursor: pointer; transition: all 0.1s ease; + &.no-padding { + padding: 0px; + } + + .note-warning { + color: ${(props) => props.theme.colors.text.warning}; + background-color: ${(props) => rgba(props.theme.colors.text.warning, 0.06)}; + } + &:hover { - background-color: ${(props) => props.theme.listItem.hoverBg}; + background-color: ${(props) => props.theme.background.mantle}; + border-color: ${(props) => props.theme.border.border2}; } } `; diff --git a/packages/bruno-app/src/components/ShareCollection/index.js b/packages/bruno-app/src/components/ShareCollection/index.js index 74e2c6d23..5e958dd31 100644 --- a/packages/bruno-app/src/components/ShareCollection/index.js +++ b/packages/bruno-app/src/components/ShareCollection/index.js @@ -105,7 +105,7 @@ const ShareCollection = ({ onClose, collectionUid }) => {
{ onClick={isCollectionLoading ? undefined : handleExportPostmanCollection} > {hasNonExportableRequestTypes.has && ( -
+
Note: diff --git a/packages/bruno-app/src/components/Sidebar/ApiSpecs/ApiSpecBadge/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/ApiSpecs/ApiSpecBadge/StyledWrapper.js deleted file mode 100644 index 54b81c4ec..000000000 --- a/packages/bruno-app/src/components/Sidebar/ApiSpecs/ApiSpecBadge/StyledWrapper.js +++ /dev/null @@ -1,11 +0,0 @@ -import styled from 'styled-components'; - -const StyledWrapper = styled.div` - .api-specs-badge { - margin-inline: 0.5rem; - background-color: ${(props) => props.theme.sidebar.badge.bg}; - border-radius: 5px; - } -`; - -export default StyledWrapper; diff --git a/packages/bruno-app/src/components/Sidebar/ApiSpecs/ApiSpecBadge/index.js b/packages/bruno-app/src/components/Sidebar/ApiSpecs/ApiSpecBadge/index.js deleted file mode 100644 index 65022d1cf..000000000 --- a/packages/bruno-app/src/components/Sidebar/ApiSpecs/ApiSpecBadge/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import { IconFileCode } from '@tabler/icons'; -import StyledWrapper from './StyledWrapper'; - -const ApiSpecsBadge = () => { - return ( - -
-
-
- - - - APIs -
-
-
- - ); -}; - -export default ApiSpecsBadge; diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js index a51b4390d..9c02ee4d2 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js @@ -5,7 +5,7 @@ const StyledWrapper = styled.div` height: 50vh; display: flex; flex-direction: column; - background-color: ${(props) => props.theme.collection.environment.settings.bg}; + background-color: ${(props) => props.theme.background.base}; .code-generator { display: flex; diff --git a/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/StyledWrapper.js index c45141ee0..5f1d4e962 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/StyledWrapper.js @@ -25,7 +25,7 @@ const StyledWrapper = styled.div` display: inline-flex; align-items: center; padding: 6px 12px; - background-color: ${(props) => props.theme.requestTabs.active.bg}; + background-color: ${(props) => props.theme.background.surface2}; border: 1px solid ${(props) => props.theme.requestTabs.bottomBorder}; border-radius: 4px; font-size: ${(props) => props.theme.font.size.sm}; diff --git a/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js b/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js index 13f1635e6..f2546babe 100644 --- a/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js +++ b/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js @@ -320,12 +320,12 @@ const CreateCollection = ({ onClose, defaultLocation: propDefaultLocation }) =>
- - diff --git a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/StyledWrapper.js index 202b810e6..3de12e12b 100644 --- a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/StyledWrapper.js @@ -1,17 +1,18 @@ import styled from 'styled-components'; +import { darken, rgba } from 'polished'; const Wrapper = styled.div` .current-group { - background-color: ${(props) => props.theme.sidebar.badge.bg}; + background-color: ${(props) => props.theme.background.surface1}; border-radius: 4px; - padding: 0.4rem; + padding: 0.3rem 0.6rem; cursor: pointer; - border: 1px solid ${(props) => props.theme.sidebar.badge.border || 'transparent'}; + border: 1px solid ${(props) => props.theme.background.surface2}; } .current-group:hover { - background-color: ${(props) => props.theme.sidebar.badge.hoverBg || props.theme.sidebar.badge.bg}; - } + background-color: ${(props) => darken(0.03, props.theme.background.surface1)}; + border-color: ${(props) => darken(0.03, props.theme.background.surface2)}; /* Fix dropdown positioning */ [data-tippy-root] { diff --git a/packages/bruno-app/src/components/StatusBar/ThemeDropdown/StyledWrapper.js b/packages/bruno-app/src/components/StatusBar/ThemeDropdown/StyledWrapper.js new file mode 100644 index 000000000..8ee95f244 --- /dev/null +++ b/packages/bruno-app/src/components/StatusBar/ThemeDropdown/StyledWrapper.js @@ -0,0 +1,81 @@ +import styled from 'styled-components'; +import { rgba } from 'polished'; + +const StyledWrapper = styled.div` + .theme-menu { + min-width: 160px; + padding: 4px 0; + background: ${(props) => props.theme.dropdown.bg}; + border: 1px solid ${(props) => props.theme.dropdown.separator}; + border-radius: ${(props) => props.theme.border.radius.md}; + box-shadow: ${(props) => props.theme.dropdown.shadow}; + } + + .menu-label { + padding: 6px 12px 4px; + font-size: 11px; + font-weight: 500; + text-transform: uppercase; + color: ${(props) => props.theme.dropdown.mutedText}; + letter-spacing: 0.5px; + } + + .menu-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px 12px; + cursor: pointer; + color: ${(props) => props.theme.dropdown.color}; + font-size: ${(props) => props.theme.font.size.sm}; + + &:hover { + background: ${(props) => props.theme.dropdown.hoverBg}; + } + + &.active { + color: ${(props) => props.theme.dropdown.selectedColor}; + background: ${(props) => rgba(props.theme.dropdown.selectedColor, 0.07)}; + } + + &.has-submenu { + padding-right: 8px; + } + } + + .menu-item-icon { + margin-right: 8px; + opacity: 0.7; + } + + .menu-item-label { + flex: 1; + } + + .check-icon { + color: ${(props) => props.theme.dropdown.selectedColor}; + margin-left: 8px; + } + + .chevron-icon { + opacity: 0.6; + margin-left: 8px; + } + + .menu-divider { + height: 1px; + background: ${(props) => props.theme.dropdown.separator}; + margin: 4px 0; + } + + .submenu { + min-width: 180px; + padding: 4px 0; + background: ${(props) => props.theme.dropdown.bg}; + border: 1px solid ${(props) => props.theme.dropdown.separator}; + border-radius: ${(props) => props.theme.border.radius.md}; + box-shadow: ${(props) => props.theme.dropdown.shadow}; + } +`; + +export default StyledWrapper; diff --git a/packages/bruno-app/src/components/StatusBar/ThemeDropdown/index.js b/packages/bruno-app/src/components/StatusBar/ThemeDropdown/index.js new file mode 100644 index 000000000..a25c1f680 --- /dev/null +++ b/packages/bruno-app/src/components/StatusBar/ThemeDropdown/index.js @@ -0,0 +1,181 @@ +import React, { useState } from 'react'; +import Tippy from '@tippyjs/react'; +import { IconChevronRight, IconCheck, IconSun, IconMoon, IconDeviceDesktop } from '@tabler/icons'; +import ToolHint from 'components/ToolHint'; +import { useTheme } from 'providers/Theme'; +import { getLightThemes, getDarkThemes } from 'themes/index'; +import StyledWrapper from './StyledWrapper'; + +const ThemeDropdown = ({ children }) => { + const [isOpen, setIsOpen] = useState(false); + const [lightSubmenuOpen, setLightSubmenuOpen] = useState(false); + const [darkSubmenuOpen, setDarkSubmenuOpen] = useState(false); + const [tooltipEnabled, setTooltipEnabled] = useState(true); + + const { + storedTheme, + setStoredTheme, + themeVariantLight, + themeVariantDark, + setThemeVariantLight, + setThemeVariantDark + } = useTheme(); + + const lightThemes = getLightThemes(); + const darkThemes = getDarkThemes(); + + const handleModeSelect = (mode) => { + setStoredTheme(mode); + }; + + const handleThemeSelect = (themeId, isLight) => { + if (isLight) { + setThemeVariantLight(themeId); + } else { + setThemeVariantDark(themeId); + } + setIsOpen(false); + setLightSubmenuOpen(false); + setDarkSubmenuOpen(false); + }; + + const renderSubmenu = (themes, isLight, currentVariant) => ( +
+ {themes.map((theme) => ( +
handleThemeSelect(theme.id, isLight)} + > + {theme.name} + {currentVariant === theme.id && ( + + )} +
+ ))} +
+ ); + + const menuContent = ( + +
+ {/* Mode Section */} +
Mode
+
handleModeSelect('light')} + > + + Light + {storedTheme === 'light' && ( + + )} +
+
handleModeSelect('dark')} + > + + Dark + {storedTheme === 'dark' && ( + + )} +
+
handleModeSelect('system')} + > + + System + {storedTheme === 'system' && ( + + )} +
+ +
+ + {/* Light Themes with Submenu */} + setLightSubmenuOpen(false)} + appendTo="parent" + > +
{ + setLightSubmenuOpen(true); + setDarkSubmenuOpen(false); + }} + > + Light Themes + +
+ + + {/* Dark Themes with Submenu */} + setDarkSubmenuOpen(false)} + appendTo="parent" + > +
{ + setDarkSubmenuOpen(true); + setLightSubmenuOpen(false); + }} + > + Dark Themes + +
+ +
+ + ); + + const handleOpen = () => { + setTooltipEnabled(false); + setIsOpen(true); + }; + + const handleClose = () => { + setIsOpen(false); + setLightSubmenuOpen(false); + setDarkSubmenuOpen(false); + // Small delay before re-enabling tooltip to prevent flash + setTimeout(() => setTooltipEnabled(true), 100); + }; + + return ( + + ); +}; + +export default ThemeDropdown; diff --git a/packages/bruno-app/src/components/StatusBar/index.js b/packages/bruno-app/src/components/StatusBar/index.js index b41af0840..1482487df 100644 --- a/packages/bruno-app/src/components/StatusBar/index.js +++ b/packages/bruno-app/src/components/StatusBar/index.js @@ -1,14 +1,14 @@ import React, { useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; -import { IconSettings, IconCookie, IconTool, IconSearch } from '@tabler/icons'; +import { IconSettings, IconCookie, IconTool, IconSearch, IconPalette } from '@tabler/icons'; import Mousetrap from 'mousetrap'; import { getKeyBindingsForActionAllOS } from 'providers/Hotkeys/keyMappings'; import ToolHint from 'components/ToolHint'; import Preferences from 'components/Preferences'; -import IconSidebarToggle from 'components/Icons/IconSidebarToggle'; import Cookies from 'components/Cookies'; import Notifications from 'components/Notifications'; import Portal from 'components/Portal'; +import ThemeDropdown from './ThemeDropdown'; import { showPreferences } from 'providers/ReduxStore/slices/app'; import { openConsole } from 'providers/ReduxStore/slices/logs'; import { useApp } from 'providers/App'; @@ -81,6 +81,17 @@ const StatusBar = () => { + + + +
diff --git a/packages/bruno-app/src/components/Table-v2/StyledWrapper.js b/packages/bruno-app/src/components/Table-v2/StyledWrapper.js deleted file mode 100644 index 85efd5157..000000000 --- a/packages/bruno-app/src/components/Table-v2/StyledWrapper.js +++ /dev/null @@ -1,77 +0,0 @@ -import styled from 'styled-components'; - -const StyledWrapper = styled.div` - table { - width: 100%; - display: grid; - overflow-y: hidden; - overflow-x: auto; - padding: 0 1.5px; - border-radius: 8px; - - // for icon hover - position: inherit; - - grid-template-columns: ${({ columns }) => - columns?.[0]?.width - ? columns.map((col) => `${col?.width}`).join(' ') - : columns.map((col) => `${100 / columns.length}%`).join(' ')}; - } - - table thead, - table tbody, - table tr { - display: contents; - border: none; - } - - table th { - position: relative; - border: none; - border-bottom: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77; - background: ${(props) => props.theme.examples.table.thead.bg}; - color: ${(props) => props.theme.examples.table.thead.color}; - font-weight: 400; - - tr td { - border: none; - color: ${(props) => props.theme.examples.table.thead.color}; - background: ${(props) => props.theme.examples.table.thead.bg}; - } - } - - table tr td { - padding: 0.5rem; - text-align: left; - border: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77; - } - - tr { - transition: transform 0.2s ease-in-out; - } - - tr.dragging { - opacity: 0.5; - } - - tr.hovered { - transform: translateY(10px); /* Adjust the value as needed for the animation effect */ - } - - table tr th { - padding: 0.5rem; - text-align: left; - border-top: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77; - font-weight: 400; - - &:nth-child(1) { - border-left: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77; - } - - &:last-child { - border-right: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77; - } - } -`; - -export default StyledWrapper; diff --git a/packages/bruno-app/src/components/Table-v2/index.js b/packages/bruno-app/src/components/Table-v2/index.js deleted file mode 100644 index 5cd55525b..000000000 --- a/packages/bruno-app/src/components/Table-v2/index.js +++ /dev/null @@ -1,109 +0,0 @@ -import { useState, useRef, useEffect, useCallback } from 'react'; -import StyledWrapper from './StyledWrapper'; - -const Table = ({ minColumnWidth = 1, headers = [], children }) => { - const [activeColumnIndex, setActiveColumnIndex] = useState(null); - const tableRef = useRef(null); - - const columns = headers?.map((item) => ({ - ...item, - ref: useRef() - })); - - const updateDivHeights = () => { - if (tableRef.current) { - const height = tableRef.current.offsetHeight; - columns.forEach((col) => { - if (col.ref.current) { - col.ref.current.querySelector('.resizer').style.height = `${height}px`; - } - }); - } - }; - - useEffect(() => { - updateDivHeights(); - window.addEventListener('resize', updateDivHeights); - - return () => { - window.removeEventListener('resize', updateDivHeights); - }; - }, [columns]); - - useEffect(() => { - if (tableRef.current) { - const observer = new MutationObserver(updateDivHeights); - observer.observe(tableRef.current, { childList: true, subtree: true }); - - return () => { - observer.disconnect(); - }; - } - }, [columns]); - - const handleMouseDown = (index) => (e) => { - setActiveColumnIndex(index); - }; - - const handleMouseMove = useCallback((e) => { - const gridColumns = columns.map((col, i) => { - if (i === activeColumnIndex) { - const width = e.clientX - col.ref?.current?.getBoundingClientRect()?.left; - - if (width >= minColumnWidth) { - return `${width}px`; - } - } - return `${col.ref.current.offsetWidth}px`; - }); - - tableRef.current.style.gridTemplateColumns = `${gridColumns.join(' ')}`; - }, - [activeColumnIndex, columns, minColumnWidth]); - - const removeListeners = useCallback(() => { - window.removeEventListener('mousemove', handleMouseMove); - window.removeEventListener('mouseup', removeListeners); - }, [handleMouseMove]); - - const handleMouseUp = useCallback(() => { - setActiveColumnIndex(null); - removeListeners?.(); - }, [removeListeners]); - - useEffect(() => { - if (activeColumnIndex !== null) { - window.addEventListener('mousemove', handleMouseMove); - window.addEventListener('mouseup', handleMouseUp); - } - return () => { - removeListeners(); - }; - }, [activeColumnIndex, handleMouseMove, handleMouseUp, removeListeners]); - - return ( - -
- - - - {columns.map(({ ref, name }, i) => ( - - ))} - - - {children} -
- {name} -
-
-
-
- - ); -}; - -export default Table; diff --git a/packages/bruno-app/src/components/Table/StyledWrapper.js b/packages/bruno-app/src/components/Table/StyledWrapper.js index 5e7132c16..c94da291c 100644 --- a/packages/bruno-app/src/components/Table/StyledWrapper.js +++ b/packages/bruno-app/src/components/Table/StyledWrapper.js @@ -25,14 +25,14 @@ const StyledWrapper = styled.div` table th { position: relative; - border-bottom: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77; + border-bottom: 1px solid ${(props) => props.theme.border.BORDER0}; } table tr td { padding: 0.5rem; text-align: left; - border-top: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77; - border-right: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77; + border-top: 1px solid ${(props) => props.theme.border.BORDER0}; + border-right: 1px solid ${(props) => props.theme.border.BORDER0}; } tr { @@ -50,11 +50,11 @@ const StyledWrapper = styled.div` table tr th { padding: 0.5rem; text-align: left; - border-top: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77; - border-right: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77; + border-top: 1px solid ${(props) => props.theme.border.BORDER0}; + border-right: 1px solid ${(props) => props.theme.border.BORDER0}; &:nth-child(1) { - border-left: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77; + border-left: 1px solid ${(props) => props.theme.border.BORDER0}; } } `; diff --git a/packages/bruno-app/src/components/TagList/StyledWrapper.js b/packages/bruno-app/src/components/TagList/StyledWrapper.js index 2aa48f248..efb5daacd 100644 --- a/packages/bruno-app/src/components/TagList/StyledWrapper.js +++ b/packages/bruno-app/src/components/TagList/StyledWrapper.js @@ -26,8 +26,8 @@ const StyledWrapper = styled.div` cursor: default; &:has(.tag-remove:hover) { - background-color: ${(props) => props.theme.requestTabs.active.bg}; - border-color: ${(props) => props.theme.requestTabs.active.border || props.theme.requestTabs.bottomBorder}; + background-color: ${(props) => props.theme.background.surface2}; + border-color: ${(props) => props.theme.requestTabs.bottomBorder}; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transform: translateY(-1px); } diff --git a/packages/bruno-app/src/components/ToolHint/StyledWrapper.js b/packages/bruno-app/src/components/ToolHint/StyledWrapper.js deleted file mode 100644 index 8cbe85f38..000000000 --- a/packages/bruno-app/src/components/ToolHint/StyledWrapper.js +++ /dev/null @@ -1,8 +0,0 @@ -import styled from 'styled-components'; - -const Wrapper = styled.div` - background-color: ${(props) => props.theme.sidebar.badge}; - color: ${(props) => props.theme.text}; -`; - -export default Wrapper; diff --git a/packages/bruno-app/src/components/ToolHint/index.js b/packages/bruno-app/src/components/ToolHint/index.js index cc1f40d73..5da713159 100644 --- a/packages/bruno-app/src/components/ToolHint/index.js +++ b/packages/bruno-app/src/components/ToolHint/index.js @@ -1,6 +1,5 @@ import React from 'react'; import { Tooltip as ReactToolHint } from 'react-tooltip'; -import StyledWrapper from './StyledWrapper'; import { useTheme } from 'providers/Theme'; const ToolHint = ({ @@ -20,8 +19,8 @@ const ToolHint = ({ const { theme: contextTheme } = useTheme(); const appliedTheme = theme || contextTheme; - const toolhintBackgroundColor = appliedTheme?.sidebar.badge.bg || 'black'; - const toolhintTextColor = appliedTheme?.text || 'white'; + const toolhintBackgroundColor = appliedTheme?.background.surface1; + const toolhintTextColor = appliedTheme?.text; const combinedToolhintStyle = { ...tooltipStyle, @@ -40,21 +39,19 @@ const ToolHint = ({ <> {!anchorSelect && {children}} {anchorSelect && children} - - - +
)}
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js index 30d294cee..c726b83b7 100644 --- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js +++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js @@ -9,7 +9,7 @@ const Wrapper = styled.div` .table-container { overflow-y: auto; border-radius: 8px; - border: ${(props) => props.theme.workspace.environments.indentBorder}; + border: solid 1px ${(props) => props.theme.border.border0}; } table { @@ -45,8 +45,8 @@ const Wrapper = styled.div` td { padding: 5px 10px !important; - border-bottom: ${(props) => props.theme.workspace.environments.indentBorder}; - border-right: ${(props) => props.theme.workspace.environments.indentBorder}; + border-bottom: solid 1px ${(props) => props.theme.border.border0}; + border-right: solid 1px ${(props) => props.theme.border.border0}; &:last-child { border-right: none; @@ -63,8 +63,8 @@ const Wrapper = styled.div` } td { - border-bottom: ${(props) => props.theme.workspace.environments.indentBorder}; - border-right: ${(props) => props.theme.workspace.environments.indentBorder}; + border-bottom: solid 1px ${(props) => props.theme.border.border0}; + border-right: solid 1px ${(props) => props.theme.border.border0}; &:last-child { border-right: none; diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js index 0fa99802c..567d56039 100644 --- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js +++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { rgba } from 'polished'; const StyledWrapper = styled.div` display: flex; @@ -174,7 +175,7 @@ const StyledWrapper = styled.div` } &.active { - background: ${(props) => props.theme.workspace.environments.activeBg}; + background: ${(props) => props.theme.background.surface0}; color: ${(props) => props.theme.text}; } @@ -250,19 +251,18 @@ const StyledWrapper = styled.div` transition: all 0.15s ease; &.save { - color: ${(props) => props.theme.textLink}; + color: ${(props) => props.theme.colors.text.green}; &:hover { - background: ${(props) => props.theme.listItem.hoverBg}; + background: ${(props) => rgba(props.theme.colors.text.green, 0.1)}; } } &.cancel { - color: ${(props) => props.theme.colors.text.muted}; + color: ${(props) => props.theme.colors.text.danger}; &:hover { - background: ${(props) => props.theme.listItem.hoverBg}; - color: ${(props) => props.theme.text}; + background: ${(props) => rgba(props.theme.colors.text.danger, 0.1)}; } } } diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/StyledWrapper.js index 95e8137a1..074f7ec9a 100644 --- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/StyledWrapper.js +++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/StyledWrapper.js @@ -11,8 +11,7 @@ const StyledWrapper = styled.div` display: flex; flex-direction: column; align-items: center; - justify-content: center; - flex: 1; + padding-top: 10%; color: ${(props) => props.theme.colors.text.muted}; svg { @@ -32,22 +31,6 @@ const StyledWrapper = styled.div` gap: 8px; } } - - .shared-button { - padding: 5px 10px; - font-size: 12px; - border-radius: 5px; - border: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder}; - background: ${(props) => props.theme.sidebar.bg}; - color: ${(props) => props.theme.text}; - cursor: pointer; - transition: all 0.1s ease; - - &:hover { - background: ${(props) => props.theme.listItem.hoverBg}; - border-color: ${(props) => props.theme.textLink}; - } - } `; export default StyledWrapper; diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js index c5c351ada..96914db8b 100644 --- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js +++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js @@ -6,18 +6,19 @@ import StyledWrapper from './StyledWrapper'; import { IconFileAlert } from '@tabler/icons'; import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal'; import ExportEnvironmentModal from 'components/Environments/Common/ExportEnvironmentModal'; +import Button from 'ui/Button'; const DefaultTab = ({ setTab }) => (
No Environments
- - + +
); diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/StyledWrapper.js index f0cfdacb5..ba55f5a77 100644 --- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/StyledWrapper.js +++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/StyledWrapper.js @@ -97,25 +97,6 @@ const StyledWrapper = styled.div` .collection-dropdown { min-width: 120px; } - - .dropdown-item { - display: flex; - align-items: center; - gap: 8px; - padding: 6px 10px; - cursor: pointer; - transition: background 0.15s ease; - color: ${(props) => props.theme.text}; - font-size: ${(props) => props.theme.font.size.sm}; - - &:hover { - background: ${(props) => props.theme.listItem.hoverBg}; - } - - &.dropdown-item-danger { - color: ${(props) => props.theme.colors.text.danger}; - } - } `; export default StyledWrapper; diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/index.js index 160f9ed68..359ce8c67 100644 --- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/index.js +++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/index.js @@ -288,7 +288,7 @@ const CollectionsList = ({ workspace }) => { Share
{ e.stopPropagation(); handleRemoveCollection(collection); diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js index 811819dcb..6fdd98336 100644 --- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js +++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js @@ -6,6 +6,7 @@ import toast from 'react-hot-toast'; import CreateCollection from 'components/Sidebar/CreateCollection'; import ImportCollection from 'components/Sidebar/ImportCollection'; import ImportCollectionLocation from 'components/Sidebar/ImportCollectionLocation'; +import Button from 'ui/Button'; import CollectionsList from './CollectionsList'; import WorkspaceDocs from '../WorkspaceDocs'; import StyledWrapper from './StyledWrapper'; @@ -107,18 +108,30 @@ const WorkspaceOverview = ({ workspace }) => {
Quick Actions
- - - + + +
diff --git a/packages/bruno-app/src/providers/Theme/index.js b/packages/bruno-app/src/providers/Theme/index.js index 3c29f7fd9..6a51a492c 100644 --- a/packages/bruno-app/src/providers/Theme/index.js +++ b/packages/bruno-app/src/providers/Theme/index.js @@ -1,15 +1,22 @@ import React from 'react'; +import { Validator } from 'jsonschema'; +import toast from 'react-hot-toast'; import themes from 'themes/index'; +import themeSchema from 'themes/schema'; import useLocalStorage from 'hooks/useLocalStorage/index'; -import { createContext, useContext, useEffect, useState } from 'react'; +import { createContext, useContext, useEffect, useState, useMemo } from 'react'; import { ThemeProvider as SCThemeProvider } from 'styled-components'; +const validator = new Validator(); + export const ThemeContext = createContext(); export const ThemeProvider = (props) => { const isBrowserThemeLight = window.matchMedia('(prefers-color-scheme: light)').matches; const [displayedTheme, setDisplayedTheme] = useState(isBrowserThemeLight ? 'light' : 'dark'); const [storedTheme, setStoredTheme] = useLocalStorage('bruno.theme', 'system'); + const [themeVariantLight, setThemeVariantLight] = useLocalStorage('bruno.themeVariantLight', 'light'); + const [themeVariantDark, setThemeVariantDark] = useLocalStorage('bruno.themeVariantDark', 'dark'); const toggleHtml = () => { const html = document.querySelector('html'); if (html) { @@ -45,14 +52,50 @@ export const ThemeProvider = (props) => { // storedTheme can have 3 values: 'light', 'dark', 'system' // displayedTheme can have 2 values: 'light', 'dark' - const theme = storedTheme === 'system' ? themes[displayedTheme] : themes[storedTheme]; - const themeOptions = Object.keys(themes); + // Get the appropriate variant based on the current display mode + const theme = useMemo(() => { + const isLightMode = displayedTheme === 'light'; + const variantName = isLightMode ? themeVariantLight : themeVariantDark; + const fallbackTheme = isLightMode ? themes.light : themes.dark; + const fallbackName = isLightMode ? 'light' : 'dark'; + + // Check if the variant exists in themes + const selectedTheme = themes[variantName]; + if (!selectedTheme) { + // Only show toast if using a non-default variant that doesn't exist + if (variantName !== fallbackName) { + toast.error(`Theme "${variantName}" not found. Using default ${fallbackName} theme.`, { + duration: 4000, + id: `theme-not-found-${variantName}` // Prevent duplicate toasts + }); + } + return fallbackTheme; + } + + // Validate the theme against the schema + const validationResult = validator.validate(selectedTheme, themeSchema); + if (!validationResult.valid) { + const errors = validationResult.errors?.map((e) => e.stack).join(', ') || 'Unknown validation error'; + console.error(`Theme "${variantName}" validation failed:`, errors); + toast.error(`Invalid theme "${variantName}". Using default ${fallbackName} theme.`, { + duration: 4000, + id: `theme-invalid-${variantName}` // Prevent duplicate toasts + }); + return fallbackTheme; + } + + return selectedTheme; + }, [displayedTheme, themeVariantLight, themeVariantDark]); + const value = { theme, - themeOptions, storedTheme, displayedTheme, - setStoredTheme + setStoredTheme, + themeVariantLight, + setThemeVariantLight, + themeVariantDark, + setThemeVariantDark }; return ( diff --git a/packages/bruno-app/src/styles/_buttons.scss b/packages/bruno-app/src/styles/_buttons.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/bruno-app/src/styles/app.scss b/packages/bruno-app/src/styles/app.scss deleted file mode 100644 index 46e81fc09..000000000 --- a/packages/bruno-app/src/styles/app.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'buttons'; diff --git a/packages/bruno-app/src/styles/globals.css b/packages/bruno-app/src/styles/globals.css index 7f0b49d31..2de90fee5 100644 --- a/packages/bruno-app/src/styles/globals.css +++ b/packages/bruno-app/src/styles/globals.css @@ -12,7 +12,6 @@ --color-tab-inactive: rgb(155 155 155); --color-tab-active-border: #546de5; --color-layout-border: #dedede; - --color-text-link: #1663bb; --color-text-danger: rgb(185, 28, 28); --color-background-danger: #dc3545; --color-method-get: rgb(5, 150, 105); diff --git a/packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx b/packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx new file mode 100644 index 000000000..c92aab0b6 --- /dev/null +++ b/packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx @@ -0,0 +1,316 @@ +import React from 'react'; + +// Catppuccin Latte (Light) +const latte = { + name: 'Latte', + mode: 'light', + base: '#eff1f5', + accents: { + ROSEWATER: '#dc8a78', + FLAMINGO: '#dd7878', + PINK: '#ea76cb', + MAUVE: '#8839ef', + RED: '#d20f39', + MAROON: '#e64553', + PEACH: '#fe640b', + YELLOW: '#df8e1d', + GREEN: '#40a02b', + TEAL: '#179299', + SKY: '#04a5e5', + SAPPHIRE: '#209fb5', + BLUE: '#1e66f5', + LAVENDER: '#7287fd' + }, + surface: { + TEXT: '#4c4f69', + SUBTEXT1: '#5c5f77', + SUBTEXT0: '#6c6f85', + OVERLAY2: '#7c7f93', + OVERLAY1: '#8c8fa1', + OVERLAY0: '#9ca0b0', + SURFACE2: '#acb0be', + SURFACE1: '#bcc0cc', + SURFACE0: '#ccd0da', + BASE: '#eff1f5', + MANTLE: '#e6e9ef', + CRUST: '#dce0e8' + } +}; + +// Catppuccin Frappé (Dark) +const frappe = { + name: 'Frappé', + mode: 'dark', + base: '#303446', + accents: { + ROSEWATER: '#f2d5cf', + FLAMINGO: '#eebebe', + PINK: '#f4b8e4', + MAUVE: '#ca9ee6', + RED: '#e78284', + MAROON: '#ea999c', + PEACH: '#ef9f76', + YELLOW: '#e5c890', + GREEN: '#a6d189', + TEAL: '#81c8be', + SKY: '#99d1db', + SAPPHIRE: '#85c1dc', + BLUE: '#8caaee', + LAVENDER: '#babbf1' + }, + surface: { + TEXT: '#c6d0f5', + SUBTEXT1: '#b5bfe2', + SUBTEXT0: '#a5adce', + OVERLAY2: '#949cbb', + OVERLAY1: '#838ba7', + OVERLAY0: '#737994', + SURFACE2: '#626880', + SURFACE1: '#51576d', + SURFACE0: '#414559', + BASE: '#303446', + MANTLE: '#292c3c', + CRUST: '#232634' + } +}; + +// Catppuccin Macchiato (Dark) +const macchiato = { + name: 'Macchiato', + mode: 'dark', + base: '#24273a', + accents: { + ROSEWATER: '#f4dbd6', + FLAMINGO: '#f0c6c6', + PINK: '#f5bde6', + MAUVE: '#c6a0f6', + RED: '#ed8796', + MAROON: '#ee99a0', + PEACH: '#f5a97f', + YELLOW: '#eed49f', + GREEN: '#a6da95', + TEAL: '#8bd5ca', + SKY: '#91d7e3', + SAPPHIRE: '#7dc4e4', + BLUE: '#8aadf4', + LAVENDER: '#b7bdf8' + }, + surface: { + TEXT: '#cad3f5', + SUBTEXT1: '#b8c0e0', + SUBTEXT0: '#a5adcb', + OVERLAY2: '#939ab7', + OVERLAY1: '#8087a2', + OVERLAY0: '#6e738d', + SURFACE2: '#5b6078', + SURFACE1: '#494d64', + SURFACE0: '#363a4f', + BASE: '#24273a', + MANTLE: '#1e2030', + CRUST: '#181926' + } +}; + +// Catppuccin Mocha (Dark) +const mocha = { + name: 'Mocha', + mode: 'dark', + base: '#1e1e2e', + accents: { + ROSEWATER: '#f5e0dc', + FLAMINGO: '#f2cdcd', + PINK: '#f5c2e7', + MAUVE: '#cba6f7', + RED: '#f38ba8', + MAROON: '#eba0ac', + PEACH: '#fab387', + YELLOW: '#f9e2af', + GREEN: '#a6e3a1', + TEAL: '#94e2d5', + SKY: '#89dceb', + SAPPHIRE: '#74c7ec', + BLUE: '#89b4fa', + LAVENDER: '#b4befe' + }, + surface: { + TEXT: '#cdd6f4', + SUBTEXT1: '#bac2de', + SUBTEXT0: '#a6adc8', + OVERLAY2: '#9399b2', + OVERLAY1: '#7f849c', + OVERLAY0: '#6c7086', + SURFACE2: '#585b70', + SURFACE1: '#45475a', + SURFACE0: '#313244', + BASE: '#1e1e2e', + MANTLE: '#181825', + CRUST: '#11111b' + } +}; + +const themes = [latte, frappe, macchiato, mocha]; + +const ColorSwatch = ({ name, color, textColor }) => ( +
+
+
+
{name}
+
{color}
+
+
+); + +const ThemeSection = ({ theme }) => { + const textColor = theme.mode === 'dark' ? '#cdd6f4' : '#4c4f69'; + const mutedColor = theme.mode === 'dark' ? '#a6adc8' : '#6c6f85'; + + return ( +
+

+ Catppuccin {theme.name} +

+

+ {theme.mode === 'light' ? 'Light theme' : 'Dark theme'} — Base: {theme.base} +

+ +

+ Accents +

+
+ {Object.entries(theme.accents).map(([name, color]) => ( + + ))} +
+ +

+ Surface & Text +

+
+ {Object.entries(theme.surface).map(([name, color]) => ( + + ))} +
+
+ ); +}; + +export default { + title: 'Themes/Catppuccin', + parameters: { + layout: 'padded' + } +}; + +export const AllFlavors = { + render: () => ( +
+

+ Catppuccin Palette +

+

+ All 4 flavors: Latte, Frappé, Macchiato, Mocha +

+ {themes.map((theme) => ( + + ))} +
+ ) +}; + +export const Latte = { + render: () => ( +
+ +
+ ) +}; + +export const Frappe = { + render: () => ( +
+ +
+ ) +}; + +export const Macchiato = { + render: () => ( +
+ +
+ ) +}; + +export const Mocha = { + render: () => ( +
+ +
+ ) +}; + +export const AccentComparison = { + render: () => { + const accentNames = Object.keys(latte.accents); + + return ( +
+

+ Accent Comparison Across Flavors +

+
+
+
+ {themes.map((t) => ( +
+ {t.name} +
+ ))} +
+ {accentNames.map((name) => ( +
+
+ {name} +
+ {themes.map((t) => ( +
+ ))} +
+ ))} +
+
+ ); + } +}; diff --git a/packages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsx b/packages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsx new file mode 100644 index 000000000..1d8439133 --- /dev/null +++ b/packages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsx @@ -0,0 +1,215 @@ +import React from 'react'; + +// Light theme palette - 14 accent colors +const palette = { + accents: { + PRIMARY: '#bd7a28', + RED: 'hsl(8 60% 52%)', // warm coral - NEW + ROSE: 'hsl(352 45% 50%)', // soft red (approved) + BROWN: 'hsl(28 55% 38%)', // warm brown (liked) + ORANGE: 'hsl(35 85% 42%)', // vibrant orange + YELLOW: 'hsl(45 75% 42%)', // golden yellow + LIME: 'hsl(85 45% 40%)', // yellow-green - NEW + GREEN: 'hsl(145 50% 36%)', // forest green + TEAL: 'hsl(178 50% 36%)', // true teal + CYAN: 'hsl(195 55% 42%)', // cyan-blue - NEW + BLUE: 'hsl(214 55% 45%)', // true blue (liked) + INDIGO: 'hsl(235 45% 45%)', // deep indigo + VIOLET: 'hsl(258 42% 50%)', // soft violet - NEW + PURPLE: 'hsl(280 45% 48%)', // rich purple + PINK: 'hsl(328 50% 48%)' // magenta-pink - NEW + }, + system: { + CONTROL_ACCENT: '#b96f1d' // for accent-color + }, + background: { + BASE: '#ffffff', + MANTLE: '#f8f8f8', + CRUST: '#f1f1f1', + SURFACE0: '#f1f1f1', + SURFACE1: '#eaeaea', + SURFACE2: '#e5e5e5' + }, + text: { + BASE: '#343434', + SUBTEXT2: '#666666', + SUBTEXT1: '#838383', + SUBTEXT0: '#9B9B9B' + }, + overlay: { + OVERLAY2: '#8b8b8b', + OVERLAY1: '#B0B0B0', + OVERLAY0: '#C0C0C0' + }, + border: { + BORDER2: '#cccccc', + BORDER1: '#e5e5e5', + BORDER0: '#efefef' + }, + utility: { + WHITE: '#ffffff', + BLACK: '#000000' + } +}; + +const ColorSwatch = ({ name, color, textColor = '#343434' }) => ( +
+
+
+
{name}
+
{color}
+
+
+); + +const ColorSection = ({ title, colors, textColor }) => ( +
+

{title}

+
+ {Object.entries(colors).map(([name, color]) => ( + + ))} +
+
+); + +export default { + title: 'Themes/Light Palette', + parameters: { + layout: 'padded' + } +}; + +export const Overview = { + render: () => ( +
+

+ Light Theme Palette +

+

+ 14 accent colors with full hue coverage +

+ + + + + + +
+ ) +}; + +export const Accents = { + render: () => ( +
+

+ Accent Colors +

+

+ Warm → Cool progression across the color wheel +

+
+ {Object.entries(palette.accents).map(([name, color]) => ( + + ))} +
+
+ ) +}; + +export const Background = { + render: () => ( +
+

+ Background Colors +

+
+ {Object.entries(palette.background).map(([name, color]) => ( + + ))} +
+
+ ) +}; + +export const Text = { + render: () => ( +
+

+ Text Colors +

+
+ {Object.entries(palette.text).map(([name, color]) => ( +
+
+
+
{name}
+
{color}
+
+
+ ))} +
+
+ ) +}; + +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 ( +
+

+ Hue Distribution +

+

+ Colors sorted by hue value (0° → 360°) +

+
+ {sorted.map(([name, color]) => { + const hueMatch = color.match(/hsl\((\d+)/); + const hue = hueMatch ? parseInt(hueMatch[1]) : 0; + return ( +
+
{name}
+
{hue}°
+
+
+ ); + })} +
+
+ ); + } +}; diff --git a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js new file mode 100644 index 000000000..aceeca994 --- /dev/null +++ b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js @@ -0,0 +1,632 @@ +// Catppuccin Frappé - Dark Theme +// Based on https://catppuccin.com/palette/ + +const colors = { + // Catppuccin Frappé Palette + ROSEWATER: '#f2d5cf', + FLAMINGO: '#eebebe', + PINK: '#f4b8e4', + MAUVE: '#ca9ee6', + RED: '#e78284', + MAROON: '#ea999c', + PEACH: '#ef9f76', + YELLOW: '#e5c890', + GREEN: '#a6d189', + TEAL: '#81c8be', + SKY: '#99d1db', + SAPPHIRE: '#85c1dc', + BLUE: '#8caaee', + LAVENDER: '#babbf1', + + TEXT: '#c6d0f5', + SUBTEXT1: '#b5bfe2', + SUBTEXT0: '#a5adce', + OVERLAY2: '#949cbb', + OVERLAY1: '#838ba7', + OVERLAY0: '#737994', + SURFACE2: '#626880', + SURFACE1: '#51576d', + SURFACE0: '#414559', + BASE: '#303446', + MANTLE: '#292c3c', + CRUST: '#232634', + + WHITE: '#fff', + BLACK: '#000', + + CODEMIRROR_TOKENS: { + DEFINITION: '#a6d189', + PROPERTY: '#8caaee', + STRING: '#e5c890', + NUMBER: '#ef9f76', + ATOM: '#f4b8e4', + VARIABLE: '#85c1dc', + KEYWORD: '#e78284', + COMMENT: '#737994', + OPERATOR: '#81c8be' + } +}; + +const catppuccinFrappeTheme = { + mode: 'dark', + brand: colors.MAUVE, + text: colors.TEXT, + textLink: colors.BLUE, + bg: colors.BASE, + + accents: { + primary: colors.MAUVE + }, + + background: { + base: colors.BASE, + mantle: colors.MANTLE, + crust: colors.CRUST, + surface0: colors.SURFACE0, + surface1: colors.SURFACE1, + surface2: colors.SURFACE2 + }, + + overlay: { + overlay2: colors.OVERLAY2, + overlay1: colors.OVERLAY1, + overlay0: colors.OVERLAY0 + }, + + font: { + size: { + xs: '0.6875rem', // 11px + sm: '0.75rem', // 12px + base: '0.8125rem', // 13px + md: '0.875rem', // 14px + lg: '1rem', // 16px + xl: '1.125rem' // 18px + } + }, + + shadow: { + sm: '0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3)', + md: '0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4)', + lg: '0 2px 12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4)' + }, + + border: { + radius: { + sm: '4px', + base: '6px', + md: '8px', + lg: '10px', + xl: '12px' + }, + border2: colors.SURFACE2, + border1: colors.SURFACE1, + border0: colors.SURFACE0 + }, + + colors: { + text: { + white: colors.WHITE, + green: colors.GREEN, + danger: colors.RED, + warning: colors.PEACH, + muted: colors.SUBTEXT0, + purple: colors.MAUVE, + yellow: colors.YELLOW, + subtext2: colors.TEXT, + subtext1: colors.SUBTEXT1, + subtext0: colors.SUBTEXT0 + }, + bg: { + danger: colors.MAROON + }, + accent: colors.MAUVE + }, + + input: { + bg: colors.SURFACE0, + border: colors.SURFACE0, + focusBorder: colors.LAVENDER, + placeholder: { + color: colors.OVERLAY0, + opacity: 0.75 + } + }, + + sidebar: { + color: colors.TEXT, + muted: colors.SUBTEXT0, + bg: colors.BASE, + dragbar: { + border: colors.SURFACE1, + activeBorder: colors.SURFACE2 + }, + + search: { + border: '1px solid transparent', + bg: colors.SURFACE0 + }, + + collection: { + item: { + bg: colors.SURFACE0, + hoverBg: colors.SURFACE1, + focusBorder: colors.LAVENDER, + indentBorder: `solid 1px ${colors.SURFACE2}`, + active: { + indentBorder: `solid 1px ${colors.MAUVE}` + }, + example: { + iconColor: colors.OVERLAY1 + } + } + }, + + dropdownIcon: { + color: colors.TEXT + } + }, + + dropdown: { + color: colors.TEXT, + iconColor: colors.SUBTEXT1, + bg: colors.MANTLE, + hoverBg: 'rgba(115, 121, 148, 0.16)', + shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', + separator: colors.SURFACE1, + selectedColor: colors.MAUVE, + mutedText: colors.SUBTEXT0 + }, + + workspace: { + accent: colors.MAUVE, + border: colors.SURFACE1, + button: { + bg: colors.SURFACE0 + } + }, + + request: { + methods: { + get: colors.GREEN, + post: colors.BLUE, + put: colors.YELLOW, + delete: colors.RED, + patch: colors.PEACH, + options: colors.TEAL, + head: colors.SAPPHIRE + }, + + grpc: colors.SKY, + ws: colors.MAUVE, + gql: colors.PINK + }, + + requestTabPanel: { + url: { + bg: colors.BASE, + icon: colors.TEXT, + iconDanger: colors.RED, + border: `solid 1px ${colors.SURFACE0}` + }, + dragbar: { + border: colors.SURFACE1, + activeBorder: colors.OVERLAY0 + }, + responseStatus: colors.TEXT, + responseOk: colors.GREEN, + responseError: colors.RED, + responsePending: colors.BLUE, + responseOverlayBg: 'rgba(48, 52, 70, 0.6)', + + card: { + bg: colors.MANTLE, + border: 'transparent', + hr: colors.SURFACE0 + }, + + graphqlDocsExplorer: { + bg: colors.BASE, + color: colors.TEXT + } + }, + + notifications: { + bg: colors.SURFACE0, + list: { + bg: colors.SURFACE0, + borderRight: colors.SURFACE2, + borderBottom: colors.SURFACE1, + hoverBg: colors.SURFACE1, + active: { + border: colors.BLUE, + bg: colors.SURFACE2, + hoverBg: colors.SURFACE2 + } + } + }, + + modal: { + title: { + color: colors.TEXT, + bg: colors.MANTLE + }, + body: { + color: colors.TEXT, + bg: colors.BASE + }, + input: { + bg: colors.SURFACE0, + border: colors.SURFACE0, + focusBorder: colors.LAVENDER + }, + backdrop: { + opacity: 0.2 + } + }, + + button: { + secondary: { + color: colors.TEXT, + bg: colors.SURFACE0, + border: colors.SURFACE0, + hoverBorder: colors.OVERLAY0 + }, + close: { + color: colors.TEXT, + bg: 'transparent', + border: 'transparent', + hoverBorder: '' + }, + disabled: { + color: colors.OVERLAY0, + bg: colors.SURFACE1, + border: colors.SURFACE1 + }, + danger: { + color: colors.CRUST, + bg: colors.RED, + border: colors.RED + } + }, + button2: { + color: { + primary: { + bg: colors.MAUVE, + text: colors.CRUST, + border: colors.MAUVE + }, + secondary: { + bg: colors.SURFACE0, + text: colors.TEXT, + border: colors.SURFACE1 + }, + success: { + bg: colors.GREEN, + text: colors.CRUST, + border: colors.GREEN + }, + warning: { + bg: colors.PEACH, + text: colors.CRUST, + border: colors.PEACH + }, + danger: { + bg: colors.RED, + text: colors.CRUST, + border: colors.RED + } + } + }, + + tabs: { + marginRight: '1.2rem', + active: { + fontWeight: 400, + color: colors.TEXT, + border: colors.MAUVE + }, + secondary: { + active: { + bg: colors.SURFACE0, + color: colors.TEXT + }, + inactive: { + bg: colors.SURFACE1, + color: colors.SUBTEXT0 + } + } + }, + + requestTabs: { + color: colors.TEXT, + bg: colors.SURFACE0, + bottomBorder: colors.SURFACE1, + icon: { + color: colors.OVERLAY0, + hoverColor: colors.TEXT, + hoverBg: colors.BASE + }, + example: { + iconColor: colors.OVERLAY1 + }, + shortTab: { + color: colors.TEXT, + bg: 'transparent', + hoverColor: colors.TEXT, + hoverBg: colors.SURFACE0 + } + }, + + codemirror: { + bg: colors.BASE, + border: colors.BASE, + placeholder: { + color: colors.OVERLAY0, + opacity: 0.5 + }, + gutter: { + bg: colors.BASE + }, + 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 + } + }, + 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 + }, + searchLineHighlightCurrent: 'rgba(115, 121, 148, 0.18)', + searchMatch: colors.YELLOW, + searchMatchActive: colors.PEACH + }, + + table: { + border: colors.SURFACE0, + thead: { + color: colors.TEXT + }, + striped: colors.SURFACE0, + input: { + color: colors.TEXT + } + }, + + plainGrid: { + hoverBg: colors.SURFACE0 + }, + + scrollbar: { + color: colors.SURFACE0 + }, + + dragAndDrop: { + border: colors.LAVENDER, + borderStyle: '2px solid', + hoverBg: 'rgba(186, 187, 241, 0.08)', + transition: 'all 0.1s ease' + }, + infoTip: { + bg: colors.SURFACE0, + border: colors.SURFACE1, + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)' + }, + + statusBar: { + border: colors.SURFACE0, + color: colors.SUBTEXT0 + }, + + console: { + bg: colors.BASE, + headerBg: colors.MANTLE, + contentBg: colors.BASE, + border: colors.SURFACE0, + titleColor: colors.TEXT, + countColor: colors.SUBTEXT0, + buttonColor: colors.TEXT, + buttonHoverBg: 'rgba(198, 208, 245, 0.1)', + buttonHoverColor: colors.TEXT, + messageColor: colors.TEXT, + timestampColor: colors.SUBTEXT0, + emptyColor: colors.SUBTEXT0, + logHoverBg: 'rgba(198, 208, 245, 0.05)', + resizeHandleHover: colors.BLUE, + resizeHandleActive: colors.BLUE, + dropdownBg: colors.MANTLE, + dropdownHeaderBg: colors.SURFACE0, + optionHoverBg: 'rgba(198, 208, 245, 0.05)', + optionLabelColor: colors.TEXT, + optionCountColor: colors.SUBTEXT0, + checkboxColor: colors.MAUVE, + scrollbarTrack: colors.MANTLE, + scrollbarThumb: colors.SURFACE2, + scrollbarThumbHover: colors.OVERLAY0 + }, + + grpc: { + tabNav: { + container: { + bg: colors.CRUST + }, + button: { + active: { + bg: colors.SURFACE0, + color: colors.TEXT + }, + inactive: { + bg: 'transparent', + color: colors.SUBTEXT0 + } + } + }, + importPaths: { + header: { + text: colors.SUBTEXT0, + button: { + color: colors.SUBTEXT0, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: colors.RED, + link: { + color: colors.RED, + hoverColor: colors.MAROON + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(198, 208, 245, 0.05)', + text: colors.TEXT, + icon: colors.SUBTEXT0, + checkbox: { + color: colors.TEXT + }, + invalid: { + opacity: 0.6, + text: colors.RED + } + }, + empty: { + text: colors.SUBTEXT0 + }, + button: { + bg: colors.SURFACE0, + color: colors.TEXT, + border: colors.SURFACE0, + hoverBorder: colors.OVERLAY0 + } + }, + protoFiles: { + header: { + text: colors.SUBTEXT0, + button: { + color: colors.SUBTEXT0, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: colors.RED, + link: { + color: colors.RED, + hoverColor: colors.MAROON + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(198, 208, 245, 0.05)', + selected: { + bg: 'rgba(202, 158, 230, 0.2)', + border: colors.MAUVE + }, + text: colors.TEXT, + secondaryText: colors.SUBTEXT0, + icon: colors.SUBTEXT0, + invalid: { + opacity: 0.6, + text: colors.RED + } + }, + empty: { + text: colors.SUBTEXT0 + }, + button: { + bg: colors.SURFACE0, + color: colors.TEXT, + border: colors.SURFACE0, + hoverBorder: colors.OVERLAY0 + } + } + }, + deprecationWarning: { + bg: 'rgba(231, 130, 132, 0.1)', + border: 'rgba(231, 130, 132, 0.1)', + icon: colors.RED, + text: colors.SUBTEXT1 + }, + + preferences: { + sidebar: { + border: colors.SURFACE1 + } + }, + + examples: { + buttonBg: 'rgba(202, 158, 230, 0.1)', + buttonColor: colors.MAUVE, + buttonText: colors.CRUST, + buttonIconColor: colors.CRUST, + border: colors.SURFACE1, + urlBar: { + border: colors.SURFACE0, + bg: colors.MANTLE + }, + table: { + thead: { + bg: colors.MANTLE, + color: colors.SUBTEXT0 + } + }, + checkbox: { + color: colors.CRUST + } + }, + + app: { + collection: { + toolbar: { + environmentSelector: { + bg: colors.BASE, + border: colors.SURFACE0, + icon: colors.MAUVE, + text: colors.TEXT, + caret: colors.SUBTEXT0, + separator: colors.SURFACE0, + hoverBg: colors.BASE, + hoverBorder: colors.SURFACE1, + + noEnvironment: { + text: colors.SUBTEXT0, + bg: colors.BASE, + border: colors.SURFACE0, + hoverBg: colors.BASE, + hoverBorder: colors.SURFACE1 + } + }, + sandboxMode: { + safeMode: { + bg: 'rgba(166, 209, 137, 0.12)', + color: colors.GREEN + }, + developerMode: { + bg: 'rgba(229, 200, 144, 0.11)', + color: colors.YELLOW + } + } + } + } + } +}; + +export default catppuccinFrappeTheme; diff --git a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js new file mode 100644 index 000000000..81a73bee6 --- /dev/null +++ b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js @@ -0,0 +1,632 @@ +// Catppuccin Macchiato - Dark Theme +// Based on https://catppuccin.com/palette/ + +const colors = { + // Catppuccin Macchiato Palette + ROSEWATER: '#f4dbd6', + FLAMINGO: '#f0c6c6', + PINK: '#f5bde6', + MAUVE: '#c6a0f6', + RED: '#ed8796', + MAROON: '#ee99a0', + PEACH: '#f5a97f', + YELLOW: '#eed49f', + GREEN: '#a6da95', + TEAL: '#8bd5ca', + SKY: '#91d7e3', + SAPPHIRE: '#7dc4e4', + BLUE: '#8aadf4', + LAVENDER: '#b7bdf8', + + TEXT: '#cad3f5', + SUBTEXT1: '#b8c0e0', + SUBTEXT0: '#a5adcb', + OVERLAY2: '#939ab7', + OVERLAY1: '#8087a2', + OVERLAY0: '#6e738d', + SURFACE2: '#5b6078', + SURFACE1: '#494d64', + SURFACE0: '#363a4f', + BASE: '#24273a', + MANTLE: '#1e2030', + CRUST: '#181926', + + WHITE: '#fff', + BLACK: '#000', + + CODEMIRROR_TOKENS: { + DEFINITION: '#a6da95', + PROPERTY: '#8aadf4', + STRING: '#eed49f', + NUMBER: '#f5a97f', + ATOM: '#f5bde6', + VARIABLE: '#7dc4e4', + KEYWORD: '#ed8796', + COMMENT: '#6e738d', + OPERATOR: '#8bd5ca' + } +}; + +const catppuccinMacchiatoTheme = { + mode: 'dark', + brand: colors.MAUVE, + text: colors.TEXT, + textLink: colors.BLUE, + bg: colors.BASE, + + accents: { + primary: colors.MAUVE + }, + + background: { + base: colors.BASE, + mantle: colors.MANTLE, + crust: colors.CRUST, + surface0: colors.SURFACE0, + surface1: colors.SURFACE1, + surface2: colors.SURFACE2 + }, + + overlay: { + overlay2: colors.OVERLAY2, + overlay1: colors.OVERLAY1, + overlay0: colors.OVERLAY0 + }, + + font: { + size: { + xs: '0.6875rem', // 11px + sm: '0.75rem', // 12px + base: '0.8125rem', // 13px + md: '0.875rem', // 14px + lg: '1rem', // 16px + xl: '1.125rem' // 18px + } + }, + + shadow: { + sm: '0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3)', + md: '0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4)', + lg: '0 2px 12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4)' + }, + + border: { + radius: { + sm: '4px', + base: '6px', + md: '8px', + lg: '10px', + xl: '12px' + }, + border2: colors.SURFACE2, + border1: colors.SURFACE1, + border0: colors.SURFACE0 + }, + + colors: { + text: { + white: colors.WHITE, + green: colors.GREEN, + danger: colors.RED, + warning: colors.PEACH, + muted: colors.SUBTEXT0, + purple: colors.MAUVE, + yellow: colors.YELLOW, + subtext2: colors.TEXT, + subtext1: colors.SUBTEXT1, + subtext0: colors.SUBTEXT0 + }, + bg: { + danger: colors.MAROON + }, + accent: colors.MAUVE + }, + + input: { + bg: colors.SURFACE0, + border: colors.SURFACE0, + focusBorder: colors.LAVENDER, + placeholder: { + color: colors.OVERLAY0, + opacity: 0.75 + } + }, + + sidebar: { + color: colors.TEXT, + muted: colors.SUBTEXT0, + bg: colors.BASE, + dragbar: { + border: colors.SURFACE1, + activeBorder: colors.SURFACE2 + }, + + search: { + border: '1px solid transparent', + bg: colors.SURFACE0 + }, + + collection: { + item: { + bg: colors.SURFACE0, + hoverBg: colors.SURFACE1, + focusBorder: colors.LAVENDER, + indentBorder: `solid 1px ${colors.SURFACE2}`, + active: { + indentBorder: `solid 1px ${colors.MAUVE}` + }, + example: { + iconColor: colors.OVERLAY1 + } + } + }, + + dropdownIcon: { + color: colors.TEXT + } + }, + + dropdown: { + color: colors.TEXT, + iconColor: colors.SUBTEXT1, + bg: colors.MANTLE, + hoverBg: 'rgba(110, 115, 141, 0.16)', + shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', + separator: colors.SURFACE1, + selectedColor: colors.MAUVE, + mutedText: colors.SUBTEXT0 + }, + + workspace: { + accent: colors.MAUVE, + border: colors.SURFACE1, + button: { + bg: colors.SURFACE0 + } + }, + + request: { + methods: { + get: colors.GREEN, + post: colors.BLUE, + put: colors.YELLOW, + delete: colors.RED, + patch: colors.PEACH, + options: colors.TEAL, + head: colors.SAPPHIRE + }, + + grpc: colors.SKY, + ws: colors.MAUVE, + gql: colors.PINK + }, + + requestTabPanel: { + url: { + bg: colors.BASE, + icon: colors.TEXT, + iconDanger: colors.RED, + border: `solid 1px ${colors.SURFACE0}` + }, + dragbar: { + border: colors.SURFACE1, + activeBorder: colors.OVERLAY0 + }, + responseStatus: colors.TEXT, + responseOk: colors.GREEN, + responseError: colors.RED, + responsePending: colors.BLUE, + responseOverlayBg: 'rgba(36, 39, 58, 0.6)', + + card: { + bg: colors.MANTLE, + border: 'transparent', + hr: colors.SURFACE0 + }, + + graphqlDocsExplorer: { + bg: colors.BASE, + color: colors.TEXT + } + }, + + notifications: { + bg: colors.SURFACE0, + list: { + bg: colors.SURFACE0, + borderRight: colors.SURFACE2, + borderBottom: colors.SURFACE1, + hoverBg: colors.SURFACE1, + active: { + border: colors.BLUE, + bg: colors.SURFACE2, + hoverBg: colors.SURFACE2 + } + } + }, + + modal: { + title: { + color: colors.TEXT, + bg: colors.MANTLE + }, + body: { + color: colors.TEXT, + bg: colors.BASE + }, + input: { + bg: colors.SURFACE0, + border: colors.SURFACE0, + focusBorder: colors.LAVENDER + }, + backdrop: { + opacity: 0.2 + } + }, + + button: { + secondary: { + color: colors.TEXT, + bg: colors.SURFACE0, + border: colors.SURFACE0, + hoverBorder: colors.OVERLAY0 + }, + close: { + color: colors.TEXT, + bg: 'transparent', + border: 'transparent', + hoverBorder: '' + }, + disabled: { + color: colors.OVERLAY0, + bg: colors.SURFACE1, + border: colors.SURFACE1 + }, + danger: { + color: colors.CRUST, + bg: colors.RED, + border: colors.RED + } + }, + button2: { + color: { + primary: { + bg: colors.MAUVE, + text: colors.CRUST, + border: colors.MAUVE + }, + secondary: { + bg: colors.SURFACE0, + text: colors.TEXT, + border: colors.SURFACE1 + }, + success: { + bg: colors.GREEN, + text: colors.CRUST, + border: colors.GREEN + }, + warning: { + bg: colors.PEACH, + text: colors.CRUST, + border: colors.PEACH + }, + danger: { + bg: colors.RED, + text: colors.CRUST, + border: colors.RED + } + } + }, + + tabs: { + marginRight: '1.2rem', + active: { + fontWeight: 400, + color: colors.TEXT, + border: colors.MAUVE + }, + secondary: { + active: { + bg: colors.SURFACE0, + color: colors.TEXT + }, + inactive: { + bg: colors.SURFACE1, + color: colors.SUBTEXT0 + } + } + }, + + requestTabs: { + color: colors.TEXT, + bg: colors.SURFACE0, + bottomBorder: colors.SURFACE1, + icon: { + color: colors.OVERLAY0, + hoverColor: colors.TEXT, + hoverBg: colors.BASE + }, + example: { + iconColor: colors.OVERLAY1 + }, + shortTab: { + color: colors.TEXT, + bg: 'transparent', + hoverColor: colors.TEXT, + hoverBg: colors.SURFACE0 + } + }, + + codemirror: { + bg: colors.BASE, + border: colors.BASE, + placeholder: { + color: colors.OVERLAY0, + opacity: 0.5 + }, + gutter: { + bg: colors.BASE + }, + 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 + } + }, + 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 + }, + searchLineHighlightCurrent: 'rgba(110, 115, 141, 0.18)', + searchMatch: colors.YELLOW, + searchMatchActive: colors.PEACH + }, + + table: { + border: colors.SURFACE0, + thead: { + color: colors.TEXT + }, + striped: colors.SURFACE0, + input: { + color: colors.TEXT + } + }, + + plainGrid: { + hoverBg: colors.SURFACE0 + }, + + scrollbar: { + color: colors.SURFACE0 + }, + + dragAndDrop: { + border: colors.LAVENDER, + borderStyle: '2px solid', + hoverBg: 'rgba(183, 189, 248, 0.08)', + transition: 'all 0.1s ease' + }, + infoTip: { + bg: colors.SURFACE0, + border: colors.SURFACE1, + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)' + }, + + statusBar: { + border: colors.SURFACE0, + color: colors.SUBTEXT0 + }, + + console: { + bg: colors.BASE, + headerBg: colors.MANTLE, + contentBg: colors.BASE, + border: colors.SURFACE0, + titleColor: colors.TEXT, + countColor: colors.SUBTEXT0, + buttonColor: colors.TEXT, + buttonHoverBg: 'rgba(202, 211, 245, 0.1)', + buttonHoverColor: colors.TEXT, + messageColor: colors.TEXT, + timestampColor: colors.SUBTEXT0, + emptyColor: colors.SUBTEXT0, + logHoverBg: 'rgba(202, 211, 245, 0.05)', + resizeHandleHover: colors.BLUE, + resizeHandleActive: colors.BLUE, + dropdownBg: colors.MANTLE, + dropdownHeaderBg: colors.SURFACE0, + optionHoverBg: 'rgba(202, 211, 245, 0.05)', + optionLabelColor: colors.TEXT, + optionCountColor: colors.SUBTEXT0, + checkboxColor: colors.MAUVE, + scrollbarTrack: colors.MANTLE, + scrollbarThumb: colors.SURFACE2, + scrollbarThumbHover: colors.OVERLAY0 + }, + + grpc: { + tabNav: { + container: { + bg: colors.CRUST + }, + button: { + active: { + bg: colors.SURFACE0, + color: colors.TEXT + }, + inactive: { + bg: 'transparent', + color: colors.SUBTEXT0 + } + } + }, + importPaths: { + header: { + text: colors.SUBTEXT0, + button: { + color: colors.SUBTEXT0, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: colors.RED, + link: { + color: colors.RED, + hoverColor: colors.MAROON + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(202, 211, 245, 0.05)', + text: colors.TEXT, + icon: colors.SUBTEXT0, + checkbox: { + color: colors.TEXT + }, + invalid: { + opacity: 0.6, + text: colors.RED + } + }, + empty: { + text: colors.SUBTEXT0 + }, + button: { + bg: colors.SURFACE0, + color: colors.TEXT, + border: colors.SURFACE0, + hoverBorder: colors.OVERLAY0 + } + }, + protoFiles: { + header: { + text: colors.SUBTEXT0, + button: { + color: colors.SUBTEXT0, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: colors.RED, + link: { + color: colors.RED, + hoverColor: colors.MAROON + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(202, 211, 245, 0.05)', + selected: { + bg: 'rgba(198, 160, 246, 0.2)', + border: colors.MAUVE + }, + text: colors.TEXT, + secondaryText: colors.SUBTEXT0, + icon: colors.SUBTEXT0, + invalid: { + opacity: 0.6, + text: colors.RED + } + }, + empty: { + text: colors.SUBTEXT0 + }, + button: { + bg: colors.SURFACE0, + color: colors.TEXT, + border: colors.SURFACE0, + hoverBorder: colors.OVERLAY0 + } + } + }, + deprecationWarning: { + bg: 'rgba(237, 135, 150, 0.1)', + border: 'rgba(237, 135, 150, 0.1)', + icon: colors.RED, + text: colors.SUBTEXT1 + }, + + preferences: { + sidebar: { + border: colors.SURFACE1 + } + }, + + examples: { + buttonBg: 'rgba(198, 160, 246, 0.1)', + buttonColor: colors.MAUVE, + buttonText: colors.CRUST, + buttonIconColor: colors.CRUST, + border: colors.SURFACE1, + urlBar: { + border: colors.SURFACE0, + bg: colors.MANTLE + }, + table: { + thead: { + bg: colors.MANTLE, + color: colors.SUBTEXT0 + } + }, + checkbox: { + color: colors.CRUST + } + }, + + app: { + collection: { + toolbar: { + environmentSelector: { + bg: colors.BASE, + border: colors.SURFACE0, + icon: colors.MAUVE, + text: colors.TEXT, + caret: colors.SUBTEXT0, + separator: colors.SURFACE0, + hoverBg: colors.BASE, + hoverBorder: colors.SURFACE1, + + noEnvironment: { + text: colors.SUBTEXT0, + bg: colors.BASE, + border: colors.SURFACE0, + hoverBg: colors.BASE, + hoverBorder: colors.SURFACE1 + } + }, + sandboxMode: { + safeMode: { + bg: 'rgba(166, 218, 149, 0.12)', + color: colors.GREEN + }, + developerMode: { + bg: 'rgba(238, 212, 159, 0.11)', + color: colors.YELLOW + } + } + } + } + } +}; + +export default catppuccinMacchiatoTheme; diff --git a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js new file mode 100644 index 000000000..6889277f4 --- /dev/null +++ b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js @@ -0,0 +1,632 @@ +// Catppuccin Mocha - Dark Theme (Original) +// Based on https://catppuccin.com/palette/ + +const colors = { + // Catppuccin Mocha Palette + ROSEWATER: '#f5e0dc', + FLAMINGO: '#f2cdcd', + PINK: '#f5c2e7', + MAUVE: '#cba6f7', + RED: '#f38ba8', + MAROON: '#eba0ac', + PEACH: '#fab387', + YELLOW: '#f9e2af', + GREEN: '#a6e3a1', + TEAL: '#94e2d5', + SKY: '#89dceb', + SAPPHIRE: '#74c7ec', + BLUE: '#89b4fa', + LAVENDER: '#b4befe', + + TEXT: '#cdd6f4', + SUBTEXT1: '#bac2de', + SUBTEXT0: '#a6adc8', + OVERLAY2: '#9399b2', + OVERLAY1: '#7f849c', + OVERLAY0: '#6c7086', + SURFACE2: '#585b70', + SURFACE1: '#45475a', + SURFACE0: '#313244', + BASE: '#1e1e2e', + MANTLE: '#181825', + CRUST: '#11111b', + + WHITE: '#fff', + BLACK: '#000', + + CODEMIRROR_TOKENS: { + DEFINITION: '#a6e3a1', + PROPERTY: '#89b4fa', + STRING: '#f9e2af', + NUMBER: '#fab387', + ATOM: '#f5c2e7', + VARIABLE: '#74c7ec', + KEYWORD: '#f38ba8', + COMMENT: '#6c7086', + OPERATOR: '#94e2d5' + } +}; + +const catppuccinMochaTheme = { + mode: 'dark', + brand: colors.MAUVE, + text: colors.TEXT, + textLink: colors.BLUE, + bg: colors.BASE, + + accents: { + primary: colors.MAUVE + }, + + background: { + base: colors.BASE, + mantle: colors.MANTLE, + crust: colors.CRUST, + surface0: colors.SURFACE0, + surface1: colors.SURFACE1, + surface2: colors.SURFACE2 + }, + + overlay: { + overlay2: colors.OVERLAY2, + overlay1: colors.OVERLAY1, + overlay0: colors.OVERLAY0 + }, + + font: { + size: { + xs: '0.6875rem', // 11px + sm: '0.75rem', // 12px + base: '0.8125rem', // 13px + md: '0.875rem', // 14px + lg: '1rem', // 16px + xl: '1.125rem' // 18px + } + }, + + shadow: { + sm: '0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3)', + md: '0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4)', + lg: '0 2px 12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4)' + }, + + border: { + radius: { + sm: '4px', + base: '6px', + md: '8px', + lg: '10px', + xl: '12px' + }, + border2: colors.SURFACE2, + border1: colors.SURFACE1, + border0: colors.SURFACE0 + }, + + colors: { + text: { + white: colors.WHITE, + green: colors.GREEN, + danger: colors.RED, + warning: colors.PEACH, + muted: colors.SUBTEXT0, + purple: colors.MAUVE, + yellow: colors.YELLOW, + subtext2: colors.TEXT, + subtext1: colors.SUBTEXT1, + subtext0: colors.SUBTEXT0 + }, + bg: { + danger: colors.MAROON + }, + accent: colors.MAUVE + }, + + input: { + bg: colors.SURFACE0, + border: colors.SURFACE0, + focusBorder: colors.LAVENDER, + placeholder: { + color: colors.OVERLAY0, + opacity: 0.75 + } + }, + + sidebar: { + color: colors.TEXT, + muted: colors.SUBTEXT0, + bg: colors.BASE, + dragbar: { + border: colors.SURFACE1, + activeBorder: colors.SURFACE2 + }, + + search: { + border: '1px solid transparent', + bg: colors.SURFACE0 + }, + + collection: { + item: { + bg: colors.SURFACE0, + hoverBg: colors.SURFACE1, + focusBorder: colors.LAVENDER, + indentBorder: `solid 1px ${colors.SURFACE2}`, + active: { + indentBorder: `solid 1px ${colors.MAUVE}` + }, + example: { + iconColor: colors.OVERLAY1 + } + } + }, + + dropdownIcon: { + color: colors.TEXT + } + }, + + dropdown: { + color: colors.TEXT, + iconColor: colors.SUBTEXT1, + bg: colors.MANTLE, + hoverBg: 'rgba(108, 112, 134, 0.16)', + shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', + separator: colors.SURFACE1, + selectedColor: colors.MAUVE, + mutedText: colors.SUBTEXT0 + }, + + workspace: { + accent: colors.MAUVE, + border: colors.SURFACE1, + button: { + bg: colors.SURFACE0 + } + }, + + request: { + methods: { + get: colors.GREEN, + post: colors.BLUE, + put: colors.YELLOW, + delete: colors.RED, + patch: colors.PEACH, + options: colors.TEAL, + head: colors.SAPPHIRE + }, + + grpc: colors.SKY, + ws: colors.MAUVE, + gql: colors.PINK + }, + + requestTabPanel: { + url: { + bg: colors.BASE, + icon: colors.TEXT, + iconDanger: colors.RED, + border: `solid 1px ${colors.SURFACE0}` + }, + dragbar: { + border: colors.SURFACE1, + activeBorder: colors.OVERLAY0 + }, + responseStatus: colors.TEXT, + responseOk: colors.GREEN, + responseError: colors.RED, + responsePending: colors.BLUE, + responseOverlayBg: 'rgba(30, 30, 46, 0.6)', + + card: { + bg: colors.MANTLE, + border: 'transparent', + hr: colors.SURFACE0 + }, + + graphqlDocsExplorer: { + bg: colors.BASE, + color: colors.TEXT + } + }, + + notifications: { + bg: colors.SURFACE0, + list: { + bg: colors.SURFACE0, + borderRight: colors.SURFACE2, + borderBottom: colors.SURFACE1, + hoverBg: colors.SURFACE1, + active: { + border: colors.BLUE, + bg: colors.SURFACE2, + hoverBg: colors.SURFACE2 + } + } + }, + + modal: { + title: { + color: colors.TEXT, + bg: colors.MANTLE + }, + body: { + color: colors.TEXT, + bg: colors.BASE + }, + input: { + bg: colors.SURFACE0, + border: colors.SURFACE0, + focusBorder: colors.LAVENDER + }, + backdrop: { + opacity: 0.2 + } + }, + + button: { + secondary: { + color: colors.TEXT, + bg: colors.SURFACE0, + border: colors.SURFACE0, + hoverBorder: colors.OVERLAY0 + }, + close: { + color: colors.TEXT, + bg: 'transparent', + border: 'transparent', + hoverBorder: '' + }, + disabled: { + color: colors.OVERLAY0, + bg: colors.SURFACE1, + border: colors.SURFACE1 + }, + danger: { + color: colors.CRUST, + bg: colors.RED, + border: colors.RED + } + }, + button2: { + color: { + primary: { + bg: colors.MAUVE, + text: colors.CRUST, + border: colors.MAUVE + }, + secondary: { + bg: colors.SURFACE0, + text: colors.TEXT, + border: colors.SURFACE1 + }, + success: { + bg: colors.GREEN, + text: colors.CRUST, + border: colors.GREEN + }, + warning: { + bg: colors.PEACH, + text: colors.CRUST, + border: colors.PEACH + }, + danger: { + bg: colors.RED, + text: colors.CRUST, + border: colors.RED + } + } + }, + + tabs: { + marginRight: '1.2rem', + active: { + fontWeight: 400, + color: colors.TEXT, + border: colors.MAUVE + }, + secondary: { + active: { + bg: colors.SURFACE0, + color: colors.TEXT + }, + inactive: { + bg: colors.SURFACE1, + color: colors.SUBTEXT0 + } + } + }, + + requestTabs: { + color: colors.TEXT, + bg: colors.SURFACE0, + bottomBorder: colors.SURFACE1, + icon: { + color: colors.OVERLAY0, + hoverColor: colors.TEXT, + hoverBg: colors.BASE + }, + example: { + iconColor: colors.OVERLAY1 + }, + shortTab: { + color: colors.TEXT, + bg: 'transparent', + hoverColor: colors.TEXT, + hoverBg: colors.SURFACE0 + } + }, + + codemirror: { + bg: colors.BASE, + border: colors.BASE, + placeholder: { + color: colors.OVERLAY0, + opacity: 0.5 + }, + gutter: { + bg: colors.BASE + }, + 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 + } + }, + 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 + }, + searchLineHighlightCurrent: 'rgba(108, 112, 134, 0.18)', + searchMatch: colors.YELLOW, + searchMatchActive: colors.PEACH + }, + + table: { + border: colors.SURFACE0, + thead: { + color: colors.TEXT + }, + striped: colors.SURFACE0, + input: { + color: colors.TEXT + } + }, + + plainGrid: { + hoverBg: colors.SURFACE0 + }, + + scrollbar: { + color: colors.SURFACE0 + }, + + dragAndDrop: { + border: colors.LAVENDER, + borderStyle: '2px solid', + hoverBg: 'rgba(180, 190, 254, 0.08)', + transition: 'all 0.1s ease' + }, + infoTip: { + bg: colors.SURFACE0, + border: colors.SURFACE1, + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)' + }, + + statusBar: { + border: colors.SURFACE0, + color: colors.SUBTEXT0 + }, + + console: { + bg: colors.BASE, + headerBg: colors.MANTLE, + contentBg: colors.BASE, + border: colors.SURFACE0, + titleColor: colors.TEXT, + countColor: colors.SUBTEXT0, + buttonColor: colors.TEXT, + buttonHoverBg: 'rgba(205, 214, 244, 0.1)', + buttonHoverColor: colors.TEXT, + messageColor: colors.TEXT, + timestampColor: colors.SUBTEXT0, + emptyColor: colors.SUBTEXT0, + logHoverBg: 'rgba(205, 214, 244, 0.05)', + resizeHandleHover: colors.BLUE, + resizeHandleActive: colors.BLUE, + dropdownBg: colors.MANTLE, + dropdownHeaderBg: colors.SURFACE0, + optionHoverBg: 'rgba(205, 214, 244, 0.05)', + optionLabelColor: colors.TEXT, + optionCountColor: colors.SUBTEXT0, + checkboxColor: colors.MAUVE, + scrollbarTrack: colors.MANTLE, + scrollbarThumb: colors.SURFACE2, + scrollbarThumbHover: colors.OVERLAY0 + }, + + grpc: { + tabNav: { + container: { + bg: colors.CRUST + }, + button: { + active: { + bg: colors.SURFACE0, + color: colors.TEXT + }, + inactive: { + bg: 'transparent', + color: colors.SUBTEXT0 + } + } + }, + importPaths: { + header: { + text: colors.SUBTEXT0, + button: { + color: colors.SUBTEXT0, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: colors.RED, + link: { + color: colors.RED, + hoverColor: colors.MAROON + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(205, 214, 244, 0.05)', + text: colors.TEXT, + icon: colors.SUBTEXT0, + checkbox: { + color: colors.TEXT + }, + invalid: { + opacity: 0.6, + text: colors.RED + } + }, + empty: { + text: colors.SUBTEXT0 + }, + button: { + bg: colors.SURFACE0, + color: colors.TEXT, + border: colors.SURFACE0, + hoverBorder: colors.OVERLAY0 + } + }, + protoFiles: { + header: { + text: colors.SUBTEXT0, + button: { + color: colors.SUBTEXT0, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: colors.RED, + link: { + color: colors.RED, + hoverColor: colors.MAROON + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(205, 214, 244, 0.05)', + selected: { + bg: 'rgba(203, 166, 247, 0.2)', + border: colors.MAUVE + }, + text: colors.TEXT, + secondaryText: colors.SUBTEXT0, + icon: colors.SUBTEXT0, + invalid: { + opacity: 0.6, + text: colors.RED + } + }, + empty: { + text: colors.SUBTEXT0 + }, + button: { + bg: colors.SURFACE0, + color: colors.TEXT, + border: colors.SURFACE0, + hoverBorder: colors.OVERLAY0 + } + } + }, + deprecationWarning: { + bg: 'rgba(243, 139, 168, 0.1)', + border: 'rgba(243, 139, 168, 0.1)', + icon: colors.RED, + text: colors.SUBTEXT1 + }, + + preferences: { + sidebar: { + border: colors.SURFACE1 + } + }, + + examples: { + buttonBg: 'rgba(203, 166, 247, 0.1)', + buttonColor: colors.MAUVE, + buttonText: colors.CRUST, + buttonIconColor: colors.CRUST, + border: colors.SURFACE1, + urlBar: { + border: colors.SURFACE0, + bg: colors.MANTLE + }, + table: { + thead: { + bg: colors.MANTLE, + color: colors.SUBTEXT0 + } + }, + checkbox: { + color: colors.CRUST + } + }, + + app: { + collection: { + toolbar: { + environmentSelector: { + bg: colors.BASE, + border: colors.SURFACE0, + icon: colors.MAUVE, + text: colors.TEXT, + caret: colors.SUBTEXT0, + separator: colors.SURFACE0, + hoverBg: colors.BASE, + hoverBorder: colors.SURFACE1, + + noEnvironment: { + text: colors.SUBTEXT0, + bg: colors.BASE, + border: colors.SURFACE0, + hoverBg: colors.BASE, + hoverBorder: colors.SURFACE1 + } + }, + sandboxMode: { + safeMode: { + bg: 'rgba(166, 227, 161, 0.12)', + color: colors.GREEN + }, + developerMode: { + bg: 'rgba(249, 226, 175, 0.11)', + color: colors.YELLOW + } + } + } + } + } +}; + +export default catppuccinMochaTheme; diff --git a/packages/bruno-app/src/themes/dark/dark-monochrome.js b/packages/bruno-app/src/themes/dark/dark-monochrome.js new file mode 100644 index 000000000..b23e6c50a --- /dev/null +++ b/packages/bruno-app/src/themes/dark/dark-monochrome.js @@ -0,0 +1,619 @@ +const colors = { + BRAND: '#a3a3a3', + TEXT: '#d4d4d4', + TEXT_MUTED: '#858585', + TEXT_LINK: '#b0b0b0', + BG: '#1e1e1e', + + GREEN: '#a3a3a3', + YELLOW: '#a3a3a3', + WHITE: '#fff', + BLACK: '#000', + + GRAY_1: '#252526', + GRAY_2: '#3D3D3D', + GRAY_3: '#444444', + GRAY_4: '#666666', + GRAY_5: '#b0b0b0', + GRAY_6: '#cbcbcb', + GRAY_7: '#e5e5e5', + GRAY_8: '#eaeaea', + GRAY_9: '#f3f3f3', + GRAY_10: '#f8f8f8', + + CODEMIRROR_TOKENS: { + DEFINITION: '#b0b0b0', + PROPERTY: '#a3a3a3', + STRING: '#c0c0c0', + NUMBER: '#b0b0b0', + ATOM: '#a3a3a3', + VARIABLE: '#b0b0b0', + KEYWORD: '#d4d4d4', + COMMENT: '#6a6a6a', + OPERATOR: '#d4d4d4' + } +}; + +const darkMonochromeTheme = { + mode: 'dark', + brand: colors.BRAND, + text: colors.TEXT, + textLink: colors.TEXT_LINK, + bg: colors.BG, + + accents: { + primary: colors.BRAND + }, + + background: { + base: colors.BG, + mantle: colors.GRAY_1, + crust: '#333333', + surface0: colors.GRAY_2, + surface1: colors.GRAY_3, + surface2: colors.GRAY_4 + }, + + overlay: { + overlay2: '#666666', + overlay1: '#555555', + overlay0: '#444444' + }, + + font: { + size: { + xs: '0.6875rem', + sm: '0.75rem', + base: '0.8125rem', + md: '0.875rem', + lg: '1rem', + xl: '1.125rem' + } + }, + + shadow: { + sm: '0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3)', + md: '0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4)', + lg: '0 2px 12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4)' + }, + + border: { + radius: { + sm: '4px', + base: '6px', + md: '8px', + lg: '10px', + xl: '12px' + }, + border2: colors.GRAY_4, + border1: colors.GRAY_3, + border0: colors.GRAY_2 + }, + + colors: { + text: { + white: colors.WHITE, + green: '#a3a3a3', + danger: '#b0b0b0', + warning: '#a3a3a3', + muted: colors.TEXT_MUTED, + purple: '#a3a3a3', + yellow: colors.YELLOW, + subtext2: colors.GRAY_6, + subtext1: colors.GRAY_5, + subtext0: colors.GRAY_4 + }, + bg: { + danger: '#666666' + }, + accent: colors.BRAND + }, + + input: { + bg: 'rgb(65, 65, 65)', + border: 'rgb(65, 65, 65)', + focusBorder: 'rgb(65, 65, 65)', + placeholder: { + color: '#a2a2a2', + opacity: 0.75 + } + }, + + sidebar: { + color: '#ccc', + muted: '#9d9d9d', + bg: colors.GRAY_1, + dragbar: { + border: 'transparent', + activeBorder: colors.GRAY_4 + }, + + search: { + border: '1px solid transparent', + bg: colors.GRAY_2 + }, + + collection: { + item: { + bg: '#37373D', + hoverBg: '#2A2D2F', + focusBorder: '#4e4e4e', + indentBorder: 'solid 1px #585858', + active: { + indentBorder: 'solid 1px #4c4c4c' + }, + example: { + iconColor: colors.GRAY_5 + } + } + }, + + dropdownIcon: { + color: '#ccc' + } + }, + + dropdown: { + color: 'rgb(204, 204, 204)', + iconColor: 'rgb(204, 204, 204)', + bg: 'rgb(48, 48, 49)', + hoverBg: '#6A6A6A29', + shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', + separator: '#444', + selectedColor: '#a3a3a3', + mutedText: '#9B9B9B' + }, + + workspace: { + accent: '#a3a3a3', + border: '#444', + button: { + bg: colors.GRAY_2 + } + }, + + request: { + methods: { + get: '#a3a3a3', + post: '#b0b0b0', + put: '#9a9a9a', + delete: '#c0c0c0', + patch: '#9a9a9a', + options: '#8a8a8a', + head: '#9da5b4' + }, + + grpc: '#a3a3a3', + ws: '#b0b0b0', + gql: '#9a9a9a' + }, + + requestTabPanel: { + url: { + bg: colors.BG, + icon: 'rgb(204, 204, 204)', + iconDanger: '#b0b0b0', + border: `solid 1px ${colors.GRAY_3}` + }, + dragbar: { + border: '#444', + activeBorder: '#8a8a8a' + }, + responseStatus: '#ccc', + responseOk: '#a3a3a3', + responseError: '#b0b0b0', + responsePending: '#a3a3a3', + responseOverlayBg: 'rgba(30, 30, 30, 0.6)', + + card: { + bg: '#252526', + border: 'transparent', + hr: '#424242' + }, + + graphqlDocsExplorer: { + bg: '#1e1e1e', + color: '#d4d4d4' + } + }, + + notifications: { + bg: colors.GRAY_3, + list: { + bg: '3D3D3D', + borderRight: '#4f4f4f', + borderBottom: '#545454', + hoverBg: '#434343', + active: { + border: '#a3a3a3', + bg: '#4f4f4f', + hoverBg: '#4f4f4f' + } + } + }, + + modal: { + title: { + color: '#ccc', + bg: 'rgb(38, 38, 39)' + }, + body: { + color: '#ccc', + bg: 'rgb(48, 48, 49)' + }, + input: { + bg: 'rgb(65, 65, 65)', + border: 'rgb(65, 65, 65)', + focusBorder: 'rgb(65, 65, 65)' + }, + backdrop: { + opacity: 0.2 + } + }, + + button: { + secondary: { + color: 'rgb(204, 204, 204)', + bg: '#525252', + border: '#525252', + hoverBorder: '#696969' + }, + close: { + color: '#ccc', + bg: 'transparent', + border: 'transparent', + hoverBorder: '' + }, + disabled: { + color: '#a5a5a5', + bg: '#626262', + border: '#626262' + }, + danger: { + color: '#fff', + bg: '#666666', + border: '#666666' + } + }, + button2: { + color: { + primary: { + bg: colors.BRAND, + text: colors.BLACK, + border: colors.BRAND + }, + secondary: { + bg: colors.GRAY_4, + text: '#fff', + border: colors.GRAY_5 + }, + success: { + bg: '#666666', + text: '#fff', + border: '#666666' + }, + warning: { + bg: '#858585', + text: '#1e1e1e', + border: '#858585' + }, + danger: { + bg: '#737373', + text: '#fff', + border: '#737373' + } + } + }, + + tabs: { + marginRight: '1.2rem', + active: { + fontWeight: 400, + color: '#CCCCCC', + border: '#a3a3a3' + }, + secondary: { + active: { + bg: '#2D2D2D', + color: '#CCCCCC' + }, + inactive: { + bg: '#3F3F3F', + color: '#CCCCCC' + } + } + }, + + requestTabs: { + color: '#ccc', + bg: '#2A2D2F', + bottomBorder: '#444', + icon: { + color: '#9f9f9f', + hoverColor: 'rgb(204, 204, 204)', + hoverBg: '#1e1e1e' + }, + example: { + iconColor: colors.GRAY_5 + }, + shortTab: { + color: '#ccc', + bg: 'transparent', + hoverColor: '#ccc', + hoverBg: colors.GRAY_3 + } + }, + + codemirror: { + bg: colors.BG, + border: colors.BG, + placeholder: { + color: '#a2a2a2', + opacity: 0.5 + }, + gutter: { + bg: colors.BG + }, + 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' + } + }, + 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 + }, + searchLineHighlightCurrent: 'rgba(120,120,120,0.18)', + searchMatch: '#a3a3a3', + searchMatchActive: '#d4d4d4' + }, + + table: { + border: '#333', + thead: { + color: 'rgb(204, 204, 204)' + }, + striped: '#2A2D2F', + input: { + color: '#ccc' + } + }, + + plainGrid: { + hoverBg: colors.GRAY_3 + }, + + scrollbar: { + color: 'rgb(52 51 49)' + }, + + dragAndDrop: { + border: '#666666', + borderStyle: '2px solid', + hoverBg: 'rgba(102, 102, 102, 0.08)', + transition: 'all 0.1s ease' + }, + infoTip: { + bg: '#1f1f1f', + border: '#333333', + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)' + }, + + statusBar: { + border: '#323233', + color: 'rgb(169, 169, 169)' + }, + + console: { + bg: '#1e1e1e', + headerBg: '#2d2d30', + contentBg: '#1e1e1e', + border: '#3c3c3c', + titleColor: '#cccccc', + countColor: '#858585', + buttonColor: '#cccccc', + buttonHoverBg: 'rgba(255, 255, 255, 0.1)', + buttonHoverColor: '#ffffff', + messageColor: '#cccccc', + timestampColor: '#858585', + emptyColor: '#858585', + logHoverBg: 'rgba(255, 255, 255, 0.05)', + resizeHandleHover: '#a3a3a3', + resizeHandleActive: '#a3a3a3', + dropdownBg: '#2d2d30', + dropdownHeaderBg: '#3c3c3c', + optionHoverBg: 'rgba(255, 255, 255, 0.05)', + optionLabelColor: '#cccccc', + optionCountColor: '#858585', + checkboxColor: colors.BRAND, + scrollbarTrack: '#2d2d30', + scrollbarThumb: '#5a5a5a', + scrollbarThumbHover: '#6a6a6a' + }, + + grpc: { + tabNav: { + container: { + bg: '#262626' + }, + button: { + active: { + bg: '#404040', + color: '#ffffff' + }, + inactive: { + bg: 'transparent', + color: '#a3a3a3' + } + } + }, + importPaths: { + header: { + text: '#9d9d9d', + button: { + color: '#9d9d9d', + hoverColor: '#d4d4d4' + } + }, + error: { + bg: 'transparent', + text: '#b0b0b0', + link: { + color: '#b0b0b0', + hoverColor: '#c0c0c0' + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(255, 255, 255, 0.05)', + text: '#d4d4d4', + icon: '#9d9d9d', + checkbox: { + color: '#d4d4d4' + }, + invalid: { + opacity: 0.6, + text: '#b0b0b0' + } + }, + empty: { + text: '#9d9d9d' + }, + button: { + bg: '#525252', + color: '#d4d4d4', + border: '#525252', + hoverBorder: '#696969' + } + }, + protoFiles: { + header: { + text: '#9d9d9d', + button: { + color: '#9d9d9d', + hoverColor: '#d4d4d4' + } + }, + error: { + bg: 'transparent', + text: '#b0b0b0', + link: { + color: '#b0b0b0', + hoverColor: '#c0c0c0' + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(255, 255, 255, 0.05)', + selected: { + bg: 'rgba(163, 163, 163, 0.2)', + border: '#a3a3a3' + }, + text: '#d4d4d4', + secondaryText: '#9d9d9d', + icon: '#9d9d9d', + invalid: { + opacity: 0.6, + text: '#b0b0b0' + } + }, + empty: { + text: '#9d9d9d' + }, + button: { + bg: '#525252', + color: '#d4d4d4', + border: '#525252', + hoverBorder: '#696969' + } + } + }, + deprecationWarning: { + bg: 'rgba(176, 176, 176, 0.1)', + border: 'rgba(176, 176, 176, 0.1)', + icon: '#b0b0b0', + text: '#B8B8B8' + }, + + preferences: { + sidebar: { + border: '#444444' + } + }, + + examples: { + buttonBg: '#a3a3a31A', + buttonColor: '#a3a3a3', + buttonText: '#fff', + buttonIconColor: '#fff', + border: '#444', + urlBar: { + border: colors.GRAY_3, + bg: '#292929' + }, + table: { + thead: { + bg: '#292929', + color: '#969696' + } + }, + checkbox: { + color: '#000' + } + }, + + app: { + collection: { + toolbar: { + environmentSelector: { + bg: colors.BG, + border: colors.GRAY_3, + icon: colors.BRAND, + text: colors.TEXT, + caret: colors.TEXT_MUTED, + separator: colors.GRAY_3, + hoverBg: colors.BG, + hoverBorder: colors.GRAY_4, + + noEnvironment: { + text: colors.TEXT_MUTED, + bg: colors.BG, + border: colors.GRAY_3, + hoverBg: colors.BG, + hoverBorder: colors.GRAY_4 + } + }, + sandboxMode: { + safeMode: { + bg: 'rgba(163, 163, 163, 0.12)', + color: '#a3a3a3' + }, + developerMode: { + bg: 'rgba(163, 163, 163, 0.11)', + color: '#a3a3a3' + } + } + } + } + } +}; + +export default darkMonochromeTheme; diff --git a/packages/bruno-app/src/themes/dark/dark-pastel.js b/packages/bruno-app/src/themes/dark/dark-pastel.js new file mode 100644 index 000000000..42aa5c875 --- /dev/null +++ b/packages/bruno-app/src/themes/dark/dark-pastel.js @@ -0,0 +1,636 @@ +/** + * Dark Pastel Theme - "Nebula" + * A rich, dreamy dark theme with luminous pastel accents. + * Inspired by northern lights, night gardens, and starlit dreams. + * Deep enough to be easy on the eyes, vibrant enough to inspire. + */ + +const colors = { + // Primary palette - glowing pastels against deep purple-black + BRAND: '#f0a6ca', // Soft rose - warm and inviting + TEXT: '#e8e0f0', // Lavender white - soft, readable + TEXT_MUTED: '#a89fc4', // Dusty lavender + TEXT_LINK: '#a8c5f0', // Soft periwinkle blue + BG: '#1a1625', // Deep plum-black + + // Core colors + WHITE: '#ffffff', + BLACK: '#0d0a12', + SLATE: '#e8e0f0', + + // Luminous pastels - glowing against darkness + GREEN: '#7dd3a8', // Mint glow + YELLOW: '#f0d77d', // Soft gold + RED: '#f0887d', // Coral blush + PURPLE: '#c4a6f0', // Lavender dream + BLUE: '#7db8f0', // Sky shimmer + PINK: '#f0a6ca', // Rose petal + ORANGE: '#f0b87d', // Peach sunset + TEAL: '#7dd3c9', // Aqua glow + MAGENTA: '#e09fd9', // Orchid + + // Deep grayscale with purple undertones + GRAY_1: '#1f1a2e', // Deepest plum + GRAY_2: '#2a2440', // Dark violet + GRAY_3: '#352e4d', // Muted purple + GRAY_4: '#453d5c', // Dusty violet + GRAY_5: '#5c5478', // Medium violet + GRAY_6: '#7a7294', // Soft violet + GRAY_7: '#9890ad', // Light violet + GRAY_8: '#b8b0cc', // Pale violet + GRAY_9: '#d8d0e8', // Whisper violet + GRAY_10: '#f0e8ff', // Lightest violet + + // CodeMirror syntax - a constellation of colors + CODEMIRROR_TOKENS: { + DEFINITION: '#7dd3a8', // Mint - definitions stand out fresh + PROPERTY: '#7db8f0', // Sky blue - clear and calm + STRING: '#f0a6ca', // Rose - strings feel warm + NUMBER: '#7dd3c9', // Teal - numbers are precise + ATOM: '#c4a6f0', // Lavender - atoms are special + VARIABLE: '#a8c5f0', // Periwinkle - variables flow + KEYWORD: '#e09fd9', // Orchid - keywords command attention + COMMENT: '#7a7294', // Muted violet - comments recede + OPERATOR: '#b8b0cc' // Pale violet - operators connect + } +}; + +const darkPastelTheme = { + mode: 'dark', + brand: colors.BRAND, + text: colors.TEXT, + textLink: colors.TEXT_LINK, + bg: colors.BG, + + accents: { + primary: colors.BRAND + }, + + background: { + base: colors.BG, + mantle: colors.GRAY_1, + crust: colors.GRAY_2, + surface0: colors.GRAY_3, + surface1: colors.GRAY_4, + surface2: colors.GRAY_5 + }, + + overlay: { + overlay2: colors.GRAY_6, + overlay1: '#555555', + overlay0: '#444444' + }, + + font: { + size: { + xs: '0.6875rem', + sm: '0.75rem', + base: '0.8125rem', + md: '0.875rem', + lg: '1rem', + xl: '1.125rem' + } + }, + + shadow: { + sm: '0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(196, 166, 240, 0.08)', + md: '0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(196, 166, 240, 0.10)', + lg: '0 4px 16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(196, 166, 240, 0.12)' + }, + + border: { + radius: { + sm: '4px', + base: '6px', + md: '8px', + lg: '10px', + xl: '12px' + }, + border2: colors.GRAY_5, + border1: colors.GRAY_4, + border0: colors.GRAY_3 + }, + + colors: { + text: { + white: colors.WHITE, + green: colors.GREEN, + danger: colors.RED, + warning: colors.ORANGE, + muted: colors.TEXT_MUTED, + purple: colors.PURPLE, + yellow: colors.YELLOW, + subtext2: colors.GRAY_8, + subtext1: colors.GRAY_7, + subtext0: colors.GRAY_6 + }, + bg: { + danger: '#c4626a' + }, + accent: colors.BRAND + }, + + input: { + bg: colors.GRAY_2, + border: colors.GRAY_4, + focusBorder: colors.BRAND, + placeholder: { + color: colors.GRAY_6, + opacity: 0.8 + } + }, + + sidebar: { + color: colors.TEXT, + muted: colors.TEXT_MUTED, + bg: '#1d1928', + dragbar: { + border: colors.GRAY_3, + activeBorder: colors.BRAND + }, + search: { + border: '1px solid transparent', + bg: colors.GRAY_2 + }, + collection: { + item: { + bg: colors.GRAY_2, + hoverBg: colors.GRAY_3, + focusBorder: colors.BRAND, + indentBorder: `solid 1px ${colors.GRAY_4}`, + active: { + indentBorder: `solid 1px ${colors.BRAND}50` + }, + example: { + iconColor: colors.GRAY_6 + } + } + }, + dropdownIcon: { + color: colors.TEXT_MUTED + } + }, + + dropdown: { + color: colors.TEXT, + iconColor: colors.TEXT_MUTED, + bg: colors.GRAY_2, + hoverBg: colors.GRAY_3, + shadow: 'rgba(0, 0, 0, 0.5) 0px 6px 16px -2px', + separator: colors.GRAY_4, + selectedColor: colors.BRAND, + mutedText: colors.GRAY_6 + }, + + workspace: { + accent: colors.BRAND, + border: colors.GRAY_4, + button: { + bg: colors.GRAY_3 + } + }, + + request: { + methods: { + get: colors.GREEN, // Mint - success, retrieval + post: colors.PURPLE, // Lavender - creation + put: colors.ORANGE, // Peach - update + delete: colors.RED, // Coral - deletion + patch: colors.YELLOW, // Gold - modification + options: colors.TEAL, // Aqua - metadata + head: colors.BLUE // Sky - lightweight + }, + grpc: '#9e8fd9', // Soft indigo + ws: colors.MAGENTA, // Orchid + gql: colors.PINK // Rose + }, + + requestTabPanel: { + url: { + bg: colors.BG, + icon: colors.TEXT_MUTED, + iconDanger: colors.RED, + border: `solid 1px ${colors.GRAY_4}` + }, + dragbar: { + border: colors.GRAY_4, + activeBorder: colors.BRAND + }, + responseStatus: colors.TEXT_MUTED, + responseOk: colors.GREEN, + responseError: colors.RED, + responsePending: colors.BLUE, + responseOverlayBg: 'rgba(26, 22, 37, 0.75)', + card: { + bg: colors.GRAY_1, + border: 'transparent', + hr: colors.GRAY_4 + }, + graphqlDocsExplorer: { + bg: colors.BG, + color: colors.TEXT + } + }, + + notifications: { + bg: colors.GRAY_3, + list: { + bg: colors.GRAY_2, + borderRight: colors.GRAY_4, + borderBottom: colors.GRAY_4, + hoverBg: colors.GRAY_3, + active: { + border: colors.BRAND, + bg: colors.GRAY_4, + hoverBg: colors.GRAY_4 + } + } + }, + + modal: { + title: { + color: colors.TEXT, + bg: colors.GRAY_1 + }, + body: { + color: colors.TEXT, + bg: colors.GRAY_2 + }, + input: { + bg: colors.GRAY_3, + border: colors.GRAY_4, + focusBorder: colors.BRAND + }, + backdrop: { + opacity: 0.5 + } + }, + + button: { + secondary: { + color: colors.TEXT, + bg: colors.GRAY_4, + border: colors.GRAY_4, + hoverBorder: colors.GRAY_6 + }, + close: { + color: colors.TEXT, + bg: 'transparent', + border: 'transparent', + hoverBorder: '' + }, + disabled: { + color: colors.GRAY_6, + bg: colors.GRAY_4, + border: colors.GRAY_4 + }, + danger: { + color: colors.WHITE, + bg: '#c4626a', + border: '#c4626a' + } + }, + + button2: { + color: { + primary: { + bg: colors.BRAND, + text: colors.BLACK, + border: colors.BRAND + }, + secondary: { + bg: colors.GRAY_4, + text: colors.TEXT, + border: colors.GRAY_5 + }, + success: { + bg: colors.GREEN, + text: colors.BLACK, + border: colors.GREEN + }, + warning: { + bg: colors.ORANGE, + text: colors.BLACK, + border: colors.ORANGE + }, + danger: { + bg: colors.RED, + text: colors.WHITE, + border: colors.RED + } + } + }, + + tabs: { + marginRight: '1.2rem', + active: { + fontWeight: 400, + color: colors.TEXT, + border: colors.BRAND + }, + secondary: { + active: { + bg: colors.GRAY_3, + color: colors.TEXT + }, + inactive: { + bg: colors.GRAY_4, + color: colors.TEXT_MUTED + } + } + }, + + requestTabs: { + color: colors.TEXT, + bg: colors.GRAY_2, + bottomBorder: colors.GRAY_4, + icon: { + color: colors.GRAY_6, + hoverColor: colors.TEXT, + hoverBg: colors.GRAY_3 + }, + example: { + iconColor: colors.GRAY_6 + }, + shortTab: { + color: colors.TEXT_MUTED, + bg: 'transparent', + hoverColor: colors.TEXT, + hoverBg: colors.GRAY_3 + } + }, + + codemirror: { + bg: colors.BG, + border: colors.BG, + placeholder: { + color: colors.GRAY_6, + opacity: 0.6 + }, + gutter: { + bg: colors.BG + }, + 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 + } + }, + 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 + }, + searchLineHighlightCurrent: `${colors.BRAND}20`, + searchMatch: colors.YELLOW, + searchMatchActive: colors.ORANGE + }, + + table: { + border: colors.GRAY_4, + thead: { + color: colors.TEXT_MUTED + }, + striped: colors.GRAY_2, + input: { + color: colors.TEXT + } + }, + + plainGrid: { + hoverBg: colors.GRAY_3 + }, + + scrollbar: { + color: colors.GRAY_5 + }, + + dragAndDrop: { + border: colors.BRAND, + borderStyle: '2px dashed', + hoverBg: `${colors.BRAND}10`, + transition: 'all 0.15s ease' + }, + + infoTip: { + bg: colors.GRAY_2, + border: colors.GRAY_4, + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4)' + }, + + statusBar: { + border: colors.GRAY_3, + color: colors.TEXT_MUTED + }, + + console: { + bg: colors.BG, + headerBg: colors.GRAY_2, + contentBg: colors.BG, + border: colors.GRAY_4, + titleColor: colors.TEXT, + countColor: colors.TEXT_MUTED, + buttonColor: colors.TEXT, + buttonHoverBg: colors.GRAY_3, + buttonHoverColor: colors.WHITE, + messageColor: colors.TEXT, + timestampColor: colors.TEXT_MUTED, + emptyColor: colors.TEXT_MUTED, + logHoverBg: colors.GRAY_2, + resizeHandleHover: colors.BRAND, + resizeHandleActive: colors.BRAND, + dropdownBg: colors.GRAY_2, + dropdownHeaderBg: colors.GRAY_3, + optionHoverBg: colors.GRAY_3, + optionLabelColor: colors.TEXT, + optionCountColor: colors.TEXT_MUTED, + checkboxColor: colors.BRAND, + scrollbarTrack: colors.GRAY_2, + scrollbarThumb: colors.GRAY_5, + scrollbarThumbHover: colors.GRAY_6 + }, + + grpc: { + tabNav: { + container: { + bg: colors.GRAY_1 + }, + button: { + active: { + bg: colors.GRAY_3, + color: colors.TEXT + }, + inactive: { + bg: 'transparent', + color: colors.TEXT_MUTED + } + } + }, + importPaths: { + header: { + text: colors.TEXT_MUTED, + button: { + color: colors.TEXT_MUTED, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: colors.RED, + link: { + color: colors.RED, + hoverColor: '#f5a09a' + } + }, + item: { + bg: 'transparent', + hoverBg: colors.GRAY_3, + text: colors.TEXT, + icon: colors.TEXT_MUTED, + checkbox: { + color: colors.TEXT + }, + invalid: { + opacity: 0.6, + text: colors.RED + } + }, + empty: { + text: colors.TEXT_MUTED + }, + button: { + bg: colors.GRAY_4, + color: colors.TEXT, + border: colors.GRAY_4, + hoverBorder: colors.GRAY_6 + } + }, + protoFiles: { + header: { + text: colors.TEXT_MUTED, + button: { + color: colors.TEXT_MUTED, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: colors.RED, + link: { + color: colors.RED, + hoverColor: '#f5a09a' + } + }, + item: { + bg: 'transparent', + hoverBg: colors.GRAY_3, + selected: { + bg: `${colors.BRAND}25`, + border: colors.BRAND + }, + text: colors.TEXT, + secondaryText: colors.TEXT_MUTED, + icon: colors.TEXT_MUTED, + invalid: { + opacity: 0.6, + text: colors.RED + } + }, + empty: { + text: colors.TEXT_MUTED + }, + button: { + bg: colors.GRAY_4, + color: colors.TEXT, + border: colors.GRAY_4, + hoverBorder: colors.GRAY_6 + } + } + }, + + deprecationWarning: { + bg: `${colors.ORANGE}18`, + border: `${colors.ORANGE}35`, + icon: colors.ORANGE, + text: colors.TEXT + }, + + preferences: { + sidebar: { + border: colors.GRAY_4 + } + }, + + examples: { + buttonBg: `${colors.BRAND}20`, + buttonColor: colors.BRAND, + buttonText: colors.WHITE, + buttonIconColor: colors.WHITE, + border: colors.GRAY_4, + urlBar: { + border: colors.GRAY_4, + bg: colors.GRAY_2 + }, + table: { + thead: { + bg: colors.GRAY_2, + color: colors.TEXT_MUTED + } + }, + checkbox: { + color: colors.BLACK + } + }, + + app: { + collection: { + toolbar: { + environmentSelector: { + bg: colors.BG, + border: colors.GRAY_4, + icon: colors.BRAND, + text: colors.TEXT, + caret: colors.TEXT_MUTED, + separator: colors.GRAY_4, + hoverBg: colors.BG, + hoverBorder: colors.GRAY_5, + noEnvironment: { + text: colors.TEXT_MUTED, + bg: colors.BG, + border: colors.GRAY_4, + hoverBg: colors.BG, + hoverBorder: colors.GRAY_5 + } + }, + sandboxMode: { + safeMode: { + bg: `${colors.GREEN}18`, + color: colors.GREEN + }, + developerMode: { + bg: `${colors.ORANGE}18`, + color: colors.ORANGE + } + } + } + } + } +}; + +export default darkPastelTheme; diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark/dark.js similarity index 81% rename from packages/bruno-app/src/themes/dark.js rename to packages/bruno-app/src/themes/dark/dark.js index de70578f4..869456c41 100644 --- a/packages/bruno-app/src/themes/dark.js +++ b/packages/bruno-app/src/themes/dark/dark.js @@ -1,4 +1,5 @@ const colors = { + // BRAND: '#d9a342', BRAND: '#d9a342', TEXT: '#d4d4d4', TEXT_MUTED: '#858585', @@ -23,23 +24,43 @@ const colors = { CODEMIRROR_TOKENS: { DEFINITION: '#9ccc9c', // Softer, brighter sage — better contrast - PROPERTY: '#7dcfff', // Soft sky blue, high clarity without being loud - STRING: '#d7ba7d', // VSCode-like warm string tone - NUMBER: '#4ec9b0', // Standard teal with higher clarity - ATOM: '#c586c0', // Brighter lavender, matches VSCode purple - VARIABLE: '#4fc1ff', // Clear aqua-blue (used widely in dark themes) - KEYWORD: '#c58679', // Coral-ish but muted to avoid eye strain + PROPERTY: 'hsl(202 90% 80% / 1)', // Soft sky blue, high clarity without being loud + STRING: 'hsl(41 50% 69% / 1)', // VSCode-like warm string tone + NUMBER: 'hsl(168 50% 57% / 1)', // Standard teal with higher clarity + ATOM: 'hsl(305 32% 69% / 1)', // Brighter lavender, matches VSCode purple + VARIABLE: 'hsl(201 90% 73% / 1)', // Clear aqua-blue (used widely in dark themes) + KEYWORD: 'hsl(10 36% 65% / 1)', // Coral-ish but muted to avoid eye strain COMMENT: '#6a9955', // Greenish-slate — very readable & subtle OPERATOR: '#d4d4d4' // Light gray — consistent with dark mode operators } }; const darkTheme = { + mode: 'dark', brand: colors.BRAND, text: colors.TEXT, textLink: colors.TEXT_LINK, bg: colors.BG, + accents: { + primary: colors.BRAND + }, + + background: { + base: colors.BG, + mantle: colors.GRAY_1, + crust: '#333333', + surface0: colors.GRAY_2, + surface1: colors.GRAY_3, + surface2: colors.GRAY_4 + }, + + overlay: { + overlay2: '#666666', + overlay1: '#555555', + overlay0: '#444444' + }, + font: { size: { xs: '0.6875rem', // 11px @@ -64,16 +85,24 @@ const darkTheme = { md: '8px', lg: '10px', xl: '12px' - } + }, + border2: colors.GRAY_4, + border1: colors.GRAY_3, + border0: colors.GRAY_2 }, colors: { text: { + white: colors.WHITE, green: colors.GREEN, danger: '#f06f57', + warning: '#f57c00', muted: colors.TEXT_MUTED, purple: '#cd56d6', - yellow: colors.YELLOW + yellow: colors.YELLOW, + subtext2: colors.GRAY_6, + subtext1: colors.GRAY_5, + subtext0: colors.GRAY_4 }, bg: { danger: '#d03544' @@ -91,35 +120,15 @@ const darkTheme = { } }, - variables: { - bg: 'rgb(48, 48, 49)', - - name: { - color: '#569cd6' - }, - - runtime: { - color: 'rgb(255, 255, 255)' - } - }, - - menubar: { - bg: '#333333' - }, - sidebar: { color: '#ccc', muted: '#9d9d9d', - bg: colors.GRAY_1, + bg: colors.BG, dragbar: { - border: 'transparent', + border: colors.GRAY_2, activeBorder: colors.GRAY_4 }, - badge: { - bg: colors.GRAY_2 - }, - search: { border: '1px solid transparent', bg: colors.GRAY_2 @@ -145,11 +154,6 @@ const darkTheme = { } }, - welcome: { - heading: '#569cd6', - muted: '#9d9d9d' - }, - dropdown: { color: 'rgb(204, 204, 204)', iconColor: 'rgb(204, 204, 204)', @@ -157,52 +161,22 @@ const darkTheme = { hoverBg: '#6A6A6A29', shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', separator: '#444', - labelBg: '#4a4949', - selectedBg: '#d9a34214', selectedColor: '#d9a342', - mutedText: '#9B9B9B', - primaryText: '#D4D4D4', - secondaryText: '#9CA3AF', - headingText: '#FFFFFF' - }, - - listItem: { - hoverBg: '#2A2D2F', - activeBg: colors.GRAY_3 + mutedText: '#9B9B9B' }, workspace: { accent: '#D9A342', border: '#444', - borderMuted: '#585858', - card: { - bg: '#2A2D2F' - }, button: { - bg: '#242424' - }, - collection: { - header: { - indentBorder: 'solid 1px #444444' - }, - item: { - indentBorder: 'solid 1px #313131' - } - }, - environments: { - bg: '#212121', - indentBorder: 'solid 1px #313131', - activeBg: '#37373c', - search: { - bg: colors.GRAY_2 - } + bg: colors.GRAY_2 } }, request: { methods: { get: '#5fbf7a', // Fresh jade — readable, calm success tone - post: '#b58adf', // Soft amethyst — cool, composed accent + post: 'hsl(270 49% 74% / 1)', // Soft amethyst — cool, composed accent put: '#d7a35a', // Warm amber-bronze — bridges BRAND + STRING delete: '#e06c75', // VSCode red — destructive but readable patch: '#d7a35a', // Same as PUT @@ -220,17 +194,12 @@ const darkTheme = { bg: colors.BG, icon: 'rgb(204, 204, 204)', iconDanger: '#fa5343', - errorHoverBg: '#4a2a2a', border: `solid 1px ${colors.GRAY_3}` }, dragbar: { border: '#444', activeBorder: '#8a8a8a' }, - bodyModeSelect: { - color: 'transparent' - }, - responseSendIcon: '#555', responseStatus: '#ccc', responseOk: '#8cd656', responseError: '#f06f57', @@ -240,49 +209,15 @@ const darkTheme = { card: { bg: '#252526', border: 'transparent', - borderDark: '#8cd656', hr: '#424242' }, - cardTable: { - border: '#333', - bg: '#252526', - table: { - thead: { - bg: colors.GRAY_2, - color: '#ccc' - } - } - }, graphqlDocsExplorer: { bg: '#1e1e1e', color: '#d4d4d4' } }, - collection: { - environment: { - bg: colors.GRAY_2, - - settings: { - bg: colors.GRAY_2, - sidebar: { - bg: colors.GRAY_2, - borderRight: '#4f4f4f' - }, - item: { - border: '#569cd6', - hoverBg: 'transparent', - active: { - bg: 'transparent', - hoverBg: 'transparent' - } - }, - gridBorder: '#4f4f4f' - } - } - }, - notifications: { bg: colors.GRAY_3, list: { @@ -301,8 +236,7 @@ const darkTheme = { modal: { title: { color: '#ccc', - bg: 'rgb(38, 38, 39)', - iconColor: '#ccc' + bg: 'rgb(38, 38, 39)' }, body: { color: '#ccc', @@ -315,9 +249,6 @@ const darkTheme = { }, backdrop: { opacity: 0.2 - }, - closeButton: { - hoverBg: 'rgba(255, 255, 255, 0.1)' } }, @@ -349,23 +280,28 @@ const darkTheme = { color: { primary: { bg: colors.BRAND, - text: colors.BLACK + text: colors.BLACK, + border: colors.BRAND }, secondary: { - bg: colors.GRAY_4, - text: '#fff' + bg: '#2a2a2a', + text: 'hsl(39 67% 64% / 1)', + border: '#3a3a3a' }, success: { bg: '#059669', - text: '#fff' + text: '#fff', + border: '#059669' }, warning: { bg: '#f59e0b', - text: '#1e1e1e' + text: '#1e1e1e', + border: '#f59e0b' }, danger: { bg: '#f43f5e', - text: '#fff' + text: '#fff', + border: '#f43f5e' } } }, @@ -401,9 +337,6 @@ const darkTheme = { example: { iconColor: colors.GRAY_5 }, - active: { - bg: colors.GRAY_2 - }, shortTab: { color: '#ccc', bg: 'transparent', @@ -479,12 +412,6 @@ const darkTheme = { hoverBg: 'rgba(102, 102, 102, 0.08)', transition: 'all 0.1s ease' }, - tooltip: { - bg: '#1f1f1f', - color: '#ffffff', - shortcutColor: '#d9a342' - }, - infoTip: { bg: '#1f1f1f', border: '#333333', diff --git a/packages/bruno-app/src/themes/dark/nord.js b/packages/bruno-app/src/themes/dark/nord.js new file mode 100644 index 000000000..e1360371a --- /dev/null +++ b/packages/bruno-app/src/themes/dark/nord.js @@ -0,0 +1,635 @@ +// Nord Theme for Bruno +// https://www.nordtheme.com/ +// +// Polar Night: nord0-nord3 (#2e3440, #3b4252, #434c5e, #4c566a) +// Snow Storm: nord4-nord6 (#d8dee9, #e5e9f0, #eceff4) +// Frost: nord7-nord10 (#8fbcbb, #88c0d0, #81a1c1, #5e81ac) +// Aurora: nord11-nord15 (#bf616a, #d08770, #ebcb8b, #a3be8c, #b48ead) + +const colors = { + // Polar Night + NORD0: '#2e3440', + NORD1: '#3b4252', + NORD2: '#434c5e', + NORD3: '#4c566a', + + // Snow Storm + NORD4: '#d8dee9', + NORD5: '#e5e9f0', + NORD6: '#eceff4', + + // Frost + NORD7: '#8fbcbb', + NORD8: '#88c0d0', + NORD9: '#81a1c1', + NORD10: '#5e81ac', + + // Aurora + NORD11: '#bf616a', + NORD12: '#d08770', + NORD13: '#ebcb8b', + NORD14: '#a3be8c', + NORD15: '#b48ead', + + // Semantic aliases + BRAND: '#88c0d0', + TEXT: '#d8dee9', + TEXT_MUTED: '#7b88a1', + TEXT_LINK: '#88c0d0', + BG: '#2e3440', + + WHITE: '#eceff4', + BLACK: '#2e3440', + + CODEMIRROR_TOKENS: { + DEFINITION: '#a3be8c', + PROPERTY: '#88c0d0', + STRING: '#a3be8c', + NUMBER: '#b48ead', + ATOM: '#81a1c1', + VARIABLE: '#d8dee9', + KEYWORD: '#81a1c1', + COMMENT: '#616e88', + OPERATOR: '#81a1c1' + } +}; + +const nordTheme = { + mode: 'dark', + brand: colors.BRAND, + text: colors.TEXT, + textLink: colors.TEXT_LINK, + bg: colors.BG, + + accents: { + primary: colors.BRAND + }, + + background: { + base: colors.NORD0, + mantle: colors.NORD1, + crust: colors.NORD2, + surface0: colors.NORD2, + surface1: colors.NORD3, + surface2: '#5d6b83' + }, + + overlay: { + overlay2: '#616e88', + overlay1: '#5d6b83', + overlay0: '#4c566a' + }, + + font: { + size: { + xs: '0.6875rem', + sm: '0.75rem', + base: '0.8125rem', + md: '0.875rem', + lg: '1rem', + xl: '1.125rem' + } + }, + + shadow: { + sm: '0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.2)', + md: '0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3)', + lg: '0 2px 12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3)' + }, + + border: { + radius: { + sm: '4px', + base: '6px', + md: '8px', + lg: '10px', + xl: '12px' + }, + border2: colors.NORD3, + border1: colors.NORD2, + border0: colors.NORD1 + }, + + colors: { + text: { + white: colors.WHITE, + green: colors.NORD14, + danger: colors.NORD11, + warning: colors.NORD12, + muted: colors.TEXT_MUTED, + purple: colors.NORD15, + yellow: colors.NORD13, + subtext2: colors.NORD4, + subtext1: colors.TEXT_MUTED, + subtext0: '#616e88' + }, + bg: { + danger: colors.NORD11 + }, + accent: colors.BRAND + }, + + input: { + bg: colors.NORD1, + border: colors.NORD2, + focusBorder: colors.NORD8, + placeholder: { + color: colors.TEXT_MUTED, + opacity: 0.75 + } + }, + + sidebar: { + color: colors.NORD4, + muted: colors.TEXT_MUTED, + bg: colors.BG, + dragbar: { + border: colors.NORD2, + activeBorder: colors.NORD3 + }, + search: { + border: '1px solid transparent', + bg: colors.NORD1 + }, + collection: { + item: { + bg: colors.NORD1, + hoverBg: colors.NORD2, + focusBorder: colors.NORD3, + indentBorder: `solid 1px ${colors.NORD3}`, + active: { + indentBorder: `solid 1px ${colors.NORD3}` + }, + example: { + iconColor: colors.TEXT_MUTED + } + } + }, + dropdownIcon: { + color: colors.NORD4 + } + }, + + dropdown: { + color: colors.NORD4, + iconColor: colors.NORD4, + bg: colors.NORD1, + hoverBg: colors.NORD2, + shadow: 'rgba(0, 0, 0, 0.3) 0px 2px 8px', + separator: colors.NORD3, + selectedColor: colors.NORD8, + mutedText: colors.TEXT_MUTED + }, + + workspace: { + accent: colors.BRAND, + border: colors.NORD3, + button: { + bg: colors.NORD2 + } + }, + + request: { + methods: { + get: colors.NORD14, + post: colors.NORD15, + put: colors.NORD13, + delete: colors.NORD11, + patch: colors.NORD12, + options: colors.NORD7, + head: colors.NORD9 + }, + grpc: colors.NORD8, + ws: colors.NORD13, + gql: colors.NORD15 + }, + + requestTabPanel: { + url: { + bg: colors.BG, + icon: colors.NORD4, + iconDanger: colors.NORD11, + border: `solid 1px ${colors.NORD2}` + }, + dragbar: { + border: colors.NORD3, + activeBorder: colors.NORD8 + }, + responseStatus: colors.NORD4, + responseOk: colors.NORD14, + responseError: colors.NORD11, + responsePending: colors.NORD8, + responseOverlayBg: 'rgba(46, 52, 64, 0.6)', + card: { + bg: colors.NORD1, + border: 'transparent', + hr: colors.NORD3 + }, + graphqlDocsExplorer: { + bg: colors.BG, + color: colors.NORD4 + } + }, + + notifications: { + bg: colors.NORD2, + list: { + bg: colors.NORD1, + borderRight: colors.NORD3, + borderBottom: colors.NORD3, + hoverBg: colors.NORD2, + active: { + border: colors.NORD8, + bg: colors.NORD2, + hoverBg: colors.NORD2 + } + } + }, + + modal: { + title: { + color: colors.NORD4, + bg: colors.NORD1 + }, + body: { + color: colors.NORD4, + bg: colors.NORD1 + }, + input: { + bg: colors.NORD2, + border: colors.NORD2, + focusBorder: colors.NORD8 + }, + backdrop: { + opacity: 0.3 + } + }, + + button: { + secondary: { + color: colors.NORD4, + bg: colors.NORD10, + border: colors.NORD10, + hoverBorder: colors.NORD9 + }, + close: { + color: colors.NORD4, + bg: 'transparent', + border: 'transparent', + hoverBorder: '' + }, + disabled: { + color: colors.TEXT_MUTED, + bg: colors.NORD3, + border: colors.NORD3 + }, + danger: { + color: colors.WHITE, + bg: colors.NORD11, + border: colors.NORD11 + } + }, + + button2: { + color: { + primary: { + bg: colors.BRAND, + text: colors.NORD0, + border: colors.BRAND + }, + secondary: { + bg: colors.NORD1, + text: colors.NORD4, + border: colors.NORD3 + }, + success: { + bg: colors.NORD14, + text: colors.NORD0, + border: colors.NORD14 + }, + warning: { + bg: colors.NORD13, + text: colors.NORD0, + border: colors.NORD13 + }, + danger: { + bg: colors.NORD11, + text: colors.NORD6, + border: colors.NORD11 + } + } + }, + + tabs: { + marginRight: '1.2rem', + active: { + fontWeight: 400, + color: colors.NORD4, + border: colors.BRAND + }, + secondary: { + active: { + bg: colors.NORD2, + color: colors.NORD4 + }, + inactive: { + bg: colors.NORD3, + color: colors.NORD4 + } + } + }, + + requestTabs: { + color: colors.NORD4, + bg: colors.NORD1, + bottomBorder: colors.NORD3, + icon: { + color: colors.TEXT_MUTED, + hoverColor: colors.NORD4, + hoverBg: colors.NORD0 + }, + example: { + iconColor: colors.TEXT_MUTED + }, + shortTab: { + color: colors.NORD4, + bg: 'transparent', + hoverColor: colors.NORD4, + hoverBg: colors.NORD2 + } + }, + + codemirror: { + bg: colors.BG, + border: colors.BG, + placeholder: { + color: colors.TEXT_MUTED, + opacity: 0.5 + }, + gutter: { + bg: colors.BG + }, + 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 + } + }, + 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 + }, + searchLineHighlightCurrent: 'rgba(136, 192, 208, 0.15)', + searchMatch: colors.NORD13, + searchMatchActive: colors.NORD12 + }, + + table: { + border: colors.NORD2, + thead: { + color: colors.NORD4 + }, + striped: colors.NORD1, + input: { + color: colors.NORD4 + } + }, + + plainGrid: { + hoverBg: colors.NORD2 + }, + + scrollbar: { + color: colors.NORD2 + }, + + dragAndDrop: { + border: colors.NORD3, + borderStyle: '2px solid', + hoverBg: 'rgba(76, 86, 106, 0.15)', + transition: 'all 0.1s ease' + }, + + infoTip: { + bg: colors.NORD1, + border: colors.NORD3, + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)' + }, + + statusBar: { + border: colors.NORD2, + color: colors.TEXT_MUTED + }, + + console: { + bg: colors.BG, + headerBg: colors.NORD1, + contentBg: colors.BG, + border: colors.NORD2, + titleColor: colors.NORD4, + countColor: colors.TEXT_MUTED, + buttonColor: colors.NORD4, + buttonHoverBg: 'rgba(255, 255, 255, 0.1)', + buttonHoverColor: colors.NORD6, + messageColor: colors.NORD4, + timestampColor: colors.TEXT_MUTED, + emptyColor: colors.TEXT_MUTED, + logHoverBg: 'rgba(255, 255, 255, 0.05)', + resizeHandleHover: colors.NORD8, + resizeHandleActive: colors.NORD8, + dropdownBg: colors.NORD1, + dropdownHeaderBg: colors.NORD2, + optionHoverBg: 'rgba(255, 255, 255, 0.05)', + optionLabelColor: colors.NORD4, + optionCountColor: colors.TEXT_MUTED, + checkboxColor: colors.BRAND, + scrollbarTrack: colors.NORD1, + scrollbarThumb: colors.NORD3, + scrollbarThumbHover: colors.NORD9 + }, + + grpc: { + tabNav: { + container: { + bg: colors.NORD1 + }, + button: { + active: { + bg: colors.NORD2, + color: colors.NORD6 + }, + inactive: { + bg: 'transparent', + color: colors.TEXT_MUTED + } + } + }, + importPaths: { + header: { + text: colors.TEXT_MUTED, + button: { + color: colors.TEXT_MUTED, + hoverColor: colors.NORD4 + } + }, + error: { + bg: 'transparent', + text: colors.NORD11, + link: { + color: colors.NORD11, + hoverColor: '#d08770' + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(255, 255, 255, 0.05)', + text: colors.NORD4, + icon: colors.TEXT_MUTED, + checkbox: { + color: colors.NORD4 + }, + invalid: { + opacity: 0.6, + text: colors.NORD11 + } + }, + empty: { + text: colors.TEXT_MUTED + }, + button: { + bg: colors.NORD10, + color: colors.NORD4, + border: colors.NORD10, + hoverBorder: colors.NORD9 + } + }, + protoFiles: { + header: { + text: colors.TEXT_MUTED, + button: { + color: colors.TEXT_MUTED, + hoverColor: colors.NORD4 + } + }, + error: { + bg: 'transparent', + text: colors.NORD11, + link: { + color: colors.NORD11, + hoverColor: '#d08770' + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(255, 255, 255, 0.05)', + selected: { + bg: 'rgba(136, 192, 208, 0.2)', + border: colors.BRAND + }, + text: colors.NORD4, + secondaryText: colors.TEXT_MUTED, + icon: colors.TEXT_MUTED, + invalid: { + opacity: 0.6, + text: colors.NORD11 + } + }, + empty: { + text: colors.TEXT_MUTED + }, + button: { + bg: colors.NORD10, + color: colors.NORD4, + border: colors.NORD10, + hoverBorder: colors.NORD9 + } + } + }, + + deprecationWarning: { + bg: 'rgba(191, 97, 106, 0.1)', + border: 'rgba(191, 97, 106, 0.2)', + icon: colors.NORD11, + text: colors.NORD4 + }, + + preferences: { + sidebar: { + border: colors.NORD3 + } + }, + + examples: { + buttonBg: 'rgba(136, 192, 208, 0.1)', + buttonColor: colors.BRAND, + buttonText: colors.NORD6, + buttonIconColor: colors.NORD6, + border: colors.NORD3, + urlBar: { + border: colors.NORD2, + bg: colors.NORD1 + }, + table: { + thead: { + bg: colors.NORD1, + color: colors.TEXT_MUTED + } + }, + checkbox: { + color: colors.NORD0 + } + }, + + app: { + collection: { + toolbar: { + environmentSelector: { + bg: colors.BG, + border: colors.NORD2, + icon: colors.BRAND, + text: colors.TEXT, + caret: colors.TEXT_MUTED, + separator: colors.NORD2, + hoverBg: colors.BG, + hoverBorder: colors.NORD3, + noEnvironment: { + text: colors.TEXT_MUTED, + bg: colors.BG, + border: colors.NORD2, + hoverBg: colors.BG, + hoverBorder: colors.NORD3 + } + }, + sandboxMode: { + safeMode: { + bg: 'rgba(163, 190, 140, 0.12)', + color: colors.NORD14 + }, + developerMode: { + bg: 'rgba(235, 203, 139, 0.12)', + color: colors.NORD13 + } + } + } + } + } +}; + +export default nordTheme; diff --git a/packages/bruno-app/src/themes/dark/vscode.js b/packages/bruno-app/src/themes/dark/vscode.js new file mode 100644 index 000000000..a332a358c --- /dev/null +++ b/packages/bruno-app/src/themes/dark/vscode.js @@ -0,0 +1,637 @@ +// VS Code Dark+ Theme for Bruno +// Based on the default Visual Studio Code Dark+ theme + +const colors = { + // VS Code Dark+ Core Colors + EDITOR_BG: '#1e1e1e', + SIDEBAR_BG: '#252526', + ACTIVITY_BAR_BG: '#333333', + PANEL_BG: '#1e1e1e', + + // Text colors + TEXT: '#d4d4d4', + TEXT_MUTED: '#808080', + TEXT_LINK: '#3794ff', + + // Brand - VS Code blue + BRAND: '#007acc', + BRAND_HOVER: '#1177bb', + + // Semantic colors + GREEN: '#4ec9b0', + YELLOW: '#dcdcaa', + ORANGE: '#ce9178', + RED: '#f14c4c', + PURPLE: '#c586c0', + BLUE: '#569cd6', + CYAN: '#4fc1ff', + + WHITE: '#ffffff', + BLACK: '#000000', + + // Grays (VS Code specific) + GRAY_1: '#252526', + GRAY_2: '#2d2d2d', + GRAY_3: '#3c3c3c', + GRAY_4: '#474747', + GRAY_5: '#5a5a5a', + GRAY_6: '#6e6e6e', + GRAY_7: '#858585', + GRAY_8: '#a0a0a0', + + // Borders + BORDER: '#454545', + BORDER_LIGHT: '#3c3c3c', + + CODEMIRROR_TOKENS: { + DEFINITION: '#4ec9b0', + PROPERTY: '#9cdcfe', + STRING: '#ce9178', + NUMBER: '#b5cea8', + ATOM: '#569cd6', + VARIABLE: '#9cdcfe', + KEYWORD: '#c586c0', + COMMENT: '#6a9955', + OPERATOR: '#d4d4d4' + } +}; + +const vscodeDarkTheme = { + mode: 'dark', + brand: colors.BRAND, + text: colors.TEXT, + textLink: colors.TEXT_LINK, + bg: colors.EDITOR_BG, + + accents: { + primary: colors.BRAND + }, + + background: { + base: colors.EDITOR_BG, + mantle: colors.SIDEBAR_BG, + crust: colors.GRAY_2, + surface0: colors.GRAY_3, + surface1: colors.GRAY_4, + surface2: colors.GRAY_5 + }, + + overlay: { + overlay2: colors.GRAY_6, + overlay1: '#555555', + overlay0: '#444444' + }, + + font: { + size: { + xs: '0.6875rem', + sm: '0.75rem', + base: '0.8125rem', + md: '0.875rem', + lg: '1rem', + xl: '1.125rem' + } + }, + + shadow: { + sm: '0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3)', + md: '0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4)', + lg: '0 2px 12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4)' + }, + + border: { + radius: { + sm: '4px', + base: '6px', + md: '8px', + lg: '10px', + xl: '12px' + }, + border2: colors.GRAY_5, + border1: colors.BORDER, + border0: colors.BORDER_LIGHT + }, + + colors: { + text: { + white: colors.WHITE, + green: colors.GREEN, + danger: colors.RED, + warning: colors.ORANGE, + muted: colors.TEXT_MUTED, + purple: colors.PURPLE, + yellow: colors.YELLOW, + subtext2: colors.GRAY_8, + subtext1: colors.GRAY_7, + subtext0: colors.GRAY_6 + }, + bg: { + danger: '#f14c4c' + }, + accent: colors.BRAND + }, + + input: { + bg: colors.GRAY_2, + border: colors.BORDER, + focusBorder: colors.BRAND, + placeholder: { + color: colors.TEXT_MUTED, + opacity: 0.75 + } + }, + + sidebar: { + color: colors.TEXT, + muted: colors.TEXT_MUTED, + bg: colors.SIDEBAR_BG, + dragbar: { + border: colors.BORDER_LIGHT, + activeBorder: colors.GRAY_5 + }, + search: { + border: '1px solid transparent', + bg: colors.GRAY_2 + }, + collection: { + item: { + bg: colors.GRAY_2, + hoverBg: colors.GRAY_3, + focusBorder: colors.GRAY_4, + indentBorder: `solid 1px ${colors.BORDER}`, + active: { + indentBorder: `solid 1px ${colors.BORDER}` + }, + example: { + iconColor: colors.GRAY_7 + } + } + }, + dropdownIcon: { + color: colors.TEXT + } + }, + + dropdown: { + color: colors.TEXT, + iconColor: colors.TEXT, + bg: colors.SIDEBAR_BG, + hoverBg: colors.GRAY_3, + shadow: 'rgba(0, 0, 0, 0.36) 0px 2px 8px', + separator: colors.BORDER, + selectedColor: colors.TEXT_LINK, + mutedText: colors.TEXT_MUTED + }, + + workspace: { + accent: colors.BRAND, + border: colors.BORDER, + button: { + bg: colors.GRAY_2 + } + }, + + request: { + methods: { + get: colors.GREEN, + post: '#dcdcaa', + put: colors.ORANGE, + delete: colors.RED, + patch: colors.ORANGE, + options: colors.GRAY_7, + head: colors.BLUE + }, + grpc: colors.CYAN, + ws: colors.YELLOW, + gql: colors.PURPLE + }, + + requestTabPanel: { + url: { + bg: colors.EDITOR_BG, + icon: colors.TEXT, + iconDanger: colors.RED, + border: `solid 1px ${colors.BORDER}` + }, + dragbar: { + border: colors.BORDER, + activeBorder: colors.BRAND + }, + responseStatus: colors.TEXT, + responseOk: colors.GREEN, + responseError: colors.RED, + responsePending: colors.BRAND, + responseOverlayBg: 'rgba(30, 30, 30, 0.6)', + card: { + bg: colors.SIDEBAR_BG, + border: 'transparent', + hr: colors.BORDER + }, + graphqlDocsExplorer: { + bg: colors.EDITOR_BG, + color: colors.TEXT + } + }, + + notifications: { + bg: colors.GRAY_3, + list: { + bg: colors.GRAY_2, + borderRight: colors.BORDER, + borderBottom: colors.BORDER, + hoverBg: colors.GRAY_3, + active: { + border: colors.BRAND, + bg: colors.GRAY_3, + hoverBg: colors.GRAY_3 + } + } + }, + + modal: { + title: { + color: colors.TEXT, + bg: colors.SIDEBAR_BG + }, + body: { + color: colors.TEXT, + bg: colors.GRAY_2 + }, + input: { + bg: colors.GRAY_3, + border: colors.BORDER, + focusBorder: colors.BRAND + }, + backdrop: { + opacity: 0.25 + } + }, + + button: { + secondary: { + color: colors.WHITE, + bg: colors.GRAY_4, + border: colors.GRAY_4, + hoverBorder: colors.GRAY_5 + }, + close: { + color: colors.TEXT, + bg: 'transparent', + border: 'transparent', + hoverBorder: '' + }, + disabled: { + color: colors.GRAY_6, + bg: colors.GRAY_4, + border: colors.GRAY_4 + }, + danger: { + color: colors.WHITE, + bg: colors.RED, + border: colors.RED + } + }, + + button2: { + color: { + primary: { + bg: colors.BRAND, + text: colors.WHITE, + border: colors.BRAND + }, + secondary: { + bg: colors.GRAY_4, + text: colors.WHITE, + border: colors.GRAY_5 + }, + success: { + bg: '#388a34', + text: colors.WHITE, + border: '#388a34' + }, + warning: { + bg: '#bf8803', + text: colors.BLACK, + border: '#bf8803' + }, + danger: { + bg: colors.RED, + text: colors.WHITE, + border: colors.RED + } + } + }, + + tabs: { + marginRight: '1.2rem', + active: { + fontWeight: 400, + color: colors.TEXT, + border: colors.BRAND + }, + secondary: { + active: { + bg: colors.GRAY_3, + color: colors.TEXT + }, + inactive: { + bg: colors.GRAY_4, + color: colors.TEXT_MUTED + } + } + }, + + requestTabs: { + color: colors.TEXT, + bg: colors.SIDEBAR_BG, + bottomBorder: colors.BORDER, + icon: { + color: colors.TEXT_MUTED, + hoverColor: colors.TEXT, + hoverBg: colors.GRAY_3 + }, + example: { + iconColor: colors.GRAY_7 + }, + shortTab: { + color: colors.TEXT, + bg: 'transparent', + hoverColor: colors.TEXT, + hoverBg: colors.GRAY_3 + } + }, + + codemirror: { + bg: colors.EDITOR_BG, + border: colors.EDITOR_BG, + placeholder: { + color: colors.TEXT_MUTED, + opacity: 0.5 + }, + gutter: { + bg: colors.EDITOR_BG + }, + 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 + } + }, + 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 + }, + searchLineHighlightCurrent: 'rgba(255, 255, 0, 0.1)', + searchMatch: '#515c6a', + searchMatchActive: '#613214' + }, + + table: { + border: colors.BORDER_LIGHT, + thead: { + color: colors.TEXT + }, + striped: colors.GRAY_2, + input: { + color: colors.TEXT + } + }, + + plainGrid: { + hoverBg: colors.GRAY_3 + }, + + scrollbar: { + color: colors.GRAY_4 + }, + + dragAndDrop: { + border: colors.BRAND, + borderStyle: '2px solid', + hoverBg: 'rgba(0, 122, 204, 0.1)', + transition: 'all 0.1s ease' + }, + + infoTip: { + bg: colors.SIDEBAR_BG, + border: colors.BORDER, + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)' + }, + + statusBar: { + border: colors.BORDER_LIGHT, + color: colors.TEXT_MUTED + }, + + console: { + bg: colors.EDITOR_BG, + headerBg: colors.SIDEBAR_BG, + contentBg: colors.EDITOR_BG, + border: colors.BORDER, + titleColor: colors.TEXT, + countColor: colors.TEXT_MUTED, + buttonColor: colors.TEXT, + buttonHoverBg: 'rgba(255, 255, 255, 0.1)', + buttonHoverColor: colors.WHITE, + messageColor: colors.TEXT, + timestampColor: colors.TEXT_MUTED, + emptyColor: colors.TEXT_MUTED, + logHoverBg: 'rgba(255, 255, 255, 0.05)', + resizeHandleHover: colors.BRAND, + resizeHandleActive: colors.BRAND, + dropdownBg: colors.SIDEBAR_BG, + dropdownHeaderBg: colors.GRAY_3, + optionHoverBg: 'rgba(255, 255, 255, 0.05)', + optionLabelColor: colors.TEXT, + optionCountColor: colors.TEXT_MUTED, + checkboxColor: colors.BRAND, + scrollbarTrack: colors.SIDEBAR_BG, + scrollbarThumb: colors.GRAY_5, + scrollbarThumbHover: colors.GRAY_6 + }, + + grpc: { + tabNav: { + container: { + bg: colors.GRAY_2 + }, + button: { + active: { + bg: colors.GRAY_3, + color: colors.WHITE + }, + inactive: { + bg: 'transparent', + color: colors.TEXT_MUTED + } + } + }, + importPaths: { + header: { + text: colors.TEXT_MUTED, + button: { + color: colors.TEXT_MUTED, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: colors.RED, + link: { + color: colors.RED, + hoverColor: '#ff6b6b' + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(255, 255, 255, 0.05)', + text: colors.TEXT, + icon: colors.TEXT_MUTED, + checkbox: { + color: colors.TEXT + }, + invalid: { + opacity: 0.6, + text: colors.RED + } + }, + empty: { + text: colors.TEXT_MUTED + }, + button: { + bg: colors.GRAY_4, + color: colors.TEXT, + border: colors.GRAY_4, + hoverBorder: colors.GRAY_5 + } + }, + protoFiles: { + header: { + text: colors.TEXT_MUTED, + button: { + color: colors.TEXT_MUTED, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: colors.RED, + link: { + color: colors.RED, + hoverColor: '#ff6b6b' + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(255, 255, 255, 0.05)', + selected: { + bg: 'rgba(0, 122, 204, 0.2)', + border: colors.BRAND + }, + text: colors.TEXT, + secondaryText: colors.TEXT_MUTED, + icon: colors.TEXT_MUTED, + invalid: { + opacity: 0.6, + text: colors.RED + } + }, + empty: { + text: colors.TEXT_MUTED + }, + button: { + bg: colors.GRAY_4, + color: colors.TEXT, + border: colors.GRAY_4, + hoverBorder: colors.GRAY_5 + } + } + }, + + deprecationWarning: { + bg: 'rgba(241, 76, 76, 0.1)', + border: 'rgba(241, 76, 76, 0.2)', + icon: colors.RED, + text: colors.TEXT + }, + + preferences: { + sidebar: { + border: colors.BORDER + } + }, + + examples: { + buttonBg: 'rgba(0, 122, 204, 0.15)', + buttonColor: colors.TEXT_LINK, + buttonText: colors.WHITE, + buttonIconColor: colors.WHITE, + border: colors.BORDER, + urlBar: { + border: colors.BORDER, + bg: colors.GRAY_2 + }, + table: { + thead: { + bg: colors.GRAY_2, + color: colors.TEXT_MUTED + } + }, + checkbox: { + color: colors.WHITE + } + }, + + app: { + collection: { + toolbar: { + environmentSelector: { + bg: colors.EDITOR_BG, + border: colors.BORDER, + icon: colors.BRAND, + text: colors.TEXT, + caret: colors.TEXT_MUTED, + separator: colors.BORDER, + hoverBg: colors.EDITOR_BG, + hoverBorder: colors.GRAY_5, + noEnvironment: { + text: colors.TEXT_MUTED, + bg: colors.EDITOR_BG, + border: colors.BORDER, + hoverBg: colors.EDITOR_BG, + hoverBorder: colors.GRAY_5 + } + }, + sandboxMode: { + safeMode: { + bg: 'rgba(78, 201, 176, 0.12)', + color: colors.GREEN + }, + developerMode: { + bg: 'rgba(220, 220, 170, 0.12)', + color: colors.YELLOW + } + } + } + } + } +}; + +export default vscodeDarkTheme; diff --git a/packages/bruno-app/src/themes/index.js b/packages/bruno-app/src/themes/index.js index 753b40a3c..2bd122f6c 100644 --- a/packages/bruno-app/src/themes/index.js +++ b/packages/bruno-app/src/themes/index.js @@ -1,7 +1,103 @@ -import light from './light'; -import dark from './dark'; +import light from './light/light'; +import lightMonochrome from './light/light-monochrome'; +import lightPastel from './light/light-pastel'; +import catppuccinLatte from './light/catppuccin-latte'; +import vscodeLight from './light/vscode'; +import dark from './dark/dark'; +import darkMonochrome from './dark/dark-monochrome'; +import darkPastel from './dark/dark-pastel'; +import catppuccinFrappe from './dark/catppuccin-frappe'; +import catppuccinMacchiato from './dark/catppuccin-macchiato'; +import catppuccinMocha from './dark/catppuccin-mocha'; +import nord from './dark/nord'; +import vscodeDark from './dark/vscode'; -export default { +const themes = { light, - dark + dark, + 'light-monochrome': lightMonochrome, + 'light-pastel': lightPastel, + 'dark-monochrome': darkMonochrome, + 'dark-pastel': darkPastel, + 'catppuccin-latte': catppuccinLatte, + 'catppuccin-frappe': catppuccinFrappe, + 'catppuccin-macchiato': catppuccinMacchiato, + 'catppuccin-mocha': catppuccinMocha, + nord, + 'vscode-light': vscodeLight, + 'vscode-dark': vscodeDark }; + +// Theme metadata for UI display +export const themeRegistry = { + 'light': { + id: 'light', + name: 'Bruno Light', + mode: 'light' + }, + 'light-monochrome': { + id: 'light-monochrome', + name: 'Light Monochrome', + mode: 'light' + }, + 'light-pastel': { + id: 'light-pastel', + name: 'Bruno Light Pastel', + mode: 'light' + }, + 'catppuccin-latte': { + id: 'catppuccin-latte', + name: 'Catppuccin Latte', + mode: 'light' + }, + 'dark': { + id: 'dark', + name: 'Bruno Dark', + mode: 'dark' + }, + 'dark-monochrome': { + id: 'dark-monochrome', + name: 'Bruno Dark Monochrome', + mode: 'dark' + }, + 'dark-pastel': { + id: 'dark-pastel', + name: 'Bruno Dark Pastel', + mode: 'dark' + }, + 'catppuccin-frappe': { + id: 'catppuccin-frappe', + name: 'Catppuccin Frappé', + mode: 'dark' + }, + 'catppuccin-macchiato': { + id: 'catppuccin-macchiato', + name: 'Catppuccin Macchiato', + mode: 'dark' + }, + 'catppuccin-mocha': { + id: 'catppuccin-mocha', + name: 'Catppuccin Mocha', + mode: 'dark' + }, + 'nord': { + id: 'nord', + name: 'Nord', + mode: 'dark' + }, + 'vscode-light': { + id: 'vscode-light', + name: 'VS Code Light', + mode: 'light' + }, + 'vscode-dark': { + id: 'vscode-dark', + name: 'VS Code Dark', + mode: 'dark' + } +}; + +export const getLightThemes = () => Object.values(themeRegistry).filter((t) => t.mode === 'light'); +export const getDarkThemes = () => Object.values(themeRegistry).filter((t) => t.mode === 'dark'); + +export default themes; diff --git a/packages/bruno-app/src/themes/light/catppuccin-latte.js b/packages/bruno-app/src/themes/light/catppuccin-latte.js new file mode 100644 index 000000000..20902f58c --- /dev/null +++ b/packages/bruno-app/src/themes/light/catppuccin-latte.js @@ -0,0 +1,630 @@ +// Catppuccin Latte - Light Theme +// Based on https://catppuccin.com/palette/ + +const colors = { + // Catppuccin Latte Palette + ROSEWATER: '#dc8a78', + FLAMINGO: '#dd7878', + PINK: '#ea76cb', + MAUVE: '#8839ef', + RED: '#d20f39', + MAROON: '#e64553', + PEACH: '#fe640b', + YELLOW: '#df8e1d', + GREEN: '#40a02b', + TEAL: '#179299', + SKY: '#04a5e5', + SAPPHIRE: '#209fb5', + BLUE: '#1e66f5', + LAVENDER: '#7287fd', + + TEXT: '#4c4f69', + SUBTEXT1: '#5c5f77', + SUBTEXT0: '#6c6f85', + OVERLAY2: '#7c7f93', + OVERLAY1: '#8c8fa1', + OVERLAY0: '#9ca0b0', + SURFACE2: '#acb0be', + SURFACE1: '#bcc0cc', + SURFACE0: '#ccd0da', + BASE: '#eff1f5', + MANTLE: '#e6e9ef', + CRUST: '#dce0e8', + + WHITE: '#fff', + BLACK: '#000', + + CODEMIRROR_TOKENS: { + DEFINITION: '#40a02b', + PROPERTY: '#1e66f5', + STRING: '#df8e1d', + NUMBER: '#fe640b', + ATOM: '#ea76cb', + VARIABLE: '#209fb5', + KEYWORD: '#d20f39', + COMMENT: '#6c6f85', + OPERATOR: '#179299' + } +}; + +const catppuccinLatteTheme = { + mode: 'light', + brand: colors.MAUVE, + text: colors.TEXT, + textLink: colors.BLUE, + bg: colors.BASE, + + accents: { + primary: colors.MAUVE + }, + + background: { + base: colors.BASE, + mantle: colors.MANTLE, + crust: colors.CRUST, + surface0: colors.SURFACE0, + surface1: colors.SURFACE1, + surface2: colors.SURFACE2 + }, + + overlay: { + overlay2: colors.OVERLAY2, + overlay1: colors.OVERLAY1, + overlay0: colors.OVERLAY0 + }, + + font: { + size: { + xs: '0.6875rem', // 11px + sm: '0.75rem', // 12px + base: '0.8125rem', // 13px + md: '0.875rem', // 14px + lg: '1rem', // 16px + xl: '1.125rem' // 18px + } + }, + + shadow: { + sm: '0 1px 3px rgba(76, 79, 105, 0.12), 0 0 0 1px rgba(76, 79, 105, 0.05)', + md: '0 2px 8px rgba(76, 79, 105, 0.14), 0 0 0 1px rgba(76, 79, 105, 0.06)', + lg: '0 2px 12px rgba(76, 79, 105, 0.15), 0 0 0 1px rgba(76, 79, 105, 0.05)' + }, + + border: { + radius: { + sm: '4px', + base: '6px', + md: '8px', + lg: '10px', + xl: '12px' + }, + border2: colors.SURFACE2, + border1: colors.SURFACE1, + border0: colors.SURFACE0 + }, + + colors: { + text: { + white: colors.WHITE, + green: colors.GREEN, + danger: colors.RED, + warning: colors.PEACH, + muted: colors.SUBTEXT0, + purple: colors.MAUVE, + yellow: colors.YELLOW, + subtext2: colors.TEXT, + subtext1: colors.SUBTEXT1, + subtext0: colors.SUBTEXT0 + }, + bg: { + danger: colors.MAROON + }, + accent: colors.MAUVE + }, + + input: { + bg: colors.SURFACE0, + border: colors.SURFACE1, + focusBorder: colors.LAVENDER, + placeholder: { + color: colors.OVERLAY0, + opacity: 0.8 + } + }, + + sidebar: { + color: colors.TEXT, + muted: colors.SUBTEXT0, + bg: colors.MANTLE, + dragbar: { + border: colors.SURFACE0, + activeBorder: colors.SURFACE2 + }, + + search: { + border: `1px solid ${colors.SURFACE1}`, + bg: colors.BASE + }, + + collection: { + item: { + bg: colors.SURFACE0, + hoverBg: colors.SURFACE1, + focusBorder: colors.LAVENDER, + indentBorder: `solid 1px ${colors.SURFACE1}`, + active: { + indentBorder: `solid 1px ${colors.MAUVE}` + }, + example: { + iconColor: colors.OVERLAY1 + } + } + }, + + dropdownIcon: { + color: colors.SUBTEXT1 + } + }, + + dropdown: { + color: colors.TEXT, + iconColor: colors.SUBTEXT1, + bg: colors.BASE, + hoverBg: colors.SURFACE0, + shadow: 'rgba(76, 79, 105, 0.25) 0px 6px 12px -2px, rgba(76, 79, 105, 0.3) 0px 3px 7px -3px', + separator: colors.SURFACE1, + selectedColor: colors.MAUVE, + mutedText: colors.SUBTEXT0 + }, + + workspace: { + accent: colors.MAUVE, + border: colors.SURFACE1, + button: { + bg: colors.SURFACE0 + } + }, + + request: { + methods: { + get: colors.GREEN, + post: colors.BLUE, + put: colors.YELLOW, + delete: colors.RED, + patch: colors.PEACH, + options: colors.TEAL, + head: colors.SAPPHIRE + }, + + grpc: colors.SKY, + ws: colors.MAUVE, + gql: colors.PINK + }, + + requestTabPanel: { + url: { + bg: colors.BASE, + icon: colors.SUBTEXT1, + iconDanger: colors.RED, + border: `solid 1px ${colors.SURFACE1}` + }, + dragbar: { + border: colors.SURFACE1, + activeBorder: colors.OVERLAY0 + }, + responseStatus: colors.SUBTEXT1, + responseOk: colors.GREEN, + responseError: colors.RED, + responsePending: colors.BLUE, + responseOverlayBg: 'rgba(239, 241, 245, 0.6)', + card: { + bg: colors.BASE, + border: colors.MANTLE, + hr: colors.SURFACE0 + }, + graphqlDocsExplorer: { + bg: colors.BASE, + color: colors.TEXT + } + }, + + notifications: { + bg: colors.BASE, + list: { + bg: colors.MANTLE, + borderRight: colors.SURFACE1, + borderBottom: colors.SURFACE1, + hoverBg: colors.SURFACE0, + active: { + border: colors.BLUE, + bg: colors.SURFACE1, + hoverBg: colors.SURFACE1 + } + } + }, + + modal: { + title: { + color: colors.TEXT, + bg: colors.MANTLE + }, + body: { + color: colors.TEXT, + bg: colors.BASE + }, + input: { + bg: colors.SURFACE0, + border: colors.SURFACE1, + focusBorder: colors.LAVENDER + }, + backdrop: { + opacity: 0.4 + } + }, + + button: { + secondary: { + color: colors.TEXT, + bg: colors.SURFACE0, + border: colors.SURFACE1, + hoverBorder: colors.OVERLAY0 + }, + close: { + color: colors.TEXT, + bg: 'transparent', + border: 'transparent', + hoverBorder: '' + }, + disabled: { + color: colors.OVERLAY0, + bg: colors.SURFACE1, + border: colors.SURFACE1 + }, + danger: { + color: colors.WHITE, + bg: colors.RED, + border: colors.RED + } + }, + button2: { + color: { + primary: { + bg: colors.MAUVE, + text: colors.BASE, + border: colors.MAUVE + }, + secondary: { + bg: colors.SURFACE1, + text: colors.TEXT, + border: colors.SURFACE2 + }, + success: { + bg: colors.GREEN, + text: colors.BASE, + border: colors.GREEN + }, + warning: { + bg: colors.PEACH, + text: colors.BASE, + border: colors.PEACH + }, + danger: { + bg: colors.RED, + text: colors.BASE, + border: colors.RED + } + } + }, + tabs: { + marginRight: '1.2rem', + active: { + fontWeight: 400, + color: colors.TEXT, + border: colors.MAUVE + }, + secondary: { + active: { + bg: colors.BASE, + color: colors.TEXT + }, + inactive: { + bg: colors.SURFACE0, + color: colors.SUBTEXT0 + } + } + }, + + requestTabs: { + color: colors.TEXT, + bg: colors.SURFACE0, + bottomBorder: colors.SURFACE1, + icon: { + color: colors.OVERLAY0, + hoverColor: colors.SUBTEXT1, + hoverBg: colors.SURFACE1 + }, + example: { + iconColor: colors.OVERLAY1 + }, + shortTab: { + color: colors.SUBTEXT1, + bg: colors.BASE, + hoverColor: colors.TEXT, + hoverBg: colors.SURFACE0 + } + }, + + codemirror: { + bg: colors.BASE, + border: colors.BASE, + placeholder: { + color: colors.OVERLAY0, + opacity: 0.75 + }, + gutter: { + bg: colors.BASE + }, + 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 + } + }, + 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 + }, + searchLineHighlightCurrent: 'rgba(124, 127, 147, 0.10)', + searchMatch: colors.YELLOW, + searchMatchActive: colors.PEACH + }, + + table: { + border: colors.SURFACE1, + thead: { + color: colors.SUBTEXT1 + }, + striped: colors.MANTLE, + input: { + color: colors.TEXT + } + }, + + plainGrid: { + hoverBg: colors.SURFACE0 + }, + + scrollbar: { + color: colors.OVERLAY0 + }, + + dragAndDrop: { + border: colors.LAVENDER, + borderStyle: '2px solid', + hoverBg: 'rgba(114, 135, 253, 0.05)', + transition: 'all 0.1s ease' + }, + + infoTip: { + bg: colors.BASE, + border: colors.SURFACE1, + boxShadow: '0 4px 12px rgba(76, 79, 105, 0.15)' + }, + + statusBar: { + border: colors.SURFACE1, + color: colors.SUBTEXT0 + }, + + console: { + bg: colors.BASE, + headerBg: colors.MANTLE, + contentBg: colors.BASE, + border: colors.SURFACE1, + titleColor: colors.TEXT, + countColor: colors.SUBTEXT0, + buttonColor: colors.SUBTEXT1, + buttonHoverBg: colors.SURFACE0, + buttonHoverColor: colors.TEXT, + messageColor: colors.TEXT, + timestampColor: colors.SUBTEXT0, + emptyColor: colors.SUBTEXT0, + logHoverBg: 'rgba(76, 79, 105, 0.03)', + resizeHandleHover: colors.BLUE, + resizeHandleActive: colors.BLUE, + dropdownBg: colors.BASE, + dropdownHeaderBg: colors.MANTLE, + optionHoverBg: colors.SURFACE0, + optionLabelColor: colors.TEXT, + optionCountColor: colors.SUBTEXT0, + checkboxColor: colors.MAUVE, + scrollbarTrack: colors.MANTLE, + scrollbarThumb: colors.SURFACE2, + scrollbarThumbHover: colors.OVERLAY0 + }, + + grpc: { + tabNav: { + container: { + bg: colors.MANTLE + }, + button: { + active: { + bg: colors.BASE, + color: colors.TEXT + }, + inactive: { + bg: 'transparent', + color: colors.SUBTEXT0 + } + } + }, + importPaths: { + header: { + text: colors.SUBTEXT0, + button: { + color: colors.SUBTEXT0, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: colors.RED, + link: { + color: colors.RED, + hoverColor: colors.MAROON + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(76, 79, 105, 0.05)', + text: colors.TEXT, + icon: colors.SUBTEXT0, + checkbox: { + color: colors.TEXT + }, + invalid: { + opacity: 0.6, + text: colors.RED + } + }, + empty: { + text: colors.SUBTEXT0 + }, + button: { + bg: colors.SURFACE0, + color: colors.TEXT, + border: colors.SURFACE1, + hoverBorder: colors.OVERLAY0 + } + }, + protoFiles: { + header: { + text: colors.SUBTEXT0, + button: { + color: colors.SUBTEXT0, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: colors.RED, + link: { + color: colors.RED, + hoverColor: colors.MAROON + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(76, 79, 105, 0.05)', + selected: { + bg: 'rgba(136, 57, 239, 0.2)', + border: colors.MAUVE + }, + text: colors.TEXT, + secondaryText: colors.SUBTEXT0, + icon: colors.SUBTEXT0, + invalid: { + opacity: 0.6, + text: colors.RED + } + }, + empty: { + text: colors.SUBTEXT0 + }, + button: { + bg: colors.SURFACE0, + color: colors.TEXT, + border: colors.SURFACE1, + hoverBorder: colors.OVERLAY0 + } + } + }, + deprecationWarning: { + bg: 'rgba(210, 15, 57, 0.1)', + border: 'rgba(210, 15, 57, 0.1)', + icon: colors.RED, + text: colors.TEXT + }, + + preferences: { + sidebar: { + border: colors.SURFACE1 + } + }, + + examples: { + buttonBg: 'rgba(136, 57, 239, 0.1)', + buttonColor: colors.MAUVE, + buttonText: colors.BASE, + buttonIconColor: colors.TEXT, + border: colors.SURFACE1, + urlBar: { + border: colors.SURFACE1, + bg: colors.MANTLE + }, + table: { + thead: { + bg: colors.MANTLE, + color: colors.SUBTEXT1 + } + }, + checkbox: { + color: colors.BASE + } + }, + + app: { + collection: { + toolbar: { + environmentSelector: { + bg: colors.BASE, + border: colors.SURFACE1, + icon: colors.MAUVE, + text: colors.TEXT, + caret: colors.OVERLAY0, + separator: colors.SURFACE1, + hoverBg: colors.BASE, + hoverBorder: colors.SURFACE2, + + noEnvironment: { + text: colors.SUBTEXT0, + bg: colors.BASE, + border: colors.SURFACE1, + hoverBg: colors.BASE, + hoverBorder: colors.SURFACE2 + } + }, + sandboxMode: { + safeMode: { + bg: 'rgba(64, 160, 43, 0.12)', + color: colors.GREEN + }, + developerMode: { + bg: 'rgba(223, 142, 29, 0.15)', + color: colors.YELLOW + } + } + } + } + } +}; + +export default catppuccinLatteTheme; diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light/light-monochrome.js similarity index 65% rename from packages/bruno-app/src/themes/light.js rename to packages/bruno-app/src/themes/light/light-monochrome.js index fc03d16c3..9dd9bb165 100644 --- a/packages/bruno-app/src/themes/light.js +++ b/packages/bruno-app/src/themes/light/light-monochrome.js @@ -1,15 +1,15 @@ const colors = { - BRAND: '#c7822e', + BRAND: '#525252', TEXT: 'rgb(52, 52, 52)', - TEXT_MUTED: '#838383', - TEXT_LINK: '#1663bb', + TEXT_MUTED: '#737373', + TEXT_LINK: '#404040', BACKGROUND: '#fff', WHITE: '#fff', BLACK: '#000', SLATE_BLACK: '#343434', - GREEN: '#047857', - YELLOW: '#c7822e', + GREEN: '#525252', + YELLOW: '#525252', GRAY_1: '#f8f8f8', GRAY_2: '#f3f3f3', @@ -23,32 +23,52 @@ const colors = { GRAY_10: '#252526', CODEMIRROR_TOKENS: { - DEFINITION: '#566f4e', // Deep moss - PROPERTY: '#4b7bbb', // Muted azure - STRING: '#a06e3b', // Warm bronze - NUMBER: '#3d8b7c', // Muted jade - ATOM: '#8169ad', // Soft plum - VARIABLE: '#3f7b6f', // Deep teal - KEYWORD: '#b95d6a', // Muted ruby - COMMENT: '#8997aa', // Cool gray - OPERATOR: '#6b7a8f' // Slate blue + DEFINITION: '#525252', + PROPERTY: '#666666', + STRING: '#737373', + NUMBER: '#525252', + ATOM: '#666666', + VARIABLE: '#525252', + KEYWORD: '#404040', + COMMENT: '#a3a3a3', + OPERATOR: '#737373' } }; -const lightTheme = { +const lightMonochromeTheme = { + mode: 'light', brand: colors.BRAND, text: colors.TEXT, textLink: colors.TEXT_LINK, bg: colors.BACKGROUND, + accents: { + primary: colors.BRAND + }, + + background: { + base: colors.BACKGROUND, + mantle: colors.GRAY_1, + crust: colors.GRAY_2, + surface0: colors.GRAY_3, + surface1: colors.GRAY_4, + surface2: colors.GRAY_5 + }, + + overlay: { + overlay2: colors.GRAY_6, + overlay1: '#c0c0c0', + overlay0: '#d0d0d0' + }, + font: { size: { - xs: '0.6875rem', // 11px - sm: '0.75rem', // 12px - base: '0.8125rem', // 13px - md: '0.875rem', // 14px - lg: '1rem', // 16px - xl: '1.125rem' // 18px + xs: '0.6875rem', + sm: '0.75rem', + base: '0.8125rem', + md: '0.875rem', + lg: '1rem', + xl: '1.125rem' } }, @@ -65,22 +85,29 @@ const lightTheme = { md: '8px', lg: '10px', xl: '12px' - } + }, + border2: colors.GRAY_5, + border1: colors.GRAY_4, + border0: colors.GRAY_3 }, colors: { text: { - green: colors.GREEN, - danger: '#B91C1C', - warning: '#f57c00', + white: '#fff', + green: '#525252', + danger: '#525252', + warning: '#525252', muted: '#838383', - purple: '#8e44ad', - yellow: colors.YELLOW + purple: '#525252', + yellow: colors.YELLOW, + subtext2: colors.GRAY_7, + subtext1: '#838383', + subtext0: '#9B9B9B' }, bg: { - danger: '#dc3545' + danger: '#525252' }, - accent: '#b96f1d' + accent: '#525252' }, input: { @@ -93,22 +120,6 @@ const lightTheme = { } }, - menubar: { - bg: 'rgb(44, 44, 44)' - }, - - variables: { - bg: '#fff', - - name: { - color: '#546de5' - }, - - runtime: { - color: 'rgb(0, 0, 0)' - } - }, - sidebar: { color: 'rgb(52, 52, 52)', muted: '#4b5563', @@ -118,10 +129,6 @@ const lightTheme = { activeBorder: colors.GRAY_5 }, - badge: { - bg: '#eaeaea' - }, - search: { border: '1px solid rgb(211 211 211)', bg: '#fff' @@ -147,11 +154,6 @@ const lightTheme = { } }, - welcome: { - heading: '#737373', - muted: '#4b5563' - }, - dropdown: { color: 'rgb(48 48 48)', iconColor: 'rgb(75, 85, 99)', @@ -159,133 +161,61 @@ const lightTheme = { hoverBg: '#e9ecef', shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px', separator: '#e7e7e7', - labelBg: '#f3f3f3', - selectedBg: '#D977060F', - selectedColor: '#D97706', - mutedText: '#9B9B9B', - primaryText: '#343434', - secondaryText: '#6B7280', - headingText: '#343434' - }, - - listItem: { - hoverBg: '#e7e7e7', - activeBg: '#dcdcdc' + selectedColor: '#525252', + mutedText: '#9B9B9B' }, workspace: { - accent: '#D97706', + accent: '#525252', border: '#e7e7e7', - borderMuted: '#f3f3f3', - card: { - bg: '#fff' - }, button: { - bg: '#f3f3f3' - }, - collection: { - header: { - indentBorder: 'solid 1px #efefef' - }, - item: { - indentBorder: 'solid 1px #f9f9f9' - } - }, - environments: { - bg: '#fbfbfb', - indentBorder: 'solid 1px #efefef', - activeBg: '#eeeeee', - search: { - bg: '#fff' - } + bg: colors.GRAY_3 } }, request: { methods: { - get: '#3f8f7a', // Muted jade green (aligned with NUMBER / VARIABLE) - post: '#7c5aa8', // Soft plum (matches ATOM family) - put: '#b8742f', // Warm bronze (close to BRAND, slightly darker) - delete: '#a54b4b', // Muted brick red (fits KEYWORD ruby tone) - patch: '#b8742f', // Same as PUT (semantic consistency) - options: '#8a7a52', // Olive slate (neutral, non-invasive) - head: '#6b7a8f' // Slate blue (reuses OPERATOR tone) + get: '#525252', + post: '#525252', + put: '#737373', + delete: '#404040', + patch: '#737373', + options: '#8a8a8a', + head: '#6b6b6b' }, - grpc: '#5b65c8', // Muted indigo (technical, calm) - ws: '#c28a2c', // Golden bronze (pairs with BRAND without overpowering) - gql: '#b04a8f' // Dusty magenta (softened GraphQL pink) + grpc: '#525252', + ws: '#737373', + gql: '#404040' }, requestTabPanel: { url: { bg: colors.WHITE, icon: '#515151', - iconDanger: '#d91f11', - errorHoverBg: '#fef2f2', + iconDanger: '#404040', border: `solid 1px ${colors.GRAY_4}` }, dragbar: { border: '#efefef', activeBorder: 'rgb(200, 200, 200)' }, - bodyModeSelect: { - color: '#efefef' - }, - responseSendIcon: 'rgb(209, 213, 219)', responseStatus: 'rgb(117 117 117)', - responseOk: '#047857', - responseError: 'rgb(185, 28, 28)', - responsePending: '#1663bb', + responseOk: '#525252', + responseError: '#404040', + responsePending: '#525252', responseOverlayBg: 'rgba(255, 255, 255, 0.6)', card: { bg: '#fff', border: '#f4f4f4', hr: '#f4f4f4' }, - cardTable: { - border: '#efefef', - bg: '#fff', - table: { - thead: { - bg: 'rgb(249, 250, 251)', - color: 'rgb(75 85 99)' - } - } - }, graphqlDocsExplorer: { bg: '#fff', color: 'rgb(52, 52, 52)' } }, - collection: { - environment: { - bg: '#efefef', - - settings: { - bg: 'white', - sidebar: { - bg: '#eaeaea', - borderRight: 'transparent' - }, - item: { - border: '#546de5', - hoverBg: '#e4e4e4', - active: { - bg: '#dcdcdc', - hoverBg: '#dcdcdc' - } - }, - gridBorder: '#f4f4f4' - } - }, - - sidebar: { - bg: '#eaeaea' - } - }, - notifications: { bg: 'white', list: { @@ -294,7 +224,7 @@ const lightTheme = { borderBottom: '#d3d3d3', hoverBg: '#e4e4e4', active: { - border: '#546de5', + border: '#525252', bg: '#dcdcdc', hoverBg: '#dcdcdc' } @@ -304,8 +234,7 @@ const lightTheme = { modal: { title: { color: 'rgb(86 86 86)', - bg: '#f1f1f1', - iconColor: 'black' + bg: '#f1f1f1' }, body: { color: 'rgb(52, 52, 52)', @@ -318,9 +247,6 @@ const lightTheme = { }, backdrop: { opacity: 0.4 - }, - closeButton: { - hoverBg: 'rgba(0, 0, 0, 0.08)' } }, @@ -332,7 +258,7 @@ const lightTheme = { hoverBorder: '#696969' }, close: { - color: '212529', + color: '#212529', bg: 'white', border: 'white', hoverBorder: '' @@ -344,31 +270,36 @@ const lightTheme = { }, danger: { color: '#fff', - bg: '#dc3545', - border: '#dc3545' + bg: '#525252', + border: '#525252' } }, button2: { color: { primary: { bg: colors.BRAND, - text: '#fff' + text: '#fff', + border: colors.BRAND }, secondary: { bg: '#e5e7eb', - text: colors.TEXT + text: colors.TEXT, + border: '#d1d5db' }, success: { - bg: '#4f9a7d', - text: '#fff' + bg: '#525252', + text: '#fff', + border: '#525252' }, warning: { - bg: '#c98b2b', - text: '#fff' + bg: '#737373', + text: '#fff', + border: '#737373' }, danger: { - bg: '#d14f5b', - text: '#fff' + bg: '#404040', + text: '#fff', + border: '#404040' } } }, @@ -377,7 +308,7 @@ const lightTheme = { active: { fontWeight: 400, color: colors.SLATE_BLACK, - border: '#c7822e' + border: '#525252' }, secondary: { active: { @@ -403,9 +334,6 @@ const lightTheme = { example: { iconColor: colors.GRAY_7 }, - active: { - bg: '#e7e7e7' - }, shortTab: { color: 'rgb(117 117 117)', bg: 'white', @@ -425,9 +353,9 @@ const lightTheme = { bg: colors.WHITE }, variable: { - valid: '#047857', - invalid: 'rgb(185, 28, 28)', - prompt: '#186ADE', + valid: '#525252', + invalid: '#404040', + prompt: '#525252', info: { color: '#343434', bg: '#FFFFFF', @@ -452,8 +380,8 @@ const lightTheme = { operator: colors.CODEMIRROR_TOKENS.OPERATOR }, searchLineHighlightCurrent: 'rgba(120,120,120,0.10)', - searchMatch: '#B8860B', - searchMatchActive: '#DAA520' + searchMatch: '#737373', + searchMatchActive: '#525252' }, table: { @@ -476,18 +404,12 @@ const lightTheme = { }, dragAndDrop: { - border: '#8b8b8b', // Using the same gray as focusBorder from input + border: '#8b8b8b', borderStyle: '2px solid', - hoverBg: 'rgba(139, 139, 139, 0.05)', // Matching the border color with reduced opacity + hoverBg: 'rgba(139, 139, 139, 0.05)', transition: 'all 0.1s ease' }, - tooltip: { - bg: '#374151', - color: '#ffffff', - shortcutColor: '#f59e0b' - }, - infoTip: { bg: 'white', border: '#e0e0e0', @@ -512,8 +434,8 @@ const lightTheme = { timestampColor: '#6c757d', emptyColor: '#6c757d', logHoverBg: 'rgba(0, 0, 0, 0.03)', - resizeHandleHover: '#0d6efd', - resizeHandleActive: '#0d6efd', + resizeHandleHover: '#525252', + resizeHandleActive: '#525252', dropdownBg: '#ffffff', dropdownHeaderBg: '#f8f9fa', optionHoverBg: '#f8f9fa', @@ -542,9 +464,6 @@ const lightTheme = { } }, importPaths: { - container: { - bg: '#ffffff' - }, header: { text: '#838383', button: { @@ -554,10 +473,10 @@ const lightTheme = { }, error: { bg: 'transparent', - text: '#B91C1C', + text: '#404040', link: { - color: '#B91C1C', - hoverColor: '#dc2626' + color: '#404040', + hoverColor: '#525252' } }, item: { @@ -570,7 +489,7 @@ const lightTheme = { }, invalid: { opacity: 0.6, - text: '#B91C1C' + text: '#404040' } }, empty: { @@ -584,9 +503,6 @@ const lightTheme = { } }, protoFiles: { - container: { - bg: '#ffffff' - }, header: { text: '#838383', button: { @@ -596,25 +512,25 @@ const lightTheme = { }, error: { bg: 'transparent', - text: '#B91C1C', + text: '#404040', link: { - color: '#B91C1C', - hoverColor: '#dc2626' + color: '#404040', + hoverColor: '#525252' } }, item: { bg: 'transparent', hoverBg: 'rgba(0, 0, 0, 0.05)', selected: { - bg: 'rgba(217, 119, 6, 0.2)', - border: '#d97706' + bg: 'rgba(82, 82, 82, 0.2)', + border: '#525252' }, text: '#343434', secondaryText: '#838383', icon: '#838383', invalid: { opacity: 0.6, - text: '#B91C1C' + text: '#404040' } }, empty: { @@ -629,9 +545,9 @@ const lightTheme = { } }, deprecationWarning: { - bg: 'rgba(217, 31, 17, 0.1)', - border: 'rgba(217, 31, 17, 0.1)', - icon: '#D91F11', + bg: 'rgba(64, 64, 64, 0.1)', + border: 'rgba(64, 64, 64, 0.1)', + icon: '#404040', text: '#343434' }, @@ -642,8 +558,8 @@ const lightTheme = { }, examples: { - buttonBg: '#D977061A', - buttonColor: '#D97706', + buttonBg: '#5252521A', + buttonColor: '#525252', buttonText: '#fff', buttonIconColor: '#000', border: '#efefef', @@ -685,12 +601,12 @@ const lightTheme = { }, sandboxMode: { safeMode: { - bg: 'rgba(4, 120, 87, 0.12)', - color: colors.GREEN + bg: 'rgba(82, 82, 82, 0.12)', + color: '#525252' }, developerMode: { - bg: 'rgba(204, 145, 73, 0.15)', - color: colors.YELLOW + bg: 'rgba(115, 115, 115, 0.15)', + color: '#737373' } } } @@ -698,4 +614,4 @@ const lightTheme = { } }; -export default lightTheme; +export default lightMonochromeTheme; diff --git a/packages/bruno-app/src/themes/light/light-pastel.js b/packages/bruno-app/src/themes/light/light-pastel.js new file mode 100644 index 000000000..f8568912a --- /dev/null +++ b/packages/bruno-app/src/themes/light/light-pastel.js @@ -0,0 +1,634 @@ +/** + * Light Pastel Theme - "Serenity Bloom" + * Soft, deep pastels with warm undertones for a calm, refined look. + * Gentle contrast that stays readable and inviting. + */ + +const colors = { + // Primary palette - soft yet deep + BRAND: '#d16c6c', // Dusty coral - warm but calm + TEXT: '#2b2f3a', // Deep charcoal with a violet hint + TEXT_MUTED: '#6e7380', // Muted slate + TEXT_LINK: '#3f7cac', // Steel blue + BACKGROUND: '#fdfaf7', // Warm ivory + + // Core colors + WHITE: '#ffffff', + BLACK: '#17181f', + SLATE: '#1f2530', + + // Soft pastels with depth + GREEN: '#3c9d7c', // Soft emerald + YELLOW: '#d2a13f', // Golden ochre + RED: '#c75b63', // Rosewood red + PURPLE: '#7a70b5', // Dusty periwinkle + BLUE: '#3a7cc4', // Muted azure + PINK: '#c57a92', // Dusty rose + ORANGE: '#dd8a52', // Muted amber + TEAL: '#3a8f98', // Steel teal + + // Warm grayscale with soft contrast + GRAY_1: '#f7f4ef', // Near white with warmth + GRAY_2: '#f0ebe4', // Light greige + GRAY_3: '#e2dbd1', // Soft stone + GRAY_4: '#d3cabc', // Gentle taupe + GRAY_5: '#b8b0a3', // Mid greige + GRAY_6: '#8d8577', // Warm smoke + GRAY_7: '#6f675b', // Earthy brown-gray + GRAY_8: '#574f45', // Deep stone + GRAY_9: '#3f382f', // Charcoal brown + GRAY_10: '#29231d', // Deepest warm charcoal + + // CodeMirror syntax - soft contrast with clarity + CODEMIRROR_TOKENS: { + DEFINITION: '#3c9d7c', // Soft emerald + PROPERTY: '#3a7cc4', // Muted azure + STRING: '#c75b63', // Rosewood + NUMBER: '#2d8fa1', // Dusty teal + ATOM: '#7a70b5', // Dusty periwinkle + VARIABLE: '#3f7cac', // Steel blue + KEYWORD: '#c57a92', // Dusty rose + COMMENT: '#9a9488', // Warm muted gray + OPERATOR: '#7c7a73' // Soft graphite + } +}; + +const lightPastelTheme = { + mode: 'light', + brand: colors.BRAND, + text: colors.TEXT, + textLink: colors.TEXT_LINK, + bg: colors.BACKGROUND, + + accents: { + primary: colors.BRAND + }, + + background: { + base: colors.BACKGROUND, + mantle: colors.GRAY_1, + crust: colors.GRAY_2, + surface0: colors.GRAY_3, + surface1: colors.GRAY_4, + surface2: colors.GRAY_5 + }, + + overlay: { + overlay2: colors.GRAY_6, + overlay1: '#c0c0c0', + overlay0: '#d0d0d0' + }, + + font: { + size: { + xs: '0.6875rem', + sm: '0.75rem', + base: '0.8125rem', + md: '0.875rem', + lg: '1rem', + xl: '1.125rem' + } + }, + + shadow: { + sm: '0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05)', + md: '0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06)', + lg: '0 4px 16px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)' + }, + + border: { + radius: { + sm: '4px', + base: '6px', + md: '8px', + lg: '10px', + xl: '12px' + }, + border2: colors.GRAY_4, + border1: colors.GRAY_3, + border0: colors.GRAY_2 + }, + + colors: { + text: { + white: colors.WHITE, + green: colors.GREEN, + danger: colors.RED, + warning: colors.ORANGE, + muted: colors.TEXT_MUTED, + purple: colors.PURPLE, + yellow: colors.YELLOW, + subtext2: colors.GRAY_7, + subtext1: colors.TEXT_MUTED, + subtext0: colors.GRAY_6 + }, + bg: { + danger: colors.RED + }, + accent: colors.BRAND + }, + + input: { + bg: colors.WHITE, + border: colors.GRAY_4, + focusBorder: colors.BRAND, + placeholder: { + color: colors.GRAY_6, + opacity: 0.8 + } + }, + + sidebar: { + color: colors.TEXT, + muted: colors.TEXT_MUTED, + bg: colors.GRAY_1, + dragbar: { + border: colors.GRAY_4, + activeBorder: colors.BRAND + }, + search: { + border: `1px solid ${colors.GRAY_4}`, + bg: colors.WHITE + }, + collection: { + item: { + bg: colors.GRAY_2, + hoverBg: colors.GRAY_3, + focusBorder: colors.BRAND, + indentBorder: `solid 1px ${colors.GRAY_4}`, + active: { + indentBorder: `solid 1px ${colors.BRAND}40` + }, + example: { + iconColor: colors.GRAY_7 + } + } + }, + dropdownIcon: { + color: colors.GRAY_7 + } + }, + + dropdown: { + color: colors.TEXT, + iconColor: colors.GRAY_7, + bg: colors.GRAY_1, + hoverBg: colors.GRAY_2, + shadow: 'rgba(0, 0, 0, 0.15) 0px 6px 16px -2px, rgba(0, 0, 0, 0.1) 0px 3px 8px -3px', + separator: colors.GRAY_3, + selectedColor: colors.BRAND, + mutedText: colors.GRAY_6 + }, + + workspace: { + accent: colors.BRAND, + border: colors.GRAY_3, + button: { + bg: colors.GRAY_3 + } + }, + + request: { + methods: { + get: '#3c9d7c', // Soft emerald - success + post: '#7a70b5', // Dusty periwinkle - creation + put: '#dd8a52', // Muted amber - update + delete: '#c75b63', // Rosewood red - deletion + patch: '#3a8f98', // Steel teal - modification + options: '#2d8fa1', // Dusty teal - metadata + head: '#3a7cc4' // Muted azure - lightweight + }, + grpc: '#7a70b5', // Dusty periwinkle + ws: '#c57a92', // Dusty rose + gql: '#7a70b5' // Dusty periwinkle + }, + + requestTabPanel: { + url: { + bg: 'transparent', + icon: colors.GRAY_7, + iconDanger: colors.RED, + border: `solid 1px ${colors.GRAY_4}` + }, + dragbar: { + border: colors.GRAY_3, + activeBorder: colors.BRAND + }, + responseStatus: colors.TEXT_MUTED, + responseOk: colors.GREEN, + responseError: colors.RED, + responsePending: colors.BLUE, + responseOverlayBg: 'rgba(254, 251, 255, 0.7)', + card: { + bg: colors.WHITE, + border: colors.GRAY_3, + hr: colors.GRAY_3 + }, + graphqlDocsExplorer: { + bg: colors.WHITE, + color: colors.TEXT + } + }, + + notifications: { + bg: colors.WHITE, + list: { + bg: colors.GRAY_2, + borderRight: 'transparent', + borderBottom: colors.GRAY_4, + hoverBg: colors.GRAY_3, + active: { + border: colors.BRAND, + bg: colors.GRAY_3, + hoverBg: colors.GRAY_3 + } + } + }, + + modal: { + title: { + color: colors.TEXT, + bg: colors.GRAY_1 + }, + body: { + color: colors.TEXT, + bg: colors.WHITE + }, + input: { + bg: colors.WHITE, + border: colors.GRAY_4, + focusBorder: colors.BRAND + }, + backdrop: { + opacity: 0.35 + } + }, + + button: { + secondary: { + color: colors.TEXT, + bg: colors.GRAY_2, + border: colors.GRAY_4, + hoverBorder: colors.GRAY_6 + }, + close: { + color: colors.TEXT, + bg: colors.WHITE, + border: colors.WHITE, + hoverBorder: '' + }, + disabled: { + color: colors.GRAY_6, + bg: colors.GRAY_2, + border: colors.GRAY_3 + }, + danger: { + color: colors.WHITE, + bg: colors.RED, + border: colors.RED + } + }, + + button2: { + color: { + primary: { + bg: colors.BRAND, + text: colors.WHITE, + border: colors.BRAND + }, + secondary: { + bg: colors.GRAY_3, + text: colors.TEXT, + border: colors.GRAY_4 + }, + success: { + bg: colors.GREEN, + text: colors.WHITE, + border: colors.GREEN + }, + warning: { + bg: colors.ORANGE, + text: colors.WHITE, + border: colors.ORANGE + }, + danger: { + bg: colors.RED, + text: colors.WHITE, + border: colors.RED + } + } + }, + + tabs: { + marginRight: '1.2rem', + active: { + fontWeight: 400, + color: colors.TEXT, + border: colors.BRAND + }, + secondary: { + active: { + bg: colors.WHITE, + color: colors.TEXT + }, + inactive: { + bg: colors.GRAY_2, + color: colors.TEXT_MUTED + } + } + }, + + requestTabs: { + color: colors.TEXT, + bg: colors.GRAY_1, + bottomBorder: colors.GRAY_3, + icon: { + color: colors.GRAY_6, + hoverColor: colors.TEXT, + hoverBg: colors.GRAY_3 + }, + example: { + iconColor: colors.GRAY_7 + }, + shortTab: { + color: colors.TEXT_MUTED, + bg: colors.WHITE, + hoverColor: colors.TEXT, + hoverBg: colors.GRAY_2 + } + }, + + codemirror: { + bg: 'transparent', + border: colors.WHITE, + placeholder: { + color: colors.GRAY_6, + opacity: 0.75 + }, + gutter: { + bg: 'transparent' + }, + 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 + } + }, + 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 + }, + searchLineHighlightCurrent: `${colors.BRAND}12`, + searchMatch: '#e5c27a', + searchMatchActive: '#d7b35f' + }, + + table: { + border: colors.GRAY_3, + thead: { + color: colors.TEXT_MUTED + }, + striped: colors.GRAY_1, + input: { + color: colors.TEXT + } + }, + + plainGrid: { + hoverBg: colors.GRAY_2 + }, + + scrollbar: { + color: colors.GRAY_5 + }, + + dragAndDrop: { + border: colors.BRAND, + borderStyle: '2px dashed', + hoverBg: `${colors.BRAND}08`, + transition: 'all 0.15s ease' + }, + + infoTip: { + bg: colors.WHITE, + border: colors.GRAY_4, + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.12)' + }, + + statusBar: { + border: colors.GRAY_3, + color: colors.TEXT_MUTED + }, + + console: { + bg: colors.GRAY_1, + headerBg: colors.GRAY_1, + contentBg: colors.WHITE, + border: colors.GRAY_3, + titleColor: colors.TEXT, + countColor: colors.TEXT_MUTED, + buttonColor: colors.TEXT, + buttonHoverBg: colors.GRAY_2, + buttonHoverColor: colors.TEXT, + messageColor: colors.TEXT, + timestampColor: colors.TEXT_MUTED, + emptyColor: colors.TEXT_MUTED, + logHoverBg: colors.GRAY_1, + resizeHandleHover: colors.BRAND, + resizeHandleActive: colors.BRAND, + dropdownBg: colors.WHITE, + dropdownHeaderBg: colors.GRAY_1, + optionHoverBg: colors.GRAY_1, + optionLabelColor: colors.TEXT, + optionCountColor: colors.TEXT_MUTED, + checkboxColor: colors.BRAND, + scrollbarTrack: colors.GRAY_1, + scrollbarThumb: colors.GRAY_4, + scrollbarThumbHover: colors.GRAY_5 + }, + + grpc: { + tabNav: { + container: { + bg: colors.GRAY_1 + }, + button: { + active: { + bg: colors.WHITE, + color: colors.TEXT + }, + inactive: { + bg: 'transparent', + color: colors.TEXT_MUTED + } + } + }, + importPaths: { + header: { + text: colors.TEXT_MUTED, + button: { + color: colors.TEXT_MUTED, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: '#c75b63', + link: { + color: '#c75b63', + hoverColor: '#d98b8f' + } + }, + item: { + bg: 'transparent', + hoverBg: colors.GRAY_2, + text: colors.TEXT, + icon: colors.TEXT_MUTED, + checkbox: { + color: colors.TEXT + }, + invalid: { + opacity: 0.6, + text: '#c75b63' + } + }, + empty: { + text: colors.TEXT_MUTED + }, + button: { + bg: colors.GRAY_2, + color: colors.TEXT, + border: colors.GRAY_4, + hoverBorder: colors.GRAY_6 + } + }, + protoFiles: { + header: { + text: colors.TEXT_MUTED, + button: { + color: colors.TEXT_MUTED, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: '#c75b63', + link: { + color: '#c75b63', + hoverColor: '#d98b8f' + } + }, + item: { + bg: 'transparent', + hoverBg: colors.GRAY_2, + selected: { + bg: `${colors.BRAND}18`, + border: colors.BRAND + }, + text: colors.TEXT, + secondaryText: colors.TEXT_MUTED, + icon: colors.TEXT_MUTED, + invalid: { + opacity: 0.6, + text: '#c75b63' + } + }, + empty: { + text: colors.TEXT_MUTED + }, + button: { + bg: colors.GRAY_2, + color: colors.TEXT, + border: colors.GRAY_4, + hoverBorder: colors.GRAY_6 + } + } + }, + + deprecationWarning: { + bg: '#fef3c7', + border: '#fcd34d', + icon: '#d97706', + text: colors.TEXT + }, + + preferences: { + sidebar: { + border: colors.GRAY_3 + } + }, + + examples: { + buttonBg: `${colors.BRAND}15`, + buttonColor: colors.BRAND, + buttonText: colors.WHITE, + buttonIconColor: colors.TEXT, + border: colors.GRAY_3, + urlBar: { + border: colors.GRAY_3, + bg: colors.GRAY_1 + }, + table: { + thead: { + bg: colors.GRAY_1, + color: colors.TEXT + } + }, + checkbox: { + color: colors.WHITE + } + }, + + app: { + collection: { + toolbar: { + environmentSelector: { + bg: colors.WHITE, + border: colors.GRAY_4, + icon: colors.BRAND, + text: colors.TEXT, + caret: colors.GRAY_6, + separator: colors.GRAY_4, + hoverBg: colors.WHITE, + hoverBorder: colors.GRAY_5, + noEnvironment: { + text: colors.TEXT_MUTED, + bg: colors.WHITE, + border: colors.GRAY_4, + hoverBg: colors.WHITE, + hoverBorder: colors.GRAY_5 + } + }, + sandboxMode: { + safeMode: { + bg: `${colors.GREEN}18`, + color: colors.GREEN + }, + developerMode: { + bg: `${colors.ORANGE}18`, + color: colors.ORANGE + } + } + } + } + } +}; + +export default lightPastelTheme; diff --git a/packages/bruno-app/src/themes/light/light.js b/packages/bruno-app/src/themes/light/light.js new file mode 100644 index 000000000..f57c289d7 --- /dev/null +++ b/packages/bruno-app/src/themes/light/light.js @@ -0,0 +1,645 @@ +const palette = { + accents: { + PRIMARY: '#bd7a28', + RED: 'hsl(8 60% 52%)', // warm coral - NEW + ROSE: 'hsl(352 45% 50%)', // soft red (approved) + BROWN: 'hsl(28 55% 38%)', // warm brown (liked) + ORANGE: 'hsl(35 85% 42%)', // vibrant orange + YELLOW: 'hsl(45 75% 42%)', // golden yellow + LIME: 'hsl(85 45% 40%)', // yellow-green - NEW + GREEN: 'hsl(145 50% 36%)', // forest green + TEAL: 'hsl(178 50% 36%)', // true teal + CYAN: 'hsl(195 55% 42%)', // cyan-blue - NEW + BLUE: 'hsl(214 55% 45%)', // true blue (liked) + INDIGO: 'hsl(235 45% 45%)', // deep indigo + VIOLET: 'hsl(258 42% 50%)', // soft violet - NEW + PURPLE: 'hsl(280 45% 48%)', // rich purple + PINK: 'hsl(328 50% 48%)' // magenta-pink - NEW + }, + system: { + CONTROL_ACCENT: '#b96f1d' // for accent-color + }, + background: { + BASE: '#ffffff', + MANTLE: '#f8f8f8', + CRUST: '#f6f6f6', + SURFACE0: '#f1f1f1', + SURFACE1: '#eaeaea', + SURFACE2: '#e5e5e5' + }, + text: { + BASE: '#343434', + SUBTEXT2: '#666666', + SUBTEXT1: '#838383', + SUBTEXT0: '#9B9B9B' + }, + overlay: { + OVERLAY2: '#8b8b8b', + OVERLAY1: '#B0B0B0', + OVERLAY0: '#C0C0C0' + }, + border: { + BORDER2: '#cccccc', + BORDER1: '#e5e5e5', + BORDER0: '#efefef' + }, + utility: { + WHITE: '#ffffff', + BLACK: '#000000' + } +}; + +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 + } +}; + +const lightTheme = { + mode: 'light', + brand: palette.accents.PRIMARY, + text: palette.text.BASE, + textLink: palette.accents.BLUE, + bg: palette.background.BASE, + + accents: { + primary: palette.accents.PRIMARY + }, + + background: { + base: palette.background.BASE, + mantle: palette.background.MANTLE, + crust: palette.background.CRUST, + surface2: palette.background.SURFACE2, + surface1: palette.background.SURFACE1, + surface0: palette.background.SURFACE0 + }, + + overlay: { + overlay2: palette.overlay.OVERLAY2, + overlay1: palette.overlay.OVERLAY1, + overlay0: palette.overlay.OVERLAY0 + }, + + font: { + size: { + xs: '0.6875rem', // 11px + sm: '0.75rem', // 12px + base: '0.8125rem', // 13px + md: '0.875rem', // 14px + lg: '1rem', // 16px + xl: '1.125rem' // 18px + } + }, + + shadow: { + sm: '0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05)', + md: '0 2px 8px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06)', + lg: '0 2px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)' + }, + + border: { + radius: { + sm: '4px', + base: '6px', + md: '8px', + lg: '10px', + xl: '12px' + }, + border2: palette.border.BORDER2, + border1: palette.border.BORDER1, + border0: palette.border.BORDER0 + }, + + colors: { + text: { + white: palette.utility.WHITE, + green: palette.accents.GREEN, + danger: palette.accents.RED, + warning: palette.accents.ORANGE, + muted: palette.text.SUBTEXT1, + purple: palette.accents.PURPLE, + yellow: palette.accents.YELLOW, + subtext2: palette.text.SUBTEXT2, + subtext1: palette.text.SUBTEXT1, + subtext0: palette.text.SUBTEXT0 + }, + bg: { + danger: palette.accents.RED + }, + accent: palette.system.CONTROL_ACCENT + }, + + input: { + bg: palette.utility.WHITE, + border: palette.border.BORDER2, + focusBorder: palette.overlay.OVERLAY2, + placeholder: { + color: palette.overlay.OVERLAY1, + opacity: 0.8 + } + }, + + sidebar: { + color: palette.text.BASE, + muted: palette.text.SUBTEXT1, + bg: palette.background.MANTLE, + dragbar: { + border: palette.background.SURFACE2, + activeBorder: palette.background.SURFACE2 + }, + + search: { + border: `1px solid ${palette.border.BORDER2}`, + bg: palette.utility.WHITE + }, + + collection: { + item: { + bg: palette.background.SURFACE0, + hoverBg: palette.background.SURFACE0, + focusBorder: palette.border.BORDER2, + indentBorder: `solid 1px ${palette.border.BORDER1}`, + active: { + indentBorder: `solid 1px ${palette.border.BORDER1}` + }, + example: { + iconColor: palette.text.SUBTEXT2 + } + } + }, + + dropdownIcon: { + color: palette.text.SUBTEXT2 + } + }, + + dropdown: { + color: palette.text.BASE, + iconColor: palette.text.SUBTEXT2, + bg: palette.utility.WHITE, + hoverBg: palette.background.CRUST, + shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px', + separator: palette.border.BORDER1, + selectedColor: palette.accents.PRIMARY, + mutedText: palette.text.SUBTEXT0 + }, + + workspace: { + accent: palette.system.CONTROL_ACCENT, + border: palette.border.BORDER1, + button: { + bg: palette.background.MANTLE + } + }, + + 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 + }, + + grpc: palette.accents.INDIGO, + ws: palette.accents.ORANGE, + gql: palette.accents.PINK + }, + + requestTabPanel: { + url: { + bg: palette.utility.WHITE, + icon: palette.text.SUBTEXT2, + iconDanger: palette.accents.RED, + border: `solid 1px ${palette.border.BORDER1}` + }, + dragbar: { + border: palette.background.SURFACE2, + activeBorder: palette.border.BORDER2 + }, + responseStatus: palette.text.SUBTEXT1, + responseOk: palette.accents.GREEN, + responseError: palette.accents.RED, + responsePending: palette.accents.BLUE, + responseOverlayBg: 'rgba(255, 255, 255, 0.6)', + card: { + bg: palette.background.BASE, + border: palette.border.BORDER1, + hr: palette.border.BORDER1 + }, + graphqlDocsExplorer: { + bg: palette.background.BASE, + color: palette.text.BASE + } + }, + + notifications: { + bg: palette.background.BASE, + list: { + bg: palette.background.SURFACE0, + borderRight: 'transparent', + borderBottom: palette.border.BORDER2, + hoverBg: palette.background.SURFACE1, + active: { + border: palette.accents.BLUE, + bg: palette.background.SURFACE1, + hoverBg: palette.background.SURFACE2 + } + } + }, + + modal: { + title: { + color: palette.text.BASE, + bg: palette.background.SURFACE0 + }, + body: { + color: palette.text.BASE, + bg: palette.background.BASE + }, + input: { + bg: palette.background.BASE, + border: palette.border.BORDER2, + focusBorder: palette.overlay.OVERLAY2 + }, + backdrop: { + opacity: 0.4 + } + }, + + button: { + secondary: { + color: '#212529', + bg: '#e2e6ea', + border: '#dae0e5', + hoverBorder: '#696969' + }, + close: { + color: '#212529', + bg: 'white', + border: 'white', + hoverBorder: '' + }, + disabled: { + color: '#9f9f9f', + bg: palette.border.BORDER0, + border: 'rgb(234, 234, 234)' + }, + danger: { + color: '#fff', + bg: '#dc3545', + border: '#dc3545' + } + }, + button2: { + color: { + primary: { + bg: palette.accents.PRIMARY, + text: palette.utility.WHITE, + border: palette.accents.PRIMARY + }, + secondary: { + bg: palette.background.MANTLE, + border: palette.border.BORDER2, + text: palette.text.BASE + }, + success: { + bg: palette.accents.GREEN, + text: palette.utility.WHITE, + border: palette.accents.GREEN + }, + warning: { + bg: palette.accents.ORANGE, + text: palette.utility.WHITE, + border: palette.accents.ORANGE + }, + danger: { + bg: palette.accents.RED, + text: palette.utility.WHITE, + border: palette.accents.RED + } + } + }, + tabs: { + marginRight: '1.2rem', + active: { + fontWeight: 400, + color: palette.text.BASE, + border: palette.accents.PRIMARY + }, + secondary: { + active: { + bg: palette.background.BASE, + color: palette.text.BASE + }, + inactive: { + bg: palette.background.SURFACE1, + color: palette.text.BASE + } + } + }, + + requestTabs: { + color: palette.text.BASE, + bg: palette.background.CRUST, + bottomBorder: palette.border.BORDER0, + icon: { + color: palette.text.SUBTEXT0, + hoverColor: palette.text.BASE, + hoverBg: palette.background.SURFACE1 + }, + example: { + iconColor: palette.text.SUBTEXT2 + }, + shortTab: { + color: palette.text.SUBTEXT1, + bg: palette.utility.WHITE, + hoverColor: palette.text.SUBTEXT2, + hoverBg: palette.background.SURFACE1 + } + }, + + codemirror: { + bg: palette.utility.WHITE, + border: palette.utility.WHITE, + placeholder: { + color: palette.overlay.OVERLAY1, + opacity: 0.75 + }, + gutter: { + 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 + } + }, + 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 + }, + searchLineHighlightCurrent: 'rgba(120,120,120,0.10)', + searchMatch: '#B8860B', + searchMatchActive: '#DAA520' + }, + + table: { + border: palette.border.BORDER0, + thead: { + color: palette.text.SUBTEXT2 + }, + striped: palette.background.SURFACE0, + input: { + color: palette.text.BASE + } + }, + + plainGrid: { + hoverBg: palette.background.CRUST + }, + + scrollbar: { + color: 'rgb(152 151 149)' + }, + + dragAndDrop: { + border: palette.overlay.OVERLAY2, // Using the same gray as focusBorder from input + borderStyle: '2px solid', + hoverBg: 'rgba(139, 139, 139, 0.05)', // Matching the border color with reduced opacity + transition: 'all 0.1s ease' + }, + + infoTip: { + bg: 'white', + border: palette.background.SURFACE1, + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)' + }, + + statusBar: { + border: '#E9E9E9', + color: 'rgb(100, 100, 100)' + }, + console: { + bg: '#f8f9fa', + headerBg: '#f8f9fa', + contentBg: '#ffffff', + border: '#dee2e6', + titleColor: '#212529', + countColor: '#6c757d', + buttonColor: '#495057', + buttonHoverBg: '#e9ecef', + buttonHoverColor: '#212529', + messageColor: '#212529', + timestampColor: '#6c757d', + emptyColor: '#6c757d', + logHoverBg: 'rgba(0, 0, 0, 0.03)', + resizeHandleHover: '#0d6efd', + resizeHandleActive: '#0d6efd', + dropdownBg: '#ffffff', + dropdownHeaderBg: '#f8f9fa', + optionHoverBg: '#f8f9fa', + optionLabelColor: '#212529', + optionCountColor: '#6c757d', + checkboxColor: palette.accents.PRIMARY, + scrollbarTrack: '#f8f9fa', + scrollbarThumb: '#ced4da', + scrollbarThumbHover: '#adb5bd' + }, + + grpc: { + tabNav: { + container: { + bg: '#f5f5f5' + }, + button: { + active: { + bg: '#ffffff', + color: '#000000' + }, + inactive: { + bg: 'transparent', + color: '#525252' + } + } + }, + importPaths: { + header: { + text: '#838383', + button: { + color: '#838383', + hoverColor: '#343434' + } + }, + error: { + bg: 'transparent', + text: '#B91C1C', + link: { + color: '#B91C1C', + hoverColor: '#dc2626' + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(0, 0, 0, 0.05)', + text: '#343434', + icon: '#838383', + checkbox: { + color: '#343434' + }, + invalid: { + opacity: 0.6, + text: '#B91C1C' + } + }, + empty: { + text: '#838383' + }, + button: { + bg: '#e2e6ea', + color: '#212529', + border: '#dae0e5', + hoverBorder: '#696969' + } + }, + protoFiles: { + header: { + text: '#838383', + button: { + color: '#838383', + hoverColor: '#343434' + } + }, + error: { + bg: 'transparent', + text: '#B91C1C', + link: { + color: '#B91C1C', + hoverColor: '#dc2626' + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(0, 0, 0, 0.05)', + selected: { + bg: 'rgba(217, 119, 6, 0.2)', + border: '#d97706' + }, + text: '#343434', + secondaryText: '#838383', + icon: '#838383', + invalid: { + opacity: 0.6, + text: '#B91C1C' + } + }, + empty: { + text: '#838383' + }, + button: { + bg: '#e2e6ea', + color: '#212529', + border: '#dae0e5', + hoverBorder: '#696969' + } + } + }, + deprecationWarning: { + bg: 'rgba(217, 31, 17, 0.1)', + border: 'rgba(217, 31, 17, 0.1)', + icon: '#D91F11', + text: palette.text.BASE + }, + + preferences: { + sidebar: { + border: palette.border.BORDER0 + } + }, + + examples: { + buttonBg: '#D977061A', + buttonColor: '#D97706', + buttonText: '#fff', + buttonIconColor: '#000', + border: palette.border.BORDER0, + urlBar: { + border: palette.border.BORDER0, + bg: '#F5F5F5' + }, + table: { + thead: { + bg: '#f8f9fa', + color: '#212529' + } + }, + checkbox: { + color: '#fff' + } + }, + + app: { + collection: { + toolbar: { + environmentSelector: { + bg: palette.utility.WHITE, + border: palette.border.BORDER1, + icon: palette.accents.PRIMARY, + text: palette.text.BASE, + caret: palette.overlay.OVERLAY1, + separator: palette.border.BORDER1, + hoverBg: palette.utility.WHITE, + hoverBorder: palette.border.BORDER2, + + noEnvironment: { + text: palette.text.SUBTEXT1, + bg: palette.utility.WHITE, + border: palette.border.BORDER2, + hoverBg: palette.utility.WHITE, + hoverBorder: palette.overlay.OVERLAY1 + } + }, + sandboxMode: { + safeMode: { + bg: 'rgba(4, 120, 87, 0.12)', + color: palette.accents.GREEN + }, + developerMode: { + bg: 'rgba(204, 145, 73, 0.15)', + color: palette.accents.YELLOW + } + } + } + } + } +}; + +export default lightTheme; diff --git a/packages/bruno-app/src/themes/light/vscode.js b/packages/bruno-app/src/themes/light/vscode.js new file mode 100644 index 000000000..bb2b85e4b --- /dev/null +++ b/packages/bruno-app/src/themes/light/vscode.js @@ -0,0 +1,638 @@ +// VS Code Light+ Theme for Bruno +// Based on the default Visual Studio Code Light+ theme + +const colors = { + // VS Code Light+ Core Colors + EDITOR_BG: '#ffffff', + SIDEBAR_BG: '#f3f3f3', + ACTIVITY_BAR_BG: '#2c2c2c', + PANEL_BG: '#ffffff', + + // Text colors + TEXT: '#000000', + TEXT_SECONDARY: '#1f1f1f', + TEXT_MUTED: '#6e7681', + TEXT_LINK: '#006ab1', + + // Brand - VS Code blue + BRAND: '#007acc', + BRAND_HOVER: '#0062a3', + + // Semantic colors + GREEN: '#098658', + YELLOW: '#795e26', + ORANGE: '#a31515', + RED: '#cd3131', + PURPLE: '#af00db', + BLUE: '#0000ff', + CYAN: '#008080', + + WHITE: '#ffffff', + BLACK: '#000000', + + // Grays (VS Code Light specific) + GRAY_1: '#f3f3f3', + GRAY_2: '#e8e8e8', + GRAY_3: '#dddddd', + GRAY_4: '#d4d4d4', + GRAY_5: '#c6c6c6', + GRAY_6: '#a0a0a0', + GRAY_7: '#7a7a7a', + GRAY_8: '#5a5a5a', + + // Borders + BORDER: '#e5e5e5', + BORDER_DARK: '#cecece', + + CODEMIRROR_TOKENS: { + DEFINITION: '#267f99', + PROPERTY: '#0451a5', + STRING: '#a31515', + NUMBER: '#098658', + ATOM: '#0000ff', + VARIABLE: '#001080', + KEYWORD: '#af00db', + COMMENT: '#008000', + OPERATOR: '#000000' + } +}; + +const vscodeLightTheme = { + mode: 'light', + brand: colors.BRAND, + text: colors.TEXT, + textLink: colors.TEXT_LINK, + bg: colors.EDITOR_BG, + + accents: { + primary: colors.BRAND + }, + + background: { + base: colors.EDITOR_BG, + mantle: colors.SIDEBAR_BG, + crust: colors.GRAY_2, + surface0: colors.GRAY_3, + surface1: colors.GRAY_4, + surface2: colors.GRAY_5 + }, + + overlay: { + overlay2: colors.GRAY_6, + overlay1: '#c0c0c0', + overlay0: '#d0d0d0' + }, + + font: { + size: { + xs: '0.6875rem', + sm: '0.75rem', + base: '0.8125rem', + md: '0.875rem', + lg: '1rem', + xl: '1.125rem' + } + }, + + shadow: { + sm: '0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04)', + md: '0 2px 8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)', + lg: '0 2px 12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05)' + }, + + border: { + radius: { + sm: '4px', + base: '6px', + md: '8px', + lg: '10px', + xl: '12px' + }, + border2: colors.GRAY_4, + border1: colors.BORDER, + border0: colors.GRAY_2 + }, + + colors: { + text: { + white: colors.WHITE, + green: colors.GREEN, + danger: colors.RED, + warning: '#bf8803', + muted: colors.TEXT_MUTED, + purple: colors.PURPLE, + yellow: colors.YELLOW, + subtext2: colors.TEXT_SECONDARY, + subtext1: colors.TEXT_MUTED, + subtext0: colors.GRAY_7 + }, + bg: { + danger: colors.RED + }, + accent: colors.BRAND + }, + + input: { + bg: colors.WHITE, + border: colors.BORDER_DARK, + focusBorder: colors.BRAND, + placeholder: { + color: colors.TEXT_MUTED, + opacity: 0.8 + } + }, + + sidebar: { + color: colors.TEXT, + muted: colors.TEXT_MUTED, + bg: colors.SIDEBAR_BG, + dragbar: { + border: colors.BORDER, + activeBorder: colors.GRAY_5 + }, + search: { + border: `1px solid ${colors.BORDER_DARK}`, + bg: colors.WHITE + }, + collection: { + item: { + bg: colors.GRAY_2, + hoverBg: colors.GRAY_3, + focusBorder: colors.GRAY_5, + indentBorder: `solid 1px ${colors.BORDER}`, + active: { + indentBorder: `solid 1px ${colors.BORDER}` + }, + example: { + iconColor: colors.GRAY_7 + } + } + }, + dropdownIcon: { + color: colors.TEXT_SECONDARY + } + }, + + dropdown: { + color: colors.TEXT, + iconColor: colors.TEXT_SECONDARY, + bg: colors.WHITE, + hoverBg: colors.GRAY_2, + shadow: 'rgba(0, 0, 0, 0.16) 0px 6px 12px -2px, rgba(0, 0, 0, 0.1) 0px 3px 7px -3px', + separator: colors.BORDER, + selectedColor: colors.BRAND, + mutedText: colors.TEXT_MUTED + }, + + workspace: { + accent: colors.BRAND, + border: colors.BORDER, + button: { + bg: colors.GRAY_2 + } + }, + + request: { + methods: { + get: colors.GREEN, + post: colors.YELLOW, + put: '#d18616', + delete: colors.RED, + patch: '#d18616', + options: colors.GRAY_7, + head: colors.BLUE + }, + grpc: colors.CYAN, + ws: '#795e26', + gql: colors.PURPLE + }, + + requestTabPanel: { + url: { + bg: colors.WHITE, + icon: colors.TEXT_SECONDARY, + iconDanger: colors.RED, + border: `solid 1px ${colors.BORDER}` + }, + dragbar: { + border: colors.BORDER, + activeBorder: colors.BRAND + }, + responseStatus: colors.TEXT_SECONDARY, + responseOk: colors.GREEN, + responseError: colors.RED, + responsePending: colors.BRAND, + responseOverlayBg: 'rgba(255, 255, 255, 0.6)', + card: { + bg: colors.WHITE, + border: colors.BORDER, + hr: colors.BORDER + }, + graphqlDocsExplorer: { + bg: colors.WHITE, + color: colors.TEXT + } + }, + + notifications: { + bg: colors.WHITE, + list: { + bg: colors.GRAY_2, + borderRight: 'transparent', + borderBottom: colors.BORDER, + hoverBg: colors.GRAY_3, + active: { + border: colors.BRAND, + bg: colors.GRAY_3, + hoverBg: colors.GRAY_3 + } + } + }, + + modal: { + title: { + color: colors.TEXT_SECONDARY, + bg: colors.GRAY_1 + }, + body: { + color: colors.TEXT, + bg: colors.WHITE + }, + input: { + bg: colors.WHITE, + border: colors.BORDER_DARK, + focusBorder: colors.BRAND + }, + backdrop: { + opacity: 0.4 + } + }, + + button: { + secondary: { + color: colors.TEXT, + bg: colors.GRAY_2, + border: colors.GRAY_4, + hoverBorder: colors.GRAY_5 + }, + close: { + color: colors.TEXT, + bg: colors.WHITE, + border: colors.WHITE, + hoverBorder: '' + }, + disabled: { + color: colors.GRAY_6, + bg: colors.GRAY_2, + border: colors.BORDER + }, + danger: { + color: colors.WHITE, + bg: colors.RED, + border: colors.RED + } + }, + + button2: { + color: { + primary: { + bg: colors.BRAND, + text: colors.WHITE, + border: colors.BRAND + }, + secondary: { + bg: colors.GRAY_3, + text: colors.TEXT, + border: colors.GRAY_4 + }, + success: { + bg: colors.GREEN, + text: colors.WHITE, + border: colors.GREEN + }, + warning: { + bg: '#bf8803', + text: colors.WHITE, + border: '#bf8803' + }, + danger: { + bg: colors.RED, + text: colors.WHITE, + border: colors.RED + } + } + }, + + tabs: { + marginRight: '1.2rem', + active: { + fontWeight: 400, + color: colors.TEXT, + border: colors.BRAND + }, + secondary: { + active: { + bg: colors.WHITE, + color: colors.TEXT + }, + inactive: { + bg: colors.GRAY_2, + color: colors.TEXT_MUTED + } + } + }, + + requestTabs: { + color: colors.TEXT, + bg: colors.SIDEBAR_BG, + bottomBorder: colors.BORDER, + icon: { + color: colors.GRAY_6, + hoverColor: colors.TEXT_SECONDARY, + hoverBg: colors.GRAY_3 + }, + example: { + iconColor: colors.GRAY_7 + }, + shortTab: { + color: colors.TEXT_SECONDARY, + bg: colors.WHITE, + hoverColor: colors.TEXT_SECONDARY, + hoverBg: colors.GRAY_2 + } + }, + + codemirror: { + bg: colors.WHITE, + border: colors.WHITE, + placeholder: { + color: colors.TEXT_MUTED, + opacity: 0.75 + }, + gutter: { + bg: colors.WHITE + }, + 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 + } + }, + 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 + }, + searchLineHighlightCurrent: 'rgba(255, 255, 0, 0.2)', + searchMatch: '#a8ac94', + searchMatchActive: '#f8e8a6' + }, + + table: { + border: colors.BORDER, + thead: { + color: colors.TEXT_SECONDARY + }, + striped: colors.GRAY_1, + input: { + color: colors.BLACK + } + }, + + plainGrid: { + hoverBg: colors.GRAY_1 + }, + + scrollbar: { + color: colors.GRAY_5 + }, + + dragAndDrop: { + border: colors.BRAND, + borderStyle: '2px solid', + hoverBg: 'rgba(0, 122, 204, 0.08)', + transition: 'all 0.1s ease' + }, + + infoTip: { + bg: colors.WHITE, + border: colors.BORDER, + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)' + }, + + statusBar: { + border: colors.BORDER, + color: colors.TEXT_MUTED + }, + + console: { + bg: colors.GRAY_1, + headerBg: colors.GRAY_1, + contentBg: colors.WHITE, + border: colors.BORDER, + titleColor: colors.TEXT, + countColor: colors.TEXT_MUTED, + buttonColor: colors.TEXT_SECONDARY, + buttonHoverBg: colors.GRAY_2, + buttonHoverColor: colors.TEXT, + messageColor: colors.TEXT, + timestampColor: colors.TEXT_MUTED, + emptyColor: colors.TEXT_MUTED, + logHoverBg: 'rgba(0, 0, 0, 0.03)', + resizeHandleHover: colors.BRAND, + resizeHandleActive: colors.BRAND, + dropdownBg: colors.WHITE, + dropdownHeaderBg: colors.GRAY_1, + optionHoverBg: colors.GRAY_1, + optionLabelColor: colors.TEXT, + optionCountColor: colors.TEXT_MUTED, + checkboxColor: colors.BRAND, + scrollbarTrack: colors.GRAY_1, + scrollbarThumb: colors.GRAY_4, + scrollbarThumbHover: colors.GRAY_5 + }, + + grpc: { + tabNav: { + container: { + bg: colors.GRAY_1 + }, + button: { + active: { + bg: colors.WHITE, + color: colors.BLACK + }, + inactive: { + bg: 'transparent', + color: colors.TEXT_SECONDARY + } + } + }, + importPaths: { + header: { + text: colors.TEXT_MUTED, + button: { + color: colors.TEXT_MUTED, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: colors.RED, + link: { + color: colors.RED, + hoverColor: '#e03e3e' + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(0, 0, 0, 0.05)', + text: colors.TEXT, + icon: colors.TEXT_MUTED, + checkbox: { + color: colors.TEXT + }, + invalid: { + opacity: 0.6, + text: colors.RED + } + }, + empty: { + text: colors.TEXT_MUTED + }, + button: { + bg: colors.GRAY_2, + color: colors.TEXT, + border: colors.GRAY_4, + hoverBorder: colors.GRAY_5 + } + }, + protoFiles: { + header: { + text: colors.TEXT_MUTED, + button: { + color: colors.TEXT_MUTED, + hoverColor: colors.TEXT + } + }, + error: { + bg: 'transparent', + text: colors.RED, + link: { + color: colors.RED, + hoverColor: '#e03e3e' + } + }, + item: { + bg: 'transparent', + hoverBg: 'rgba(0, 0, 0, 0.05)', + selected: { + bg: 'rgba(0, 122, 204, 0.15)', + border: colors.BRAND + }, + text: colors.TEXT, + secondaryText: colors.TEXT_MUTED, + icon: colors.TEXT_MUTED, + invalid: { + opacity: 0.6, + text: colors.RED + } + }, + empty: { + text: colors.TEXT_MUTED + }, + button: { + bg: colors.GRAY_2, + color: colors.TEXT, + border: colors.GRAY_4, + hoverBorder: colors.GRAY_5 + } + } + }, + + deprecationWarning: { + bg: 'rgba(205, 49, 49, 0.1)', + border: 'rgba(205, 49, 49, 0.15)', + icon: colors.RED, + text: colors.TEXT + }, + + preferences: { + sidebar: { + border: colors.BORDER + } + }, + + examples: { + buttonBg: 'rgba(0, 122, 204, 0.1)', + buttonColor: colors.BRAND, + buttonText: colors.WHITE, + buttonIconColor: colors.BLACK, + border: colors.BORDER, + urlBar: { + border: colors.BORDER, + bg: colors.GRAY_1 + }, + table: { + thead: { + bg: colors.GRAY_1, + color: colors.TEXT + } + }, + checkbox: { + color: colors.WHITE + } + }, + + app: { + collection: { + toolbar: { + environmentSelector: { + bg: colors.WHITE, + border: colors.BORDER, + icon: colors.BRAND, + text: colors.TEXT, + caret: colors.GRAY_6, + separator: colors.BORDER, + hoverBg: colors.WHITE, + hoverBorder: colors.GRAY_5, + noEnvironment: { + text: colors.TEXT_MUTED, + bg: colors.WHITE, + border: colors.BORDER, + hoverBg: colors.WHITE, + hoverBorder: colors.GRAY_5 + } + }, + sandboxMode: { + safeMode: { + bg: 'rgba(9, 134, 88, 0.12)', + color: colors.GREEN + }, + developerMode: { + bg: 'rgba(121, 94, 38, 0.12)', + color: colors.YELLOW + } + } + } + } + } +}; + +export default vscodeLightTheme; diff --git a/packages/bruno-app/src/themes/schema/index.js b/packages/bruno-app/src/themes/schema/index.js new file mode 100644 index 000000000..eb886702f --- /dev/null +++ b/packages/bruno-app/src/themes/schema/index.js @@ -0,0 +1,3 @@ +import { ossSchema } from './oss'; + +export default ossSchema; diff --git a/packages/bruno-app/src/themes/schema/oss.js b/packages/bruno-app/src/themes/schema/oss.js new file mode 100644 index 000000000..a1815e21c --- /dev/null +++ b/packages/bruno-app/src/themes/schema/oss.js @@ -0,0 +1,1173 @@ +export const ossSchema = { + type: 'object', + properties: { + mode: { type: 'string', description: 'Theme mode', enum: ['light', 'dark'] }, + brand: { type: 'string', description: 'Primary brand color' }, + text: { type: 'string', description: 'Default text color' }, + textLink: { type: 'string', description: 'Link text color' }, + bg: { type: 'string', description: 'Background color' }, + + accents: { + type: 'object', + properties: { + primary: { type: 'string', description: 'Primary accent color' } + }, + required: ['primary'], + additionalProperties: false + }, + + background: { + type: 'object', + properties: { + base: { type: 'string', description: 'App canvas background' }, + mantle: { type: 'string', description: 'Sidebars background' }, + crust: { type: 'string', description: 'Panels background' }, + surface0: { type: 'string', description: 'Cards background' }, + surface1: { type: 'string', description: 'Raised elements background' }, + surface2: { type: 'string', description: 'Borders / dividers' } + }, + required: ['base', 'mantle', 'crust', 'surface0', 'surface1', 'surface2'], + additionalProperties: false + }, + + overlay: { + type: 'object', + properties: { + overlay2: { type: 'string', description: 'Overlay level 2' }, + overlay1: { type: 'string', description: 'Overlay level 1' }, + overlay0: { type: 'string', description: 'Overlay level 0' } + }, + required: ['overlay2', 'overlay1', 'overlay0'], + additionalProperties: false + }, + + font: { + type: 'object', + properties: { + size: { + type: 'object', + properties: { + xs: { type: 'string', description: 'Extra small font size (11px)' }, + sm: { type: 'string', description: 'Small font size (12px)' }, + base: { type: 'string', description: 'Base font size (13px)' }, + md: { type: 'string', description: 'Medium font size (14px)' }, + lg: { type: 'string', description: 'Large font size (16px)' }, + xl: { type: 'string', description: 'Extra large font size (18px)' } + }, + required: ['xs', 'sm', 'base', 'md', 'lg', 'xl'], + additionalProperties: false + } + }, + required: ['size'], + additionalProperties: false + }, + + shadow: { + type: 'object', + properties: { + sm: { type: 'string', description: 'Small shadow' }, + md: { type: 'string', description: 'Medium shadow' }, + lg: { type: 'string', description: 'Large shadow' } + }, + required: ['sm', 'md', 'lg'], + additionalProperties: false + }, + + border: { + type: 'object', + properties: { + radius: { + type: 'object', + properties: { + sm: { type: 'string' }, + base: { type: 'string' }, + md: { type: 'string' }, + lg: { type: 'string' }, + xl: { type: 'string' } + }, + required: ['sm', 'base', 'md', 'lg', 'xl'], + additionalProperties: false + }, + border2: { type: 'string' }, + border1: { type: 'string' }, + border0: { type: 'string' } + }, + required: ['radius', 'border2', 'border1', 'border0'], + additionalProperties: false + }, + + colors: { + type: 'object', + properties: { + text: { + type: 'object', + properties: { + white: { type: 'string' }, + green: { type: 'string' }, + danger: { type: 'string' }, + warning: { type: 'string' }, + muted: { type: 'string' }, + purple: { type: 'string' }, + yellow: { type: 'string' }, + subtext2: { type: 'string' }, + subtext1: { type: 'string' }, + subtext0: { type: 'string' } + }, + required: ['white', 'green', 'danger', 'warning', 'muted', 'purple', 'yellow', 'subtext2', 'subtext1', 'subtext0'], + additionalProperties: false + }, + bg: { + type: 'object', + properties: { + danger: { type: 'string' } + }, + required: ['danger'], + additionalProperties: false + }, + accent: { type: 'string' } + }, + required: ['text', 'bg', 'accent'], + additionalProperties: false + }, + + input: { + type: 'object', + properties: { + bg: { type: 'string' }, + border: { type: 'string' }, + focusBorder: { type: 'string' }, + placeholder: { + type: 'object', + properties: { + color: { type: 'string' }, + opacity: { type: 'number' } + }, + required: ['color', 'opacity'], + additionalProperties: false + } + }, + required: ['bg', 'border', 'focusBorder', 'placeholder'], + additionalProperties: false + }, + + sidebar: { + type: 'object', + properties: { + color: { type: 'string' }, + muted: { type: 'string' }, + bg: { type: 'string' }, + dragbar: { + type: 'object', + properties: { + border: { type: 'string' }, + activeBorder: { type: 'string' } + }, + required: ['border', 'activeBorder'], + additionalProperties: false + }, + search: { + type: 'object', + properties: { + border: { type: 'string' }, + bg: { type: 'string' } + }, + required: ['border', 'bg'], + additionalProperties: false + }, + collection: { + type: 'object', + properties: { + item: { + type: 'object', + properties: { + bg: { type: 'string' }, + hoverBg: { type: 'string' }, + focusBorder: { type: 'string' }, + indentBorder: { type: 'string' }, + active: { + type: 'object', + properties: { + indentBorder: { type: 'string' } + }, + required: ['indentBorder'], + additionalProperties: false + }, + example: { + type: 'object', + properties: { + iconColor: { type: 'string' } + }, + required: ['iconColor'], + additionalProperties: false + } + }, + required: ['bg', 'hoverBg', 'focusBorder', 'indentBorder', 'active', 'example'], + additionalProperties: false + } + }, + required: ['item'], + additionalProperties: false + }, + dropdownIcon: { + type: 'object', + properties: { + color: { type: 'string' } + }, + required: ['color'], + additionalProperties: false + } + }, + required: ['color', 'muted', 'bg', 'dragbar', 'search', 'collection', 'dropdownIcon'], + additionalProperties: false + }, + + dropdown: { + type: 'object', + properties: { + color: { type: 'string' }, + iconColor: { type: 'string' }, + bg: { type: 'string' }, + hoverBg: { type: 'string' }, + shadow: { type: 'string' }, + separator: { type: 'string' }, + selectedColor: { type: 'string' }, + mutedText: { type: 'string' } + }, + required: ['color', 'iconColor', 'bg', 'hoverBg', 'shadow', 'separator', 'selectedColor', 'mutedText'], + additionalProperties: false + }, + + workspace: { + type: 'object', + properties: { + accent: { type: 'string' }, + border: { type: 'string' }, + button: { + type: 'object', + properties: { + bg: { type: 'string' } + }, + required: ['bg'], + additionalProperties: false + } + }, + required: ['accent', 'border', 'button'], + additionalProperties: false + }, + + request: { + type: 'object', + properties: { + methods: { + type: 'object', + properties: { + get: { type: 'string' }, + post: { type: 'string' }, + put: { type: 'string' }, + delete: { type: 'string' }, + patch: { type: 'string' }, + options: { type: 'string' }, + head: { type: 'string' } + }, + required: ['get', 'post', 'put', 'delete', 'patch', 'options', 'head'], + additionalProperties: false + }, + grpc: { type: 'string' }, + ws: { type: 'string' }, + gql: { type: 'string' } + }, + required: ['methods', 'grpc', 'ws', 'gql'], + additionalProperties: false + }, + + requestTabPanel: { + type: 'object', + properties: { + url: { + type: 'object', + properties: { + bg: { type: 'string' }, + icon: { type: 'string' }, + iconDanger: { type: 'string' }, + border: { type: 'string' } + }, + required: ['bg', 'icon', 'iconDanger', 'border'], + additionalProperties: false + }, + dragbar: { + type: 'object', + properties: { + border: { type: 'string' }, + activeBorder: { type: 'string' } + }, + required: ['border', 'activeBorder'], + additionalProperties: false + }, + responseStatus: { type: 'string' }, + responseOk: { type: 'string' }, + responseError: { type: 'string' }, + responsePending: { type: 'string' }, + responseOverlayBg: { type: 'string' }, + card: { + type: 'object', + properties: { + bg: { type: 'string' }, + border: { type: 'string' }, + hr: { type: 'string' } + }, + required: ['bg', 'border', 'hr'], + additionalProperties: false + }, + graphqlDocsExplorer: { + type: 'object', + properties: { + bg: { type: 'string' }, + color: { type: 'string' } + }, + required: ['bg', 'color'], + additionalProperties: false + } + }, + required: ['url', 'dragbar', 'responseStatus', 'responseOk', 'responseError', 'responsePending', 'responseOverlayBg', 'card', 'graphqlDocsExplorer'], + additionalProperties: false + }, + + notifications: { + type: 'object', + properties: { + bg: { type: 'string' }, + list: { + type: 'object', + properties: { + bg: { type: 'string' }, + borderRight: { type: 'string' }, + borderBottom: { type: 'string' }, + hoverBg: { type: 'string' }, + active: { + type: 'object', + properties: { + border: { type: 'string' }, + bg: { type: 'string' }, + hoverBg: { type: 'string' } + }, + required: ['border', 'bg', 'hoverBg'], + additionalProperties: false + } + }, + required: ['bg', 'borderRight', 'borderBottom', 'hoverBg', 'active'], + additionalProperties: false + } + }, + required: ['bg', 'list'], + additionalProperties: false + }, + + modal: { + type: 'object', + properties: { + title: { + type: 'object', + properties: { + color: { type: 'string' }, + bg: { type: 'string' } + }, + required: ['color', 'bg'], + additionalProperties: false + }, + body: { + type: 'object', + properties: { + color: { type: 'string' }, + bg: { type: 'string' } + }, + required: ['color', 'bg'], + additionalProperties: false + }, + input: { + type: 'object', + properties: { + bg: { type: 'string' }, + border: { type: 'string' }, + focusBorder: { type: 'string' } + }, + required: ['bg', 'border', 'focusBorder'], + additionalProperties: false + }, + backdrop: { + type: 'object', + properties: { + opacity: { type: 'number' } + }, + required: ['opacity'], + additionalProperties: false + } + }, + required: ['title', 'body', 'input', 'backdrop'], + additionalProperties: false + }, + + button: { + type: 'object', + properties: { + secondary: { + type: 'object', + properties: { + color: { type: 'string' }, + bg: { type: 'string' }, + border: { type: 'string' }, + hoverBorder: { type: 'string' } + }, + required: ['color', 'bg', 'border', 'hoverBorder'], + additionalProperties: false + }, + close: { + type: 'object', + properties: { + color: { type: 'string' }, + bg: { type: 'string' }, + border: { type: 'string' }, + hoverBorder: { type: 'string' } + }, + required: ['color', 'bg', 'border', 'hoverBorder'], + additionalProperties: false + }, + disabled: { + type: 'object', + properties: { + color: { type: 'string' }, + bg: { type: 'string' }, + border: { type: 'string' } + }, + required: ['color', 'bg', 'border'], + additionalProperties: false + }, + danger: { + type: 'object', + properties: { + color: { type: 'string' }, + bg: { type: 'string' }, + border: { type: 'string' } + }, + required: ['color', 'bg', 'border'], + additionalProperties: false + } + }, + required: ['secondary', 'close', 'disabled', 'danger'], + additionalProperties: false + }, + + button2: { + type: 'object', + properties: { + color: { + type: 'object', + properties: { + primary: { + type: 'object', + properties: { + bg: { type: 'string' }, + text: { type: 'string' }, + border: { type: 'string' } + }, + required: ['bg', 'text', 'border'], + additionalProperties: false + }, + secondary: { + type: 'object', + properties: { + bg: { type: 'string' }, + text: { type: 'string' }, + border: { type: 'string' } + }, + required: ['bg', 'text', 'border'], + additionalProperties: false + }, + success: { + type: 'object', + properties: { + bg: { type: 'string' }, + text: { type: 'string' }, + border: { type: 'string' } + }, + required: ['bg', 'text', 'border'], + additionalProperties: false + }, + warning: { + type: 'object', + properties: { + bg: { type: 'string' }, + text: { type: 'string' }, + border: { type: 'string' } + }, + required: ['bg', 'text', 'border'], + additionalProperties: false + }, + danger: { + type: 'object', + properties: { + bg: { type: 'string' }, + text: { type: 'string' }, + border: { type: 'string' } + }, + required: ['bg', 'text', 'border'], + additionalProperties: false + } + }, + required: ['primary', 'secondary', 'success', 'warning', 'danger'], + additionalProperties: false + } + }, + required: ['color'], + additionalProperties: false + }, + + tabs: { + type: 'object', + properties: { + marginRight: { type: 'string' }, + active: { + type: 'object', + properties: { + fontWeight: { type: 'number' }, + color: { type: 'string' }, + border: { type: 'string' } + }, + required: ['fontWeight', 'color', 'border'], + additionalProperties: false + }, + secondary: { + type: 'object', + properties: { + active: { + type: 'object', + properties: { + bg: { type: 'string' }, + color: { type: 'string' } + }, + required: ['bg', 'color'], + additionalProperties: false + }, + inactive: { + type: 'object', + properties: { + bg: { type: 'string' }, + color: { type: 'string' } + }, + required: ['bg', 'color'], + additionalProperties: false + } + }, + required: ['active', 'inactive'], + additionalProperties: false + } + }, + required: ['marginRight', 'active', 'secondary'], + additionalProperties: false + }, + + requestTabs: { + type: 'object', + properties: { + color: { type: 'string' }, + bg: { type: 'string' }, + bottomBorder: { type: 'string' }, + icon: { + type: 'object', + properties: { + color: { type: 'string' }, + hoverColor: { type: 'string' }, + hoverBg: { type: 'string' } + }, + required: ['color', 'hoverColor', 'hoverBg'], + additionalProperties: false + }, + example: { + type: 'object', + properties: { + iconColor: { type: 'string' } + }, + 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'], + additionalProperties: false + }, + + codemirror: { + type: 'object', + properties: { + bg: { type: 'string' }, + border: { type: 'string' }, + placeholder: { + type: 'object', + properties: { + color: { type: 'string' }, + opacity: { type: 'number' } + }, + required: ['color', 'opacity'], + additionalProperties: false + }, + gutter: { + type: 'object', + properties: { + bg: { type: 'string' } + }, + required: ['bg'], + additionalProperties: false + }, + variable: { + type: 'object', + 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 + } + }, + required: ['valid', 'invalid', 'prompt', 'info'], + additionalProperties: false + }, + tokens: { + type: 'object', + properties: { + definition: { type: 'string' }, + property: { type: 'string' }, + string: { type: 'string' }, + number: { type: 'string' }, + atom: { type: 'string' }, + variable: { type: 'string' }, + keyword: { type: 'string' }, + comment: { type: 'string' }, + operator: { type: 'string' } + }, + required: ['definition', 'property', 'string', 'number', 'atom', 'variable', 'keyword', 'comment', 'operator'], + additionalProperties: false + }, + searchLineHighlightCurrent: { type: 'string' }, + searchMatch: { type: 'string' }, + searchMatchActive: { type: 'string' } + }, + required: ['bg', 'border', 'placeholder', 'gutter', 'variable', 'tokens', 'searchLineHighlightCurrent', 'searchMatch', 'searchMatchActive'], + additionalProperties: false + }, + + table: { + type: 'object', + properties: { + border: { type: 'string' }, + thead: { + type: 'object', + properties: { + color: { type: 'string' } + }, + required: ['color'], + additionalProperties: false + }, + striped: { type: 'string' }, + input: { + type: 'object', + properties: { + color: { type: 'string' } + }, + required: ['color'], + additionalProperties: false + } + }, + required: ['border', 'thead', 'striped', 'input'], + additionalProperties: false + }, + + plainGrid: { + type: 'object', + properties: { + hoverBg: { type: 'string' } + }, + required: ['hoverBg'], + additionalProperties: false + }, + + scrollbar: { + type: 'object', + properties: { + color: { type: 'string' } + }, + required: ['color'], + additionalProperties: false + }, + + dragAndDrop: { + type: 'object', + properties: { + border: { type: 'string' }, + borderStyle: { type: 'string' }, + hoverBg: { type: 'string' }, + transition: { type: 'string' } + }, + required: ['border', 'borderStyle', 'hoverBg', 'transition'], + additionalProperties: false + }, + + infoTip: { + type: 'object', + properties: { + bg: { type: 'string' }, + border: { type: 'string' }, + boxShadow: { type: 'string' } + }, + required: ['bg', 'border', 'boxShadow'], + additionalProperties: false + }, + + statusBar: { + type: 'object', + properties: { + border: { type: 'string' }, + color: { type: 'string' } + }, + required: ['border', 'color'], + additionalProperties: false + }, + + console: { + type: 'object', + properties: { + bg: { type: 'string' }, + headerBg: { type: 'string' }, + contentBg: { type: 'string' }, + border: { type: 'string' }, + titleColor: { type: 'string' }, + countColor: { type: 'string' }, + buttonColor: { type: 'string' }, + buttonHoverBg: { type: 'string' }, + buttonHoverColor: { type: 'string' }, + messageColor: { type: 'string' }, + timestampColor: { type: 'string' }, + emptyColor: { type: 'string' }, + logHoverBg: { type: 'string' }, + resizeHandleHover: { type: 'string' }, + resizeHandleActive: { type: 'string' }, + dropdownBg: { type: 'string' }, + dropdownHeaderBg: { type: 'string' }, + optionHoverBg: { type: 'string' }, + optionLabelColor: { type: 'string' }, + optionCountColor: { type: 'string' }, + checkboxColor: { type: 'string' }, + scrollbarTrack: { type: 'string' }, + scrollbarThumb: { type: 'string' }, + scrollbarThumbHover: { type: 'string' } + }, + required: ['bg', 'headerBg', 'contentBg', 'border', 'titleColor', 'countColor', 'buttonColor', 'buttonHoverBg', 'buttonHoverColor', 'messageColor', 'timestampColor', 'emptyColor', 'logHoverBg', 'resizeHandleHover', 'resizeHandleActive', 'dropdownBg', 'dropdownHeaderBg', 'optionHoverBg', 'optionLabelColor', 'optionCountColor', 'checkboxColor', 'scrollbarTrack', 'scrollbarThumb', 'scrollbarThumbHover'], + additionalProperties: false + }, + + grpc: { + type: 'object', + properties: { + tabNav: { + type: 'object', + properties: { + container: { + type: 'object', + properties: { + bg: { type: 'string' } + }, + required: ['bg'], + additionalProperties: false + }, + button: { + type: 'object', + properties: { + active: { + type: 'object', + properties: { + bg: { type: 'string' }, + color: { type: 'string' } + }, + required: ['bg', 'color'], + additionalProperties: false + }, + inactive: { + type: 'object', + properties: { + bg: { type: 'string' }, + color: { type: 'string' } + }, + required: ['bg', 'color'], + additionalProperties: false + } + }, + required: ['active', 'inactive'], + additionalProperties: false + } + }, + required: ['container', 'button'], + additionalProperties: false + }, + importPaths: { + type: 'object', + properties: { + header: { + type: 'object', + properties: { + text: { type: 'string' }, + button: { + type: 'object', + properties: { + color: { type: 'string' }, + hoverColor: { type: 'string' } + }, + required: ['color', 'hoverColor'], + additionalProperties: false + } + }, + required: ['text', 'button'], + additionalProperties: false + }, + error: { + type: 'object', + properties: { + bg: { type: 'string' }, + text: { type: 'string' }, + link: { + type: 'object', + properties: { + color: { type: 'string' }, + hoverColor: { type: 'string' } + }, + required: ['color', 'hoverColor'], + additionalProperties: false + } + }, + required: ['bg', 'text', 'link'], + additionalProperties: false + }, + item: { + type: 'object', + properties: { + bg: { type: 'string' }, + hoverBg: { type: 'string' }, + text: { type: 'string' }, + icon: { type: 'string' }, + checkbox: { + type: 'object', + properties: { + color: { type: 'string' } + }, + required: ['color'], + additionalProperties: false + }, + invalid: { + type: 'object', + properties: { + opacity: { type: 'number' }, + text: { type: 'string' } + }, + required: ['opacity', 'text'], + additionalProperties: false + } + }, + required: ['bg', 'hoverBg', 'text', 'icon', 'checkbox', 'invalid'], + additionalProperties: false + }, + empty: { + type: 'object', + properties: { + text: { type: 'string' } + }, + required: ['text'], + additionalProperties: false + }, + button: { + type: 'object', + properties: { + bg: { type: 'string' }, + color: { type: 'string' }, + border: { type: 'string' }, + hoverBorder: { type: 'string' } + }, + required: ['bg', 'color', 'border', 'hoverBorder'], + additionalProperties: false + } + }, + required: ['header', 'error', 'item', 'empty', 'button'], + additionalProperties: false + }, + protoFiles: { + type: 'object', + properties: { + header: { + type: 'object', + properties: { + text: { type: 'string' }, + button: { + type: 'object', + properties: { + color: { type: 'string' }, + hoverColor: { type: 'string' } + }, + required: ['color', 'hoverColor'], + additionalProperties: false + } + }, + required: ['text', 'button'], + additionalProperties: false + }, + error: { + type: 'object', + properties: { + bg: { type: 'string' }, + text: { type: 'string' }, + link: { + type: 'object', + properties: { + color: { type: 'string' }, + hoverColor: { type: 'string' } + }, + required: ['color', 'hoverColor'], + additionalProperties: false + } + }, + required: ['bg', 'text', 'link'], + additionalProperties: false + }, + item: { + type: 'object', + properties: { + bg: { type: 'string' }, + hoverBg: { type: 'string' }, + selected: { + type: 'object', + properties: { + bg: { type: 'string' }, + border: { type: 'string' } + }, + required: ['bg', 'border'], + additionalProperties: false + }, + text: { type: 'string' }, + secondaryText: { type: 'string' }, + icon: { type: 'string' }, + invalid: { + type: 'object', + properties: { + opacity: { type: 'number' }, + text: { type: 'string' } + }, + required: ['opacity', 'text'], + additionalProperties: false + } + }, + required: ['bg', 'hoverBg', 'selected', 'text', 'secondaryText', 'icon', 'invalid'], + additionalProperties: false + }, + empty: { + type: 'object', + properties: { + text: { type: 'string' } + }, + required: ['text'], + additionalProperties: false + }, + button: { + type: 'object', + properties: { + bg: { type: 'string' }, + color: { type: 'string' }, + border: { type: 'string' }, + hoverBorder: { type: 'string' } + }, + required: ['bg', 'color', 'border', 'hoverBorder'], + additionalProperties: false + } + }, + required: ['header', 'error', 'item', 'empty', 'button'], + additionalProperties: false + } + }, + required: ['tabNav', 'importPaths', 'protoFiles'], + additionalProperties: false + }, + + deprecationWarning: { + type: 'object', + properties: { + bg: { type: 'string' }, + border: { type: 'string' }, + icon: { type: 'string' }, + text: { type: 'string' } + }, + required: ['bg', 'border', 'icon', 'text'], + additionalProperties: false + }, + + preferences: { + type: 'object', + properties: { + sidebar: { + type: 'object', + properties: { + border: { type: 'string' } + }, + required: ['border'], + additionalProperties: false + } + }, + required: ['sidebar'], + additionalProperties: false + }, + + examples: { + type: 'object', + properties: { + buttonBg: { type: 'string' }, + buttonColor: { type: 'string' }, + buttonText: { type: 'string' }, + buttonIconColor: { type: 'string' }, + border: { type: 'string' }, + urlBar: { + type: 'object', + properties: { + border: { type: 'string' }, + bg: { type: 'string' } + }, + required: ['border', 'bg'], + additionalProperties: false + }, + table: { + type: 'object', + properties: { + thead: { + type: 'object', + properties: { + bg: { type: 'string' }, + color: { type: 'string' } + }, + required: ['bg', 'color'], + additionalProperties: false + } + }, + required: ['thead'], + additionalProperties: false + }, + checkbox: { + type: 'object', + properties: { + color: { type: 'string' } + }, + required: ['color'], + additionalProperties: false + } + }, + required: ['buttonBg', 'buttonColor', 'buttonText', 'buttonIconColor', 'border', 'urlBar', 'table', 'checkbox'], + additionalProperties: false + }, + + app: { + type: 'object', + properties: { + collection: { + type: 'object', + properties: { + toolbar: { + type: 'object', + properties: { + environmentSelector: { + type: 'object', + properties: { + bg: { type: 'string' }, + border: { type: 'string' }, + icon: { type: 'string' }, + text: { type: 'string' }, + caret: { type: 'string' }, + separator: { type: 'string' }, + hoverBg: { type: 'string' }, + hoverBorder: { type: 'string' }, + noEnvironment: { + type: 'object', + properties: { + text: { type: 'string' }, + bg: { type: 'string' }, + border: { type: 'string' }, + hoverBg: { type: 'string' }, + hoverBorder: { type: 'string' } + }, + required: ['text', 'bg', 'border', 'hoverBg', 'hoverBorder'], + additionalProperties: false + } + }, + required: ['bg', 'border', 'icon', 'text', 'caret', 'separator', 'hoverBg', 'hoverBorder', 'noEnvironment'], + additionalProperties: false + }, + sandboxMode: { + type: 'object', + properties: { + safeMode: { + type: 'object', + properties: { + bg: { type: 'string' }, + color: { type: 'string' } + }, + required: ['bg', 'color'], + additionalProperties: false + }, + developerMode: { + type: 'object', + properties: { + bg: { type: 'string' }, + color: { type: 'string' } + }, + required: ['bg', 'color'], + additionalProperties: false + } + }, + required: ['safeMode', 'developerMode'], + additionalProperties: false + } + }, + required: ['environmentSelector', 'sandboxMode'], + additionalProperties: false + } + }, + required: ['toolbar'], + additionalProperties: false + } + }, + required: ['collection'], + additionalProperties: false + } + }, + required: [ + 'mode', 'brand', 'text', 'textLink', 'bg', 'accents', 'background', 'overlay', 'font', 'shadow', 'border', 'colors', 'input', + 'sidebar', 'dropdown', 'workspace', 'request', + 'requestTabPanel', 'notifications', 'modal', 'button', 'button2', 'tabs', + 'requestTabs', 'codemirror', 'table', 'plainGrid', 'scrollbar', 'dragAndDrop', + 'infoTip', 'statusBar', 'console', 'grpc', 'deprecationWarning', 'preferences', 'examples', 'app' + ], + additionalProperties: false +}; diff --git a/packages/bruno-app/src/ui/Button/StyledWrapper.js b/packages/bruno-app/src/ui/Button/StyledWrapper.js index 1c5c49550..ac9ffaa58 100644 --- a/packages/bruno-app/src/ui/Button/StyledWrapper.js +++ b/packages/bruno-app/src/ui/Button/StyledWrapper.js @@ -43,7 +43,7 @@ const sizeStyles = { `, base: css` padding: 0.5rem 1rem; - font-size: ${(props) => props.theme.font.size.base}; + font-size: ${(props) => props.theme.font.size.sm}; gap: 0.5rem; .button-icon { @@ -58,7 +58,7 @@ const sizeStyles = { `, md: css` padding: 0.625rem 1.125rem; - font-size: ${(props) => props.theme.font.size.md}; + font-size: ${(props) => props.theme.font.size.sm}; gap: 0.5rem; .button-icon { @@ -73,7 +73,7 @@ const sizeStyles = { `, lg: css` padding: 0.75rem 1.5rem; - font-size: ${(props) => props.theme.font.size.md}; + font-size: ${(props) => props.theme.font.size.base}; gap: 0.75rem; .button-icon { @@ -121,7 +121,7 @@ const getVariantStyles = (variant, color) => { return css` background-color: ${(props) => props.theme.button2.color[color].bg}; color: ${(props) => props.theme.button2.color[color].text}; - border: 1px solid ${(props) => props.theme.button2.color[color].bg}; + border: 1px solid ${(props) => props.theme.button2.color[color].border}; &:disabled { color: ${(props) => props.theme.button2.color[color].text} !important; @@ -129,10 +129,9 @@ const getVariantStyles = (variant, color) => { &:hover:not(:disabled) { ${(props) => { - const bg = props.theme.button2.color[color].bg; return css` - background-color: ${darken(0.03, bg)}; - border-color: ${darken(0.03, bg)}; + background-color: ${darken(0.03, props.theme.button2.color[color].bg)}; + border-color: ${darken(0.03, props.theme.button2.color[color].border)}; `; }} } diff --git a/packages/bruno-app/src/ui/ResponsiveTabs/StyledWrapper.js b/packages/bruno-app/src/ui/ResponsiveTabs/StyledWrapper.js index e284d1b10..bc546c018 100644 --- a/packages/bruno-app/src/ui/ResponsiveTabs/StyledWrapper.js +++ b/packages/bruno-app/src/ui/ResponsiveTabs/StyledWrapper.js @@ -12,7 +12,7 @@ const StyledWrapper = styled.div` } .more-tabs { - color: var(--color-tab-inactive) !important; + color: ${(props) => props.theme.colors.text.subtext0} !important; border-bottom: solid 2px transparent; } @@ -24,7 +24,7 @@ const StyledWrapper = styled.div` border: none; border-bottom: solid 2px transparent; margin-right: ${(props) => props.theme.tabs.marginRight}; - color: var(--color-tab-inactive); + color: ${(props) => props.theme.colors.text.subtext0}; cursor: pointer; white-space: nowrap; vertical-align: middle; diff --git a/packages/bruno-filestore/package.json b/packages/bruno-filestore/package.json index 64e243cc3..7f738784f 100644 --- a/packages/bruno-filestore/package.json +++ b/packages/bruno-filestore/package.json @@ -22,7 +22,6 @@ "devDependencies": { "@babel/preset-env": "^7.22.0", "@babel/preset-typescript": "^7.22.0", - "@opencollection/types": "~0.5.0", "@rollup/plugin-commonjs": "^23.0.2", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^15.0.1", diff --git a/tests/grpc/make-request/make-request.spec.ts b/tests/grpc/make-request/make-request.spec.ts index 3aa630618..23cf45d9d 100644 --- a/tests/grpc/make-request/make-request.spec.ts +++ b/tests/grpc/make-request/make-request.spec.ts @@ -88,7 +88,7 @@ test.describe('make grpc requests', () => { await test.step('verify response items are rendered', async () => { await expect(locators.response.content()).toBeVisible(); await expect(locators.response.container()).toBeVisible(); - await expect(locators.response.accordion()).toBeVisible(); + await expect(locators.response.list()).toBeVisible(); await expect(locators.response.responseItems()).toHaveCount(10); }); @@ -190,7 +190,7 @@ test.describe('make grpc requests', () => { await test.step('verify response items are rendered', async () => { await expect(locators.response.content()).toBeVisible(); await expect(locators.response.container()).toBeVisible(); - await expect(locators.response.accordion()).toBeVisible(); + await expect(locators.response.list()).toBeVisible(); await expect(locators.response.responseItems()).toHaveCount(2); }); diff --git a/tests/request/save/save.spec.ts b/tests/request/save/save.spec.ts index 57a8bf978..71f56422d 100644 --- a/tests/request/save/save.spec.ts +++ b/tests/request/save/save.spec.ts @@ -4,8 +4,8 @@ import { buildCommonLocators } from '../../utils/page/locators'; import { waitForPredicate } from '../../utils/wait'; const isRequestSaved = async (saveButton: Locator) => { - const savedColor = '#9f9f9f'; - return (await saveButton.evaluate((d) => d.querySelector('svg')?.getAttribute('stroke') ?? '#invalid')) === savedColor; + // Saved state uses the className cursor-default; unsaved uses cursor-pointer. + return await saveButton.locator('svg').evaluate((node) => (node as HTMLElement).classList.contains('cursor-default')); }; const setup = async (page: Page, createTmpDir: (tag?: string | undefined) => Promise) => { @@ -61,13 +61,13 @@ test.describe.serial('save requests', () => { await page.keyboard.insertText(replacementUrl); // check if the request is now unsaved - expect(await isRequestSaved(locators.saveButton())).toBe(false); + await expect(await isRequestSaved(locators.saveButton())).toBe(false); // trigger a save locators.saveButton().click(); // Wait for it to be saved const result = await waitForPredicate(() => isRequestSaved(locators.saveButton())); - expect(result).toBe(true); + await expect(result).toBe(true); }); }); diff --git a/tests/utils/page/locators.ts b/tests/utils/page/locators.ts index 215e9a005..4fb25b96e 100644 --- a/tests/utils/page/locators.ts +++ b/tests/utils/page/locators.ts @@ -195,7 +195,7 @@ export const buildGrpcCommonLocators = (page: Page) => ({ content: () => page.getByTestId('grpc-response-content'), container: () => page.getByTestId('grpc-responses-container'), singleResponse: () => page.getByTestId('grpc-single-response'), - accordion: () => page.getByTestId('grpc-responses-accordion'), + list: () => page.getByTestId('grpc-responses-list'), responseItem: (index: number) => page.getByTestId(`grpc-response-item-${index}`), responseItems: () => page.locator('[data-testid^="grpc-response-item-"]'), tabCount: () => page.getByTestId('tab-response-count') diff --git a/tests/websockets/persistence.spec.ts b/tests/websockets/persistence.spec.ts index 29ebabe62..e5f1c7d7c 100644 --- a/tests/websockets/persistence.spec.ts +++ b/tests/websockets/persistence.spec.ts @@ -8,8 +8,8 @@ const BRU_REQ_NAME = /^base$/; // TODO: reaper move to someplace common const isRequestSaved = async (saveButton: Locator) => { - const savedColor = '#9f9f9f'; - return (await saveButton.evaluate((d) => d.querySelector('svg')?.getAttribute('stroke') ?? '#invalid')) === savedColor; + // Saved state uses the className cursor-default; unsaved uses cursor-pointer. + return await saveButton.locator('svg').evaluate((node) => (node as HTMLElement).classList.contains('cursor-default')); }; test.describe.serial('persistence', () => { @@ -55,14 +55,14 @@ test.describe.serial('persistence', () => { await page.keyboard.insertText(replacementUrl); // check if the request is now unsaved - expect(await isRequestSaved(locators.saveButton())).toBe(false); + await expect(await isRequestSaved(locators.saveButton())).toBe(false); await locators.saveButton().click(); const result = await waitForPredicate(() => isRequestSaved(locators.saveButton())); - expect(result).toBe(true); + await expect(result).toBe(true); // check if the replacementUrl is now visually available - expect(page.locator('.input-container').filter({ hasText: replacementUrl }).first()).toBeAttached(); + await expect(page.locator('.input-container').filter({ hasText: replacementUrl }).first()).toBeAttached(); }); });