From e0f3c17ec4fa6d26dafd61ef360bcdcedf11c158 Mon Sep 17 00:00:00 2001 From: Tomas Zaluckij Date: Fri, 13 Feb 2026 05:11:05 +0000 Subject: [PATCH 1/4] Implement themable semantic color design tokens with light and dark themes --- .vscode/settings.json | 2 +- packages/ui/.storybook/preview.tsx | 16 ++++- packages/ui/package.json | 2 +- packages/ui/src/styles/colors/dark.css | 53 +++++++++++++++++ packages/ui/src/styles/colors/index.css | 58 +++++++++++++++++++ packages/ui/src/styles/colors/light.css | 55 ++++++++++++++++++ .../ui/src/{styles.css => styles/index.css} | 10 +++- tools/eslint/config.ts | 2 +- 8 files changed, 193 insertions(+), 5 deletions(-) create mode 100644 packages/ui/src/styles/colors/dark.css create mode 100644 packages/ui/src/styles/colors/index.css create mode 100644 packages/ui/src/styles/colors/light.css rename packages/ui/src/{styles.css => styles/index.css} (73%) diff --git a/.vscode/settings.json b/.vscode/settings.json index ca278827b..29738178d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,7 +5,7 @@ "nix.enableLanguageServer": true, "nix.serverPath": "nixd", "nix.serverSettings": { "nixd": { "formatting": { "command": ["alejandra"] } } }, - "tailwindCSS.experimental.configFile": "packages/ui/src/styles.css", + "tailwindCSS.experimental.configFile": "packages/ui/src/styles/index.css", "tailwindCSS.classAttributes": [" "], "tailwindCSS.classFunctions": ["tw"], "tailwindCSS.lint.cssConflict": "ignore", diff --git a/packages/ui/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx index eb72db9bc..53629d700 100644 --- a/packages/ui/.storybook/preview.tsx +++ b/packages/ui/.storybook/preview.tsx @@ -1,9 +1,23 @@ import { Preview } from '@storybook/react-vite'; import { createRootRoute, createRouter, RouterProvider } from '@tanstack/react-router'; +import { Option, pipe, Record, String } from 'effect'; import { StrictMode } from 'react'; import { UiProvider } from '../src/provider'; -import '../src/styles.css'; +import '../src/styles/index.css'; + +const theme = pipe( + new URLSearchParams(window.location.search).get('globals') ?? '', + String.split(';'), + Record.fromIterableWith((_) => { + const [key, value] = String.split(_, ':'); + return [key, value]; + }), + Record.get('backgrounds.value'), + Option.getOrUndefined, +); + +if (theme === 'dark') document.documentElement.classList.add('dark'); const preview: Preview = { decorators: [ diff --git a/packages/ui/package.json b/packages/ui/package.json index 805245a06..0606ca0e1 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -6,7 +6,7 @@ ".": "./src/index.tsx", "./*": "./src/*.tsx", "./storybook-config/*": "./.storybook/*", - "./styles": "./src/styles.css" + "./styles": "./src/styles/index.css" }, "dependencies": { "@bufbuild/protobuf": "catalog:", diff --git a/packages/ui/src/styles/colors/dark.css b/packages/ui/src/styles/colors/dark.css new file mode 100644 index 000000000..869a9dede --- /dev/null +++ b/packages/ui/src/styles/colors/dark.css @@ -0,0 +1,53 @@ +@custom-variant dark (&:is(.dark *)); + +.dark { + /* Neutral */ + + --neutral-lowest: var(--color-zinc-900); + --neutral-lower: var(--color-zinc-800); + --neutral-low: var(--color-zinc-700); + --neutral: var(--color-zinc-700); + --neutral-high: var(--color-zinc-500); + --neutral-higher: var(--color-zinc-400); + + --on-neutral-lower: var(--color-zinc-400); + --on-neutral-low: var(--color-zinc-300); + --on-neutral: var(--color-zinc-50); + + /* Inverse */ + + --inverse-lower: var(--color-zinc-600); + --inverse-low: var(--color-zinc-700); + --inverse: var(--color-zinc-950); + + /* Accent */ + + --accent-lowest: var(--color-violet-900); + --accent-lower: var(--color-violet-800); + --accent-low: var(--color-violet-600); + --accent: var(--color-violet-600); + --accent-high: var(--color-violet-700); + --accent-higher: var(--color-violet-800); + --accent-highest: var(--color-violet-900); + + --on-accent: var(--color-zinc-50); + + /* Success */ + + --success: var(--color-green-400); + + /* Danger */ + + --danger-lowest: var(--color-red-900); + --danger-lower: var(--color-red-800); + --danger-low: var(--color-red-700); + --danger: var(--color-red-500); + --danger-high: var(--color-red-600); + --danger-higher: var(--color-red-700); + + --on-danger: var(--color-zinc-50); + + /* Info */ + + --info: var(--color-blue-400); +} diff --git a/packages/ui/src/styles/colors/index.css b/packages/ui/src/styles/colors/index.css new file mode 100644 index 000000000..45086aaa9 --- /dev/null +++ b/packages/ui/src/styles/colors/index.css @@ -0,0 +1,58 @@ +@import './light.css'; +@import './dark.css'; + +@theme inline { + /* Neutral */ + + --color-neutral-lowest: var(--neutral-lowest); + --color-neutral-lower: var(--neutral-lower); + --color-neutral-low: var(--neutral-low); + --color-neutral: var(--neutral); + --color-neutral-high: var(--neutral-high); + --color-neutral-higher: var(--neutral-higher); + + --color-on-neutral-lower: var(--on-neutral-lower); + --color-on-neutral-low: var(--on-neutral-low); + --color-on-neutral: var(--on-neutral); + + /* Inverse */ + + --color-inverse-lower: var(--inverse-lower); + --color-inverse-low: var(--inverse-low); + --color-inverse: var(--inverse); + + --color-on-inverse-lower: var(--on-inverse-lower); + --color-on-inverse-low: var(--on-inverse-low); + --color-on-inverse: var(--on-inverse); + + /* Accent */ + + --color-accent-lowest: var(--accent-lowest); + --color-accent-lower: var(--accent-lower); + --color-accent-low: var(--accent-low); + --color-accent: var(--accent); + --color-accent-high: var(--accent-high); + --color-accent-higher: var(--accent-higher); + --color-accent-highest: var(--accent-highest); + + --color-on-accent: var(--on-accent); + + /* Success */ + + --color-success: var(--success); + + /* Danger */ + + --color-danger-lowest: var(--danger-lowest); + --color-danger-lower: var(--danger-lower); + --color-danger-low: var(--danger-low); + --color-danger: var(--danger); + --color-danger-high: var(--danger-high); + --color-danger-higher: var(--danger-higher); + + --color-on-danger: var(--on-danger); + + /* Info */ + + --color-info: var(--info); +} diff --git a/packages/ui/src/styles/colors/light.css b/packages/ui/src/styles/colors/light.css new file mode 100644 index 000000000..ec030270f --- /dev/null +++ b/packages/ui/src/styles/colors/light.css @@ -0,0 +1,55 @@ +:root { + /* Neutral */ + + --neutral-lowest: var(--color-white); + --neutral-lower: var(--color-slate-50); + --neutral-low: var(--color-slate-100); + --neutral: var(--color-slate-200); + --neutral-high: var(--color-slate-300); + --neutral-higher: var(--color-slate-400); + + --on-neutral-lower: var(--color-slate-300); + --on-neutral-low: var(--color-slate-500); + --on-neutral: var(--color-slate-800); + + /* Inverse */ + + --inverse-lower: var(--color-slate-600); + --inverse-low: var(--color-slate-700); + --inverse: var(--color-slate-900); + + --on-inverse-lower: rgba(255, 255, 255, 0.2); + --on-inverse-low: var(--color-slate-300); + --on-inverse: var(--color-white); + + /* Accent */ + + --accent-lowest: var(--color-violet-100); + --accent-lower: var(--color-violet-200); + --accent-low: var(--color-violet-400); + --accent: var(--color-violet-600); + --accent-high: var(--color-violet-700); + --accent-higher: var(--color-violet-800); + --accent-highest: var(--color-violet-900); + + --on-accent: var(--color-white); + + /* Success */ + + --success: var(--color-green-600); + + /* Danger */ + + --danger-lowest: var(--color-red-100); + --danger-lower: var(--color-red-200); + --danger-low: var(--color-red-600); + --danger: var(--color-red-700); + --danger-high: var(--color-red-800); + --danger-higher: var(--color-red-900); + + --on-danger: var(--color-white); + + /* Info */ + + --info: var(--color-blue-700); +} diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles/index.css similarity index 73% rename from packages/ui/src/styles.css rename to packages/ui/src/styles/index.css index e8e60d468..78215f2c6 100644 --- a/packages/ui/src/styles.css +++ b/packages/ui/src/styles/index.css @@ -7,7 +7,7 @@ @plugin 'tailwindcss-react-aria-components'; -@source '.'; +@source '..'; @theme { --font-sans: 'DM Sans Variable', ui-sans-serif, system-ui, sans-serif; @@ -21,3 +21,11 @@ @slot; } } + +@import './colors/index.css'; + +html { + @apply bg-neutral-lowest text-on-neutral; + + scrollbar-color: var(--on-neutral-low) transparent; +} diff --git a/tools/eslint/config.ts b/tools/eslint/config.ts index 641d485b9..8e53c07d9 100644 --- a/tools/eslint/config.ts +++ b/tools/eslint/config.ts @@ -62,7 +62,7 @@ const tailwind = defineConfig({ rules: tailwindPlugin.configs['recommended']!.rules, settings: { 'better-tailwindcss': { - entryPoint: resolve(root, 'packages/ui/src/styles.css'), + entryPoint: resolve(root, 'packages/ui/src/styles/index.css'), attributes: [], callees: [], From 60f7935046809b6c17dd661876ebef838f859ac3 Mon Sep 17 00:00:00 2001 From: Tomas Zaluckij Date: Fri, 13 Feb 2026 05:28:59 +0000 Subject: [PATCH 2/4] Switch all relevant primitive color tokens to semantic --- apps/desktop/src/renderer/main.tsx | 2 +- packages/client/src/features/delta/index.tsx | 4 +- .../expression/code-mirror/extensions.tsx | 2 +- .../src/features/expression/reference.tsx | 16 +++--- .../client/src/features/file-system/index.tsx | 42 +++++++------- .../client/src/features/form-table/index.tsx | 4 +- packages/client/src/pages/credential/tab.tsx | 10 ++-- .../src/pages/dashboard/routes/index.tsx | 28 +++++----- packages/client/src/pages/flow/add-node.tsx | 18 +++--- packages/client/src/pages/flow/edge.tsx | 17 +++--- packages/client/src/pages/flow/edit.tsx | 46 +++++++--------- packages/client/src/pages/flow/handle.tsx | 15 ++--- packages/client/src/pages/flow/history.tsx | 27 ++++----- packages/client/src/pages/flow/node.tsx | 55 ++++++++++--------- packages/client/src/pages/flow/nodes/ai.tsx | 4 +- packages/client/src/pages/flow/nodes/http.tsx | 6 +- .../src/pages/flow/nodes/manual-start.tsx | 2 +- packages/client/src/pages/flow/tab.tsx | 2 +- packages/client/src/pages/http/history.tsx | 28 +++++----- .../client/src/pages/http/request/assert.tsx | 2 +- .../src/pages/http/request/body/form-data.tsx | 2 +- .../pages/http/request/body/url-encoded.tsx | 2 +- .../client/src/pages/http/request/header.tsx | 2 +- .../client/src/pages/http/request/panel.tsx | 28 +++++----- .../src/pages/http/request/search-param.tsx | 2 +- .../client/src/pages/http/request/top-bar.tsx | 14 ++--- .../client/src/pages/http/request/url.tsx | 2 +- .../client/src/pages/http/response/assert.tsx | 4 +- .../client/src/pages/http/response/body.tsx | 29 ++++++---- .../client/src/pages/http/response/index.tsx | 24 ++++---- .../workspace/$workspaceIdCan/index.tsx | 14 ++--- .../workspace/$workspaceIdCan/route.tsx | 22 ++++---- .../src/pages/workspace/ui/status-bar.tsx | 16 +++--- packages/client/src/shared/ui/dashboard.tsx | 6 +- .../client/src/widgets/environment/index.tsx | 49 +++++++++-------- packages/client/src/widgets/export/index.tsx | 12 ++-- packages/client/src/widgets/import/index.tsx | 16 +++--- packages/client/src/widgets/tabs/index.tsx | 14 ++--- packages/ui/src/add-button.tsx | 12 +--- packages/ui/src/button.tsx | 24 ++++---- packages/ui/src/checkbox.tsx | 6 +- packages/ui/src/field.tsx | 4 +- packages/ui/src/file-drop-zone.tsx | 20 +++---- packages/ui/src/focus-ring.tsx | 8 +-- packages/ui/src/json-tree.tsx | 12 ++-- packages/ui/src/list-box.tsx | 26 +++++++-- packages/ui/src/menu.stories.tsx | 4 +- packages/ui/src/menu.tsx | 2 +- packages/ui/src/modal.stories.tsx | 6 +- packages/ui/src/modal.tsx | 2 +- packages/ui/src/number-field.tsx | 6 +- packages/ui/src/progress-bar.tsx | 6 +- packages/ui/src/radio-group.tsx | 16 +++--- packages/ui/src/reorder.tsx | 4 +- packages/ui/src/resizable-panel.tsx | 2 +- packages/ui/src/select.tsx | 4 +- packages/ui/src/separator.tsx | 2 +- packages/ui/src/table.tsx | 10 ++-- packages/ui/src/tag-group.tsx | 6 +- packages/ui/src/text-field.tsx | 4 +- packages/ui/src/toast.tsx | 6 +- packages/ui/src/tree.tsx | 16 +++--- 62 files changed, 412 insertions(+), 384 deletions(-) diff --git a/apps/desktop/src/renderer/main.tsx b/apps/desktop/src/renderer/main.tsx index f1858d992..ad578fa08 100644 --- a/apps/desktop/src/renderer/main.tsx +++ b/apps/desktop/src/renderer/main.tsx @@ -63,7 +63,7 @@ const UpdateAvailable = ({ children }: UpdateAvailableProps) => { {/* eslint-disable-next-line better-tailwindcss/no-unregistered-classes */} -
+
{children}
diff --git a/packages/client/src/features/delta/index.tsx b/packages/client/src/features/delta/index.tsx index c45559b69..45a74637b 100644 --- a/packages/client/src/features/delta/index.tsx +++ b/packages/client/src/features/delta/index.tsx @@ -185,7 +185,7 @@ export const DeltaResetButton = - Reset delta + Reset delta ); }; diff --git a/packages/client/src/features/expression/code-mirror/extensions.tsx b/packages/client/src/features/expression/code-mirror/extensions.tsx index 9817b1050..223ffefa9 100644 --- a/packages/client/src/features/expression/code-mirror/extensions.tsx +++ b/packages/client/src/features/expression/code-mirror/extensions.tsx @@ -89,7 +89,7 @@ const CompletionInfo = ({ completion, context, path }: CompletionInfoProps) => { }} variant='ghost' > - +
diff --git a/packages/client/src/features/expression/reference.tsx b/packages/client/src/features/expression/reference.tsx index 2f2f5de3e..71f162bd5 100644 --- a/packages/client/src/features/expression/reference.tsx +++ b/packages/client/src/features/expression/reference.tsx @@ -134,28 +134,30 @@ export const ReferenceTreeItemView = ({ id, parentKeys, reference }: ReferenceTr textValue={keyText ?? kindIndexTag ?? ''} > {key.kind === ReferenceKeyKind.GROUP && ( - {key.group} + {key.group} )} {key.kind === ReferenceKeyKind.KEY && ( - {key.key} + {key.key} )} {tags.map((tag, index) => ( {tag} ))} - {quantity && {quantity}} + {quantity && ( + {quantity} + )} {reference.kind === ReferenceKind.VALUE && ( <> - : - {reference.value} + : + {reference.value} )} @@ -163,7 +165,7 @@ export const ReferenceTreeItemView = ({ id, parentKeys, reference }: ReferenceTr }; const fieldStyles = tv({ - base: tw`min-w-0 rounded-md border border-slate-200 px-3 py-0.5 text-md text-slate-800`, + base: tw`min-w-0 rounded-md border border-neutral px-3 py-0.5 text-md text-on-neutral`, variants: { variant: { 'table-cell': tw`w-full rounded-none border-transparent px-5 py-0.5 -outline-offset-4`, diff --git a/packages/client/src/features/file-system/index.tsx b/packages/client/src/features/file-system/index.tsx index 0c37915c1..94c78016c 100644 --- a/packages/client/src/features/file-system/index.tsx +++ b/packages/client/src/features/file-system/index.tsx @@ -386,11 +386,11 @@ const FolderFile = ({ id }: FileItemProps) => { {({ isExpanded }) => ( <> {name === 'Credentials' ? ( - + ) : isExpanded ? ( - + ) : ( - + )} @@ -410,7 +410,7 @@ const FolderFile = ({ id }: FileItemProps) => { {showControls && ( @@ -517,7 +517,7 @@ const HttpFile = ({ id }: FileItemProps) => { {showControls && ( @@ -573,14 +573,14 @@ const HttpFile = ({ id }: FileItemProps) => { <>
cURL export
@@ -610,7 +610,7 @@ const HttpFile = ({ id }: FileItemProps) => { const props = { children: content, - className: toNavigate && matchRoute(route) !== false ? tw`bg-slate-200` : '', + className: toNavigate && matchRoute(route) !== false ? tw`bg-neutral` : '', id, item: (_) => , items: files, @@ -704,7 +704,7 @@ const HttpDeltaFile = ({ id }: FileItemProps) => { {showControls && ( @@ -733,14 +733,14 @@ const HttpDeltaFile = ({ id }: FileItemProps) => { <>
cURL export
@@ -767,7 +767,7 @@ const HttpDeltaFile = ({ id }: FileItemProps) => { const props = { children: content, - className: toNavigate && matchRoute(route) !== false ? tw`bg-slate-200` : '', + className: toNavigate && matchRoute(route) !== false ? tw`bg-neutral` : '', id, onContextMenu, textValue: name ?? '', @@ -820,7 +820,7 @@ const FlowFile = ({ id }: FileItemProps) => { const content = ( <> - + {name} @@ -839,7 +839,7 @@ const FlowFile = ({ id }: FileItemProps) => { {showControls && ( @@ -870,7 +870,7 @@ const FlowFile = ({ id }: FileItemProps) => { const props = { children: content, - className: toNavigate && matchRoute(route) !== false ? tw`bg-slate-200` : '', + className: toNavigate && matchRoute(route) !== false ? tw`bg-neutral` : '', id, onContextMenu, textValue: name, @@ -920,10 +920,10 @@ const CredentialFile = ({ id }: FileItemProps) => { <> {pipe( Match.value(kind), - Match.when(CredentialKind.OPEN_AI, () => ), - Match.when(CredentialKind.ANTHROPIC, () => ), - Match.when(CredentialKind.GEMINI, () => ), - Match.orElse(() => ), + Match.when(CredentialKind.OPEN_AI, () => ), + Match.when(CredentialKind.ANTHROPIC, () => ), + Match.when(CredentialKind.GEMINI, () => ), + Match.orElse(() => ), )} @@ -943,7 +943,7 @@ const CredentialFile = ({ id }: FileItemProps) => { {showControls && ( @@ -963,7 +963,7 @@ const CredentialFile = ({ id }: FileItemProps) => { const props = { children: content, - className: toNavigate && matchRoute(route) !== false ? tw`bg-slate-200` : '', + className: toNavigate && matchRoute(route) !== false ? tw`bg-neutral` : '', id, onContextMenu, textValue: name, diff --git a/packages/client/src/features/form-table/index.tsx b/packages/client/src/features/form-table/index.tsx index aea4aba60..7d8f8cbe5 100644 --- a/packages/client/src/features/form-table/index.tsx +++ b/packages/client/src/features/form-table/index.tsx @@ -9,9 +9,9 @@ interface ColumnActionDeleteProps { export const ColumnActionDelete = ({ onDelete }: ColumnActionDeleteProps) => ( - - Delete + Delete ); diff --git a/packages/client/src/pages/credential/tab.tsx b/packages/client/src/pages/credential/tab.tsx index 1884a1294..17e77d797 100644 --- a/packages/client/src/pages/credential/tab.tsx +++ b/packages/client/src/pages/credential/tab.tsx @@ -42,10 +42,12 @@ export const CredentialTab = ({ credentialId }: CredentialTabProps) => { <> {pipe( Match.value(credential?.kind), - Match.when(CredentialKind.OPEN_AI, () => ), - Match.when(CredentialKind.ANTHROPIC, () => ), - Match.when(CredentialKind.GEMINI, () => ), - Match.orElse(() => ), + Match.when(CredentialKind.OPEN_AI, () => ), + Match.when(CredentialKind.ANTHROPIC, () => ( + + )), + Match.when(CredentialKind.GEMINI, () => ), + Match.orElse(() => ), )} {credential?.name} diff --git a/packages/client/src/pages/dashboard/routes/index.tsx b/packages/client/src/pages/dashboard/routes/index.tsx index ab72e462c..4cfd29fdf 100644 --- a/packages/client/src/pages/dashboard/routes/index.tsx +++ b/packages/client/src/pages/dashboard/routes/index.tsx @@ -68,15 +68,15 @@ export const WorkspaceListPage = () => { return (
- + {pipe(DateTime.unsafeNow(), DateTime.formatLocal({ dateStyle: 'full' }))} -

Welcome to DevTools 👋

+

Welcome to DevTools 👋

-
+
- Your Workspaces + Your Workspaces @@ -227,14 +227,14 @@ const Item = ({ containerRef, id }: ItemProps) => { true, Delete workspace? -
- Are you sure you want to delete “{name}”? This action +
+ Are you sure you want to delete “{name}”? This action cannot be undone.
diff --git a/packages/client/src/pages/flow/add-node.tsx b/packages/client/src/pages/flow/add-node.tsx index 6fdf6f09a..70d70db11 100644 --- a/packages/client/src/pages/flow/add-node.tsx +++ b/packages/client/src/pages/flow/add-node.tsx @@ -75,17 +75,17 @@ export const SidebarHeader = ({ previous, title }: SidebarHeaderProps) => { const { setSidebar } = use(FlowContext); return ( -
+
{previous && ( )} -
{title}
+
{title}
); @@ -100,14 +100,16 @@ interface SidebarItemProps { export const SidebarItem = ({ description, icon, onAction, title }: SidebarItemProps) => ( -
{icon}
+
+ {icon} +
-
{title}
- {description &&
{description}
} +
{title}
+ {description &&
{description}
}
- + ); diff --git a/packages/client/src/pages/flow/edge.tsx b/packages/client/src/pages/flow/edge.tsx index 7e6b819b2..b4172044e 100644 --- a/packages/client/src/pages/flow/edge.tsx +++ b/packages/client/src/pages/flow/edge.tsx @@ -136,8 +136,11 @@ const DefaultEdge = ({ id, sourcePosition, sourceX, sourceY, targetPosition, tar className={tw`nodrag nopan pointer-events-auto absolute`} style={{ transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)` }} > -
@@ -153,11 +156,11 @@ const connectionLineStyles = tv({ base: tw`fill-none stroke-1 transition-colors`, variants: { state: { - [FlowItemState.CANCELED]: tw`stroke-slate-400`, - [FlowItemState.FAILURE]: tw`stroke-red-600`, - [FlowItemState.RUNNING]: tw`stroke-violet-600`, - [FlowItemState.SUCCESS]: tw`stroke-green-600`, - [FlowItemState.UNSPECIFIED]: tw`stroke-slate-800`, + [FlowItemState.CANCELED]: tw`stroke-neutral-higher`, + [FlowItemState.FAILURE]: tw`stroke-danger`, + [FlowItemState.RUNNING]: tw`stroke-accent`, + [FlowItemState.SUCCESS]: tw`stroke-success`, + [FlowItemState.UNSPECIFIED]: tw`stroke-on-neutral`, } satisfies Record, }, }); diff --git a/packages/client/src/pages/flow/edit.tsx b/packages/client/src/pages/flow/edit.tsx index 05e69e709..094ccbb72 100644 --- a/packages/client/src/pages/flow/edit.tsx +++ b/packages/client/src/pages/flow/edit.tsx @@ -92,7 +92,7 @@ export const FlowEditPage = () => { {sidebar && ( - + {sidebar} )} @@ -224,7 +224,7 @@ export const Flow = ({ children }: PropsWithChildren) => { <> {statusBarEndSlot && createPortal( -
+
{duration &&
Time: {pipe(duration, Duration.millis, Duration.format)}
}
, @@ -265,7 +265,7 @@ export const Flow = ({ children }: PropsWithChildren) => { viewport={viewport} > { }); return ( -
+
{isEditing ? ( ) : ( void edit()} > @@ -338,9 +338,8 @@ export const TopBar = ({ children }: TopBarProps) => { { } variant='ghost' > - Flows History + Flows History - @@ -384,10 +383,10 @@ export const TopBarWithControls = () => { onPress={() => void zoomOut({ duration: 100 })} variant='ghost' > - + -
+
{Math.floor(zoom * 100)}%
@@ -397,10 +396,10 @@ export const TopBarWithControls = () => { onPress={() => void zoomIn({ duration: 100 })} variant='ghost' > - + -
+
); }; @@ -422,12 +421,9 @@ const ActionBar = () => { ).data ?? create(FlowSchema); return ( - + @@ -474,13 +470,13 @@ const FlowSettings = () => { return ( <> -
-
Flow variables
+
+
Flow variables
@@ -581,7 +577,7 @@ const FlowSettings = () => { }} variant='ghost' > - + New variable diff --git a/packages/client/src/pages/flow/handle.tsx b/packages/client/src/pages/flow/handle.tsx index cbfc9f6fd..e85a4e763 100644 --- a/packages/client/src/pages/flow/handle.tsx +++ b/packages/client/src/pages/flow/handle.tsx @@ -94,21 +94,21 @@ export const Handle = ({ >
-
+
)} @@ -154,7 +154,8 @@ export const Handle = ({ >
{label} @@ -165,7 +166,7 @@ export const Handle = ({
( -
+
); diff --git a/packages/client/src/pages/flow/history.tsx b/packages/client/src/pages/flow/history.tsx index 1b64b5f5d..525fe209e 100644 --- a/packages/client/src/pages/flow/history.tsx +++ b/packages/client/src/pages/flow/history.tsx @@ -68,38 +68,38 @@ export const FlowHistoryPage = () => {
-
Flow History
-
History of your flow responses
+
Flow History
+
History of your flow responses
-
+
-
+
-
Current Version
+
Current Version
-
-
-
+
+
+
-
+
{versions.length} previous responses
-
+
{[...state.collection].map((item) => ( @@ -128,9 +128,10 @@ const Tab = ({ item, state }: TabProps) => { className={twJoin( tabProps.className, tw` - flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-md leading-5 font-semibold text-slate-800 + flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-md leading-5 font-semibold + text-on-neutral `, - isSelected && tw`bg-slate-200`, + isSelected && tw`bg-neutral`, )} ref={ref} > diff --git a/packages/client/src/pages/flow/node.tsx b/packages/client/src/pages/flow/node.tsx index e013c4e59..518832d47 100644 --- a/packages/client/src/pages/flow/node.tsx +++ b/packages/client/src/pages/flow/node.tsx @@ -148,16 +148,17 @@ export const useNodesState = () => { const nodeBodyStyles = tv({ base: tw` - relative size-16 overflow-clip rounded-xl border-2 border-white bg-white outline outline-slate-800 transition-colors + relative size-16 overflow-clip rounded-xl border-2 border-neutral-lowest bg-neutral-lowest outline + outline-on-neutral transition-colors `, variants: { - selected: { true: tw`bg-slate-200` }, + selected: { true: tw`bg-neutral` }, state: { - [FlowItemState.CANCELED]: tw`outline-slate-300`, - [FlowItemState.FAILURE]: tw`outline-red-600`, - [FlowItemState.RUNNING]: tw`outline-violet-600`, - [FlowItemState.SUCCESS]: tw`outline-green-600`, - [FlowItemState.UNSPECIFIED]: tw`outline-slate-800`, + [FlowItemState.CANCELED]: tw`outline-neutral-high`, + [FlowItemState.FAILURE]: tw`outline-danger`, + [FlowItemState.RUNNING]: tw`outline-accent`, + [FlowItemState.SUCCESS]: tw`outline-success`, + [FlowItemState.UNSPECIFIED]: tw`outline-on-neutral`, } satisfies Record, }, }); @@ -221,11 +222,11 @@ export const NodeStateIndicator = ({ children, nodeId }: NodeStateIndicatorProps let indicator = pipe( Match.value(state), Match.when(FlowItemState.RUNNING, () => ( - + )), - Match.when(FlowItemState.SUCCESS, () => ), - Match.when(FlowItemState.CANCELED, () => ), - Match.when(FlowItemState.FAILURE, () => ), + Match.when(FlowItemState.SUCCESS, () => ), + Match.when(FlowItemState.CANCELED, () => ), + Match.when(FlowItemState.FAILURE, () => ), Match.orElse(() => children), ); @@ -233,7 +234,7 @@ export const NodeStateIndicator = ({ children, nodeId }: NodeStateIndicatorProps indicator = ( {indicator} - {info} + {info} ); @@ -248,7 +249,7 @@ interface NodeTitleProps { export const NodeTitle = ({ children, className }: NodeTitleProps) => (
@@ -283,7 +284,7 @@ export const NodeName = ({ className, nodeId }: NodeNameProps) => {
{ {isEditing && ( )} @@ -362,10 +363,10 @@ export const NodeSettingsContainer = ({ return (
-
+
-
{name}
-
{title}
+
{name}
+
{title}
@@ -377,7 +378,7 @@ export const NodeSettingsContainer = ({
@@ -469,7 +470,7 @@ export const NodeSettingsBody = ({ children, input, nodeId, output, settingsHead
Input
@@ -477,10 +478,10 @@ export const NodeSettingsBody = ({ children, input, nodeId, output, settingsHead {!selectedExecutionId ? (
-
+
No input data yet
-
+
The executed result from previous nodes will appear here
@@ -497,8 +498,8 @@ export const NodeSettingsBody = ({ children, input, nodeId, output, settingsHead
Settings @@ -512,7 +513,7 @@ export const NodeSettingsBody = ({ children, input, nodeId, output, settingsHead
Output
@@ -521,10 +522,10 @@ export const NodeSettingsBody = ({ children, input, nodeId, output, settingsHead {!selectedExecutionId ? (
-
+
No output data yet
-
+
The executed result from this node will appear here
diff --git a/packages/client/src/pages/flow/nodes/ai.tsx b/packages/client/src/pages/flow/nodes/ai.tsx index dbdfb90c8..76865b953 100644 --- a/packages/client/src/pages/flow/nodes/ai.tsx +++ b/packages/client/src/pages/flow/nodes/ai.tsx @@ -344,7 +344,7 @@ export const AiProviderSettings = ({ nodeId }: NodeSettingsProps) => { params={{ credentialIdCan: Ulid.construct(data.credentialId).toCanonical() }} to={router.routesById[routes.dashboard.workspace.credential.id].fullPath} > - + Open )} @@ -412,7 +412,7 @@ export const AiProviderSettings = ({ nodeId }: NodeSettingsProps) => { }} variant='ghost' > - + New {credentialKindTitle} credential diff --git a/packages/client/src/pages/flow/nodes/http.tsx b/packages/client/src/pages/flow/nodes/http.tsx index 0bf40da4e..4e335b57f 100644 --- a/packages/client/src/pages/flow/nodes/http.tsx +++ b/packages/client/src/pages/flow/nodes/http.tsx @@ -51,7 +51,7 @@ export const HttpNode = ({ id, selected }: XF.NodeProps) => { return ( @@ -66,7 +66,7 @@ export const HttpNode = ({ id, selected }: XF.NodeProps) => {
-
{name}
+
{name}
 ); @@ -117,7 +117,7 @@ export const HttpSettings = ({ nodeId }: NodeSettingsProps) => { to: router.routesById[routes.dashboard.workspace.http.route.id].fullPath, })} > - + Open API } diff --git a/packages/client/src/pages/flow/nodes/manual-start.tsx b/packages/client/src/pages/flow/nodes/manual-start.tsx index 670990f1d..b6934b8a6 100644 --- a/packages/client/src/pages/flow/nodes/manual-start.tsx +++ b/packages/client/src/pages/flow/nodes/manual-start.tsx @@ -15,7 +15,7 @@ export const ManualStartNode = ({ id, selected }: XF.NodeProps) => { handles={ <>
- +
diff --git a/packages/client/src/pages/flow/tab.tsx b/packages/client/src/pages/flow/tab.tsx index 7b16a949d..908eb236b 100644 --- a/packages/client/src/pages/flow/tab.tsx +++ b/packages/client/src/pages/flow/tab.tsx @@ -37,7 +37,7 @@ export const FlowTab = ({ flowId }: FlowTabProps) => { return ( <> - + {flow?.name} ); diff --git a/packages/client/src/pages/http/history.tsx b/packages/client/src/pages/http/history.tsx index 7e5778260..2aea5655f 100644 --- a/packages/client/src/pages/http/history.tsx +++ b/packages/client/src/pages/http/history.tsx @@ -37,35 +37,33 @@ export const HistoryModal = ({ deltaHttpId, httpId }: HistoryModalProps) => { -
+
-
Response History
-
History of your API response
+
Response History
+
History of your API response
-
+
-
+
-
- Current Version -
+
Current Version
-
-
-
+
+
+
-
+
{versions.length} previous responses
-
+
{(_) => ( @@ -74,9 +72,9 @@ export const HistoryModal = ({ deltaHttpId, httpId }: HistoryModalProps) => { twJoin( tw` flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-md leading-5 - font-semibold text-slate-800 + font-semibold text-on-neutral `, - isSelected && tw`bg-slate-200`, + isSelected && tw`bg-neutral`, ) } id={collection.utils.getKey(_)} diff --git a/packages/client/src/pages/http/request/assert.tsx b/packages/client/src/pages/http/request/assert.tsx index 471f0c601..4722a21ca 100644 --- a/packages/client/src/pages/http/request/assert.tsx +++ b/packages/client/src/pages/http/request/assert.tsx @@ -101,7 +101,7 @@ export const AssertTable = ({ deltaHttpId, httpId, isReadOnly = false }: AssertT }} variant='ghost' > - + New assertion diff --git a/packages/client/src/pages/http/request/body/form-data.tsx b/packages/client/src/pages/http/request/body/form-data.tsx index 248606385..214b52bca 100644 --- a/packages/client/src/pages/http/request/body/form-data.tsx +++ b/packages/client/src/pages/http/request/body/form-data.tsx @@ -129,7 +129,7 @@ export const BodyFormDataTable = ({ }} variant='ghost' > - + New body item diff --git a/packages/client/src/pages/http/request/body/url-encoded.tsx b/packages/client/src/pages/http/request/body/url-encoded.tsx index 9120c87c4..b83c6cdd8 100644 --- a/packages/client/src/pages/http/request/body/url-encoded.tsx +++ b/packages/client/src/pages/http/request/body/url-encoded.tsx @@ -129,7 +129,7 @@ export const BodyUrlEncodedTable = ({ }} variant='ghost' > - + New body item diff --git a/packages/client/src/pages/http/request/header.tsx b/packages/client/src/pages/http/request/header.tsx index 0f2ad0c6d..2c85e5fba 100644 --- a/packages/client/src/pages/http/request/header.tsx +++ b/packages/client/src/pages/http/request/header.tsx @@ -124,7 +124,7 @@ export const HeaderTable = ({ deltaHttpId, hideDescription = false, httpId, isRe }} variant='ghost' > - + New header diff --git a/packages/client/src/pages/http/request/panel.tsx b/packages/client/src/pages/http/request/panel.tsx index 1ffad763f..36add9218 100644 --- a/packages/client/src/pages/http/request/panel.tsx +++ b/packages/client/src/pages/http/request/panel.tsx @@ -107,21 +107,21 @@ export const HttpRequestPanel = ({ return ( - + twMerge( tw` -mb-px cursor-pointer border-b-2 border-transparent py-1.5 text-md leading-5 font-medium tracking-tight - text-slate-500 transition-colors + text-on-neutral-low transition-colors `, - isSelected && tw`border-b-violet-700 text-slate-800`, + isSelected && tw`border-b-accent text-on-neutral`, ) } id='params' > Search Params - {searchParamCount > 0 && ({searchParamCount})} + {searchParamCount > 0 && ({searchParamCount})} Headers - {headerCount > 0 && ({headerCount})} + {headerCount > 0 && ({headerCount})} Body {bodyKind === HttpBodyKind.FORM_DATA && bodyFormDataCount > 0 && ( - ({bodyFormDataCount}) + ({bodyFormDataCount}) )} {bodyKind === HttpBodyKind.URL_ENCODED && bodyUrlEncodedCount > 0 && ( - ({bodyUrlEncodedCount}) + ({bodyUrlEncodedCount}) )} @@ -166,15 +166,15 @@ export const HttpRequestPanel = ({ twMerge( tw` -mb-px cursor-pointer border-b-2 border-transparent py-1.5 text-md leading-5 font-medium tracking-tight - text-slate-500 transition-colors + text-on-neutral-low transition-colors `, - isSelected && tw`border-b-violet-700 text-slate-800`, + isSelected && tw`border-b-accent text-on-neutral`, ) } id='assertions' > Assertion - {assertCount > 0 && ({assertCount})} + {assertCount > 0 && ({assertCount})} diff --git a/packages/client/src/pages/http/request/search-param.tsx b/packages/client/src/pages/http/request/search-param.tsx index 0f9ff29cb..0dde67618 100644 --- a/packages/client/src/pages/http/request/search-param.tsx +++ b/packages/client/src/pages/http/request/search-param.tsx @@ -129,7 +129,7 @@ export const SearchParamTable = ({ }} variant='ghost' > - + New search param diff --git a/packages/client/src/pages/http/request/top-bar.tsx b/packages/client/src/pages/http/request/top-bar.tsx index 0c3679f91..030fed639 100644 --- a/packages/client/src/pages/http/request/top-bar.tsx +++ b/packages/client/src/pages/http/request/top-bar.tsx @@ -55,10 +55,10 @@ export const HttpTopBar = ({ deltaHttpId, httpId }: HttpTopBarProps) => { return ( <> -
+
{/* {example.breadcrumbs.map((_, index) => { @@ -76,12 +76,12 @@ export const HttpTopBar = ({ deltaHttpId, httpId }: HttpTopBarProps) => { {isEditing ? ( ) : ( void edit()} > @@ -93,8 +93,8 @@ export const HttpTopBar = ({ deltaHttpId, httpId }: HttpTopBarProps) => {
- @@ -102,7 +102,7 @@ export const HttpTopBar = ({ deltaHttpId, httpId }: HttpTopBarProps) => { diff --git a/packages/client/src/pages/http/request/url.tsx b/packages/client/src/pages/http/request/url.tsx index d5031ed19..3202df759 100644 --- a/packages/client/src/pages/http/request/url.tsx +++ b/packages/client/src/pages/http/request/url.tsx @@ -142,7 +142,7 @@ export const HttpUrl = ({ deltaHttpId, httpId, isReadOnly = false }: HttpUrlProp }; return ( -
+
void setLanguage(_ as CodeMirrorMarkupLanguage)} triggerClassName={tw`px-4 py-1`} value={language} diff --git a/packages/client/src/pages/http/response/index.tsx b/packages/client/src/pages/http/response/index.tsx index d6df75443..9b3c26a8f 100644 --- a/packages/client/src/pages/http/response/index.tsx +++ b/packages/client/src/pages/http/response/index.tsx @@ -41,20 +41,20 @@ export const ResponseInfo = ({ className, httpResponseId }: ResponseInfoProps) = return (
Status: - {status} + {status}
Time: - {pipe(duration, Duration.millis, Duration.format)} + {pipe(duration, Duration.millis, Duration.format)}
@@ -101,16 +101,16 @@ export const ResponsePanel = ({ children, className, fullWidth = false, httpResp return ( -
+
twMerge( tw` -mb-px cursor-pointer border-b-2 border-transparent py-2 text-md leading-5 font-medium tracking-tight - text-slate-500 transition-colors + text-on-neutral-low transition-colors `, - isSelected && tw`border-b-violet-700 text-slate-800`, + isSelected && tw`border-b-accent text-on-neutral`, ) } id='body' @@ -123,15 +123,15 @@ export const ResponsePanel = ({ children, className, fullWidth = false, httpResp twMerge( tw` -mb-px cursor-pointer border-b-2 border-transparent py-2 text-md leading-5 font-medium tracking-tight - text-slate-500 transition-colors + text-on-neutral-low transition-colors `, - isSelected && tw`border-b-violet-700 text-slate-800`, + isSelected && tw`border-b-accent text-on-neutral`, ) } id='headers' > Headers - {headerCount > 0 && ({headerCount})} + {headerCount > 0 && ({headerCount})} Assertion Results - {assertCount > 0 && ({assertCount})} + {assertCount > 0 && ({assertCount})} diff --git a/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/index.tsx b/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/index.tsx index 1f4abe62e..509e20567 100644 --- a/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/index.tsx +++ b/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/index.tsx @@ -22,11 +22,11 @@ export const Route = createFileRoute('/(dashboard)/(workspace)/workspace/$worksp function RouteComponent() { return (
- + Discover what you can do in DevTools - + Discover the tools to make your workflow easier and faster. @@ -49,17 +49,17 @@ interface CtaButtonProps { const CtaButton = ({ description, icon, onPress, title }: CtaButtonProps) => ( {icon} - {title} + {title} - {description} + {description} ); @@ -69,7 +69,7 @@ interface CtaIconProps { } const CtaIcon = ({ children, className }: CtaIconProps) => ( -
{children}
+
{children}
); const ImportButton = () => { diff --git a/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/route.tsx b/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/route.tsx index 8919ee662..b430c8af4 100644 --- a/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/route.tsx +++ b/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/route.tsx @@ -84,7 +84,7 @@ function RouteComponent() { > - -

Overview

+ +

Overview

- -

Files

+ +

Files

- - Add New File + + Add New File + @@ -122,14 +124,14 @@ function RouteComponent() {
-
+
DevTools v{pipe(Config.string('VERSION'), Config.withDefault('[DEV]'), Runtime.runSync(runtime))}
- +
diff --git a/packages/client/src/pages/workspace/ui/status-bar.tsx b/packages/client/src/pages/workspace/ui/status-bar.tsx index 96d5a5d0f..10e220ecb 100644 --- a/packages/client/src/pages/workspace/ui/status-bar.tsx +++ b/packages/client/src/pages/workspace/ui/status-bar.tsx @@ -22,8 +22,8 @@ const logTextStyles = tv({ base: tw`font-mono text-sm`, variants: { level: { - [LogLevel.ERROR]: tw`text-red-600`, - [LogLevel.UNSPECIFIED]: tw`text-slate-800`, + [LogLevel.ERROR]: tw`text-danger`, + [LogLevel.UNSPECIFIED]: tw`text-on-neutral`, [LogLevel.WARNING]: tw`text-yellow-600`, } satisfies Record, }, @@ -34,12 +34,12 @@ export const StatusBar = () => { const { showLogs } = routes.dashboard.workspace.route.useSearch(); - const separator =
; + const separator =
; const bar = ( -
+
({ ..._, showLogs: showLogs ? undefined : true })} to='.' variant='ghost' @@ -55,7 +55,7 @@ export const StatusBar = () => { {showLogs && ( <> @@ -76,7 +76,7 @@ export const StatusBar = () => { to='.' variant='ghost' > - + )} diff --git a/packages/client/src/shared/ui/dashboard.tsx b/packages/client/src/shared/ui/dashboard.tsx index b8c854932..b1aec2303 100644 --- a/packages/client/src/shared/ui/dashboard.tsx +++ b/packages/client/src/shared/ui/dashboard.tsx @@ -18,8 +18,8 @@ export const DashboardLayout = ({ children, navbar }: DashboardLayoutProps) => {
{ -
+
{navbar} diff --git a/packages/client/src/widgets/environment/index.tsx b/packages/client/src/widgets/environment/index.tsx index 0237ed96d..3be85083c 100644 --- a/packages/client/src/widgets/environment/index.tsx +++ b/packages/client/src/widgets/environment/index.tsx @@ -74,7 +74,7 @@ export const EnvironmentsWidget = () => { ); return ( -
+