Theme system refactor (#31)

src-web/components/BinaryFileEditor.tsx

@@ -46,10 +46,10 @@ export function BinaryFileEditor({
   return (
     <VStack space={2}>
       <HStack space={2} alignItems="center">
-        <Button variant="border" color="gray" size="sm" onClick={handleClick}>
+        <Button variant="border" color="secondary" size="sm" onClick={handleClick}>
           Choose File
         </Button>
-        <div className="text-xs font-mono truncate rtl pr-3 text-gray-800">
+        <div className="text-xs font-mono truncate rtl pr-3 text-fg">
           {/* Special character to insert ltr text in rtl element without making things wonky */}
           &#x200E;
           {filePath ?? 'Select File'}
@@ -64,7 +64,7 @@ export function BinaryFileEditor({
           <HStack space={1.5} justifyContent="center">
             <Button
               variant="solid"
-              color="gray"
+              color="secondary"
               size="xs"
               onClick={() => onChangeContentType(mimeType)}
             >

src-web/components/CommandPalette.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
-import { useMemo, useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
 import { useAppRoutes } from '../hooks/useAppRoutes';
 import { getRecentEnvironments } from '../hooks/useRecentEnvironments';
@@ -117,8 +117,8 @@ function CommandPaletteItem({
     <button
       onClick={onClick}
       className={classNames(
-        'w-full h-xs flex items-center rounded px-1.5 text-gray-600',
-        active && 'bg-highlightSecondary text-gray-800',
+        'w-full h-xs flex items-center rounded px-1.5 text-fg-subtle',
+        active && 'bg-background-highlight-secondary text-fg',
       )}
     >
       {children}

src-web/components/CookieDialog.tsx

@@ -42,7 +42,7 @@ export const CookieDialog = function ({ cookieJarId }: Props) {
               <td className="py-2 select-text cursor-text font-mono font-semibold max-w-0">
                 {cookieDomain(c)}
               </td>
-              <td className="py-2 pl-4 select-text cursor-text font-mono text-gray-700 whitespace-nowrap overflow-x-auto max-w-[200px] hide-scrollbars">
+              <td className="py-2 pl-4 select-text cursor-text font-mono text-fg-subtle whitespace-nowrap overflow-x-auto max-w-[200px] hide-scrollbars">
                 {c.raw_cookie}
               </td>
               <td className="max-w-0 w-10">

src-web/components/DropMarker.tsx

@@ -14,7 +14,7 @@ export const DropMarker = memo(
           'relative w-full h-0 overflow-visible pointer-events-none',
         )}
       >
-        <div className="absolute z-50 left-2 right-2 -bottom-[0.1rem] h-[0.2rem] bg-blue-500/50 rounded-full" />
+        <div className="absolute z-50 left-2 right-2 -bottom-[0.1rem] h-[0.2rem] bg-fg-primary rounded-full" />
       </div>
     );
   },

src-web/components/EmptyStateText.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
+import React from 'react';
 
 interface Props {
   children: ReactNode;
@@ -11,7 +12,8 @@ export function EmptyStateText({ children, className }: Props) {
     <div
       className={classNames(
         className,
-        'rounded-lg border border-dashed border-highlight h-full py-2 text-gray-400 flex items-center justify-center',
+        'rounded-lg border border-dashed border-background-highlight',
+        'h-full py-2 text-fg-subtler flex items-center justify-center italic',
       )}
     >
       {children}

src-web/components/EnvironmentActionsDropdown.tsx

@@ -71,8 +71,8 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
         size="sm"
         className={classNames(
           className,
-          'text-gray-800 !px-2 truncate',
-          activeEnvironment == null && 'text-opacity-disabled italic',
+          'text-fg !px-2 truncate',
+          activeEnvironment == null && 'text-fg-subtler italic',
         )}
         {...buttonProps}
       >

src-web/components/EnvironmentEditDialog.tsx

@@ -68,7 +68,7 @@ export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) {
                   color="custom"
                   title="Add sub environment"
                   icon="plusCircle"
-                  iconClassName="text-gray-500 group-hover:text-gray-700"
+                  iconClassName="text-fg-subtler group-hover:text-fg-subtle"
                   className="group"
                   onClick={handleCreateEnvironment}
                 />
@@ -97,7 +97,7 @@ export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) {
       secondSlot={() =>
         activeWorkspace != null && (
           <EnvironmentEditor
-            className="pt-2 border-l border-highlight"
+            className="pt-2 border-l border-background-highlight-secondary"
             environment={selectedEnvironment}
             workspace={activeWorkspace}
           />
@@ -175,7 +175,7 @@ const EnvironmentEditor = function ({
         <Heading className="w-full flex items-center gap-1">
           <div>{environment?.name ?? 'Global Variables'}</div>
           <IconButton
-            iconClassName="text-gray-600"
+            iconClassName="text-fg-subtler"
             size="sm"
             icon={valueVisibility.value ? 'eye' : 'eyeClosed'}
             title={valueVisibility.value ? 'Hide Values' : 'Reveal Values'}
@@ -244,7 +244,7 @@ function SidebarButton({
           size="xs"
           className={classNames(
             'w-full',
-            active ? 'text-gray-800 bg-highlightSecondary' : 'text-gray-600 hover:text-gray-700',
+            active ? 'text-fg bg-background-active' : 'text-fg-subtle hover:text-fg',
           )}
           justify="start"
           onClick={onClick}

src-web/components/ExportDataDialog.tsx

@@ -90,7 +90,7 @@ export function ExportDataDialog({
                 />
               </td>
               <td
-                className="py-1 pl-4 text-gray-700 whitespace-nowrap overflow-x-auto hide-scrollbars"
+                className="py-1 pl-4 text-fg whitespace-nowrap overflow-x-auto hide-scrollbars"
                 onClick={() => setSelectedWorkspaces((prev) => ({ ...prev, [w.id]: !prev[w.id] }))}
               >
                 {w.name} {w.id === activeWorkspace.id ? '(current workspace)' : ''}
@@ -100,7 +100,7 @@ export function ExportDataDialog({
         </tbody>
       </table>
       <HStack space={2} justifyContent="end">
-        <Button className="focus" color="gray" onClick={onHide}>
+        <Button className="focus" variant="border" onClick={onHide}>
           Cancel
         </Button>
         <Button

src-web/components/GlobalHooks.tsx

@@ -1,6 +1,6 @@
-import { useEffect } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { getCurrent } from '@tauri-apps/api/webviewWindow';
+import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useCommandPalette } from '../hooks/useCommandPalette';
 import { cookieJarsQueryKey } from '../hooks/useCookieJars';
@@ -13,6 +13,7 @@ import { httpRequestsQueryKey } from '../hooks/useHttpRequests';
 import { httpResponsesQueryKey } from '../hooks/useHttpResponses';
 import { keyValueQueryKey } from '../hooks/useKeyValue';
 import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
+import { useNotificationToast } from '../hooks/useNotificationToast';
 import { useRecentEnvironments } from '../hooks/useRecentEnvironments';
 import { useRecentRequests } from '../hooks/useRecentRequests';
 import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
@@ -24,7 +25,6 @@ import { workspacesQueryKey } from '../hooks/useWorkspaces';
 import type { Model } from '../lib/models';
 import { modelsEq } from '../lib/models';
 import { setPathname } from '../lib/persistPathname';
-import { useNotificationToast } from '../hooks/useNotificationToast';
 
 const DEFAULT_FONT_SIZE = 16;
 
@@ -34,6 +34,7 @@ export function GlobalHooks() {
   useRecentEnvironments();
   useRecentRequests();
 
+  // Other useful things
   useSyncAppearance();
   useSyncWindowTitle();
   useGlobalCommands();

src-web/components/GraphQLEditor.tsx

@@ -88,7 +88,7 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
                   <Button
                     key="introspection"
                     size="xs"
-                    color={error ? 'danger' : 'gray'}
+                    color={error ? 'danger' : 'secondary'}
                     isLoading={isLoading}
                     onClick={() => {
                       dialog.show({
@@ -105,7 +105,7 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
                                   refetch();
                                 }}
                                 className="ml-auto"
-                                color="secondary"
+                                color="primary"
                                 size="sm"
                               >
                                 Try Again

src-web/components/GrpcConnectionLayout.tsx

@@ -98,9 +98,10 @@ export function GrpcConnectionLayout({ style }: Props) {
           <div
             style={style}
             className={classNames(
+              'x-theme-responsePane',
               'max-h-full h-full grid grid-rows-[minmax(0,1fr)] grid-cols-1',
-              'bg-gray-50 dark:bg-gray-100 rounded-md border border-highlight',
-              'shadow shadow-gray-100 dark:shadow-gray-0 relative',
+              'bg-background rounded-md border border-background-highlight',
+              'shadow relative',
             )}
           >
             {grpc.go.error ? (

src-web/components/GrpcConnectionMessagesPane.tsx

@@ -2,9 +2,11 @@ import classNames from 'classnames';
 import { format } from 'date-fns';
 import type { CSSProperties } from 'react';
 import React, { useEffect, useMemo, useState } from 'react';
-import { useGrpcConnections } from '../hooks/useGrpcConnections';
 import { useGrpcEvents } from '../hooks/useGrpcEvents';
+import { usePinnedGrpcConnection } from '../hooks/usePinnedGrpcConnection';
+import { useStateWithDeps } from '../hooks/useStateWithDeps';
 import type { GrpcEvent, GrpcRequest } from '../lib/models';
+import { Button } from './core/Button';
 import { Icon } from './core/Icon';
 import { JsonAttributeTree } from './core/JsonAttributeTree';
 import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
@@ -13,8 +15,6 @@ import { SplitLayout } from './core/SplitLayout';
 import { HStack, VStack } from './core/Stacks';
 import { EmptyStateText } from './EmptyStateText';
 import { RecentConnectionsDropdown } from './RecentConnectionsDropdown';
-import { Button } from './core/Button';
-import { useStateWithDeps } from '../hooks/useStateWithDeps';
 
 interface Props {
   style?: CSSProperties;
@@ -31,11 +31,11 @@ interface Props {
 
 export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }: Props) {
   const [activeEventId, setActiveEventId] = useState<string | null>(null);
-  const connections = useGrpcConnections(activeRequest.id ?? null);
-  const activeConnection = connections[0] ?? null;
-  const events = useGrpcEvents(activeConnection?.id ?? null);
   const [showLarge, setShowLarge] = useStateWithDeps<boolean>(false, [activeRequest.id]);
   const [showingLarge, setShowingLarge] = useState<boolean>(false);
+  const { activeConnection, connections, setPinnedConnectionId } =
+    usePinnedGrpcConnection(activeRequest);
+  const events = useGrpcEvents(activeConnection?.id ?? null);
 
   const activeEvent = useMemo(
     () => events.find((m) => m.id === activeEventId) ?? null,
@@ -65,15 +65,13 @@ export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }:
               <HStack alignItems="center" space={2}>
                 <span>{events.length} messages</span>
                 {activeConnection.elapsed === 0 && (
-                  <Icon icon="refresh" size="sm" spin className="text-gray-600" />
+                  <Icon icon="refresh" size="sm" spin className="text-fg-subtler" />
                 )}
               </HStack>
               <RecentConnectionsDropdown
                 connections={connections}
                 activeConnection={activeConnection}
-                onPinned={() => {
-                  // todo
-                }}
+                onPinnedConnectionId={setPinnedConnectionId}
               />
             </HStack>
             <div className="overflow-y-auto h-full">
@@ -107,7 +105,7 @@ export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }:
                     Message {activeEvent.eventType === 'client_message' ? 'Sent' : 'Received'}
                   </div>
                   {!showLarge && activeEvent.content.length > 1000 * 1000 ? (
-                    <VStack space={2} className="text-sm italic text-gray-500">
+                    <VStack space={2} className="text-sm italic text-fg-subtler">
                       Message previews larger than 1MB are hidden
                       <div>
                         <Button
@@ -119,7 +117,7 @@ export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }:
                             }, 500);
                           }}
                           isLoading={showingLarge}
-                          color="gray"
+                          color="secondary"
                           variant="border"
                           size="xs"
                         >
@@ -138,7 +136,7 @@ export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }:
                       {activeEvent.content}
                     </div>
                     {activeEvent.error && (
-                      <div className="select-text cursor-text text-xs font-mono py-1 text-orange-700">
+                      <div className="select-text cursor-text text-xs font-mono py-1 text-fg-warning">
                         {activeEvent.error}
                       </div>
                     )}
@@ -183,21 +181,21 @@ function EventRow({
         className={classNames(
           'w-full grid grid-cols-[auto_minmax(0,3fr)_auto] gap-2 items-center text-left',
           'px-1.5 py-1 font-mono cursor-default group focus:outline-none rounded',
-          isActive && '!bg-highlight text-gray-900',
-          'text-gray-800 hover:text-gray-900',
+          isActive && '!bg-background-highlight-secondary !text-fg',
+          'text-fg-subtle hover:text-fg',
         )}
       >
         <Icon
           className={
             eventType === 'server_message'
-              ? 'text-blue-600'
+              ? 'text-fg-info'
               : eventType === 'client_message'
-              ? 'text-violet-600'
+              ? 'text-fg-primary'
               : eventType === 'error' || (status != null && status > 0)
-              ? 'text-orange-600'
+              ? 'text-fg-danger'
               : eventType === 'connection_end'
-              ? 'text-green-600'
-              : 'text-gray-700'
+              ? 'text-fg-success'
+              : 'text-fg-subtle'
           }
           title={
             eventType === 'server_message'
@@ -224,7 +222,7 @@ function EventRow({
         />
         <div className={classNames('w-full truncate text-2xs')}>
           {content.slice(0, 1000)}
-          {error && <span className="text-orange-600"> ({error})</span>}
+          {error && <span className="text-fg-warning"> ({error})</span>}
         </div>
         <div className={classNames('opacity-50 text-2xs')}>
           {format(createdAt + 'Z', 'HH:mm:ss.SSS')}

src-web/components/GrpcConnectionSetupPane.tsx

@@ -199,14 +199,14 @@ export function GrpcConnectionSetupPane({
                 label: 'Refresh',
                 type: 'default',
                 key: 'custom',
-                leftSlot: <Icon className="text-gray-600" size="sm" icon="refresh" />,
+                leftSlot: <Icon className="text-fg-subtler" size="sm" icon="refresh" />,
               },
             ]}
           >
             <Button
               size="sm"
               variant="border"
-              rightSlot={<Icon className="text-gray-600" size="sm" icon="chevronDown" />}
+              rightSlot={<Icon className="text-fg-subtler" size="sm" icon="chevronDown" />}
               disabled={isStreaming || services == null}
               className={classNames(
                 'font-mono text-xs min-w-[5rem] !ring-0',
@@ -221,14 +221,14 @@ export function GrpcConnectionSetupPane({
               {isStreaming && (
                 <>
                   <IconButton
-                    className="border border-highlight"
+                    className="border border-background-highlight-secondary"
                     size="sm"
                     title="Cancel"
                     onClick={onCancel}
                     icon="x"
                   />
                   <IconButton
-                    className="border border-highlight"
+                    className="border border-background-highlight-secondary"
                     size="sm"
                     title="Commit"
                     onClick={onCommit}
@@ -237,7 +237,7 @@ export function GrpcConnectionSetupPane({
                 </>
               )}
               <IconButton
-                className="border border-highlight"
+                className="border border-background-highlight-secondary"
                 size="sm"
                 title={isStreaming ? 'Connect' : 'Send'}
                 hotkeyAction="grpc_request.send"
@@ -247,7 +247,7 @@ export function GrpcConnectionSetupPane({
             </>
           ) : (
             <IconButton
-              className="border border-highlight"
+              className="border border-background-highlight-secondary"
               size="sm"
               title={methodType === 'unary' ? 'Send' : 'Connect'}
               hotkeyAction="grpc_request.send"
@@ -275,7 +275,6 @@ export function GrpcConnectionSetupPane({
           <GrpcEditor
             onChange={handleChangeMessage}
             services={services}
-            className="bg-gray-50"
             reflectionError={reflectionError}
             reflectionLoading={reflectionLoading}
             request={activeRequest}

src-web/components/GrpcEditor.tsx

@@ -133,12 +133,12 @@ export function GrpcEditor({
           size="xs"
           color={
             reflectionLoading
-              ? 'gray'
-              : reflectionUnavailable
               ? 'secondary'
+              : reflectionUnavailable
+              ? 'info'
               : reflectionError
               ? 'danger'
-              : 'gray'
+              : 'secondary'
           }
           isLoading={reflectionLoading}
           onClick={() => {

src-web/components/GrpcProtoSelection.tsx

@@ -60,7 +60,7 @@ export function GrpcProtoSelection({ requestId }: Props) {
         <Button
           isLoading={grpc.reflect.isFetching}
           disabled={grpc.reflect.isFetching}
-          color="gray"
+          color="secondary"
           size="sm"
           onClick={() => grpc.reflect.refetch()}
         >
@@ -106,7 +106,7 @@ export function GrpcProtoSelection({ requestId }: Props) {
           <table className="w-full divide-y">
             <thead>
               <tr>
-                <th className="text-gray-600">
+                <th className="text-fg-subtler">
                   <span className="font-mono text-sm">*.proto</span> Files
                 </th>
                 <th></th>

src-web/components/ImportCurlButton.tsx

@@ -1,9 +1,9 @@
+import { motion } from 'framer-motion';
 import React, { useState } from 'react';
-import { Button } from './core/Button';
 import { useClipboardText } from '../hooks/useClipboardText';
 import { useImportCurl } from '../hooks/useImportCurl';
+import { Button } from './core/Button';
 import { Icon } from './core/Icon';
-import { motion } from 'framer-motion';
 
 export function ImportCurlButton() {
   const [clipboardText] = useClipboardText();
@@ -23,7 +23,7 @@ export function ImportCurlButton() {
       <Button
         size="xs"
         variant="border"
-        color="secondary"
+        color="primary"
         leftSlot={<Icon icon="paste" size="sm" />}
         isLoading={isLoading}
         onClick={() => {

src-web/components/Overlay.tsx

@@ -43,10 +43,10 @@ export function Overlay({
               onClick={onClose}
               className={classNames(
                 'absolute inset-0',
-                variant === 'default' && 'bg-gray-600/30 dark:bg-black/30 backdrop-blur-sm',
+                variant === 'default' && 'bg-background-backdrop backdrop-blur-sm',
               )}
             />
-            <div className="bg-red-100">{children}</div>
+            {children}
           </motion.div>
         </FocusTrap>
       )}

src-web/components/RecentConnectionsDropdown.tsx

@@ -11,12 +11,17 @@ import { HStack } from './core/Stacks';
 interface Props {
   connections: GrpcConnection[];
   activeConnection: GrpcConnection;
-  onPinned: (r: GrpcConnection) => void;
+  onPinnedConnectionId: (id: string) => void;
 }
 
-export function RecentConnectionsDropdown({ activeConnection, connections, onPinned }: Props) {
+export function RecentConnectionsDropdown({
+  activeConnection,
+  connections,
+  onPinnedConnectionId,
+}: Props) {
   const deleteConnection = useDeleteGrpcConnection(activeConnection?.id ?? null);
   const deleteAllConnections = useDeleteGrpcConnections(activeConnection?.requestId);
+  const latestConnectionId = connections[0]?.id ?? 'n/a';
 
   return (
     <Dropdown
@@ -44,13 +49,13 @@ export function RecentConnectionsDropdown({ activeConnection, connections, onPin
             </HStack>
           ),
           leftSlot: activeConnection?.id === c.id ? <Icon icon="check" /> : <Icon icon="empty" />,
-          onSelect: () => onPinned(c),
+          onSelect: () => onPinnedConnectionId(c.id),
         })),
       ]}
     >
       <IconButton
         title="Show connection history"
-        icon="chevronDown"
+        icon={activeConnection?.id === latestConnectionId ? 'chevronDown' : 'pin'}
         className="ml-auto"
         size="sm"
         iconSize="md"

src-web/components/RecentRequestsDropdown.tsx

@@ -86,8 +86,8 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
         hotkeyAction="request_switcher.toggle"
         className={classNames(
           className,
-          'text-gray-800 text-sm truncate pointer-events-auto',
-          activeRequest === null && 'text-opacity-disabled italic',
+          'text-fg text-sm truncate pointer-events-auto',
+          activeRequest === null && 'text-fg-subtler italic',
         )}
       >
         {fallbackRequestName(activeRequest)}

src-web/components/RecentResponsesDropdown.tsx

@@ -1,26 +1,30 @@
+import classNames from 'classnames';
 import { useDeleteHttpResponse } from '../hooks/useDeleteHttpResponse';
 import { useDeleteHttpResponses } from '../hooks/useDeleteHttpResponses';
 import type { HttpResponse } from '../lib/models';
-import { Dropdown } from './core/Dropdown';
 import { pluralize } from '../lib/pluralize';
-import { HStack } from './core/Stacks';
-import { StatusTag } from './core/StatusTag';
+import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
+import { HStack } from './core/Stacks';
+import { StatusTag } from './core/StatusTag';
 
 interface Props {
   responses: HttpResponse[];
   activeResponse: HttpResponse;
-  onPinnedResponse: (r: HttpResponse) => void;
+  onPinnedResponseId: (id: string) => void;
+  className?: string;
 }
 
 export const RecentResponsesDropdown = function ResponsePane({
   activeResponse,
   responses,
-  onPinnedResponse,
+  onPinnedResponseId,
+  className,
 }: Props) {
   const deleteResponse = useDeleteHttpResponse(activeResponse?.id ?? null);
   const deleteAllResponses = useDeleteHttpResponses(activeResponse?.requestId);
+  const latestResponseId = responses[0]?.id ?? 'n/a';
 
   return (
     <Dropdown
@@ -44,18 +48,19 @@ export const RecentResponsesDropdown = function ResponsePane({
           label: (
             <HStack space={2} alignItems="center">
               <StatusTag className="text-xs" response={r} />
-              <span>&bull;</span> <span className="font-mono text-xs">{r.elapsed}ms</span>
+              <span>&rarr;</span>{' '}
+              <span className="font-mono text-xs">{r.elapsed >= 0 ? `${r.elapsed}ms` : 'n/a'}</span>
             </HStack>
           ),
           leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <Icon icon="empty" />,
-          onSelect: () => onPinnedResponse(r),
+          onSelect: () => onPinnedResponseId(r.id),
         })),
       ]}
     >
       <IconButton
         title="Show response history"
-        icon="chevronDown"
-        className="ml-auto"
+        icon={activeResponse?.id === latestResponseId ? 'chevronDown' : 'pin'}
+        className={classNames(className, 'm-0.5')}
         size="sm"
         iconSize="md"
       />

src-web/components/RequestMethodDropdown.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { memo, useMemo } from 'react';
 import { usePrompt } from '../hooks/usePrompt';
 import { Button } from './core/Button';
@@ -57,7 +58,7 @@ export const RequestMethodDropdown = memo(function RequestMethodDropdown({
 
   return (
     <RadioDropdown value={method} items={radioItems} extraItems={extraItems} onChange={onChange}>
-      <Button size="xs" className={className}>
+      <Button size="xs" className={classNames(className, 'text-fg-subtle hover:text-fg')}>
         {method.toUpperCase()}
       </Button>
     </RadioDropdown>

src-web/components/RequestPane.tsx

@@ -3,10 +3,12 @@ import type { CSSProperties } from 'react';
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { createGlobalState } from 'react-use';
 import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse';
+import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders';
+import { useImportCurl } from '../hooks/useImportCurl';
 import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
+import { useRequests } from '../hooks/useRequests';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
-import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders';
 import { useSendRequest } from '../hooks/useSendRequest';
 import { useUpdateHttpRequest } from '../hooks/useUpdateHttpRequest';
 import { tryFormatJson } from '../lib/formatters';
@@ -29,6 +31,7 @@ import { BearerAuth } from './BearerAuth';
 import { BinaryFileEditor } from './BinaryFileEditor';
 import { CountBadge } from './core/CountBadge';
 import { Editor } from './core/Editor';
+import type { GenericCompletionOption } from './core/Editor/genericCompletion';
 import type { TabItem } from './core/Tabs/Tabs';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
 import { EmptyStateText } from './EmptyStateText';
@@ -38,9 +41,6 @@ import { GraphQLEditor } from './GraphQLEditor';
 import { HeadersEditor } from './HeadersEditor';
 import { UrlBar } from './UrlBar';
 import { UrlParametersEditor } from './UrlParameterEditor';
-import { useImportCurl } from '../hooks/useImportCurl';
-import { useRequests } from '../hooks/useRequests';
-import type { GenericCompletionOption } from './core/Editor/genericCompletion';
 
 interface Props {
   style: CSSProperties;
@@ -317,7 +317,6 @@ export const RequestPane = memo(function RequestPane({
                   useTemplating
                   autocompleteVariables
                   placeholder="..."
-                  className="!bg-gray-50"
                   heightMode={fullHeight ? 'full' : 'auto'}
                   defaultValue={`${activeRequest.body?.text ?? ''}`}
                   contentType="application/json"
@@ -330,7 +329,6 @@ export const RequestPane = memo(function RequestPane({
                   useTemplating
                   autocompleteVariables
                   placeholder="..."
-                  className="!bg-gray-50"
                   heightMode={fullHeight ? 'full' : 'auto'}
                   defaultValue={`${activeRequest.body?.text ?? ''}`}
                   contentType="text/xml"
@@ -340,7 +338,6 @@ export const RequestPane = memo(function RequestPane({
                 <GraphQLEditor
                   forceUpdateKey={forceUpdateKey}
                   baseRequest={activeRequest}
-                  className="!bg-gray-50"
                   defaultValue={`${activeRequest.body?.text ?? ''}`}
                   onChange={handleBodyTextChange}
                 />
@@ -370,7 +367,6 @@ export const RequestPane = memo(function RequestPane({
                   useTemplating
                   autocompleteVariables
                   placeholder="..."
-                  className="!bg-gray-50"
                   heightMode={fullHeight ? 'full' : 'auto'}
                   defaultValue={`${activeRequest.body?.text ?? ''}`}
                   onChange={handleBodyTextChange}

src-web/components/ResizeHandle.tsx

@@ -32,7 +32,7 @@ export function ResizeHandle({
       className={classNames(
         className,
         'group z-10 flex',
-        // 'bg-blue-100/10', // For debugging
+        // 'bg-fg-info', // For debugging
         vertical ? 'w-full h-3 cursor-row-resize' : 'h-full w-3 cursor-col-resize',
         justify === 'center' && 'justify-center',
         justify === 'end' && 'justify-end',

src-web/components/ResponsePane.tsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import type { CSSProperties } from 'react';
 import { memo, useMemo } from 'react';
 import { createGlobalState } from 'react-use';
-import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders';
+import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useResponseViewMode } from '../hooks/useResponseViewMode';
 import type { HttpRequest } from '../lib/models';
 import { isResponseLoading } from '../lib/models';
@@ -34,7 +34,7 @@ interface Props {
 const useActiveTab = createGlobalState<string>('body');
 
 export const ResponsePane = memo(function ResponsePane({ style, className, activeRequest }: Props) {
-  const { activeResponse, setPinnedResponse, responses } = usePinnedHttpResponse(activeRequest);
+  const { activeResponse, setPinnedResponseId, responses } = usePinnedHttpResponse(activeRequest);
   const [viewMode, setViewMode] = useResponseViewMode(activeResponse?.requestId);
   const [activeTab, setActiveTab] = useActiveTab();
   const contentType = useContentTypeFromHeaders(activeResponse?.headers ?? null);
@@ -73,9 +73,10 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
       style={style}
       className={classNames(
         className,
+        'x-theme-responsePane',
         'max-h-full h-full',
-        'bg-gray-50 dark:bg-gray-100 rounded-md border border-highlight',
-        'shadow shadow-gray-100 dark:shadow-gray-0 relative',
+        'bg-background rounded-md border border-background-highlight',
+        'shadow relative',
       )}
     >
       {activeResponse == null ? (
@@ -91,39 +92,41 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
           <HStack
             alignItems="center"
             className={classNames(
-              'text-gray-700 text-sm w-full flex-shrink-0',
+              'text-fg-subtle text-sm w-full flex-shrink-0',
               // Remove a bit of space because the tabs have lots too
               '-mb-1.5',
             )}
           >
             {activeResponse && (
-              <HStack alignItems="center" className="w-full">
-                <div className="whitespace-nowrap px-3">
-                  <HStack space={2}>
-                    <StatusTag showReason response={activeResponse} />
-                    {activeResponse.elapsed > 0 && (
-                      <>
-                        <span>&bull;</span>
-                        <DurationTag
-                          headers={activeResponse.elapsedHeaders}
-                          total={activeResponse.elapsed}
-                        />
-                      </>
-                    )}
-                    {!!activeResponse.contentLength && (
-                      <>
-                        <span>&bull;</span>
-                        <SizeTag contentLength={activeResponse.contentLength} />
-                      </>
-                    )}
-                  </HStack>
-                </div>
+              <HStack
+                space={2}
+                alignItems="center"
+                className="whitespace-nowrap w-full pl-3 overflow-x-auto font-mono text-sm"
+              >
+                <StatusTag showReason response={activeResponse} />
+                {activeResponse.elapsed > 0 && (
+                  <>
+                    <span>&bull;</span>
+                    <DurationTag
+                      headers={activeResponse.elapsedHeaders}
+                      total={activeResponse.elapsed}
+                    />
+                  </>
+                )}
+                {!!activeResponse.contentLength && (
+                  <>
+                    <span>&bull;</span>
+                    <SizeTag contentLength={activeResponse.contentLength} />
+                  </>
+                )}
 
-                <RecentResponsesDropdown
-                  responses={responses}
-                  activeResponse={activeResponse}
-                  onPinnedResponse={setPinnedResponse}
-                />
+                <div className="ml-auto">
+                  <RecentResponsesDropdown
+                    responses={responses}
+                    activeResponse={activeResponse}
+                    onPinnedResponseId={setPinnedResponseId}
+                  />
+                </div>
               </HStack>
             )}
           </HStack>
@@ -138,7 +141,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
               onChangeValue={setActiveTab}
               label="Response"
               tabs={tabs}
-              className="ml-3 mr-1"
+              className="ml-3 mr-3 mb-3"
               tabListClassName="mt-1.5"
             >
               <TabContent value="headers">
@@ -146,13 +149,13 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
               </TabContent>
               <TabContent value="body">
                 {!activeResponse.contentLength ? (
-                  <EmptyStateText>Empty Body</EmptyStateText>
+                  <div className="pb-2 h-full">
+                    <EmptyStateText>Empty Body</EmptyStateText>
+                  </div>
                 ) : contentType?.startsWith('image') ? (
                   <ImageViewer className="pb-2" response={activeResponse} />
                 ) : activeResponse.contentLength > 2 * 1000 * 1000 ? (
-                  <div className="text-sm italic text-gray-500">
-                    Cannot preview text responses larger than 2MB
-                  </div>
+                  <EmptyStateText>Cannot preview text responses larger than 2MB</EmptyStateText>
                 ) : viewMode === 'pretty' && contentType?.includes('html') ? (
                   <WebPageViewer response={activeResponse} />
                 ) : contentType?.match(/csv|tab-separated/) ? (

src-web/components/RouteError.tsx

@@ -26,7 +26,7 @@ export default function RouteError() {
           >
             Go Home
           </Button>
-          <Button color="secondary" onClick={() => window.location.reload()}>
+          <Button color="info" onClick={() => window.location.reload()}>
             Refresh
           </Button>
         </VStack>

src-web/components/SettingsDialog.tsx

@@ -90,7 +90,7 @@ export const SettingsDialog = () => {
 
       <Heading size={2}>
         Workspace{' '}
-        <div className="inline-block ml-1 bg-gray-500 dark:bg-gray-300 px-2 py-0.5 text-sm rounded text-white dark:text-gray-900">
+        <div className="inline-block ml-1 bg-background-highlight px-2 py-0.5 text-sm rounded text-fg">
           {workspace.name}
         </div>
       </Heading>

src-web/components/Sidebar.tsx

@@ -9,6 +9,7 @@ import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useAppRoutes } from '../hooks/useAppRoutes';
+import { useCopyAsCurl } from '../hooks/useCopyAsCurl';
 import { useCreateDropdownItems } from '../hooks/useCreateDropdownItems';
 import { useDeleteFolder } from '../hooks/useDeleteFolder';
 import { useDeleteRequest } from '../hooks/useDeleteRequest';
@@ -40,7 +41,6 @@ import { InlineCode } from './core/InlineCode';
 import { VStack } from './core/Stacks';
 import { StatusTag } from './core/StatusTag';
 import { DropMarker } from './DropMarker';
-import { useCopyAsCurl } from '../hooks/useCopyAsCurl';
 
 interface Props {
   className?: string;
@@ -468,6 +468,47 @@ export function Sidebar({ className }: Props) {
         handleEnd={handleEnd}
         handleDragStart={handleDragStart}
       />
+      {/*<div className="p-2 flex flex-col gap-1">*/}
+      {/*  <div className="flex flex-wrap gap-1">*/}
+      {/*    <Button color="primary">Primary</Button>*/}
+      {/*    <Button color="secondary">Secondary</Button>*/}
+      {/*    <Button color="info">Info</Button>*/}
+      {/*    <Button color="success">Success</Button>*/}
+      {/*    <Button color="warning">Warning</Button>*/}
+      {/*    <Button color="danger">Danger</Button>*/}
+      {/*    <Button color="default">Default</Button>*/}
+      {/*  </div>*/}
+      {/*  <div className="flex flex-wrap gap-1">*/}
+      {/*    <Button variant="border" color="primary">*/}
+      {/*      Primary*/}
+      {/*    </Button>*/}
+      {/*    <Button variant="border" color="secondary">*/}
+      {/*      Secondary*/}
+      {/*    </Button>*/}
+      {/*    <Button variant="border" color="info">*/}
+      {/*      Info*/}
+      {/*    </Button>*/}
+      {/*    <Button variant="border" color="success">*/}
+      {/*      Success*/}
+      {/*    </Button>*/}
+      {/*    <Button variant="border" color="warning">*/}
+      {/*      Warning*/}
+      {/*    </Button>*/}
+      {/*    <Button variant="border" color="danger">*/}
+      {/*      Danger*/}
+      {/*    </Button>*/}
+      {/*    <Button variant="border" color="default">*/}
+      {/*      Default*/}
+      {/*    </Button>*/}
+      {/*  </div>*/}
+      {/*  <div className="flex flex-col gap-1">*/}
+      {/*    <Banner color="primary">Primary banner</Banner>*/}
+      {/*    <Banner color="secondary">Secondary banner</Banner>*/}
+      {/*    <Banner color="danger">Danger banner</Banner>*/}
+      {/*    <Banner color="warning">Warning banner</Banner>*/}
+      {/*    <Banner color="success">Success banner</Banner>*/}
+      {/*  </div>*/}
+      {/*</div>*/}
     </aside>
   );
 }
@@ -510,60 +551,66 @@ function SidebarItems({
       aria-orientation="vertical"
       dir="ltr"
       className={classNames(
-        tree.depth > 0 && 'border-l border-highlight',
+        tree.depth > 0 && 'border-l border-background-highlight-secondary',
         tree.depth === 0 && 'ml-0',
         tree.depth >= 1 && 'ml-[1.2em]',
       )}
     >
-      {tree.children.map((child, i) => (
-        <Fragment key={child.item.id}>
-          {hoveredIndex === i && hoveredTree?.item.id === tree.item.id && <DropMarker />}
-          <DraggableSidebarItem
-            draggable
-            selected={selectedId === child.item.id}
-            itemId={child.item.id}
-            itemName={child.item.name}
-            itemFallbackName={
-              child.item.model === 'http_request' || child.item.model === 'grpc_request'
-                ? fallbackRequestName(child.item)
-                : 'New Folder'
-            }
-            itemModel={child.item.model}
-            itemPrefix={
-              (child.item.model === 'http_request' || child.item.model === 'grpc_request') && (
-                <HttpMethodTag request={child.item} />
-              )
-            }
-            onMove={handleMove}
-            onEnd={handleEnd}
-            onSelect={onSelect}
-            onDragStart={handleDragStart}
-            useProminentStyles={focused}
-            isCollapsed={isCollapsed}
-            child={child}
-          >
-            {child.item.model === 'folder' &&
-              !isCollapsed(child.item.id) &&
-              draggingId !== child.item.id && (
-                <SidebarItems
-                  treeParentMap={treeParentMap}
-                  tree={child}
-                  isCollapsed={isCollapsed}
-                  draggingId={draggingId}
-                  hoveredTree={hoveredTree}
-                  hoveredIndex={hoveredIndex}
-                  focused={focused}
-                  selectedId={selectedId}
-                  selectedTree={selectedTree}
-                  onSelect={onSelect}
-                  handleMove={handleMove}
-                  handleEnd={handleEnd}
-                  handleDragStart={handleDragStart}
-                />
-              )}
-          </DraggableSidebarItem>
-        </Fragment>
-      ))}
+      {tree.children.map((child, i) => {
+        const selected = selectedId === child.item.id;
+        return (
+          <Fragment key={child.item.id}>
+            {hoveredIndex === i && hoveredTree?.item.id === tree.item.id && <DropMarker />}
+            <DraggableSidebarItem
+              draggable
+              selected={selected}
+              itemId={child.item.id}
+              itemName={child.item.name}
+              itemFallbackName={
+                child.item.model === 'http_request' || child.item.model === 'grpc_request'
+                  ? fallbackRequestName(child.item)
+                  : 'New Folder'
+              }
+              itemModel={child.item.model}
+              itemPrefix={
+                (child.item.model === 'http_request' || child.item.model === 'grpc_request') && (
+                  <HttpMethodTag
+                    request={child.item}
+                    className={classNames(!selected && 'text-fg-subtler')}
+                  />
+                )
+              }
+              onMove={handleMove}
+              onEnd={handleEnd}
+              onSelect={onSelect}
+              onDragStart={handleDragStart}
+              useProminentStyles={focused}
+              isCollapsed={isCollapsed}
+              child={child}
+            >
+              {child.item.model === 'folder' &&
+                !isCollapsed(child.item.id) &&
+                draggingId !== child.item.id && (
+                  <SidebarItems
+                    treeParentMap={treeParentMap}
+                    tree={child}
+                    isCollapsed={isCollapsed}
+                    draggingId={draggingId}
+                    hoveredTree={hoveredTree}
+                    hoveredIndex={hoveredIndex}
+                    focused={focused}
+                    selectedId={selectedId}
+                    selectedTree={selectedTree}
+                    onSelect={onSelect}
+                    handleMove={handleMove}
+                    handleEnd={handleEnd}
+                    handleDragStart={handleDragStart}
+                  />
+                )}
+            </DraggableSidebarItem>
+          </Fragment>
+        );
+      })}
       {hoveredIndex === tree.children.length && hoveredTree?.item.id === tree.item.id && (
         <DropMarker />
       )}
@@ -802,12 +849,12 @@ const SidebarItem = forwardRef(function SidebarItem(
           data-active={isActive}
           data-selected={selected}
           className={classNames(
-            'w-full flex gap-1.5 items-center text-sm h-xs px-1.5 rounded-md transition-colors',
+            'w-full flex gap-1.5 items-center text-sm h-xs px-1.5 rounded-md',
             editing && 'ring-1 focus-within:ring-focus',
-            isActive && 'bg-highlightSecondary text-gray-800',
+            isActive && 'bg-background-highlight-secondary text-fg',
             !isActive &&
-              'text-gray-600 group-hover/item:text-gray-800 active:bg-highlightSecondary',
-            selected && useProminentStyles && '!bg-violet-400/20',
+              'text-fg-subtle group-hover/item:text-fg active:bg-background-highlight-secondary',
+            selected && useProminentStyles && '!bg-background-active',
           )}
         >
           {itemModel === 'folder' && (
@@ -815,7 +862,8 @@ const SidebarItem = forwardRef(function SidebarItem(
               size="sm"
               icon="chevronRight"
               className={classNames(
-                'transition-transform opacity-50',
+                'text-fg-subtler',
+                'transition-transform',
                 !isCollapsed(itemId) && 'transform rotate-90',
               )}
             />
@@ -837,13 +885,13 @@ const SidebarItem = forwardRef(function SidebarItem(
           {latestGrpcConnection ? (
             <div className="ml-auto">
               {latestGrpcConnection.elapsed === 0 && (
-                <Icon spin size="sm" icon="update" className="text-gray-400" />
+                <Icon spin size="sm" icon="update" className="text-fg-subtler" />
               )}
             </div>
           ) : latestHttpResponse ? (
             <div className="ml-auto">
               {isResponseLoading(latestHttpResponse) ? (
-                <Icon spin size="sm" icon="update" className="text-gray-400" />
+                <Icon spin size="sm" icon="refresh" className="text-fg-subtler" />
               ) : (
                 <StatusTag className="text-2xs dark:opacity-80" response={latestHttpResponse} />
               )}

src-web/components/UrlBar.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import type { EditorView } from 'codemirror';
 import type { FormEvent, ReactNode } from 'react';
 import { memo, useRef, useState } from 'react';
@@ -58,7 +59,7 @@ export const UrlBar = memo(function UrlBar({
   };
 
   return (
-    <form onSubmit={handleSubmit} className={className}>
+    <form onSubmit={handleSubmit} className={classNames(className)}>
       <Input
         autocompleteVariables
         ref={inputRef}
@@ -75,7 +76,7 @@ export const UrlBar = memo(function UrlBar({
         onFocus={() => setIsFocused(true)}
         onBlur={() => setIsFocused(false)}
         onPaste={onPaste}
-        containerClassName="shadow shadow-gray-100 dark:shadow-gray-50"
+        containerClassName="shadow bg-background border"
         onChange={onUrlChange}
         defaultValue={url}
         placeholder={placeholder}

src-web/components/Workspace.tsx

@@ -143,7 +143,8 @@ export default function Workspace() {
             initial={{ opacity: 0, x: -20 }}
             animate={{ opacity: 1, x: 0 }}
             className={classNames(
-              'absolute top-0 left-0 bottom-0 bg-gray-100 border-r border-highlight w-[14rem]',
+              'x-theme-sidebar',
+              'absolute top-0 left-0 bottom-0 bg-background border-r border-background-highlight w-[14rem]',
               'grid grid-rows-[auto_1fr]',
             )}
           >
@@ -155,8 +156,11 @@ export default function Workspace() {
         </Overlay>
       ) : (
         <>
-          <div style={side} className={classNames('overflow-hidden bg-gray-100')}>
-            <Sidebar className="border-r border-highlight" />
+          <div
+            style={side}
+            className={classNames('x-theme-sidebar', 'overflow-hidden bg-background')}
+          >
+            <Sidebar className="border-r border-background-highlight" />
           </div>
           <ResizeHandle
             className="-translate-x-3"
@@ -168,14 +172,14 @@ export default function Workspace() {
           />
         </>
       )}
-      <HeaderSize data-tauri-drag-region style={head}>
+      <HeaderSize data-tauri-drag-region className="x-theme-appHeader bg-background" style={head}>
         <WorkspaceHeader className="pointer-events-none" />
       </HeaderSize>
       {activeWorkspace == null ? (
         <div className="m-auto">
           <Banner color="warning" className="max-w-[30rem]">
             The active workspace{' '}
-            <InlineCode className="text-orange-800">{activeWorkspaceId}</InlineCode> was not found.
+            <InlineCode className="text-fg-warning">{activeWorkspaceId}</InlineCode> was not found.
             Select a workspace from the header menu or report this bug to <FeedbackLink />
           </Banner>
         </div>
@@ -214,10 +218,11 @@ function HeaderSize({ className, style, ...props }: HeaderSizeProps) {
   const stoplightsVisible = platform?.osType === 'macos' && !fullscreen;
   return (
     <div
+      data-tauri-drag-region
       style={style}
       className={classNames(
         className,
-        'h-md pt-[1px] w-full border-b min-w-0',
+        'h-md pt-[1px] w-full border-b border-background-highlight min-w-0',
         stoplightsVisible ? 'pl-20 pr-1' : 'pl-1',
       )}
     >

src-web/components/WorkspaceActionsDropdown.tsx

@@ -60,7 +60,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
               >
                 <Button
                   className="focus"
-                  color="gray"
+                  color="primary"
                   onClick={async () => {
                     hide();
                     const environmentId = (await getRecentEnvironments(w.id))[0];
@@ -76,7 +76,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
                 </Button>
                 <Button
                   className="focus"
-                  color="gray"
+                  color="secondary"
                   rightSlot={<Icon icon="externalLink" />}
                   onClick={async () => {
                     hide();
@@ -169,7 +169,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
         size="sm"
         className={classNames(
           className,
-          'text-gray-800 !px-2 truncate',
+          'text-fg !px-2 truncate',
           activeWorkspace === null && 'italic opacity-disabled',
         )}
         {...buttonProps}

src-web/components/WorkspaceHeader.tsx

@@ -7,11 +7,11 @@ import { Button } from './core/Button';
 import { Icon } from './core/Icon';
 import { HStack } from './core/Stacks';
 import { EnvironmentActionsDropdown } from './EnvironmentActionsDropdown';
+import { ImportCurlButton } from './ImportCurlButton';
 import { RecentRequestsDropdown } from './RecentRequestsDropdown';
 import { SettingsDropdown } from './SettingsDropdown';
 import { SidebarActions } from './SidebarActions';
 import { WorkspaceActionsDropdown } from './WorkspaceActionsDropdown';
-import { ImportCurlButton } from './ImportCurlButton';
 
 interface Props {
   className?: string;
@@ -33,7 +33,7 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
         <CookieDropdown />
         <HStack alignItems="center">
           <WorkspaceActionsDropdown />
-          <Icon icon="chevronRight" className="text-gray-900 text-opacity-disabled" />
+          <Icon icon="chevronRight" className="text-fg-subtle" />
           <EnvironmentActionsDropdown className="w-auto pointer-events-auto" />
         </HStack>
       </HStack>
@@ -46,7 +46,8 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
         {(osInfo?.osType === 'linux' || osInfo?.osType === 'windows') && (
           <HStack className="ml-4" alignItems="center">
             <Button
-              className="px-4 !text-gray-600 rounded-none"
+              className="px-4 text-fg-subtle hocus:text-fg hocus:bg-background-highlight-secondary rounded-none"
+              color="custom"
               onClick={() => getCurrent().minimize()}
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
@@ -54,7 +55,8 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
               </svg>
             </Button>
             <Button
-              className="px-4 !text-gray-600 rounded-none"
+              className="px-4 text-fg-subtle hocus:text-fg hocus:bg-background-highlight rounded-none"
+              color="custom"
               onClick={async () => {
                 const w = getCurrent();
                 await w.toggleMaximize();
@@ -76,7 +78,7 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
             </Button>
             <Button
               color="custom"
-              className="px-4 text-gray-600 rounded-none hocus:bg-red-200 hocus:text-gray-800"
+              className="px-4 text-fg-subtle rounded-none hocus:bg-fg-danger hocus:text-fg"
               onClick={() => getCurrent().close()}
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">

src-web/components/core/Banner.tsx

@@ -4,19 +4,18 @@ import type { ReactNode } from 'react';
 interface Props {
   children: ReactNode;
   className?: string;
-  color?: 'danger' | 'warning' | 'success' | 'gray';
+  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
 }
-export function Banner({ children, className, color = 'gray' }: Props) {
+
+export function Banner({ children, className, color = 'secondary' }: Props) {
   return (
     <div>
       <div
         className={classNames(
           className,
+          `x-theme-banner--${color}`,
           'border border-dashed italic px-3 py-2 rounded select-auto cursor-text',
-          color === 'gray' && 'border-gray-500/60 bg-gray-300/10 text-gray-800',
-          color === 'warning' && 'border-orange-500/60 bg-orange-300/10 text-orange-800',
-          color === 'danger' && 'border-red-500/60 bg-red-300/10 text-red-800',
-          color === 'success' && 'border-violet-500/60 bg-violet-300/10 text-violet-800',
+          'border-background-highlight bg-background-highlight-secondary text-fg',
         )}
       >
         {children}

src-web/components/core/Button.tsx

@@ -7,7 +7,15 @@ import { Icon } from './Icon';
 
 export type ButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'color'> & {
   innerClassName?: string;
-  color?: 'custom' | 'default' | 'gray' | 'primary' | 'secondary' | 'warning' | 'danger';
+  color?:
+    | 'custom'
+    | 'default'
+    | 'secondary'
+    | 'primary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger';
   variant?: 'border' | 'solid';
   isLoading?: boolean;
   size?: 'xs' | 'sm' | 'md';
@@ -48,6 +56,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
 
   const classes = classNames(
     className,
+    'x-theme-button',
+    `x-theme-button--${variant}`,
+    `x-theme-button--${variant}--${color}`,
+    'text-fg',
     'max-w-full min-w-0', // Help with truncation
     'hocus:opacity-100', // Force opacity for certain hover effects
     'whitespace-nowrap outline-none',
@@ -59,46 +71,26 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     size === 'md' && 'h-md px-3',
     size === 'sm' && 'h-sm px-2.5 text-sm',
     size === 'xs' && 'h-xs px-2 text-sm',
+
     // Solids
+    variant === 'solid' &&
+      color !== 'custom' &&
+      color !== 'default' &&
+      'bg-background enabled:hocus:bg-background-highlight ring-background-highlight-secondary',
     variant === 'solid' && color === 'custom' && 'ring-blue-400',
     variant === 'solid' &&
       color === 'default' &&
-      'text-gray-700 enabled:hocus:bg-gray-700/10 enabled:hocus:text-gray-800 ring-blue-400',
-    variant === 'solid' &&
-      color === 'gray' &&
-      'text-gray-800 bg-gray-200/70 enabled:hocus:bg-gray-200 ring-blue-400',
-    variant === 'solid' &&
-      color === 'primary' &&
-      'bg-blue-400 text-white ring-blue-700 enabled:hocus:bg-blue-500',
-    variant === 'solid' &&
-      color === 'secondary' &&
-      'bg-violet-400 text-white ring-violet-700 enabled:hocus:bg-violet-500',
-    variant === 'solid' &&
-      color === 'warning' &&
-      'bg-orange-400 text-white ring-orange-700 enabled:hocus:bg-orange-500',
-    variant === 'solid' &&
-      color === 'danger' &&
-      'bg-red-400 text-white ring-red-700 enabled:hocus:bg-red-500',
+      'enabled:hocus:bg-background-highlight ring-fg-info',
+
     // Borders
     variant === 'border' && 'border',
+    variant === 'border' &&
+      color !== 'custom' &&
+      color !== 'default' &&
+      'border-fg-subtler text-fg-subtle enabled:hocus:border-fg-subtle enabled:hocus:bg-background-highlight enabled:hocus:text-fg ring-fg-subtler',
     variant === 'border' &&
       color === 'default' &&
-      'border-highlight text-gray-700 enabled:hocus:border-focus enabled:hocus:text-gray-800 ring-blue-500/50',
-    variant === 'border' &&
-      color === 'gray' &&
-      'border-gray-500/70 text-gray-700 enabled:hocus:bg-gray-500/20 enabled:hocus:text-gray-800 ring-blue-500/50',
-    variant === 'border' &&
-      color === 'primary' &&
-      'border-blue-500/70 text-blue-700 enabled:hocus:border-blue-500 ring-blue-500/50',
-    variant === 'border' &&
-      color === 'secondary' &&
-      'border-violet-500/70 text-violet-700 enabled:hocus:border-violet-500 ring-violet-500/50',
-    variant === 'border' &&
-      color === 'warning' &&
-      'border-orange-500/70 text-orange-700 enabled:hocus:border-orange-500 ring-orange-500/50',
-    variant === 'border' &&
-      color === 'danger' &&
-      'border-red-500/70 text-red-700 enabled:hocus:border-red-500 ring-red-500/50',
+      'border-background-highlight enabled:hocus:border-fg-subtler enabled:hocus:bg-background-highlight-secondary',
   );
 
   const buttonRef = useRef<HTMLButtonElement>(null);

src-web/components/core/Checkbox.tsx

@@ -28,14 +28,14 @@ export function Checkbox({
       as="label"
       space={2}
       alignItems="center"
-      className={classNames(className, 'text-gray-900 text-sm', disabled && 'opacity-disabled')}
+      className={classNames(className, 'text-fg text-sm', disabled && 'opacity-disabled')}
     >
       <div className={classNames(inputWrapperClassName, 'relative flex')}>
         <input
           aria-hidden
           className={classNames(
-            'appearance-none w-4 h-4 flex-shrink-0 border border-highlight',
-            'rounded hocus:border-focus hocus:bg-focus/[5%] outline-none ring-0',
+            'appearance-none w-4 h-4 flex-shrink-0 border border-background-highlight',
+            'rounded hocus:border-border-focus hocus:bg-focus/[5%] outline-none ring-0',
           )}
           type="checkbox"
           disabled={disabled}

src-web/components/core/CountBadge.tsx

@@ -12,7 +12,7 @@ export function CountBadge({ count, className }: Props) {
       aria-hidden
       className={classNames(
         className,
-        'opacity-70 border border-highlight text-4xs rounded mb-0.5 px-1 ml-1 h-4 font-mono',
+        'opacity-70 border border-background-highlight-secondary text-4xs rounded mb-0.5 px-1 ml-1 h-4 font-mono',
       )}
     >
       {count}

src-web/components/core/Dialog.tsx

@@ -50,7 +50,7 @@ export function Dialog({
 
   return (
     <Overlay open={open} onClose={onClose} portalName="dialog">
-      <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+      <div className="x-theme-dialog absolute inset-0 flex items-center justify-center pointer-events-none">
         <div
           role="dialog"
           aria-labelledby={titleId}
@@ -63,9 +63,9 @@ export function Dialog({
             className={classNames(
               className,
               'grid grid-rows-[auto_auto_minmax(0,1fr)]',
-              'relative bg-gray-50 pointer-events-auto',
+              'relative bg-background pointer-events-auto',
               'rounded-lg',
-              'dark:border border-highlight shadow shadow-black/10',
+              'border border-background-highlight shadow-lg shadow-[rgba(0,0,0,0.1)]',
               'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-6rem)]',
               size === 'sm' && 'w-[25rem] max-h-[80vh]',
               size === 'md' && 'w-[45rem] max-h-[80vh]',
@@ -83,7 +83,7 @@ export function Dialog({
             )}
 
             {description ? (
-              <p className="px-6 text-gray-700" id={descriptionId}>
+              <p className="px-6 text-fg-subtle" id={descriptionId}>
                 {description}
               </p>
             ) : (

src-web/components/core/Dropdown.tsx

@@ -23,14 +23,14 @@ import React, {
 import { useKey, useWindowSize } from 'react-use';
 import type { HotkeyAction } from '../../hooks/useHotKey';
 import { useHotKey } from '../../hooks/useHotKey';
+import { useStateWithDeps } from '../../hooks/useStateWithDeps';
 import { getNodeText } from '../../lib/getNodeText';
 import { Overlay } from '../Overlay';
 import { Button } from './Button';
 import { HotKey } from './HotKey';
+import { Icon } from './Icon';
 import { Separator } from './Separator';
 import { HStack, VStack } from './Stacks';
-import { Icon } from './Icon';
-import { useStateWithDeps } from '../../hooks/useStateWithDeps';
 
 export type DropdownItemSeparator = {
   type: 'separator';
@@ -413,7 +413,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
       )}
       {isOpen && (
         <Overlay open variant="transparent" portalName="dropdown" zIndex={50}>
-          <div>
+          <div className="x-theme-dialog">
             <div tabIndex={-1} aria-hidden className="fixed inset-0 z-30" onClick={handleClose} />
             <motion.div
               tabIndex={0}
@@ -431,7 +431,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                 <span
                   aria-hidden
                   style={triangleStyles}
-                  className="bg-gray-50 absolute rotate-45 border-gray-200 border-t border-l"
+                  className="bg-background absolute rotate-45 border-background-highlight border-t border-l"
                 />
               )}
               {containerStyles && (
@@ -440,22 +440,24 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                   style={menuStyles}
                   className={classNames(
                     className,
-                    'h-auto bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 py-1.5 border',
-                    'border-gray-200 overflow-auto mb-1 mx-0.5',
+                    'h-auto bg-background rounded-md shadow-lg py-1.5 border',
+                    'border-background-highlight overflow-auto mb-1 mx-0.5',
                   )}
                 >
                   {filter && (
                     <HStack
                       space={2}
                       alignItems="center"
-                      className="pb-0.5 px-1.5 mb-2 text-xs border border-highlight mx-2 rounded font-mono h-2xs"
+                      className="pb-0.5 px-1.5 mb-2 text-xs border border-background-highlight-secondary mx-2 rounded font-mono h-2xs"
                     >
-                      <Icon icon="search" size="xs" className="text-gray-700" />
-                      <div className="text-gray-800">{filter}</div>
+                      <Icon icon="search" size="xs" className="text-fg-subtle" />
+                      <div className="text-fg">{filter}</div>
                     </HStack>
                   )}
                   {filteredItems.length === 0 && (
-                    <span className="text-gray-500 text-sm text-center px-2 py-1">No matches</span>
+                    <span className="text-fg-subtler text-sm text-center px-2 py-1">
+                      No matches
+                    </span>
                   )}
                   {filteredItems.map((item, i) => {
                     if (item.type === 'separator') {
@@ -531,15 +533,17 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
       justify="start"
       leftSlot={item.leftSlot && <div className="pr-2 flex justify-start">{item.leftSlot}</div>}
       rightSlot={rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
+      innerClassName="!text-left"
+      color="custom"
       className={classNames(
         className,
         'h-xs', // More compact
-        'min-w-[8rem] outline-none px-2 mx-1.5 flex text-sm text-gray-700 whitespace-nowrap',
-        'focus:bg-highlight focus:text-gray-800 rounded',
-        item.variant === 'danger' && 'text-red-600',
-        item.variant === 'notify' && 'text-pink-600',
+        'min-w-[8rem] outline-none px-2 mx-1.5 flex text-sm whitespace-nowrap',
+        'focus:bg-background-highlight focus:text-fg rounded',
+        item.variant === 'default' && 'text-fg-subtle',
+        item.variant === 'danger' && 'text-fg-danger',
+        item.variant === 'notify' && 'text-fg-primary',
       )}
-      innerClassName="!text-left"
       {...props}
     >
       <div

src-web/components/core/DurationTag.tsx

@@ -5,7 +5,10 @@ interface Props {
 
 export function DurationTag({ total, headers }: Props) {
   return (
-    <span title={`HEADER: ${formatMillis(headers)}\nTOTAL: ${formatMillis(total)}`}>
+    <span
+      className="font-mono"
+      title={`HEADER: ${formatMillis(headers)}\nTOTAL: ${formatMillis(total)}`}
+    >
       {formatMillis(total)}
     </span>
   );

src-web/components/core/Editor/Editor.css

@@ -5,7 +5,9 @@
     @apply w-full block text-base;
 
     .cm-cursor {
-      @apply border-gray-800 !important;
+      @apply border-fg !important;
+      /* Widen the cursor */
+      @apply border-l-2;
     }
 
     &.cm-focused {
@@ -17,7 +19,7 @@
     }
 
     .cm-line {
-      @apply text-gray-800 pl-1 pr-1.5;
+      @apply text-fg pl-1 pr-1.5;
     }
 
     .cm-placeholder {
@@ -47,7 +49,7 @@
     /* Style gutters */
 
     .cm-gutters {
-      @apply border-0 text-gray-500/50;
+      @apply border-0 text-fg-subtler bg-transparent;
 
       .cm-gutterElement {
         @apply cursor-default;
@@ -55,19 +57,13 @@
     }
 
     .placeholder-widget {
-      @apply text-xs text-violet-700 dark:text-violet-700 px-1 mx-[0.5px] rounded cursor-default dark:shadow;
+      /* Colors */
+      @apply bg-background text-fg-subtle border-background-highlight-secondary;
+      @apply hover:border-background-highlight hover:text-fg hover:bg-background-highlight-secondary;
 
-      /* NOTE: Background and border are translucent so we can see text selection through it */
-      @apply bg-violet-500/20 border border-violet-500/20 border-opacity-40;
-
-      /* Bring above on hover */
-      @apply hover:z-10 relative;
+      @apply border px-1 mx-[0.5px] rounded cursor-default dark:shadow;
 
       -webkit-text-security: none;
-
-      &.placeholder-widget-error {
-        @apply text-red-700 dark:text-red-800 bg-red-300/30 border-red-300/80 border-opacity-40 hover:border-red-300 hover:bg-red-300/40;
-      }
     }
 
     .hyperlink-widget {
@@ -137,7 +133,7 @@
 
 .cm-editor .fold-gutter-icon::after {
   @apply block w-1.5 h-1.5 border-transparent -rotate-45
-    border-l border-b border-l-[currentColor] border-b-[currentColor] content-[''];
+  border-l border-b border-l-[currentColor] border-b-[currentColor] content-[''];
 }
 
 .cm-editor .fold-gutter-icon[data-open] {
@@ -149,12 +145,12 @@
 }
 
 .cm-editor .fold-gutter-icon:hover {
-  @apply text-gray-900 bg-gray-300/50;
+  @apply text-fg bg-background-highlight;
 }
 
 .cm-editor .cm-foldPlaceholder {
-  @apply px-2 border border-gray-400/50 bg-gray-300/50;
-  @apply hover:text-gray-800 hover:border-gray-400;
+  @apply px-2 border border-fg-subtler bg-background-highlight;
+  @apply hover:text-fg hover:border-fg-subtle;
   @apply cursor-default !important;
 }
 
@@ -164,11 +160,13 @@
 
 .cm-wrapper:not(.cm-readonly) .cm-editor {
   &.cm-focused .cm-activeLineGutter {
-    @apply text-gray-600;
+    @apply text-fg-subtle;
   }
+}
 
+.cm-wrapper.cm-readonly .cm-editor {
   .cm-cursor {
-    @apply border-l-2 border-gray-800;
+    @apply border-fg-danger !important;
   }
 }
 
@@ -187,18 +185,18 @@
 }
 
 .cm-tooltip.cm-tooltip-hover {
-  @apply shadow-lg bg-gray-100 rounded text-gray-700 border border-gray-500 z-50 pointer-events-auto text-xs;
+  @apply shadow-lg bg-background rounded text-fg-subtle border border-fg-subtler z-50 pointer-events-auto text-xs;
   @apply px-2 py-1;
 
   a {
-    @apply text-gray-800;
+    @apply text-fg;
 
     &:hover {
       @apply underline;
     }
 
     &::after {
-      @apply text-gray-800 bg-gray-800 h-3 w-3 ml-1;
+      @apply text-fg bg-fg-secondary h-3 w-3 ml-1;
       content: '';
       -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='black' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
       -webkit-mask-size: contain;
@@ -210,7 +208,7 @@
 /* NOTE: Extra selector required to override default styles */
 .cm-tooltip.cm-tooltip-autocomplete,
 .cm-tooltip.cm-completionInfo {
-  @apply shadow-lg bg-gray-100 rounded text-gray-700 border border-gray-300 z-50 pointer-events-auto text-xs;
+  @apply shadow-lg bg-background rounded text-fg-subtle border border-background-highlight z-50 pointer-events-auto text-xs;
 
   .cm-completionIcon {
     @apply italic font-mono;
@@ -286,11 +284,11 @@
     }
 
     & > ul > li {
-      @apply cursor-default px-2 rounded-sm text-gray-600 h-7 flex items-center;
+      @apply cursor-default px-2 rounded-sm text-fg-subtle h-7 flex items-center;
     }
 
     & > ul > li[aria-selected] {
-      @apply bg-highlight text-gray-900;
+      @apply bg-background-highlight-secondary text-fg;
     }
 
     .cm-completionIcon {
@@ -298,7 +296,7 @@
     }
 
     .cm-completionLabel {
-      @apply text-gray-700;
+      @apply text-fg-subtle;
     }
 
     .cm-completionDetail {
@@ -308,7 +306,7 @@
 }
 
 .cm-editor .cm-panels {
-  @apply bg-gray-100 backdrop-blur-sm p-1 mb-1 text-gray-800 z-20 rounded-md;
+  @apply bg-background-highlight-secondary backdrop-blur-sm p-1 mb-1 text-fg z-20 rounded-md;
 
   input,
   button {
@@ -316,19 +314,21 @@
   }
 
   button {
-    @apply appearance-none bg-none bg-gray-200 hocus:bg-gray-300 hocus:text-gray-950 border-0 text-gray-800 cursor-default;
+    @apply border-fg-subtler bg-background-highlight text-fg hover:border-fg-info;
+    @apply appearance-none bg-none cursor-default;
   }
 
   button[name='close'] {
-    @apply text-gray-600 hocus:text-gray-900 px-2 -mr-1.5 !important;
+    @apply text-fg-subtle hocus:text-fg px-2 -mr-1.5 !important;
   }
 
   input {
-    @apply bg-gray-50 border border-gray-500/50 focus:border-focus outline-none;
+    @apply bg-background border-background-highlight focus:border-border-focus;
+    @apply border outline-none cursor-text;
   }
 
   label {
-    @apply focus-within:text-gray-950;
+    @apply focus-within:text-fg;
   }
 
   /* Hide the "All" button */

src-web/components/core/Editor/Editor.tsx

@@ -206,7 +206,6 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
 
         view = new EditorView({ state, parent: container });
         cm.current = { view, languageCompartment };
-        syncGutterBg({ parent: container, bgClassList });
         if (autoFocus) {
           view.focus();
         }
@@ -270,7 +269,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
       ref={initEditorRef}
       className={classNames(
         className,
-        'cm-wrapper text-base bg-gray-50',
+        'cm-wrapper text-base',
         type === 'password' && 'cm-obscure-text',
         heightMode === 'auto' ? 'cm-auto-height' : 'cm-full-height',
         singleLine ? 'cm-singleline' : 'cm-multiline',
@@ -361,19 +360,6 @@ function getExtensions({
   ];
 }
 
-const syncGutterBg = ({
-  parent,
-  bgClassList,
-}: {
-  parent: HTMLDivElement;
-  bgClassList: string[];
-}) => {
-  const gutterEl = parent.querySelector<HTMLDivElement>('.cm-gutters');
-  if (gutterEl) {
-    gutterEl?.classList.add(...bgClassList);
-  }
-};
-
 const placeholderElFromText = (text: string) => {
   const el = document.createElement('div');
   el.innerHTML = text.replace('\n', '<br/>');

src-web/components/core/Editor/extensions.ts

@@ -42,23 +42,23 @@ import { url } from './url/extension';
 export const myHighlightStyle = HighlightStyle.define([
   {
     tag: [t.documentMeta, t.blockComment, t.lineComment, t.docComment, t.comment],
-    color: 'hsl(var(--color-gray-600))',
+    color: 'var(--fg-subtler)',
     fontStyle: 'italic',
   },
   {
     tag: [t.paren],
-    color: 'hsl(var(--color-gray-900))',
+    color: 'var(--fg)',
   },
   {
     tag: [t.name, t.tagName, t.angleBracket, t.docString, t.number],
-    color: 'hsl(var(--color-blue-600))',
+    color: 'var(--fg-info)',
   },
-  { tag: [t.variableName], color: 'hsl(var(--color-green-600))' },
-  { tag: [t.bool], color: 'hsl(var(--color-pink-600))' },
-  { tag: [t.attributeName, t.propertyName], color: 'hsl(var(--color-violet-600))' },
-  { tag: [t.attributeValue], color: 'hsl(var(--color-orange-600))' },
-  { tag: [t.string], color: 'hsl(var(--color-yellow-600))' },
-  { tag: [t.keyword, t.meta, t.operator], color: 'hsl(var(--color-red-600))' },
+  { tag: [t.variableName], color: 'var(--fg-success)' },
+  { tag: [t.bool], color: 'var(--fg-info)' }, // TODO: Should be pink
+  { tag: [t.attributeName, t.propertyName], color: 'var(--fg-primary)' },
+  { tag: [t.attributeValue], color: 'var(--fg-warning)' },
+  { tag: [t.string], color: 'var(--fg-warning)' }, // TODO: Should be yellow
+  { tag: [t.keyword, t.meta, t.operator], color: 'var(--fg-danger)' },
 ]);
 
 const myTheme = EditorView.theme({}, { dark: true });
@@ -123,6 +123,7 @@ export const baseExtensions = [
   dropCursor(),
   drawSelection(),
   autocompletion({
+    tooltipClass: () => 'x-theme-dialog',
     closeOnBlur: true, // Set to `false` for debugging in devtools without closing it
     compareCompletions: (a, b) => {
       // Don't sort completions at all, only on boost

src-web/components/core/Editor/twig/placeholder.ts

@@ -11,8 +11,10 @@ class PlaceholderWidget extends WidgetType {
   }
   toDOM() {
     const elt = document.createElement('span');
-    elt.className = `placeholder-widget ${
-      !this.isExistingVariable ? 'placeholder-widget-error' : ''
+    elt.className = `x-theme-placeholder-widget placeholder-widget ${
+      this.isExistingVariable
+        ? 'x-theme-placeholder-widget--primary'
+        : 'x-theme-placeholder-widget--danger'
     }`;
     elt.title = !this.isExistingVariable ? 'Variable not found in active environment' : '';
     elt.textContent = this.name;

src-web/components/core/FormattedError.tsx

@@ -10,7 +10,7 @@ export function FormattedError({ children }: Props) {
     <pre
       className={classNames(
         'w-full text-sm select-auto cursor-text bg-gray-100 p-3 rounded',
-        'whitespace-pre-wrap border border-red-500 border-dashed overflow-x-auto',
+        'whitespace-pre-wrap border border-fg-danger border-dashed overflow-x-auto',
       )}
     >
       {children}

src-web/components/core/Heading.tsx

@@ -11,7 +11,7 @@ export function Heading({ className, size = 1, ...props }: Props) {
     <Component
       className={classNames(
         className,
-        'font-semibold text-gray-900',
+        'font-semibold text-fg',
         size === 1 && 'text-2xl',
         size === 2 && 'text-xl',
         size === 3 && 'text-lg',

src-web/components/core/HotKey.tsx

@@ -22,7 +22,7 @@ export function HotKey({ action, className, variant }: Props) {
       className={classNames(
         className,
         variant === 'with-bg' && 'rounded border',
-        'text-gray-1000 text-opacity-disabled',
+        'text-fg-subtler',
       )}
     >
       {labelParts.map((char, index) => (

src-web/components/core/HotKeyLabel.tsx

@@ -7,5 +7,5 @@ interface Props {
 
 export function HotKeyLabel({ action }: Props) {
   const label = useHotKeyLabel(action);
-  return <span>{label}</span>;
+  return <span className="text-fg-subtle">{label}</span>;
 }

src-web/components/core/HotKeyList.tsx

@@ -11,7 +11,7 @@ interface Props {
 
 export const HotKeyList = ({ hotkeys, bottomSlot }: Props) => {
   return (
-    <div className="h-full flex items-center justify-center text-gray-700 text-sm">
+    <div className="h-full flex items-center justify-center text-sm">
       <VStack space={2}>
         {hotkeys.map((hotkey) => (
           <HStack key={hotkey} className="grid grid-cols-2">

src-web/components/core/HttpMethodTag.tsx

@@ -27,7 +27,7 @@ export function HttpMethodTag({ request, className }: Props) {
 
   const m = method.toLowerCase();
   return (
-    <span className={classNames(className, 'text-2xs font-mono opacity-50')}>
+    <span className={classNames(className, 'text-2xs font-mono text-fg-subtle')}>
       {methodMap[m] ?? m.slice(0, 3).toUpperCase()}
     </span>
   );

src-web/components/core/Icon.tsx

@@ -1,5 +1,5 @@
-import * as lucide from 'lucide-react';
 import classNames from 'classnames';
+import * as lucide from 'lucide-react';
 import type { HTMLAttributes } from 'react';
 import { memo } from 'react';
 
@@ -44,6 +44,7 @@ const icons = {
   moreVertical: lucide.MoreVerticalIcon,
   paste: lucide.ClipboardPasteIcon,
   pencil: lucide.PencilIcon,
+  pin: lucide.PinIcon,
   plug: lucide.Plug,
   plus: lucide.PlusIcon,
   plusCircle: lucide.PlusCircleIcon,

src-web/components/core/IconButton.tsx

@@ -52,7 +52,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
       size={size}
       className={classNames(
         className,
-        'relative flex-shrink-0 text-gray-700 hover:text-gray-1000',
+        'group/button relative flex-shrink-0 text-fg-subtle',
         '!px-0',
         size === 'md' && 'w-9',
         size === 'sm' && 'w-8',
@@ -71,6 +71,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
         spin={spin}
         className={classNames(
           iconClassName,
+          'group-hover/button:text-fg',
           props.disabled && 'opacity-70',
           confirmed && 'text-green-600',
         )}

src-web/components/core/InlineCode.tsx

@@ -6,8 +6,8 @@ export function InlineCode({ className, ...props }: HTMLAttributes<HTMLSpanEleme
     <code
       className={classNames(
         className,
-        'font-mono text-xs bg-highlight border-0 border-gray-200/30',
-        'px-1.5 py-0.5 rounded text-gray-800 shadow-inner',
+        'font-mono text-xs bg-background-highlight-secondary',
+        'px-1.5 py-0.5 rounded text-fg shadow-inner',
       )}
       {...props}
     />

src-web/components/core/Input.tsx

@@ -135,7 +135,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
         htmlFor={id}
         className={classNames(
           labelClassName,
-          'text-sm text-gray-900 whitespace-nowrap',
+          'text-sm text-fg whitespace-nowrap',
           hideLabel && 'sr-only',
         )}
       >
@@ -145,10 +145,10 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
         alignItems="stretch"
         className={classNames(
           containerClassName,
-          'relative w-full rounded-md text-gray-900',
+          'relative w-full rounded-md text-fg',
           'border',
-          focused ? 'border-focus' : 'border-highlight',
-          !isValid && '!border-invalid',
+          focused ? 'border-border-focus' : 'border-background-highlight',
+          !isValid && '!border-fg-danger',
           size === 'md' && 'min-h-md',
           size === 'sm' && 'min-h-sm',
           size === 'xs' && 'min-h-xs',
@@ -186,7 +186,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
             title={obscured ? `Show ${label}` : `Obscure ${label}`}
             size="xs"
             className="mr-0.5 group/obscure !h-auto my-0.5"
-            iconClassName="text-gray-500 group-hover/obscure:text-gray-800"
+            iconClassName="text-fg-subtle group-hover/obscure:text-fg"
             iconSize="sm"
             icon={obscured ? 'eye' : 'eyeClosed'}
             onClick={() => setObscured((o) => !o)}

src-web/components/core/JsonAttributeTree.tsx

@@ -41,7 +41,7 @@ export const JsonAttributeTree = ({ depth = 0, attrKey, attrValue, attrKeyJsonPa
           : null,
         isExpandable: Object.keys(attrValue).length > 0,
         label: isExpanded ? `{${Object.keys(attrValue).length || ' '}}` : `{⋯}`,
-        labelClassName: 'text-gray-600',
+        labelClassName: 'text-fg-subtler',
       };
     } else if (jsonType === '[object Array]') {
       return {
@@ -59,7 +59,7 @@ export const JsonAttributeTree = ({ depth = 0, attrKey, attrValue, attrKeyJsonPa
           : null,
         isExpandable: attrValue.length > 0,
         label: isExpanded ? `[${attrValue.length || ' '}]` : `[⋯]`,
-        labelClassName: 'text-gray-600',
+        labelClassName: 'text-subtler',
       };
     } else {
       return {
@@ -67,19 +67,17 @@ export const JsonAttributeTree = ({ depth = 0, attrKey, attrValue, attrKeyJsonPa
         isExpandable: false,
         label: jsonType === '[object String]' ? `"${attrValue}"` : `${attrValue}`,
         labelClassName: classNames(
-          jsonType === '[object Boolean]' && 'text-pink-600',
-          jsonType === '[object Number]' && 'text-blue-600',
-          jsonType === '[object String]' && 'text-yellow-600',
-          jsonType === '[object Null]' && 'text-red-600',
+          jsonType === '[object Boolean]' && 'text-fg-primary',
+          jsonType === '[object Number]' && 'text-fg-info',
+          jsonType === '[object String]' && 'text-fg-notice',
+          jsonType === '[object Null]' && 'text-fg-danger',
         ),
       };
     }
   }, [attrValue, attrKeyJsonPath, isExpanded, depth]);
 
   const labelEl = (
-    <span className={classNames(labelClassName, 'select-text group-hover:text-gray-800')}>
-      {label}
-    </span>
+    <span className={classNames(labelClassName, 'select-text group-hover:text-fg')}>{label}</span>
   );
   return (
     <div className={classNames(/*depth === 0 && '-ml-4',*/ 'font-mono text-2xs')}>
@@ -91,18 +89,18 @@ export const JsonAttributeTree = ({ depth = 0, attrKey, attrValue, attrKeyJsonPa
               icon="chevronRight"
               className={classNames(
                 'left-0 absolute transition-transform flex items-center',
-                'text-gray-600 group-hover:text-gray-900',
+                'text-fg-subtler group-hover:text-fg-subtle',
                 isExpanded ? 'rotate-90' : '',
               )}
             />
-            <span className="text-violet-600 group-hover:text-violet-700 mr-1.5 whitespace-nowrap">
+            <span className="text-fg-primary group-hover:text-fg-primary mr-1.5 whitespace-nowrap">
               {attrKey === undefined ? '$' : attrKey}:
             </span>
             {labelEl}
           </button>
         ) : (
           <>
-            <span className="text-violet-600 mr-1.5 pl-4 whitespace-nowrap select-text">
+            <span className="text-fg-primary mr-1.5 pl-4 whitespace-nowrap select-text">
               {attrKey}:
             </span>
             {labelEl}

src-web/components/core/KeyValueRow.tsx

@@ -30,7 +30,7 @@ export function KeyValueRow({ label, value, labelClassName }: Props) {
   return (
     <>
       <td
-        className={classNames('py-0.5 pr-2 text-gray-700 select-text cursor-text', labelClassName)}
+        className={classNames('py-0.5 pr-2 text-fg-subtle select-text cursor-text', labelClassName)}
       >
         {label}
       </td>

src-web/components/core/PairEditor.tsx

@@ -388,7 +388,7 @@ function PairEditorRow({
           {pairContainer.pair.isFile ? (
             <Button
               size="xs"
-              color="gray"
+              color="secondary"
               className="font-mono text-xs"
               onClick={async (e) => {
                 e.preventDefault();

src-web/components/core/Select.tsx

@@ -40,7 +40,7 @@ export function Select<T extends string>({
         htmlFor={id}
         className={classNames(
           labelClassName,
-          'text-sm text-gray-900 whitespace-nowrap',
+          'text-sm text-fg whitespace-nowrap',
           hideLabel && 'sr-only',
         )}
       >
@@ -52,7 +52,7 @@ export function Select<T extends string>({
         onChange={(e) => onChange(e.target.value as T)}
         className={classNames(
           'font-mono text-xs border w-full outline-none bg-transparent pl-2 pr-7',
-          'border-highlight focus:border-focus',
+          'bg-background-highlight-secondary border-background-highlight focus:border-border-focus',
           size === 'xs' && 'h-xs',
           size === 'sm' && 'h-sm',
           size === 'md' && 'h-md',

src-web/components/core/Separator.tsx

@@ -8,19 +8,13 @@ interface Props {
   children?: ReactNode;
 }
 
-export function Separator({
-  className,
-  variant = 'primary',
-  orientation = 'horizontal',
-  children,
-}: Props) {
+export function Separator({ className, orientation = 'horizontal', children }: Props) {
   return (
     <div role="separator" className={classNames(className, 'flex items-center')}>
-      {children && <div className="text-xs text-gray-500 mr-2 whitespace-nowrap">{children}</div>}
+      {children && <div className="text-xs text-fg-subtler mr-2 whitespace-nowrap">{children}</div>}
       <div
         className={classNames(
-          variant === 'primary' && 'bg-highlight',
-          variant === 'secondary' && 'bg-highlightSecondary',
+          'bg-background-highlight',
           orientation === 'horizontal' && 'w-full h-[1px]',
           orientation === 'vertical' && 'h-full w-[1px]',
         )}

src-web/components/core/SizeTag.tsx

@@ -21,7 +21,7 @@ export function SizeTag({ contentLength }: Props) {
   }
 
   return (
-    <span title={`${contentLength} bytes`}>
+    <span className="font-mono" title={`${contentLength} bytes`}>
       {Math.round(num * 10) / 10} {unit}
     </span>
   );

src-web/components/core/StatusTag.tsx

@@ -10,17 +10,18 @@ interface Props {
 export function StatusTag({ response, className, showReason }: Props) {
   const { status } = response;
   const label = status < 100 ? 'ERR' : status;
+  const category = `${status}`[0];
   return (
     <span
       className={classNames(
         className,
         'font-mono',
-        status >= 0 && status < 100 && 'text-red-600',
-        status >= 100 && status < 200 && 'text-green-600',
-        status >= 200 && status < 300 && 'text-green-600',
-        status >= 300 && status < 400 && 'text-pink-600',
-        status >= 400 && status < 500 && 'text-orange-600',
-        status >= 500 && 'text-red-600',
+        category === '0' && 'text-fg-danger',
+        category === '1' && 'text-fg-info',
+        category === '2' && 'text-fg-success',
+        category === '3' && 'text-fg-primary',
+        category === '4' && 'text-fg-warning',
+        category === '5' && 'text-fg-danger',
       )}
     >
       {label} {showReason && response.statusReason && response.statusReason}

src-web/components/core/Tabs/Tabs.tsx

@@ -82,7 +82,7 @@ export function Tabs({
           {tabs.map((t) => {
             const isActive = t.value === value;
             const btnClassName = classNames(
-              isActive ? 'text-gray-800' : 'text-gray-600 hover:text-gray-700',
+              isActive ? 'text-fg' : 'text-fg-subtler hover:text-fg-subtle',
               '!px-2 ml-[1px]',
             );
 
@@ -108,7 +108,7 @@ export function Tabs({
                         icon="chevronDown"
                         className={classNames(
                           '-mr-1.5 mt-0.5',
-                          isActive ? 'opacity-100' : 'opacity-20',
+                          isActive ? 'text-fg-subtle' : 'opacity-50',
                         )}
                       />
                     }

src-web/components/core/Toast.tsx

@@ -3,9 +3,9 @@ import { motion } from 'framer-motion';
 import type { ReactNode } from 'react';
 import React from 'react';
 import { useKey } from 'react-use';
-import { IconButton } from './IconButton';
 import type { IconProps } from './Icon';
 import { Icon } from './Icon';
+import { IconButton } from './IconButton';
 
 export interface ToastProps {
   children: ReactNode;
@@ -52,14 +52,15 @@ export function Toast({
       transition={{ duration: 0.2 }}
       className={classNames(
         className,
+        'x-theme-dialog',
         'pointer-events-auto',
-        'relative bg-gray-50 dark:bg-gray-100 pointer-events-auto',
+        'relative bg-background pointer-events-auto',
         'rounded-lg',
-        'border border-highlightSecondary dark:border-highlight shadow-xl',
+        'border border-background-highlight dark:border-background-highlight-secondary shadow-xl',
         'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-6rem)]',
         'w-[22rem] max-h-[80vh]',
         'm-2 grid grid-cols-[1fr_auto]',
-        'text-gray-700',
+        'text-fg',
       )}
     >
       <div className="px-3 py-2 flex items-center gap-2">
@@ -67,10 +68,10 @@ export function Toast({
           <Icon
             icon={ICONS[variant]}
             className={classNames(
-              variant === 'success' && 'text-green-500',
-              variant === 'warning' && 'text-orange-500',
-              variant === 'error' && 'text-red-500',
-              variant === 'copied' && 'text-violet-500',
+              variant === 'success' && 'text-fg-success',
+              variant === 'warning' && 'text-fg-warning',
+              variant === 'error' && 'text-fg-danger',
+              variant === 'copied' && 'text-fg-primary',
             )}
           />
         )}
@@ -82,7 +83,7 @@ export function Toast({
 
       <IconButton
         color="custom"
-        className="opacity-50"
+        className="opacity-60"
         title="Dismiss"
         icon="x"
         onClick={onClose}
@@ -91,7 +92,7 @@ export function Toast({
       {timeout != null && (
         <div className="w-full absolute bottom-0 left-0 right-0">
           <motion.div
-            className="bg-highlight h-0.5"
+            className="bg-background-highlight h-0.5"
             initial={{ width: '100%' }}
             animate={{ width: '0%', opacity: 0.2 }}
             transition={{ duration: timeout / 1000, ease: 'linear' }}

src-web/components/core/WindowDragRegion.tsx

@@ -1,17 +0,0 @@
-import classNames from 'classnames';
-import type { ReactNode } from 'react';
-
-interface Props {
-  className?: string;
-  children?: ReactNode;
-}
-
-export function WindowDragRegion({ className, ...props }: Props) {
-  return (
-    <div
-      data-tauri-drag-region
-      className={classNames(className, 'w-full flex-shrink-0')}
-      {...props}
-    />
-  );
-}

src-web/components/responseViewers/ImageViewer.tsx

@@ -2,6 +2,7 @@ import { convertFileSrc } from '@tauri-apps/api/core';
 import classNames from 'classnames';
 import { useState } from 'react';
 import type { HttpResponse } from '../../lib/models';
+import { Button } from '../core/Button';
 
 interface Props {
   response: HttpResponse;
@@ -20,15 +21,15 @@ export function ImageViewer({ response, className }: Props) {
   if (!show) {
     return (
       <>
-        <div className="text-sm italic text-gray-500">
+        <div className="text-sm italic text-fg-subtler">
           Response body is too large to preview.{' '}
-          <button
-            className="cursor-pointer underline hover:text-gray-800"
-            color="gray"
+          <Button
+            className="cursor-pointer underline hover:text-fg"
+            color="secondary"
             onClick={() => setShow(true)}
           >
             Show anyway
-          </button>
+          </Button>
         </div>
       </>
     );

src-web/components/responseViewers/TextViewer.tsx

@@ -85,7 +85,6 @@ export function TextViewer({ response, pretty }: Props) {
   return (
     <Editor
       readOnly
-      className="bg-gray-50 dark:!bg-gray-100"
       forceUpdateKey={body}
       defaultValue={body}
       contentType={contentType}

src-web/components/responseViewers/WebPageViewer.tsx

@@ -24,7 +24,7 @@ export function WebPageViewer({ response }: Props) {
         title="Response preview"
         srcDoc={contentForIframe}
         sandbox="allow-scripts allow-same-origin"
-        className="h-full w-full rounded border border-highlightSecondary"
+        className="h-full w-full rounded border border-background-highlight-secondary"
       />
     </div>
   );