Use new theme vars (#63)

This PR swaps the theme to use the new stuff from the Theme Studio

src-web/components/responseViewers/ImageViewer.tsx

@@ -20,9 +20,9 @@ export function ImageViewer({ response, className }: Props) {
   if (!show) {
     return (
       <>
-        <div className="italic text-fg-subtler">
+        <div className="italic text-text-subtlest">
           Response body is too large to preview.{' '}
-          <button className="cursor-pointer underline hover:text-fg" onClick={() => setShow(true)}>
+          <button className="cursor-pointer underline hover:text" onClick={() => setShow(true)}>
             Show anyway
           </button>
         </div>

src-web/components/responseViewers/TextViewer.tsx

@@ -68,19 +68,19 @@ export function TextViewer({ response, pretty, className }: Props) {
   const canFilter = isJson || isXml;
 
   const actions = useMemo<ReactNode[]>(() => {
-    const result: ReactNode[] = [];
+    const nodes: ReactNode[] = [];
 
-    if (!canFilter) return result;
+    if (!canFilter) return nodes;
 
     if (isSearching) {
-      result.push(
+      nodes.push(
         <div key="input" className="w-full !opacity-100">
           <Input
             key={response.id}
             validate={!filteredResponse.error}
             hideLabel
             autoFocus
-            containerClassName="bg-background"
+            containerClassName="bg-surface"
             size="sm"
             placeholder={isJson ? 'JSONPath expression' : 'XPath expression'}
             label="Filter expression"
@@ -93,21 +93,18 @@ export function TextViewer({ response, pretty, className }: Props) {
       );
     }
 
-    result.push(
+    nodes.push(
       <IconButton
         key="icon"
         size="sm"
         icon={isSearching ? 'x' : 'filter'}
         title={isSearching ? 'Close filter' : 'Filter response'}
         onClick={toggleSearch}
-        className={classNames(
-          'bg-background border !border-background-highlight',
-          isSearching && '!opacity-100',
-        )}
+        className={classNames('border !border-border-subtle', isSearching && '!opacity-100')}
       />,
     );
 
-    return result;
+    return nodes;
   }, [
     canFilter,
     filterText,

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-background-highlight-secondary"
+        className="h-full w-full rounded border border-border-subtle"
       />
     </div>
   );