Use new theme vars (#63)

This PR swaps the theme to use the new stuff from the Theme Studio
2026-03-24 18:31:16 +01:00 · 2024-08-13 07:44:28 -07:00
parent ecc7192bde
commit c9b4e6181c
79 changed files with 1113 additions and 1004 deletions
--- a/src-web/components/CommandPalette.tsx
+++ b/src-web/components/CommandPalette.tsx
@@ -263,7 +263,7 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
        searchText: fallbackRequestName(r),
        label: (
          <HStack space={2}>
-            <HttpMethodTag className="text-fg-subtler" request={r} />
+            <HttpMethodTag className="text-text-subtlest" request={r} />
            <div className="truncate">{fallbackRequestName(r)}</div>
          </HStack>
        ),
@@ -389,7 +389,7 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
          hideLabel
          leftSlot={
            <div className="h-md w-10 flex justify-center items-center">
-              <Icon icon="search" className="text-fg-subtle" />
+              <Icon icon="search" className="text-text-subtle" />
            </div>
          }
          name="command"
@@ -446,9 +446,9 @@ function CommandPaletteItem({
      justify="start"
      className={classNames(
        'w-full h-sm flex items-center rounded px-1.5',
-        'hover:text-fg',
-        active && 'bg-background-highlight-secondary text-fg',
-        !active && 'text-fg-subtle',
+        'hover:text',
+        active && 'bg-surface-highlight-secondary text',
+        !active && 'text-text-subtle',
      )}
    >
      <span className="truncate">{children}</span>
--- a/src-web/components/CookieDialog.tsx
+++ b/src-web/components/CookieDialog.tsx
@@ -29,7 +29,7 @@ export const CookieDialog = function ({ cookieJarId }: Props) {

  return (
    <div className="pb-2">
-      <table className="w-full text-sm mb-auto min-w-full max-w-full divide-y divide-background-highlight">
+      <table className="w-full text-sm mb-auto min-w-full max-w-full divide-y divide-surface-highlight">
        <thead>
          <tr>
            <th className="py-2 text-left">Domain</th>
@@ -37,13 +37,13 @@ export const CookieDialog = function ({ cookieJarId }: Props) {
            <th className="py-2 pl-4"></th>
          </tr>
        </thead>
-        <tbody className="divide-y divide-background-highlight-secondary">
+        <tbody className="divide-y divide-surface-highlight">
          {cookieJar?.cookies.map((c: Cookie) => (
            <tr key={c.domain + c.raw_cookie}>
              <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-fg-subtle whitespace-nowrap overflow-x-auto max-w-[200px] hide-scrollbars">
+              <td className="py-2 pl-4 select-text cursor-text font-mono text-text-subtle whitespace-nowrap overflow-x-auto max-w-[200px] hide-scrollbars">
                {c.raw_cookie}
              </td>
              <td className="max-w-0 w-10">
--- a/src-web/components/DefaultLayout.tsx
+++ b/src-web/components/DefaultLayout.tsx
@@ -22,7 +22,7 @@ export function DefaultLayout() {
          transition={{ duration: 0.1, delay: 0.1 }}
          className={classNames(
            'w-full h-full',
-            osInfo?.osType === 'linux' && 'border border-background-highlight-secondary',
+            osInfo?.osType === 'linux' && 'border border-border-subtle',
          )}
        >
          <Outlet />
--- a/src-web/components/DropMarker.tsx
+++ b/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-fg-primary rounded-full" />
+        <div className="absolute z-50 left-2 right-2 -bottom-[0.1rem] h-[0.2rem] bg-primary rounded-full" />
      </div>
    );
  },
--- a/src-web/components/EmptyStateText.tsx
+++ b/src-web/components/EmptyStateText.tsx
@@ -12,8 +12,8 @@ export function EmptyStateText({ children, className }: Props) {
    <div
      className={classNames(
        className,
-        'rounded-lg border border-dashed border-background-highlight',
-        'h-full py-2 text-fg-subtler flex items-center justify-center italic',
+        'rounded-lg border border-dashed border-border-subtle',
+        'h-full py-2 text-text-subtlest flex items-center justify-center italic',
      )}
    >
      {children}
--- a/src-web/components/EnvironmentActionsDropdown.tsx
+++ b/src-web/components/EnvironmentActionsDropdown.tsx
@@ -71,8 +71,8 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
        size="sm"
        className={classNames(
          className,
-          'text-fg !px-2 truncate',
-          activeEnvironment == null && 'text-fg-subtler italic',
+          'text !px-2 truncate',
+          activeEnvironment == null && 'text-text-subtlest italic',
        )}
        {...buttonProps}
      >
--- a/src-web/components/EnvironmentEditDialog.tsx
+++ b/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-fg-subtler group-hover:text-fg-subtle"
+                  iconClassName="text-text-subtlest group-hover:text-text-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-background-highlight-secondary"
+            className="pt-2 border-l border-border-subtle"
            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-fg-subtler"
+            iconClassName="text-text-subtlest"
            size="sm"
            icon={valueVisibility.value ? 'eye' : 'eyeClosed'}
            title={valueVisibility.value ? 'Hide Values' : 'Reveal Values'}
@@ -238,7 +238,7 @@ function SidebarButton({
        className={classNames(
          className,
          'w-full grid grid-cols-[minmax(0,1fr)_auto] items-center gap-0.5',
-          'px-2', // Padding to show focus border
+          'px-2', // Padding to show the focus border
        )}
      >
        <Button
@@ -246,7 +246,7 @@ function SidebarButton({
          size="xs"
          className={classNames(
            'w-full',
-            active ? 'text-fg bg-background-active' : 'text-fg-subtle hover:text-fg',
+            active ? 'text bg-surface-active' : 'text-text-subtle hover:text',
          )}
          justify="start"
          onClick={onClick}
--- a/src-web/components/ExportDataDialog.tsx
+++ b/src-web/components/ExportDataDialog.tsx
@@ -59,7 +59,7 @@ export function ExportDataDialog({
  const noneSelected = numSelected === 0;
  return (
    <VStack space={3} className="w-full mb-3 px-4">
-      <table className="w-full mb-auto min-w-full max-w-full divide-y divide-background-highlight-secondary">
+      <table className="w-full mb-auto min-w-full max-w-full divide-y divide-surface-highlight">
        <thead>
          <tr>
            <th className="w-6 min-w-0 py-2 text-left pl-1">
@@ -76,7 +76,7 @@ export function ExportDataDialog({
            </th>
          </tr>
        </thead>
-        <tbody className="divide-y divide-background-highlight-secondary">
+        <tbody className="divide-y divide-surface-highlight">
          {workspaces.map((w) => (
            <tr key={w.id}>
              <td className="min-w-0 py-1 pl-1">
@@ -90,7 +90,7 @@ export function ExportDataDialog({
                />
              </td>
              <td
-                className="py-1 pl-4 text-fg whitespace-nowrap overflow-x-auto hide-scrollbars"
+                className="py-1 pl-4 text whitespace-nowrap overflow-x-auto hide-scrollbars"
                onClick={() => setSelectedWorkspaces((prev) => ({ ...prev, [w.id]: !prev[w.id] }))}
              >
                {w.name} {w.id === activeWorkspace.id ? '(current workspace)' : ''}
--- a/src-web/components/GrpcConnectionLayout.tsx
+++ b/src-web/components/GrpcConnectionLayout.tsx
@@ -109,7 +109,7 @@ export function GrpcConnectionLayout({ style }: Props) {
            className={classNames(
              'x-theme-responsePane',
              'max-h-full h-full grid grid-rows-[minmax(0,1fr)] grid-cols-1',
-              'bg-background rounded-md border border-background-highlight',
+              'bg-surface rounded-md border border-border-subtle',
              'shadow relative',
            )}
          >
--- a/src-web/components/GrpcConnectionMessagesPane.tsx
+++ b/src-web/components/GrpcConnectionMessagesPane.tsx
@@ -67,7 +67,7 @@ export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }:
              <HStack space={2}>
                <span>{events.length} Messages</span>
                {isResponseLoading(activeConnection) && (
-                  <Icon icon="refresh" size="sm" spin className="text-fg-subtler" />
+                  <Icon icon="refresh" size="sm" spin className="text-text-subtlest" />
                )}
              </HStack>
              <RecentConnectionsDropdown
@@ -112,7 +112,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="italic text-fg-subtler">
+                    <VStack space={2} className="italic text-text-subtlest">
                      Message previews larger than 1MB are hidden
                      <div>
                        <Button
@@ -143,7 +143,7 @@ export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }:
                      {activeEvent.content}
                    </div>
                    {activeEvent.error && (
-                      <div className="select-text cursor-text text-sm font-mono py-1 text-fg-warning">
+                      <div className="select-text cursor-text text-sm font-mono py-1 text-warning">
                        {activeEvent.error}
                      </div>
                    )}
@@ -188,21 +188,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-background-highlight-secondary !text-fg',
-          'text-fg-subtle hover:text-fg',
+          isActive && '!bg-surface-highlight-secondary !text',
+          'text-text-subtle hover:text',
        )}
      >
        <Icon
          className={
            eventType === 'server_message'
-              ? 'text-fg-info'
+              ? 'text-info'
              : eventType === 'client_message'
-              ? 'text-fg-primary'
+              ? 'text-primary'
              : eventType === 'error' || (status != null && status > 0)
-              ? 'text-fg-danger'
+              ? 'text-danger'
              : eventType === 'connection_end'
-              ? 'text-fg-success'
-              : 'text-fg-subtle'
+              ? 'text-success'
+              : 'text-text-subtle'
          }
          title={
            eventType === 'server_message'
@@ -229,7 +229,7 @@ function EventRow({
        />
        <div className={classNames('w-full truncate text-xs')}>
          {content.slice(0, 1000)}
-          {error && <span className="text-fg-warning"> ({error})</span>}
+          {error && <span className="text-warning"> ({error})</span>}
        </div>
        <div className={classNames('opacity-50 text-xs')}>
          {format(createdAt + 'Z', 'HH:mm:ss.SSS')}
--- a/src-web/components/GrpcConnectionSetupPane.tsx
+++ b/src-web/components/GrpcConnectionSetupPane.tsx
@@ -211,14 +211,14 @@ export function GrpcConnectionSetupPane({
                label: 'Refresh',
                type: 'default',
                key: 'custom',
-                leftSlot: <Icon className="text-fg-subtler" size="sm" icon="refresh" />,
+                leftSlot: <Icon className="text-text-subtlest" size="sm" icon="refresh" />,
              },
            ]}
          >
            <Button
              size="sm"
              variant="border"
-              rightSlot={<Icon className="text-fg-subtler" size="sm" icon="chevronDown" />}
+              rightSlot={<Icon className="text-text-subtlest" size="sm" icon="chevronDown" />}
              disabled={isStreaming || services == null}
              className={classNames(
                'font-mono text-editor min-w-[5rem] !ring-0',
--- a/src-web/components/GrpcProtoSelection.tsx
+++ b/src-web/components/GrpcProtoSelection.tsx
@@ -100,16 +100,16 @@ export function GrpcProtoSelection({ requestId }: Props) {
        )}

        {protoFiles.length > 0 && (
-          <table className="w-full divide-y divide-background-highlight">
+          <table className="w-full divide-y divide-surface-highlight">
            <thead>
              <tr>
-                <th className="text-fg-subtler">
+                <th className="text-text-subtlest">
                  <span className="font-mono">*.proto</span> Files
                </th>
                <th></th>
              </tr>
            </thead>
-            <tbody className="divide-y divide-background-highlight">
+            <tbody className="divide-y divide-surface-highlight">
              {protoFiles.map((f, i) => (
                <tr key={f + i} className="group">
                  <td className="pl-1 font-mono">{f.split('/').pop()}</td>
--- a/src-web/components/HeaderSize.tsx
+++ b/src-web/components/HeaderSize.tsx
@@ -25,7 +25,7 @@ export function HeaderSize({
      style={style}
      className={classNames(
        className,
-        'pt-[1px] w-full border-b border-background-highlight min-w-0',
+        'pt-[1px] w-full border-b border-border-subtle min-w-0',
        stoplightsVisible ? 'pl-20 pr-1' : 'pl-1',
        size === 'md' && 'h-[27px]',
        size === 'lg' && 'h-[38px]',
--- a/src-web/components/ImportDataDialog.tsx
+++ b/src-web/components/ImportDataDialog.tsx
@@ -20,7 +20,7 @@ export function ImportDataDialog({ importData }: Props) {
          <li>Insomnia v4+</li>
          <li>Swagger 2.0</li>
          <li>
-            Curl commands <em className="text-fg-subtle">(or paste into URL)</em>
+            Curl commands <em className="text-text-subtle">(or paste into URL)</em>
          </li>
        </ul>
      </VStack>
--- a/src-web/components/Overlay.tsx
+++ b/src-web/components/Overlay.tsx
@@ -44,7 +44,7 @@ export function Overlay({
              onClick={onClose}
              className={classNames(
                'absolute inset-0',
-                variant === 'default' && 'bg-background-backdrop backdrop-blur-sm',
+                variant === 'default' && 'bg-surface-backdrop backdrop-blur-sm',
              )}
            />

--- a/src-web/components/RecentRequestsDropdown.tsx
+++ b/src-web/components/RecentRequestsDropdown.tsx
@@ -86,8 +86,8 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
        hotkeyAction="request_switcher.toggle"
        className={classNames(
          className,
-          'text-fg truncate pointer-events-auto',
-          activeRequest === null && 'text-fg-subtler italic',
+          'text truncate pointer-events-auto',
+          activeRequest === null && 'text-text-subtlest italic',
        )}
      >
        {fallbackRequestName(activeRequest)}
--- a/src-web/components/RecentResponsesDropdown.tsx
+++ b/src-web/components/RecentResponsesDropdown.tsx
@@ -1,8 +1,7 @@
-import classNames from 'classnames';
+import type { HttpResponse } from '@yaakapp/api';
 import { useDeleteHttpResponse } from '../hooks/useDeleteHttpResponse';
 import { useDeleteHttpResponses } from '../hooks/useDeleteHttpResponses';
 import { useSaveResponse } from '../hooks/useSaveResponse';
-import type { HttpResponse } from '@yaakapp/api';
 import { pluralize } from '../lib/pluralize';
 import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
@@ -21,7 +20,6 @@ export const RecentResponsesDropdown = function ResponsePane({
  activeResponse,
  responses,
  onPinnedResponseId,
-  className,
 }: Props) {
  const deleteResponse = useDeleteHttpResponse(activeResponse?.id ?? null);
  const deleteAllResponses = useDeleteHttpResponses(activeResponse?.requestId);
@@ -68,7 +66,7 @@ export const RecentResponsesDropdown = function ResponsePane({
          label: (
            <HStack space={2}>
              <StatusTag className="text-sm" response={r} />
-              <span className="text-fg-subtle">&rarr;</span>{' '}
+              <span className="text-text-subtle">&rarr;</span>{' '}
              <span className="font-mono text-sm">{r.elapsed >= 0 ? `${r.elapsed}ms` : 'n/a'}</span>
            </HStack>
          ),
@@ -80,7 +78,7 @@ export const RecentResponsesDropdown = function ResponsePane({
      <IconButton
        title="Show response history"
        icon={activeResponse?.id === latestResponseId ? 'chevronDown' : 'pin'}
-        className={classNames(className, 'm-0.5')}
+        className="m-0.5"
        size="sm"
        iconSize="md"
      />
--- a/src-web/components/RequestMethodDropdown.tsx
+++ b/src-web/components/RequestMethodDropdown.tsx
@@ -58,7 +58,7 @@ export const RequestMethodDropdown = memo(function RequestMethodDropdown({

  return (
    <RadioDropdown value={method} items={radioItems} extraItems={extraItems} onChange={onChange}>
-      <Button size="xs" className={classNames(className, 'text-fg-subtle hover:text-fg')}>
+      <Button size="xs" className={classNames(className, 'text-text-subtle hover:text')}>
        {method.toUpperCase()}
      </Button>
    </RadioDropdown>
--- a/src-web/components/ResponsePane.tsx
+++ b/src-web/components/ResponsePane.tsx
@@ -83,7 +83,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
        className,
        'x-theme-responsePane',
        'max-h-full h-full',
-        'bg-background rounded-md border border-background-highlight',
+        'bg-surface rounded-md border border-border-subtle',
        'relative',
      )}
    >
@@ -99,7 +99,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
        <div className="h-full w-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1">
          <HStack
            className={classNames(
-              'text-fg-subtle w-full flex-shrink-0',
+              'text-text-subtle w-full flex-shrink-0',
              // Remove a bit of space because the tabs have lots too
              '-mb-1.5',
            )}
@@ -177,7 +177,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
                  // ) : viewMode === 'pretty' && contentType?.includes('json') ? (
                  //   <JsonAttributeTree attrValue={activeResponse} />
                  <TextViewer
-                    className="-mr-2" // Pull to the right
+                    className="-mr-2 bg-surface" // Pull to the right
                    response={activeResponse}
                    pretty={viewMode === 'pretty'}
                  />
--- a/src-web/components/SelectFile.tsx
+++ b/src-web/components/SelectFile.tsx
@@ -54,7 +54,7 @@ export function SelectFile({ onChange, filePath, inline, className }: Props) {
              onClick={handleClear}
            />
          )}
-          <div className="text-sm font-mono truncate rtl pr-3 text-fg">
+          <div className="text-sm font-mono truncate rtl pr-3 text">
            {rtlEscapeChar}
            {filePath ?? 'No file selected'}
          </div>
--- a/src-web/components/Settings/Settings.tsx
+++ b/src-web/components/Settings/Settings.tsx
@@ -32,7 +32,7 @@ export const Settings = () => {
        data-tauri-drag-region
        ignoreStoplights
        size="md"
-        className="x-theme-appHeader bg-background text-fg-subtle flex items-center justify-center border-b border-background-highlight text-sm font-semibold"
+        className="x-theme-appHeader bg-surface text-text-subtle flex items-center justify-center border-b border-border-subtle text-sm font-semibold"
      >
        <HStack
          space={2}
--- a/src-web/components/Settings/SettingsAppearance.tsx
+++ b/src-web/components/Settings/SettingsAppearance.tsx
@@ -159,11 +159,11 @@ export function SettingsAppearance() {

      <VStack
        space={3}
-        className="mt-3 w-full bg-background p-3 border border-dashed border-background-highlight rounded overflow-x-auto"
+        className="mt-3 w-full bg-surface p-3 border border-dashed border-border-subtle rounded overflow-x-auto"
      >
-        <HStack className="text-fg font-bold" space={2}>
+        <HStack className="text font-bold" space={2}>
          Theme Preview{' '}
-          <Icon icon={appearance === 'dark' ? 'moon' : 'sun'} className="text-fg-subtle" />
+          <Icon icon={appearance === 'dark' ? 'moon' : 'sun'} className="text-text-subtle" />
        </HStack>
        <HStack space={1.5} className="w-full">
          {buttonColors.map((c, i) => (
@@ -173,7 +173,7 @@ export function SettingsAppearance() {
              size="2xs"
              iconSize="xs"
              icon={icons[i % icons.length]!}
-              iconClassName="text-fg"
+              iconClassName="text"
              title={`${c}`}
            />
          ))}
@@ -185,7 +185,7 @@ export function SettingsAppearance() {
              size="2xs"
              iconSize="xs"
              icon={icons[i % icons.length]!}
-              iconClassName="text-fg"
+              iconClassName="text"
              title={`${c}`}
            />
          ))}
--- a/src-web/components/Settings/SettingsGeneral.tsx
+++ b/src-web/components/Settings/SettingsGeneral.tsx
@@ -81,7 +81,7 @@ export function SettingsGeneral() {

      <Heading size={2}>
        Workspace{' '}
-        <div className="inline-block ml-1 bg-background-highlight px-2 py-0.5 rounded text-fg text-shrink">
+        <div className="inline-block ml-1 bg-surface-highlight px-2 py-0.5 rounded text text-shrink">
          {workspace.name}
        </div>
      </Heading>
--- a/src-web/components/Sidebar.tsx
+++ b/src-web/components/Sidebar.tsx
@@ -501,7 +501,7 @@ function SidebarItems({
      aria-orientation="vertical"
      dir="ltr"
      className={classNames(
-        tree.depth > 0 && 'border-l border-background-highlight-secondary',
+        tree.depth > 0 && 'border-l border-border-subtle',
        tree.depth === 0 && 'ml-0',
        tree.depth >= 1 && 'ml-[1.2rem]',
      )}
@@ -526,7 +526,7 @@ function SidebarItems({
                (child.item.model === 'http_request' || child.item.model === 'grpc_request') && (
                  <HttpMethodTag
                    request={child.item}
-                    className={classNames(!(active || selected) && 'text-fg-subtler')}
+                    className={classNames(!(active || selected) && 'text-text-subtlest')}
                  />
                )
              }
@@ -864,12 +864,12 @@ function SidebarItem({
          data-active={isActive}
          data-selected={selected}
          className={classNames(
-            'w-full flex gap-1.5 items-center h-xs px-1.5 rounded-md',
+            'w-full flex gap-1.5 items-center h-xs px-1.5 rounded-md focus-visible:ring focus-visible:ring-border-focus outline-0',
            editing && 'ring-1 focus-within:ring-focus',
-            isActive && 'bg-background-highlight-secondary text-fg',
+            isActive && 'bg-surface-highlight-secondary text',
            !isActive &&
-              'text-fg-subtle group-hover/item:text-fg active:bg-background-highlight-secondary',
-            selected && useProminentStyles && '!bg-background-active',
+              'text-text-subtle group-hover/item:text-text active:bg-surface-highlight-secondary',
+            selected && useProminentStyles && '!bg-surface-active',
          )}
        >
          {itemModel === 'folder' && (
@@ -877,7 +877,7 @@ function SidebarItem({
              size="sm"
              icon="chevronRight"
              className={classNames(
-                'text-fg-subtler',
+                'text-text-subtlest',
                'transition-transform',
                !isCollapsed(itemId) && 'transform rotate-90',
              )}
@@ -900,13 +900,13 @@ function SidebarItem({
          {latestGrpcConnection ? (
            <div className="ml-auto">
              {isResponseLoading(latestGrpcConnection) && (
-                <Icon spin size="sm" icon="update" className="text-fg-subtler" />
+                <Icon spin size="sm" icon="update" className="text-text-subtlest" />
              )}
            </div>
          ) : latestHttpResponse ? (
            <div className="ml-auto">
              {isResponseLoading(latestHttpResponse) ? (
-                <Icon spin size="sm" icon="refresh" className="text-fg-subtler" />
+                <Icon spin size="sm" icon="refresh" className="text-text-subtlest" />
              ) : (
                <StatusTag className="text-xs" response={latestHttpResponse} />
              )}
--- a/src-web/components/UrlBar.tsx
+++ b/src-web/components/UrlBar.tsx
@@ -76,7 +76,6 @@ export const UrlBar = memo(function UrlBar({
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        onPaste={onPaste}
-        containerClassName="bg-background border border-background-highlight"
        onChange={onUrlChange}
        defaultValue={url}
        placeholder={placeholder}
--- a/src-web/components/WindowControls.tsx
+++ b/src-web/components/WindowControls.tsx
@@ -23,7 +23,7 @@ export function WindowControls({ className, onlyX }: Props) {
      {!onlyX && (
        <>
          <Button
-            className="!h-full px-4 text-fg-subtle hocus:text-fg hocus:bg-background-highlight-secondary rounded-none"
+            className="!h-full px-4 text-text-subtle hocus:text hocus:bg-surface-highlight-secondary rounded-none"
            color="custom"
            onClick={() => getCurrentWebviewWindow().minimize()}
          >
@@ -32,7 +32,7 @@ export function WindowControls({ className, onlyX }: Props) {
            </svg>
          </Button>
          <Button
-            className="!h-full px-4 text-fg-subtle hocus:text-fg hocus:bg-background-highlight rounded-none"
+            className="!h-full px-4 text-text-subtle hocus:text hocus:bg-surface-highlight rounded-none"
            color="custom"
            onClick={async () => {
              const w = getCurrentWebviewWindow();
@@ -57,7 +57,7 @@ export function WindowControls({ className, onlyX }: Props) {
      )}
      <Button
        color="custom"
-        className="!h-full px-4 text-fg-subtle rounded-none hocus:bg-fg-danger hocus:text-fg"
+        className="!h-full px-4 text-text-subtle rounded-none hocus:bg-fg-danger hocus:text"
        onClick={() => getCurrentWebviewWindow().close()}
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
--- a/src-web/components/Workspace.tsx
+++ b/src-web/components/Workspace.tsx
@@ -140,7 +140,7 @@ export default function Workspace() {
            animate={{ opacity: 1, x: 0 }}
            className={classNames(
              'x-theme-sidebar',
-              'absolute top-0 left-0 bottom-0 bg-background border-r border-background-highlight w-[14rem]',
+              'absolute top-0 left-0 bottom-0 bg-surface border-r border-border-subtle w-[14rem]',
              'grid grid-rows-[auto_1fr]',
            )}
          >
@@ -152,11 +152,8 @@ export default function Workspace() {
        </Overlay>
      ) : (
        <>
-          <div
-            style={side}
-            className={classNames('x-theme-sidebar', 'overflow-hidden bg-background')}
-          >
-            <Sidebar className="border-r border-background-highlight" />
+          <div style={side} className={classNames('x-theme-sidebar', 'overflow-hidden bg-surface')}>
+            <Sidebar className="border-r border-border-subtle" />
          </div>
          <ResizeHandle
            className="-translate-x-3"
@@ -171,7 +168,7 @@ export default function Workspace() {
      <HeaderSize
        data-tauri-drag-region
        size="lg"
-        className="x-theme-appHeader bg-background"
+        className="x-theme-appHeader bg-surface"
        style={head}
      >
        <WorkspaceHeader className="pointer-events-none" />
@@ -180,7 +177,7 @@ export default function Workspace() {
        <div className="m-auto">
          <Banner color="warning" className="max-w-[30rem]">
            The active workspace{' '}
-            <InlineCode className="text-fg-warning">{activeWorkspaceId}</InlineCode> was not found.
+            <InlineCode className="text-warning">{activeWorkspaceId}</InlineCode> was not found.
            Select a workspace from the header menu or report this bug to <FeedbackLink />
          </Banner>
        </div>
--- a/src-web/components/WorkspaceActionsDropdown.tsx
+++ b/src-web/components/WorkspaceActionsDropdown.tsx
@@ -130,7 +130,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
        size="sm"
        className={classNames(
          className,
-          'text-fg !px-2 truncate',
+          'text !px-2 truncate',
          activeWorkspace === null && 'italic opacity-disabled',
        )}
        {...buttonProps}
--- a/src-web/components/WorkspaceHeader.tsx
+++ b/src-web/components/WorkspaceHeader.tsx
@@ -26,7 +26,7 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
        <CookieDropdown />
        <HStack>
          <WorkspaceActionsDropdown />
-          <Icon icon="chevronRight" className="text-fg-subtle" />
+          <Icon icon="chevronRight" className="text-text-subtle" />
          <EnvironmentActionsDropdown className="w-auto pointer-events-auto" />
        </HStack>
      </HStack>
--- a/src-web/components/core/Banner.tsx
+++ b/src-web/components/core/Banner.tsx
@@ -15,7 +15,7 @@ export function Banner({ children, className, color = 'secondary' }: Props) {
          className,
          `x-theme-banner--${color}`,
          'border border-dashed italic px-3 py-2 rounded select-auto cursor-text',
-          'border-background-highlight bg-background-highlight-secondary text-fg',
+          'border-border-subtle bg-surface-highlight text',
        )}
      >
        {children}
--- a/src-web/components/core/Button.tsx
+++ b/src-web/components/core/Button.tsx
@@ -60,7 +60,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
    'x-theme-button',
    `x-theme-button--${variant}`,
    `x-theme-button--${variant}--${color}`,
-    'text-fg',
+    'text-text',
    'border', // They all have borders to ensure the same width
    'max-w-full min-w-0', // Help with truncation
    'hocus:opacity-100', // Force opacity for certain hover effects
@@ -77,24 +77,18 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button

    // Solids
    variant === 'solid' && 'border-transparent',
-    variant === 'solid' && color === 'custom' && 'ring-blue-400',
+    variant === 'solid' && color === 'custom' && 'ring-border-focus',
    variant === 'solid' &&
      color !== 'custom' &&
-      color !== 'default' &&
-      'bg-background enabled:hocus:bg-background-highlight ring-background-highlight-secondary',
-    variant === 'solid' &&
-      color === 'default' &&
-      'enabled:hocus:bg-background-highlight ring-fg-info',
+      'enabled:hocus:text-text enabled:hocus:bg-surface-highlight ring-border-subtle',
+    variant === 'solid' && color !== 'custom' && color !== 'default' && 'bg-surface',

    // 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-background-highlight enabled:hocus:border-fg-subtler enabled:hocus:bg-background-highlight-secondary',
+      'border-border-subtle text-text-subtle enabled:hocus:border-border ' +
+        'enabled:hocus:bg-surface-highlight enabled:hocus:text-text ring-border-subtler',
  );

  const buttonRef = useRef<HTMLButtonElement>(null);
--- a/src-web/components/core/Checkbox.tsx
+++ b/src-web/components/core/Checkbox.tsx
@@ -27,13 +27,13 @@ export function Checkbox({
    <HStack
      as="label"
      space={2}
-      className={classNames(className, 'text-fg', disabled && 'opacity-disabled')}
+      className={classNames(className, 'text-text mr-auto', disabled && 'opacity-disabled')}
    >
      <div className={classNames(inputWrapperClassName, 'x-theme-input', 'relative flex')}>
        <input
          aria-hidden
          className={classNames(
-            'appearance-none w-4 h-4 flex-shrink-0 border border-background-highlight',
+            'appearance-none w-4 h-4 flex-shrink-0 border border-border',
            'rounded hocus:border-border-focus hocus:bg-focus/[5%] outline-none ring-0',
          )}
          type="checkbox"
--- a/src-web/components/core/CountBadge.tsx
+++ b/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-background-highlight-secondary text-4xs rounded mb-0.5 px-1 ml-1 h-4 font-mono',
+        'opacity-70 border border-border-subtle text-4xs rounded mb-0.5 px-1 ml-1 h-4 font-mono',
      )}
    >
      {count}
--- a/src-web/components/core/Dialog.tsx
+++ b/src-web/components/core/Dialog.tsx
@@ -67,9 +67,9 @@ export function Dialog({
              className,
              'grid grid-rows-[auto_auto_minmax(0,1fr)]',
              'grid-cols-1', // must be here for inline code blocks to correctly break words
-              'relative bg-background pointer-events-auto',
+              'relative bg-surface pointer-events-auto',
              'rounded-lg',
-              'border border-background-highlight-secondary shadow-lg shadow-[rgba(0,0,0,0.1)]',
+              'border border-border-subtle shadow-lg shadow-[rgba(0,0,0,0.1)]',
              'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-4rem)]',
              size === 'sm' && 'w-[28rem] max-h-[80vh]',
              size === 'md' && 'w-[45rem] max-h-[80vh]',
@@ -87,7 +87,7 @@ export function Dialog({
            )}

            {description ? (
-              <p className="px-6 text-fg-subtle" id={descriptionId}>
+              <p className="px-6 text-text-subtle" id={descriptionId}>
                {description}
              </p>
            ) : (
--- a/src-web/components/core/Dropdown.tsx
+++ b/src-web/components/core/Dropdown.tsx
@@ -433,7 +433,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                <span
                  aria-hidden
                  style={triangleStyles}
-                  className="bg-background absolute rotate-45 border-background-highlight-secondary border-t border-l"
+                  className="bg-surface absolute rotate-45 border-border-subtle border-t border-l"
                />
              )}
              {containerStyles && (
@@ -442,21 +442,21 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                  style={menuStyles}
                  className={classNames(
                    className,
-                    'h-auto bg-background rounded-md shadow-lg py-1.5 border',
-                    'border-background-highlight-secondary overflow-auto mb-1 mx-0.5',
+                    'h-auto bg-surface rounded-md shadow-lg py-1.5 border',
+                    'border-border-subtle overflow-auto mb-1 mx-0.5',
                  )}
                >
                  {filter && (
                    <HStack
                      space={2}
-                      className="pb-0.5 px-1.5 mb-2 text-sm border border-background-highlight-secondary mx-2 rounded font-mono h-xs"
+                      className="pb-0.5 px-1.5 mb-2 text-sm border border-border-subtle mx-2 rounded font-mono h-xs"
                    >
-                      <Icon icon="search" size="xs" className="text-fg-subtle" />
-                      <div className="text-fg">{filter}</div>
+                      <Icon icon="search" size="xs" className="text-text-subtle" />
+                      <div className="text">{filter}</div>
                    </HStack>
                  )}
                  {filteredItems.length === 0 && (
-                    <span className="text-fg-subtler text-center px-2 py-1">No matches</span>
+                    <span className="text-text-subtlest text-center px-2 py-1">No matches</span>
                  )}
                  {filteredItems.map((item, i) => {
                    if (item.hidden) {
@@ -540,9 +540,9 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
        className,
        'h-xs', // More compact
        'min-w-[8rem] outline-none px-2 mx-1.5 flex whitespace-nowrap',
-        'focus:bg-background-highlight focus:text-fg rounded',
-        item.variant === 'danger' && '!text-fg-danger',
-        item.variant === 'notify' && '!text-fg-primary',
+        'focus:bg-surface-highlight focus:text rounded',
+        item.variant === 'danger' && '!text-danger',
+        item.variant === 'notify' && '!text-primary',
      )}
      {...props}
    >
--- a/src-web/components/core/Editor/Editor.css
+++ b/src-web/components/core/Editor/Editor.css
@@ -5,7 +5,7 @@
    @apply w-full block text-base;

    .cm-cursor {
-      @apply border-fg !important;
+      @apply border-text !important;
      /* Widen the cursor */
      @apply border-l-[2px];
    }
@@ -20,11 +20,11 @@

    .cm-line {
      @apply w-full; /* Important! Ensure it spans the entire width */
-      @apply w-full text-fg pl-1 pr-1.5;
+      @apply w-full text-text pl-1 pr-1.5;
    }

    .cm-placeholder {
-      @apply text-placeholder;
+      @apply text-text-subtlest;
    }

    .cm-scroller {
@@ -50,7 +50,10 @@
    /* Style gutters */

    .cm-gutters {
-      @apply border-0 text-fg-subtler bg-transparent;
+      @apply border-0 text-text-subtlest bg-surface;
+      /* Not sure why, but there's a tiny gap left of the gutter that you can see text
+         through. Move left slightly to fix that. */
+      @apply -left-[1px];

      .cm-gutterElement {
        @apply cursor-default;
@@ -59,8 +62,8 @@

    .placeholder {
      /* Colors */
-      @apply bg-background text-fg-subtle border-background-highlight-secondary;
-      @apply hover:border-background-highlight hover:text-fg hover:bg-background-highlight-secondary;
+      @apply bg-surface text-text-subtle border-border-subtle;
+      @apply hover:border-border-subtle hover:text-text hover:bg-surface-highlight;

      @apply border px-1 mx-[0.5px] rounded cursor-default dark:shadow;

@@ -147,12 +150,12 @@
 }

 .cm-editor .fold-gutter-icon:hover {
-  @apply text-fg bg-background-highlight;
+  @apply text-text bg-surface-highlight;
 }

 .cm-editor .cm-foldPlaceholder {
-  @apply px-2 border border-fg-subtler bg-background-highlight;
-  @apply hover:text-fg hover:border-fg-subtle text-fg;
+  @apply px-2 border border-border-subtle bg-surface-highlight;
+  @apply hover:text-text hover:border-border-subtle text-text;
  @apply cursor-default !important;
 }

@@ -162,13 +165,13 @@

 .cm-wrapper:not(.cm-readonly) .cm-editor {
  &.cm-focused .cm-activeLineGutter {
-    @apply text-fg-subtle;
+    @apply text-text-subtle;
  }
 }

 .cm-wrapper.cm-readonly .cm-editor {
  .cm-cursor {
-    @apply border-fg-danger !important;
+    @apply border-danger !important;
  }
 }

@@ -187,18 +190,18 @@
 }

 .cm-tooltip.cm-tooltip-hover {
-  @apply shadow-lg bg-background rounded text-fg-subtle border border-fg-subtler z-50 pointer-events-auto text-sm;
+  @apply shadow-lg bg-surface rounded text-text-subtle border border-border-subtle z-50 pointer-events-auto text-sm;
  @apply px-2 py-1;

  a {
-    @apply text-fg;
+    @apply text-text;

    &:hover {
      @apply underline;
    }

    &::after {
-      @apply text-fg bg-fg-secondary h-3 w-3 ml-1;
+      @apply text-text bg-surface-highlight 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 +213,7 @@
 /* NOTE: Extra selector required to override default styles */
 .cm-tooltip.cm-tooltip-autocomplete,
 .cm-tooltip.cm-completionInfo {
-  @apply shadow-lg bg-background rounded text-fg-subtle border border-background-highlight z-50 pointer-events-auto text-editor;
+  @apply shadow-lg bg-surface rounded text-text-subtle border border-border-subtle z-50 pointer-events-auto text-editor;

  .cm-completionIcon {
    @apply italic font-mono;
@@ -288,11 +291,11 @@
    }

    & > ul > li {
-      @apply cursor-default px-2 h-[2em] rounded-sm text-fg flex items-center;
+      @apply cursor-default px-2 h-[2em] rounded-sm text-text flex items-center;
    }

    & > ul > li[aria-selected] {
-      @apply bg-background-highlight-secondary text-fg;
+      @apply bg-surface-highlight text-text;
    }

    .cm-completionIcon {
@@ -300,17 +303,17 @@
    }

    .cm-completionLabel {
-      @apply text-fg;
+      @apply text-text;
    }

    .cm-completionDetail {
-      @apply ml-auto pl-6 text-fg-subtle;
+      @apply ml-auto pl-6 text-text-subtle;
    }
  }
 }

 .cm-editor .cm-panels {
-  @apply bg-background-highlight-secondary backdrop-blur-sm p-1 mb-1 text-fg z-20 rounded-md;
+  @apply bg-surface-highlight backdrop-blur-sm p-1 mb-1 text-text z-20 rounded-md;

  input,
  button {
@@ -318,21 +321,21 @@
  }

  button {
-    @apply border-fg-subtler bg-background-highlight text-fg hover:border-fg-info;
+    @apply border-border-subtle bg-surface-highlight text-text hover:border-info;
    @apply appearance-none bg-none cursor-default;
  }

  button[name='close'] {
-    @apply text-fg-subtle hocus:text-fg px-2 -mr-1.5 !important;
+    @apply text-text-subtle hocus:text-text px-2 -mr-1.5 !important;
  }

  input {
-    @apply bg-background border-background-highlight focus:border-border-focus;
+    @apply bg-surface border-border-subtle focus:border-border-focus;
    @apply border outline-none cursor-text;
  }

  label {
-    @apply focus-within:text-fg;
+    @apply focus-within:text-text;
  }

  /* Hide the "All" button */
--- a/src-web/components/core/Editor/Editor.tsx
+++ b/src-web/components/core/Editor/Editor.tsx
@@ -162,12 +162,6 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
    view.dispatch({ effects: languageCompartment.reconfigure(ext) });
  }, [contentType, autocomplete, useTemplating, environment, workspace]);

-  const classList = className?.split(/\s+/) ?? [];
-  const bgClassList = classList
-    .filter((c) => c.match(/(^|:)?bg-.+/)) // Find bg-* classes
-    .map((c) => c.replace(/^bg-/, '!bg-')) // !important
-    .map((c) => c.replace(/^dark:bg-/, 'dark:!bg-')); // !important
-
  // Initialize the editor when ref mounts
  const initEditorRef = useCallback(
    (container: HTMLDivElement | null) => {
@@ -230,8 +224,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
  const decoratedActions = useMemo(() => {
    const results = [];
    const actionClassName = classNames(
-      'transition-opacity opacity-0 group-hover:opacity-80 hover:!opacity-100 shadow',
-      bgClassList,
+      'bg-surface transition-opacity opacity-0 group-hover:opacity-100 hover:!opacity-100 shadow',
    );

    if (format) {
@@ -269,7 +262,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
      }),
    );
    return results;
-  }, [actions, bgClassList, format, onChange]);
+  }, [actions, format, onChange]);

  const cmContainer = (
    <div
@@ -290,7 +283,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
  }

  return (
-    <div className="group relative h-full w-full x-theme-editor bg-background">
+    <div className="group relative h-full w-full x-theme-editor bg-surface">
      {cmContainer}
      {decoratedActions && (
        <HStack
--- a/src-web/components/core/Editor/extensions.ts
+++ b/src-web/components/core/Editor/extensions.ts
@@ -43,23 +43,23 @@ import { url } from './url/extension';
 export const syntaxHighlightStyle = HighlightStyle.define([
  {
    tag: [t.documentMeta, t.blockComment, t.lineComment, t.docComment, t.comment],
-    color: 'var(--fg-subtler)',
+    color: 'var(--textSubtlest)',
    fontStyle: 'italic',
  },
  {
    tag: [t.paren, t.bracket, t.brace],
-    color: 'var(--fg)',
+    color: 'var(--textSubtle)',
  },
  {
    tag: [t.link, t.name, t.tagName, t.angleBracket, t.docString, t.number],
-    color: 'var(--fg-info)',
+    color: 'var(--info)',
  },
-  { tag: [t.variableName], color: 'var(--fg-success)' },
-  { tag: [t.bool], color: 'var(--fg-warning)' },
-  { tag: [t.attributeName, t.propertyName], color: 'var(--fg-primary)' },
-  { tag: [t.attributeValue], color: 'var(--fg-warning)' },
-  { tag: [t.string], color: 'var(--fg-notice)' },
-  { tag: [t.atom, t.meta, t.operator, t.bool, t.null, t.keyword], color: 'var(--fg-danger)' },
+  { tag: [t.variableName], color: 'var(--success)' },
+  { tag: [t.bool], color: 'var(--warning)' },
+  { tag: [t.attributeName, t.propertyName], color: 'var(--primary)' },
+  { tag: [t.attributeValue], color: 'var(--warning)' },
+  { tag: [t.string], color: 'var(--notice)' },
+  { tag: [t.atom, t.meta, t.operator, t.bool, t.null, t.keyword], color: 'var(--danger)' },
 ]);

 const syntaxTheme = EditorView.theme({}, { dark: true });
--- a/src-web/components/core/FormattedError.tsx
+++ b/src-web/components/core/FormattedError.tsx
@@ -9,8 +9,8 @@ export function FormattedError({ children }: Props) {
  return (
    <pre
      className={classNames(
-        'font-mono text-sm w-full select-auto cursor-text bg-background-highlight-secondary p-3 rounded',
-        'whitespace-pre-wrap border border-fg-danger border-dashed overflow-x-auto',
+        'font-mono text-sm w-full select-auto cursor-text bg-surface-highlight-secondary p-3 rounded',
+        'whitespace-pre-wrap border border-danger border-dashed overflow-x-auto',
      )}
    >
      {children}
--- a/src-web/components/core/Heading.tsx
+++ b/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-fg',
+        'font-semibold text',
        size === 1 && 'text-2xl',
        size === 2 && 'text-xl',
        size === 3 && 'text-lg',
--- a/src-web/components/core/HotKey.tsx
+++ b/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-fg-subtler',
+        'text-text-subtlest',
      )}
    >
      {labelParts.map((char, index) => (
--- a/src-web/components/core/HotKeyLabel.tsx
+++ b/src-web/components/core/HotKeyLabel.tsx
@@ -9,5 +9,7 @@ interface Props {

 export function HotKeyLabel({ action, className }: Props) {
  const label = useHotKeyLabel(action);
-  return <span className={classNames(className, 'text-fg-subtle whitespace-nowrap')}>{label}</span>;
+  return (
+    <span className={classNames(className, 'text-text-subtle whitespace-nowrap')}>{label}</span>
+  );
 }
--- a/src-web/components/core/HttpMethodTag.tsx
+++ b/src-web/components/core/HttpMethodTag.tsx
@@ -43,7 +43,7 @@ export function HttpMethodTag({ shortNames, request, className }: Props) {
    <span
      className={classNames(
        className,
-        'text-xs font-mono text-fg-subtle',
+        'text-xs font-mono text-text-subtle',
        'pt-[0.25em]', // Fix for monospace font not vertically centering
        shortNames && 'w-[2.5em]',
      )}
--- a/src-web/components/core/IconButton.tsx
+++ b/src-web/components/core/IconButton.tsx
@@ -20,6 +20,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
  {
    showConfirm,
    icon,
+    color = 'default',
    spin,
    onClick,
    className,
@@ -50,10 +51,13 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
      onClick={handleClick}
      innerClassName="flex items-center justify-center"
      size={size}
+      color={color}
      className={classNames(
        className,
-        'group/button relative flex-shrink-0 text-fg-subtle',
+        'group/button relative flex-shrink-0',
        '!px-0',
+        color === 'custom' && 'text-text-subtle',
+        color === 'default' && 'text-text-subtle',
        size === 'md' && 'w-9',
        size === 'sm' && 'w-8',
        size === 'xs' && 'w-6',
@@ -72,7 +76,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
        spin={spin}
        className={classNames(
          iconClassName,
-          'group-hover/button:text-fg',
+          'group-hover/button:text',
          props.disabled && 'opacity-70',
          confirmed && 'text-green-600',
        )}
--- a/src-web/components/core/InlineCode.tsx
+++ b/src-web/components/core/InlineCode.tsx
@@ -6,8 +6,8 @@ export function InlineCode({ className, ...props }: HTMLAttributes<HTMLSpanEleme
    <code
      className={classNames(
        className,
-        'font-mono text-shrink bg-background-highlight-secondary border border-background-highlight-secondary',
-        'px-1.5 py-0.5 rounded text-fg shadow-inner break-words',
+        'font-mono text-shrink bg-surface-highlight-secondary border border-border-subtle',
+        'px-1.5 py-0.5 rounded text shadow-inner break-words',
      )}
      {...props}
    />
--- a/src-web/components/core/Input.tsx
+++ b/src-web/components/core/Input.tsx
@@ -136,7 +136,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
        htmlFor={id}
        className={classNames(
          labelClassName,
-          'text-fg-subtle whitespace-nowrap',
+          'text-text-subtle whitespace-nowrap',
          hideLabel && 'sr-only',
        )}
      >
@@ -147,10 +147,10 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
        className={classNames(
          containerClassName,
          'x-theme-input',
-          'relative w-full rounded-md text-fg',
+          'relative w-full rounded-md text',
          'border',
-          focused ? 'border-border-focus' : 'border-background-highlight',
-          !isValid && '!border-fg-danger',
+          focused ? 'border-border-focus' : 'border-border',
+          !isValid && '!border-danger',
          size === 'md' && 'min-h-md',
          size === 'sm' && 'min-h-sm',
          size === 'xs' && 'min-h-xs',
@@ -187,7 +187,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-fg-subtle group-hover/obscure:text-fg"
+            iconClassName="text-text-subtle group-hover/obscure:text"
            iconSize="sm"
            icon={obscured ? 'eye' : 'eyeClosed'}
            onClick={() => setObscured((o) => !o)}
--- a/src-web/components/core/JsonAttributeTree.tsx
+++ b/src-web/components/core/JsonAttributeTree.tsx
@@ -48,7 +48,7 @@ export const JsonAttributeTree = ({
          : null,
        isExpandable: Object.keys(attrValue).length > 0,
        label: isExpanded ? `{${Object.keys(attrValue).length || ' '}}` : `{⋯}`,
-        labelClassName: 'text-fg-subtler',
+        labelClassName: 'text-text-subtlest',
      };
    } else if (jsonType === '[object Array]') {
      return {
@@ -66,7 +66,7 @@ export const JsonAttributeTree = ({
          : null,
        isExpandable: attrValue.length > 0,
        label: isExpanded ? `[${attrValue.length || ' '}]` : `[⋯]`,
-        labelClassName: 'text-fg-subtler',
+        labelClassName: 'text-text-subtlest',
      };
    } else {
      return {
@@ -74,17 +74,17 @@ export const JsonAttributeTree = ({
        isExpandable: false,
        label: jsonType === '[object String]' ? `"${attrValue}"` : `${attrValue}`,
        labelClassName: classNames(
-          jsonType === '[object Boolean]' && 'text-fg-primary',
-          jsonType === '[object Number]' && 'text-fg-info',
-          jsonType === '[object String]' && 'text-fg-notice',
-          jsonType === '[object Null]' && 'text-fg-danger',
+          jsonType === '[object Boolean]' && 'text-primary',
+          jsonType === '[object Number]' && 'text-info',
+          jsonType === '[object String]' && 'text-notice',
+          jsonType === '[object Null]' && 'text-danger',
        ),
      };
    }
  }, [attrValue, attrKeyJsonPath, isExpanded, depth]);

  const labelEl = (
-    <span className={classNames(labelClassName, 'select-text group-hover:text-fg-subtle')}>
+    <span className={classNames(labelClassName, 'select-text group-hover:text-text-subtle')}>
      {label}
    </span>
  );
@@ -104,18 +104,18 @@ export const JsonAttributeTree = ({
              icon="chevronRight"
              className={classNames(
                'left-0 absolute transition-transform flex items-center',
-                'text-fg-subtler group-hover:text-fg-subtle',
+                'text-text-subtlest group-hover:text-text-subtle',
                isExpanded ? 'rotate-90' : '',
              )}
            />
-            <span className="text-fg-primary group-hover:text-fg-primary mr-1.5 whitespace-nowrap">
+            <span className="text-primary group-hover:text-primary mr-1.5 whitespace-nowrap">
              {attrKey === undefined ? '$' : attrKey}:
            </span>
            {labelEl}
          </button>
        ) : (
          <>
-            <span className="text-fg-primary mr-1.5 pl-4 whitespace-nowrap select-text">
+            <span className="text-primary mr-1.5 pl-4 whitespace-nowrap select-text">
              {attrKey}:
            </span>
            {labelEl}
--- a/src-web/components/core/KeyValueRow.tsx
+++ b/src-web/components/core/KeyValueRow.tsx
@@ -34,9 +34,9 @@ export function KeyValueRow({ label, value, labelColor = 'secondary', labelClass
        className={classNames(
          'py-0.5 pr-2 select-text cursor-text',
          labelClassName,
-          labelColor === 'primary' && 'text-fg-primary',
-          labelColor === 'secondary' && 'text-fg-subtle',
-          labelColor === 'info' && 'text-fg-info',
+          labelColor === 'primary' && 'text-primary',
+          labelColor === 'secondary' && 'text-text-subtle',
+          labelColor === 'info' && 'text-info',
        )}
      >
        {label}
--- a/src-web/components/core/PairEditor.tsx
+++ b/src-web/components/core/PairEditor.tsx
@@ -360,7 +360,7 @@ function PairEditorRow({
        title={pairContainer.pair.enabled ? 'Disable item' : 'Enable item'}
        disabled={isLast}
        checked={isLast ? false : !!pairContainer.pair.enabled}
-        className={classNames('mr-2', isLast && '!opacity-disabled')}
+        className={classNames('pr-2', isLast && '!opacity-disabled')}
        onChange={handleChangeEnabled}
      />
      <div
--- a/src-web/components/core/PairOrBulkEditor.tsx
+++ b/src-web/components/core/PairOrBulkEditor.tsx
@@ -26,7 +26,7 @@ export function PairOrBulkEditor({ preferenceName, ...props }: Props) {
          title={useBulk ? 'Enable form edit' : 'Enable bulk edit'}
          className={classNames(
            'transition-opacity opacity-0 group-hover:opacity-80 hover:!opacity-100 shadow',
-            'bg-background text-fg-subtle hover:text-fg group-hover/wrapper:opacity-100',
+            'bg-surface text-text-subtle hover:text group-hover/wrapper:opacity-100',
          )}
          onClick={() => setUseBulk((b) => !b)}
          icon={useBulk ? 'table' : 'fileCode'}
--- a/src-web/components/core/PlainInput.tsx
+++ b/src-web/components/core/PlainInput.tsx
@@ -88,7 +88,7 @@ export const PlainInput = forwardRef<HTMLInputElement, PlainInputProps>(function
        htmlFor={id}
        className={classNames(
          labelClassName,
-          'text-fg-subtle whitespace-nowrap',
+          'text-text-subtle whitespace-nowrap',
          hideLabel && 'sr-only',
        )}
      >
@@ -99,10 +99,10 @@ export const PlainInput = forwardRef<HTMLInputElement, PlainInputProps>(function
        className={classNames(
          containerClassName,
          'x-theme-input',
-          'relative w-full rounded-md text-fg',
+          'relative w-full rounded-md text',
          'border',
-          focused ? 'border-border-focus' : 'border-background-highlight',
-          !isValid && '!border-fg-danger',
+          focused ? 'border-border-focus' : 'border-border-subtle',
+          !isValid && '!border-danger',
          size === 'md' && 'min-h-md',
          size === 'sm' && 'min-h-sm',
          size === 'xs' && 'min-h-xs',
@@ -136,7 +136,7 @@ export const PlainInput = forwardRef<HTMLInputElement, PlainInputProps>(function
            title={obscured ? `Show ${label}` : `Obscure ${label}`}
            size="xs"
            className="mr-0.5 group/obscure !h-auto my-0.5"
-            iconClassName="text-fg-subtle group-hover/obscure:text-fg"
+            iconClassName="text-text-subtle group-hover/obscure:text"
            iconSize="sm"
            icon={obscured ? 'eye' : 'eyeClosed'}
            onClick={() => setObscured((o) => !o)}
--- a/src-web/components/core/Select.tsx
+++ b/src-web/components/core/Select.tsx
@@ -53,7 +53,7 @@ export function Select<T extends string>({
        htmlFor={id}
        className={classNames(
          labelClassName,
-          'text-fg-subtle whitespace-nowrap',
+          'text-text-subtle whitespace-nowrap',
          hideLabel && 'sr-only',
        )}
      >
@@ -63,10 +63,10 @@ export function Select<T extends string>({
        <HStack
          space={2}
          className={classNames(
-            'w-full rounded-md text-fg text-sm font-mono',
+            'w-full rounded-md text text-sm font-mono',
            'pl-2',
            'border',
-            focused ? 'border-border-focus' : 'border-background-highlight',
+            focused ? 'border-border-focus' : 'border-border',
            size === 'xs' && 'h-xs',
            size === 'sm' && 'h-sm',
            size === 'md' && 'h-md',
--- a/src-web/components/core/Separator.tsx
+++ b/src-web/components/core/Separator.tsx
@@ -11,10 +11,12 @@ interface Props {
 export function Separator({ className, dashed, orientation = 'horizontal', children }: Props) {
  return (
    <div role="separator" className={classNames(className, 'flex items-center')}>
-      {children && <div className="text-sm text-fg-subtler mr-2 whitespace-nowrap">{children}</div>}
+      {children && (
+        <div className="text-sm text-text-subtlest mr-2 whitespace-nowrap">{children}</div>
+      )}
      <div
        className={classNames(
-          'h-0 border-t border-t-background-highlight',
+          'h-0 border-t border-t-border-subtle',
          dashed && 'border-dashed',
          orientation === 'horizontal' && 'w-full h-[1px]',
          orientation === 'vertical' && 'h-full w-[1px]',
--- a/src-web/components/core/StatusTag.tsx
+++ b/src-web/components/core/StatusTag.tsx
@@ -16,12 +16,12 @@ export function StatusTag({ response, className, showReason }: Props) {
      className={classNames(
        className,
        'font-mono',
-        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',
+        category === '0' && 'text-danger',
+        category === '1' && 'text-info',
+        category === '2' && 'text-success',
+        category === '3' && 'text-primary',
+        category === '4' && 'text-warning',
+        category === '5' && 'text-danger',
      )}
    >
      {label} {showReason && response.statusReason && response.statusReason}
--- a/src-web/components/core/Tabs/Tabs.tsx
+++ b/src-web/components/core/Tabs/Tabs.tsx
@@ -87,8 +87,8 @@ export function Tabs({
              'h-full flex items-center rounded',
              '!px-2 ml-[1px]',
              addBorders && 'border',
-              isActive ? 'text-fg' : 'text-fg-subtle hover:text-fg',
-              isActive && addBorders ? 'border-background-highlight' : 'border-transparent',
+              isActive ? 'text-text' : 'text-text-subtle hover:text-text',
+              isActive && addBorders ? 'border-border-subtle' : 'border-transparent',
            );

            if ('options' in t) {
@@ -103,7 +103,6 @@ export function Tabs({
                  onChange={t.options.onChange}
                >
                  <button
-                    color="custom"
                    onClick={isActive ? undefined : () => handleTabChange(t.value)}
                    className={btnClassName}
                  >
@@ -113,7 +112,7 @@ export function Tabs({
                    <Icon
                      size="sm"
                      icon="chevronDown"
-                      className={classNames('ml-1', isActive ? 'text-fg-subtle' : 'opacity-50')}
+                      className={classNames('ml-1', isActive ? 'text-text-subtle' : 'opacity-50')}
                    />
                  </button>
                </RadioDropdown>
@@ -122,7 +121,6 @@ export function Tabs({
              return (
                <button
                  key={t.value}
-                  color="custom"
                  onClick={() => handleTabChange(t.value)}
                  className={btnClassName}
                >
--- a/src-web/components/core/Toast.tsx
+++ b/src-web/components/core/Toast.tsx
@@ -58,13 +58,13 @@ export function Toast({
        className,
        'x-theme-toast',
        'pointer-events-auto',
-        'relative bg-background pointer-events-auto',
+        'relative bg-surface pointer-events-auto',
        'rounded-lg',
-        'border border-background-highlight shadow-lg',
+        'border border-border-subtle shadow-lg',
        'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-6rem)]',
        'w-[22rem] max-h-[80vh]',
        'm-2 grid grid-cols-[1fr_auto]',
-        'text-fg',
+        'text',
      )}
    >
      <div className="px-3 py-3 flex items-center gap-2">
@@ -72,10 +72,10 @@ export function Toast({
          <Icon
            icon={icon}
            className={classNames(
-              variant === 'success' && 'text-fg-success',
-              variant === 'warning' && 'text-fg-warning',
-              variant === 'error' && 'text-fg-danger',
-              variant === 'copied' && 'text-fg-primary',
+              variant === 'success' && 'text-success',
+              variant === 'warning' && 'text-warning',
+              variant === 'error' && 'text-danger',
+              variant === 'copied' && 'text-primary',
            )}
          />
        )}
@@ -96,7 +96,7 @@ export function Toast({
      {timeout != null && (
        <div className="w-full absolute bottom-0 left-0 right-0">
          <motion.div
-            className="bg-background-highlight h-0.5"
+            className="bg-surface-highlight h-0.5"
            initial={{ width: '100%' }}
            animate={{ width: '0%', opacity: 0.2 }}
            transition={{ duration: timeout / 1000, ease: 'linear' }}
--- a/src-web/components/responseViewers/ImageViewer.tsx
+++ b/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>
--- a/src-web/components/responseViewers/TextViewer.tsx
+++ b/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,
--- a/src-web/components/responseViewers/WebPageViewer.tsx
+++ b/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>
  );