From f67ab30dcf5009adc86746c7c2f4a7298acce716 Mon Sep 17 00:00:00 2001 From: moosebay Date: Sun, 8 Feb 2026 14:36:09 +0300 Subject: [PATCH 1/5] feat(ui): add dark mode via CSS design tokens Replace hardcoded Tailwind color classes with semantic design tokens (CSS custom properties) defined in @theme, with :root.dark overrides. This enables automatic dark mode across the entire app without sprinkling dark: prefixes on every component. - Define ~35 semantic color tokens (surface, fg, border, accent, danger, etc.) - Add ThemeProvider + useTheme hook with system/light/dark preference - Migrate all UI library components to token-based classes - Migrate all client pages and widgets to token-based classes - Add CodeMirror dark theme support via theme={resolvedTheme} - Add React Flow dark mode (colorMode, background dots, edge strokes) - Add flash prevention script in desktop index.html - Add Storybook dark mode toolbar toggle - Add dark: overrides for badge and avatar categorical colors - Fix iframe preview with white background for readability --- apps/desktop/src/renderer/index.html | 10 ++ packages/client/src/app/styles.css | 6 ++ 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 | 49 +++++----- .../client/src/features/form-table/index.tsx | 8 +- .../src/pages/dashboard/routes/index.tsx | 28 +++--- packages/client/src/pages/flow/add-node.tsx | 16 ++-- packages/client/src/pages/flow/edge.tsx | 4 +- packages/client/src/pages/flow/edit.tsx | 40 ++++---- packages/client/src/pages/flow/handle.tsx | 16 ++-- packages/client/src/pages/flow/history.tsx | 24 +++-- packages/client/src/pages/flow/node.tsx | 39 ++++---- packages/client/src/pages/flow/nodes/http.tsx | 2 +- .../src/pages/flow/nodes/javascript.tsx | 3 + .../src/pages/flow/nodes/manual-start.tsx | 2 +- packages/client/src/pages/http/history.tsx | 22 ++--- .../src/pages/http/request/body/raw.tsx | 4 + .../client/src/pages/http/request/panel.tsx | 18 ++-- .../client/src/pages/http/request/top-bar.tsx | 14 +-- .../client/src/pages/http/response/body.tsx | 19 ++-- .../client/src/pages/http/response/index.tsx | 16 ++-- .../workspace/$workspaceIdCan/index.tsx | 12 +-- .../workspace/$workspaceIdCan/route.tsx | 18 ++-- .../src/pages/workspace/ui/status-bar.tsx | 14 +-- packages/client/src/shared/ui/dashboard.tsx | 4 +- .../client/src/widgets/environment/index.tsx | 47 +++++----- 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/.storybook/preview.tsx | 27 +++++- packages/ui/src/add-button.tsx | 8 +- packages/ui/src/avatar.tsx | 14 +-- packages/ui/src/badge.tsx | 16 ++-- packages/ui/src/button.tsx | 22 ++--- packages/ui/src/checkbox.tsx | 6 +- packages/ui/src/data-table.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/index.tsx | 1 + packages/ui/src/json-tree.tsx | 8 +- packages/ui/src/list-box.tsx | 12 +-- packages/ui/src/menu.stories.tsx | 4 +- packages/ui/src/menu.tsx | 2 +- packages/ui/src/modal.stories.tsx | 4 +- packages/ui/src/modal.tsx | 4 +- packages/ui/src/number-field.tsx | 6 +- packages/ui/src/progress-bar.tsx | 6 +- packages/ui/src/provider.tsx | 2 + 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/spinner.tsx | 2 +- packages/ui/src/styles.css | 91 +++++++++++++++++++ packages/ui/src/tag-group.tsx | 6 +- packages/ui/src/text-field.tsx | 4 +- packages/ui/src/theme.tsx | 72 +++++++++++++++ packages/ui/src/toast.tsx | 6 +- packages/ui/src/tree.tsx | 16 ++-- 63 files changed, 565 insertions(+), 339 deletions(-) create mode 100644 packages/ui/src/theme.tsx diff --git a/apps/desktop/src/renderer/index.html b/apps/desktop/src/renderer/index.html index bfb11df2..e3710dab 100644 --- a/apps/desktop/src/renderer/index.html +++ b/apps/desktop/src/renderer/index.html @@ -3,6 +3,16 @@ DevTools Studio +
diff --git a/packages/client/src/app/styles.css b/packages/client/src/app/styles.css index 18a3effd..dbf8da30 100644 --- a/packages/client/src/app/styles.css +++ b/packages/client/src/app/styles.css @@ -12,4 +12,10 @@ body, height: 100%; overflow: hidden; user-select: none; + background-color: var(--color-surface); + color: var(--color-fg); +} + +.dark .react-flow { + --xy-background-color: var(--color-surface); } diff --git a/packages/client/src/features/delta/index.tsx b/packages/client/src/features/delta/index.tsx index ce5eeebb..da849fcf 100644 --- a/packages/client/src/features/delta/index.tsx +++ b/packages/client/src/features/delta/index.tsx @@ -187,7 +187,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 9817b105..1a55fda0 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 2f2f5de3..6c55bb1e 100644 --- a/packages/client/src/features/expression/reference.tsx +++ b/packages/client/src/features/expression/reference.tsx @@ -17,6 +17,7 @@ import { ReferenceService, ReferenceTreeItem, } from '@the-dev-tools/spec/buf/api/reference/v1/reference_pb'; +import { useTheme } from '@the-dev-tools/ui'; import { tw } from '@the-dev-tools/ui/tailwind-literal'; import { TreeItem } from '@the-dev-tools/ui/tree'; import { useConnectSuspenseQuery } from '~/shared/api'; @@ -134,27 +135,27 @@ 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} )} @@ -163,7 +164,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-border px-3 py-0.5 text-md text-fg`, variants: { variant: { 'table-cell': tw`w-full rounded-none border-transparent px-5 py-0.5 -outline-offset-4`, @@ -210,6 +211,8 @@ export const ReferenceField = ({ const reactRender = useReactRender(); + const { resolvedTheme } = useTheme(); + return ( ); diff --git a/packages/client/src/features/file-system/index.tsx b/packages/client/src/features/file-system/index.tsx index 0c37915c..7da57a68 100644 --- a/packages/client/src/features/file-system/index.tsx +++ b/packages/client/src/features/file-system/index.tsx @@ -39,6 +39,7 @@ import { import { FileCollectionSchema, FolderCollectionSchema } from '@the-dev-tools/spec/tanstack-db/v1/api/file_system'; import { FlowCollectionSchema } from '@the-dev-tools/spec/tanstack-db/v1/api/flow'; import { HttpCollectionSchema, HttpDeltaCollectionSchema } from '@the-dev-tools/spec/tanstack-db/v1/api/http'; +import { useTheme } from '@the-dev-tools/ui'; import { Button } from '@the-dev-tools/ui/button'; import { FlowsIcon, FolderOpenedIcon } from '@the-dev-tools/ui/icons'; import { Menu, MenuItem, useContextMenuState } from '@the-dev-tools/ui/menu'; @@ -386,11 +387,11 @@ const FolderFile = ({ id }: FileItemProps) => { {({ isExpanded }) => ( <> {name === 'Credentials' ? ( - + ) : isExpanded ? ( - + ) : ( - + )} @@ -410,7 +411,7 @@ const FolderFile = ({ id }: FileItemProps) => { {showControls && ( @@ -441,6 +442,7 @@ const HttpFile = ({ id }: FileItemProps) => { const matchRoute = useMatchRoute(); const router = useRouter(); const navigate = useNavigate(); + const { resolvedTheme } = useTheme(); const { workspaceId } = routes.dashboard.workspace.route.useLoaderData(); @@ -517,7 +519,7 @@ const HttpFile = ({ id }: FileItemProps) => { {showControls && ( @@ -573,18 +575,18 @@ const HttpFile = ({ id }: FileItemProps) => { <>
cURL export
- + )} , @@ -610,7 +612,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-surface-active` : '', id, item: (_) => , items: files, @@ -624,6 +626,7 @@ const HttpFile = ({ id }: FileItemProps) => { const HttpDeltaFile = ({ id }: FileItemProps) => { const router = useRouter(); const matchRoute = useMatchRoute(); + const { resolvedTheme } = useTheme(); const { workspaceId } = routes.dashboard.workspace.route.useLoaderData(); @@ -704,7 +707,7 @@ const HttpDeltaFile = ({ id }: FileItemProps) => { {showControls && ( @@ -733,18 +736,18 @@ const HttpDeltaFile = ({ id }: FileItemProps) => { <>
cURL export
- + )} , @@ -767,7 +770,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-surface-active` : '', id, onContextMenu, textValue: name ?? '', @@ -820,7 +823,7 @@ const FlowFile = ({ id }: FileItemProps) => { const content = ( <> - + {name} @@ -839,7 +842,7 @@ const FlowFile = ({ id }: FileItemProps) => { {showControls && ( @@ -870,7 +873,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-surface-active` : '', id, onContextMenu, textValue: name, @@ -920,10 +923,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 +946,7 @@ const CredentialFile = ({ id }: FileItemProps) => { {showControls && ( @@ -963,7 +966,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-surface-active` : '', 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 91e33243..040e40e9 100644 --- a/packages/client/src/features/form-table/index.tsx +++ b/packages/client/src/features/form-table/index.tsx @@ -64,7 +64,7 @@ export const useFormTableAddRow = ({ }} variant='ghost' > - + {createLabel} ), @@ -170,16 +170,16 @@ interface ColumnActionDeleteProps { export const ColumnActionDelete = ({ onDelete }: ColumnActionDeleteProps) => ( - - Delete + Delete ); export const ColumnActionDrag = () => ( ); diff --git a/packages/client/src/pages/dashboard/routes/index.tsx b/packages/client/src/pages/dashboard/routes/index.tsx index ab72e462..774022f3 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 6fdf6f09..870bb45f 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,14 @@ 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 7e6b819b..4b85bed9 100644 --- a/packages/client/src/pages/flow/edge.tsx +++ b/packages/client/src/pages/flow/edge.tsx @@ -153,11 +153,11 @@ const connectionLineStyles = tv({ base: tw`fill-none stroke-1 transition-colors`, variants: { state: { - [FlowItemState.CANCELED]: tw`stroke-slate-400`, + [FlowItemState.CANCELED]: tw`stroke-fg-subtle`, [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.UNSPECIFIED]: tw`stroke-fg-muted`, } satisfies Record, }, }); diff --git a/packages/client/src/pages/flow/edit.tsx b/packages/client/src/pages/flow/edit.tsx index 28a4a196..58b7a459 100644 --- a/packages/client/src/pages/flow/edit.tsx +++ b/packages/client/src/pages/flow/edit.tsx @@ -27,6 +27,7 @@ import { NodeCollectionSchema, NodeHttpCollectionSchema, } from '@the-dev-tools/spec/tanstack-db/v1/api/flow'; +import { useTheme } from '@the-dev-tools/ui'; import { Button, ButtonAsRouteLink } from '@the-dev-tools/ui/button'; import { DataTable, useReactTable } from '@the-dev-tools/ui/data-table'; import { PlayCircleIcon } from '@the-dev-tools/ui/icons'; @@ -104,7 +105,7 @@ export const FlowEditPage = () => { {sidebar && ( - + {sidebar} )} @@ -127,6 +128,7 @@ export const Flow = ({ children }: PropsWithChildren) => { const { getNodes, screenToFlowPosition } = XF.useReactFlow(); const { flowId, isReadOnly = false, setSidebar } = use(FlowContext); + const { resolvedTheme } = useTheme(); const { duration } = useLiveQuery( @@ -236,7 +238,7 @@ export const Flow = ({ children }: PropsWithChildren) => { <> {statusBarEndSlot && createPortal( -
+
{duration &&
Time: {pipe(duration, Duration.millis, Duration.format)}
}
, @@ -247,7 +249,7 @@ export const Flow = ({ children }: PropsWithChildren) => { { viewport={viewport} > { }); return ( -
+
{isEditing ? ( ) : ( void edit()} > @@ -350,9 +352,9 @@ export const TopBar = ({ children }: TopBarProps) => { { } variant='ghost' > - Flows History + Flows History - @@ -396,10 +398,10 @@ export const TopBarWithControls = () => { onPress={() => void zoomOut({ duration: 100 })} variant='ghost' > - + -
+
{Math.floor(zoom * 100)}%
@@ -409,10 +411,10 @@ export const TopBarWithControls = () => { onPress={() => void zoomIn({ duration: 100 })} variant='ghost' > - + -
+
); }; @@ -567,13 +569,13 @@ const FlowSettings = () => { return ( <> -
-
Flow variables
+
+
Flow variables
diff --git a/packages/client/src/pages/flow/handle.tsx b/packages/client/src/pages/flow/handle.tsx index cbfc9f6f..d2245e1d 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,7 @@ export const Handle = ({ >
{label} @@ -165,7 +165,7 @@ export const Handle = ({
( -
+
); diff --git a/packages/client/src/pages/flow/history.tsx b/packages/client/src/pages/flow/history.tsx index 1b64b5f5..a12d49e5 100644 --- a/packages/client/src/pages/flow/history.tsx +++ b/packages/client/src/pages/flow/history.tsx @@ -68,15 +68,15 @@ export const FlowHistoryPage = () => {
-
Flow History
-
History of your flow responses
+
Flow History
+
History of your flow responses
@@ -84,22 +84,22 @@ export const FlowHistoryPage = () => {
-
+
Current Version
-
-
-
+
+
+
-
+
{versions.length} previous responses
-
+
{[...state.collection].map((item) => ( @@ -127,10 +127,8 @@ const Tab = ({ item, state }: TabProps) => { {...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 - `, - isSelected && tw`bg-slate-200`, + tw`flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-md leading-5 font-semibold text-fg`, + isSelected && tw`bg-surface-active`, )} ref={ref} > diff --git a/packages/client/src/pages/flow/node.tsx b/packages/client/src/pages/flow/node.tsx index e013c4e5..627ce65a 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-surface bg-surface outline outline-border-emphasis + transition-colors `, variants: { - selected: { true: tw`bg-slate-200` }, + selected: { true: tw`bg-surface-alt` }, state: { - [FlowItemState.CANCELED]: tw`outline-slate-300`, + [FlowItemState.CANCELED]: tw`outline-fg-subtle`, [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.UNSPECIFIED]: tw`outline-border-emphasis`, } satisfies Record, }, }); @@ -221,7 +222,7 @@ export const NodeStateIndicator = ({ children, nodeId }: NodeStateIndicatorProps let indicator = pipe( Match.value(state), Match.when(FlowItemState.RUNNING, () => ( - + )), Match.when(FlowItemState.SUCCESS, () => ), Match.when(FlowItemState.CANCELED, () => ), @@ -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
@@ -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/http.tsx b/packages/client/src/pages/flow/nodes/http.tsx index 0bf40da4..0e9c3e93 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 ( diff --git a/packages/client/src/pages/flow/nodes/javascript.tsx b/packages/client/src/pages/flow/nodes/javascript.tsx index cde30f89..0504da4a 100644 --- a/packages/client/src/pages/flow/nodes/javascript.tsx +++ b/packages/client/src/pages/flow/nodes/javascript.tsx @@ -7,6 +7,7 @@ import { use } from 'react'; import { FiTerminal } from 'react-icons/fi'; import { NodeJsSchema } from '@the-dev-tools/spec/buf/api/flow/v1/flow_pb'; import { NodeJsCollectionSchema } from '@the-dev-tools/spec/tanstack-db/v1/api/flow'; +import { useTheme } from '@the-dev-tools/ui'; import { tw } from '@the-dev-tools/ui/tailwind-literal'; import { useCodeMirrorLanguageExtensions } from '~/features/expression'; import { useApiCollection } from '~/shared/api'; @@ -51,6 +52,7 @@ export const JavaScriptSettings = ({ nodeId }: NodeSettingsProps) => { const { isReadOnly = false } = use(FlowContext); const extensions = useCodeMirrorLanguageExtensions('javascript'); + const { resolvedTheme } = useTheme(); return ( @@ -59,6 +61,7 @@ export const JavaScriptSettings = ({ nodeId }: NodeSettingsProps) => { height='100%' onChange={(_) => collection.utils.updatePaced({ code: _, nodeId })} readOnly={isReadOnly} + theme={resolvedTheme} value={code} /> diff --git a/packages/client/src/pages/flow/nodes/manual-start.tsx b/packages/client/src/pages/flow/nodes/manual-start.tsx index 670990f1..7d467b01 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/http/history.tsx b/packages/client/src/pages/http/history.tsx index 336a9503..83eca75d 100644 --- a/packages/client/src/pages/http/history.tsx +++ b/packages/client/src/pages/http/history.tsx @@ -37,10 +37,10 @@ export const HistoryModal = ({ deltaHttpId, httpId }: HistoryModalProps) => { -
+
-
Response History
-
History of your API response
+
Response History
+
History of your API response
@@ -48,7 +48,7 @@ export const HistoryModal = ({ deltaHttpId, httpId }: HistoryModalProps) => {
-
+
@@ -56,16 +56,16 @@ export const HistoryModal = ({ deltaHttpId, httpId }: HistoryModalProps) => {
-
-
-
+
+
+
-
+
{versions.length} previous responses
-
+
{(_) => ( @@ -74,9 +74,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-fg `, - isSelected && tw`bg-slate-200`, + isSelected && tw`bg-surface-active`, ) } id={collection.utils.getKey(_)} diff --git a/packages/client/src/pages/http/request/body/raw.tsx b/packages/client/src/pages/http/request/body/raw.tsx index 860e6499..26cdb80f 100644 --- a/packages/client/src/pages/http/request/body/raw.tsx +++ b/packages/client/src/pages/http/request/body/raw.tsx @@ -6,6 +6,7 @@ import { HttpBodyRawCollectionSchema, HttpBodyRawDeltaCollectionSchema, } from '@the-dev-tools/spec/tanstack-db/v1/api/http'; +import { useTheme } from '@the-dev-tools/ui'; import { Button } from '@the-dev-tools/ui/button'; import { Select, SelectItem } from '@the-dev-tools/ui/select'; import { tw } from '@the-dev-tools/ui/tailwind-literal'; @@ -52,6 +53,8 @@ export const RawForm = ({ deltaHttpId, httpId, isReadOnly = false }: RawFormProp const client = createClient(ReferenceService, transport); const reactRender = useReactRender(); + const { resolvedTheme } = useTheme(); + // TODO: use pre-composed extensions instead of duplicating code here // Combine language extensions with reference extensions const combinedExtensions = [...languageExtensions, ...baseCodeMirrorExtensions({ client, context, reactRender })]; @@ -94,6 +97,7 @@ export const RawForm = ({ deltaHttpId, httpId, isReadOnly = false }: RawFormProp height='100%' onChange={(_) => void setValue(_)} readOnly={isReadOnly} + theme={resolvedTheme} value={value ?? ''} /> diff --git a/packages/client/src/pages/http/request/panel.tsx b/packages/client/src/pages/http/request/panel.tsx index bb7972cf..10c4a8a1 100644 --- a/packages/client/src/pages/http/request/panel.tsx +++ b/packages/client/src/pages/http/request/panel.tsx @@ -107,15 +107,15 @@ 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-fg-muted transition-colors `, - isSelected && tw`border-b-violet-700 text-slate-800`, + isSelected && tw`border-b-accent-border text-fg`, ) } id='params' @@ -129,9 +129,9 @@ 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-fg-muted transition-colors `, - isSelected && tw`border-b-violet-700 text-slate-800`, + isSelected && tw`border-b-accent-border text-fg`, ) } id='headers' @@ -145,9 +145,9 @@ 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-fg-muted transition-colors `, - isSelected && tw`border-b-violet-700 text-slate-800`, + isSelected && tw`border-b-accent-border text-fg`, ) } id='body' @@ -166,9 +166,9 @@ 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-fg-muted transition-colors `, - isSelected && tw`border-b-violet-700 text-slate-800`, + isSelected && tw`border-b-accent-border text-fg`, ) } id='assertions' diff --git a/packages/client/src/pages/http/request/top-bar.tsx b/packages/client/src/pages/http/request/top-bar.tsx index 0c3679f9..5bf3e178 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/response/body.tsx b/packages/client/src/pages/http/response/body.tsx index b7c49d37..e0e637f2 100644 --- a/packages/client/src/pages/http/response/body.tsx +++ b/packages/client/src/pages/http/response/body.tsx @@ -7,6 +7,7 @@ import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components'; import { twMerge } from 'tailwind-merge'; import { HttpResponseSchema } from '@the-dev-tools/spec/buf/api/http/v1/http_pb'; import { HttpResponseCollectionSchema } from '@the-dev-tools/spec/tanstack-db/v1/api/http'; +import { useTheme } from '@the-dev-tools/ui'; import { Select, SelectItem } from '@the-dev-tools/ui/select'; import { tw } from '@the-dev-tools/ui/tailwind-literal'; import { @@ -41,12 +42,12 @@ export const BodyPanel = ({ httpResponseId }: BodyPanelProps) => { className='grid flex-1 grid-cols-[auto_1fr] grid-rows-[auto_1fr] items-start gap-4' defaultSelectedKey='pretty' > - + twMerge( - tw`cursor-pointer rounded-sm bg-transparent px-2 py-0.5 text-slate-400 transition-colors`, - isSelected && tw`bg-white font-medium text-slate-800 shadow-sm`, + tw`cursor-pointer rounded-sm bg-transparent px-2 py-0.5 text-fg-subtle transition-colors`, + isSelected && tw`bg-surface font-medium text-fg shadow-sm`, ) } id='pretty' @@ -56,8 +57,8 @@ export const BodyPanel = ({ httpResponseId }: BodyPanelProps) => { twMerge( - tw`cursor-pointer rounded-sm bg-transparent px-2 py-0.5 text-slate-400 transition-colors`, - isSelected && tw`bg-white font-medium text-slate-800 shadow-sm`, + tw`cursor-pointer rounded-sm bg-transparent px-2 py-0.5 text-fg-subtle transition-colors`, + isSelected && tw`bg-surface font-medium text-fg shadow-sm`, ) } id='raw' @@ -67,8 +68,8 @@ export const BodyPanel = ({ httpResponseId }: BodyPanelProps) => { twMerge( - tw`cursor-pointer rounded-sm bg-transparent px-2 py-0.5 text-slate-400 transition-colors`, - isSelected && tw`bg-white font-medium text-slate-800 shadow-sm`, + tw`cursor-pointer rounded-sm bg-transparent px-2 py-0.5 text-fg-subtle transition-colors`, + isSelected && tw`bg-surface font-medium text-fg shadow-sm`, ) } id='preview' @@ -86,7 +87,7 @@ export const BodyPanel = ({ httpResponseId }: BodyPanelProps) => { -