From c9b4e6181cb05b8d728bb59e417ce639b56afbff Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Tue, 13 Aug 2024 07:44:28 -0700
Subject: [PATCH] Use new theme vars (#63)

This PR swaps the theme to use the new stuff from the Theme Studio
---
 .eslintrc.cjs                                 |  61 +--
 src-tauri/gen/schemas/capabilities.json       |   2 +-
 src-web/components/CommandPalette.tsx         |  10 +-
 src-web/components/CookieDialog.tsx           |   6 +-
 src-web/components/DefaultLayout.tsx          |   2 +-
 src-web/components/DropMarker.tsx             |   2 +-
 src-web/components/EmptyStateText.tsx         |   4 +-
 .../components/EnvironmentActionsDropdown.tsx |   4 +-
 src-web/components/EnvironmentEditDialog.tsx  |  10 +-
 src-web/components/ExportDataDialog.tsx       |   6 +-
 src-web/components/GrpcConnectionLayout.tsx   |   2 +-
 .../components/GrpcConnectionMessagesPane.tsx |  22 +-
 .../components/GrpcConnectionSetupPane.tsx    |   4 +-
 src-web/components/GrpcProtoSelection.tsx     |   6 +-
 src-web/components/HeaderSize.tsx             |   2 +-
 src-web/components/ImportDataDialog.tsx       |   2 +-
 src-web/components/Overlay.tsx                |   2 +-
 src-web/components/RecentRequestsDropdown.tsx |   4 +-
 .../components/RecentResponsesDropdown.tsx    |   8 +-
 src-web/components/RequestMethodDropdown.tsx  |   2 +-
 src-web/components/ResponsePane.tsx           |   6 +-
 src-web/components/SelectFile.tsx             |   2 +-
 src-web/components/Settings/Settings.tsx      |   2 +-
 .../Settings/SettingsAppearance.tsx           |  10 +-
 .../components/Settings/SettingsGeneral.tsx   |   2 +-
 src-web/components/Sidebar.tsx                |  18 +-
 src-web/components/UrlBar.tsx                 |   1 -
 src-web/components/WindowControls.tsx         |   6 +-
 src-web/components/Workspace.tsx              |  13 +-
 .../components/WorkspaceActionsDropdown.tsx   |   2 +-
 src-web/components/WorkspaceHeader.tsx        |   2 +-
 src-web/components/core/Banner.tsx            |   2 +-
 src-web/components/core/Button.tsx            |  18 +-
 src-web/components/core/Checkbox.tsx          |   4 +-
 src-web/components/core/CountBadge.tsx        |   2 +-
 src-web/components/core/Dialog.tsx            |   6 +-
 src-web/components/core/Dropdown.tsx          |  20 +-
 src-web/components/core/Editor/Editor.css     |  51 +--
 src-web/components/core/Editor/Editor.tsx     |  13 +-
 src-web/components/core/Editor/extensions.ts  |  18 +-
 src-web/components/core/FormattedError.tsx    |   4 +-
 src-web/components/core/Heading.tsx           |   2 +-
 src-web/components/core/HotKey.tsx            |   2 +-
 src-web/components/core/HotKeyLabel.tsx       |   4 +-
 src-web/components/core/HttpMethodTag.tsx     |   2 +-
 src-web/components/core/IconButton.tsx        |   8 +-
 src-web/components/core/InlineCode.tsx        |   4 +-
 src-web/components/core/Input.tsx             |  10 +-
 src-web/components/core/JsonAttributeTree.tsx |  20 +-
 src-web/components/core/KeyValueRow.tsx       |   6 +-
 src-web/components/core/PairEditor.tsx        |   2 +-
 src-web/components/core/PairOrBulkEditor.tsx  |   2 +-
 src-web/components/core/PlainInput.tsx        |  10 +-
 src-web/components/core/Select.tsx            |   6 +-
 src-web/components/core/Separator.tsx         |   6 +-
 src-web/components/core/StatusTag.tsx         |  12 +-
 src-web/components/core/Tabs/Tabs.tsx         |   8 +-
 src-web/components/core/Toast.tsx             |  16 +-
 .../responseViewers/ImageViewer.tsx           |   4 +-
 .../components/responseViewers/TextViewer.tsx |  17 +-
 .../responseViewers/WebPageViewer.tsx         |   2 +-
 src-web/hooks/Prompt.tsx                      |   2 +-
 src-web/lib/theme/appearance.ts               |   3 +-
 src-web/lib/theme/color.ts                    |  94 -----
 src-web/lib/theme/themes.ts                   |   8 +-
 src-web/lib/theme/themes/catppuccin.ts        | 198 +++++-----
 src-web/lib/theme/themes/dracula.ts           |  33 +-
 src-web/lib/theme/themes/github.ts            |  79 ++--
 src-web/lib/theme/themes/hotdog-stand.ts      |  83 ++---
 src-web/lib/theme/themes/monokai-pro.ts       | 290 +++++++--------
 src-web/lib/theme/themes/moonlight.ts         |  30 +-
 src-web/lib/theme/themes/relaxing.ts          |  18 +
 src-web/lib/theme/themes/rose-pine.ts         | 112 +++---
 src-web/lib/theme/themes/yaak.ts              | 102 +++--
 src-web/lib/theme/window.ts                   | 352 ++++++++++++------
 src-web/lib/theme/yaakColor.ts                | 140 +++++++
 src-web/main.css                              |   6 +-
 tailwind.config.cjs                           |  58 +--
 tsconfig.json                                 |   3 +-
 79 files changed, 1113 insertions(+), 1004 deletions(-)
 delete mode 100644 src-web/lib/theme/color.ts
 create mode 100644 src-web/lib/theme/themes/relaxing.ts
 create mode 100644 src-web/lib/theme/yaakColor.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index d3c06978..a88c2109 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,43 +1,46 @@
 module.exports = {
   extends: [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:import/recommended",
-    "plugin:jsx-a11y/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "eslint-config-prettier"
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:import/recommended',
+    'plugin:jsx-a11y/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'eslint-config-prettier',
   ],
-  parser: "@typescript-eslint/parser",
+  parser: '@typescript-eslint/parser',
   parserOptions: {
-    project: ["./tsconfig.json"]
+    project: ['./tsconfig.json'],
   },
   ignorePatterns: [
-    "scripts/**/*",
-    "plugin-runtime/**/*",
-    "plugin-runtime-types/**/*",
-    "src-tauri/**/*",
-    "plugins/**/*",
+    'scripts/**/*',
+    'plugin-runtime/**/*',
+    'plugin-runtime-types/**/*',
+    'src-tauri/**/*',
+    'plugins/**/*',
   ],
   settings: {
     react: {
-      version: "detect"
+      version: 'detect',
     },
-    "import/resolver": {
+    'import/resolver': {
       node: {
-        paths: ["src-web"],
-        extensions: [".ts", ".tsx"]
-      }
-    }
+        paths: ['src-web'],
+        extensions: ['.ts', '.tsx'],
+      },
+    },
   },
   rules: {
-    "jsx-a11y/no-autofocus": "off",
-    "react/react-in-jsx-scope": "off",
-    "import/no-unresolved": "off",
-    "@typescript-eslint/consistent-type-imports": ["error", {
-      prefer: "type-imports",
-      disallowTypeAnnotations: true,
-      fixStyle: "separate-type-imports"
-    }]
-  }
+    'jsx-a11y/no-autofocus': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'import/no-unresolved': 'off',
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      {
+        prefer: 'type-imports',
+        disallowTypeAnnotations: true,
+        fixStyle: 'separate-type-imports',
+      },
+    ],
+  },
 };
diff --git a/src-tauri/gen/schemas/capabilities.json b/src-tauri/gen/schemas/capabilities.json
index d45de640..07b2db23 100644
--- a/src-tauri/gen/schemas/capabilities.json
+++ b/src-tauri/gen/schemas/capabilities.json
@@ -1 +1 @@
-{"main":{"identifier":"main","description":"Main permissions","local":true,"windows":["*"],"permissions":["core:event:allow-emit","core:event:allow-listen","core:event:allow-unlisten","os:allow-os-type","clipboard-manager:allow-write-text","clipboard-manager:allow-clear","clipboard-manager:allow-read-text","dialog:allow-open","dialog:allow-save","fs:allow-read-file","fs:allow-read-text-file",{"identifier":"fs:scope","allow":[{"path":"$APPDATA"},{"path":"$APPDATA/**"}]},"shell:allow-open","core:webview:allow-set-webview-zoom","core:window:allow-close","core:window:allow-is-fullscreen","core:window:allow-maximize","core:window:allow-minimize","core:window:allow-toggle-maximize","core:window:allow-set-decorations","core:window:allow-set-title","core:window:allow-start-dragging","core:window:allow-unmaximize","core:window:allow-theme","clipboard-manager:allow-read-text","clipboard-manager:allow-write-text"]}}
\ No newline at end of file
+{"main":{"identifier":"main","description":"Main permissions","local":true,"windows":["*"],"permissions":["core:event:allow-emit","core:event:allow-listen","core:event:allow-unlisten","os:allow-os-type","clipboard-manager:allow-clear","clipboard-manager:allow-write-text","clipboard-manager:allow-read-text","dialog:allow-open","dialog:allow-save","fs:allow-read-file","fs:allow-read-text-file",{"identifier":"fs:scope","allow":[{"path":"$APPDATA"},{"path":"$APPDATA/**"}]},"shell:allow-open","core:webview:allow-set-webview-zoom","core:window:allow-close","core:window:allow-is-fullscreen","core:window:allow-maximize","core:window:allow-minimize","core:window:allow-toggle-maximize","core:window:allow-set-decorations","core:window:allow-set-title","core:window:allow-start-dragging","core:window:allow-unmaximize","core:window:allow-theme","clipboard-manager:allow-read-text","clipboard-manager:allow-write-text"]}}
\ No newline at end of file
diff --git a/src-web/components/CommandPalette.tsx b/src-web/components/CommandPalette.tsx
index 11605698..92bad6ed 100644
--- 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>
diff --git a/src-web/components/CookieDialog.tsx b/src-web/components/CookieDialog.tsx
index 3711e160..40245a36 100644
--- 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">
diff --git a/src-web/components/DefaultLayout.tsx b/src-web/components/DefaultLayout.tsx
index 59280ea0..e81341b6 100644
--- 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 />
diff --git a/src-web/components/DropMarker.tsx b/src-web/components/DropMarker.tsx
index a306a35d..80e42319 100644
--- 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>
     );
   },
diff --git a/src-web/components/EmptyStateText.tsx b/src-web/components/EmptyStateText.tsx
index dd4d5c79..ab46801e 100644
--- 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}
diff --git a/src-web/components/EnvironmentActionsDropdown.tsx b/src-web/components/EnvironmentActionsDropdown.tsx
index b16ef2e0..b31d03b4 100644
--- 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}
       >
diff --git a/src-web/components/EnvironmentEditDialog.tsx b/src-web/components/EnvironmentEditDialog.tsx
index 8c3a1cd0..329ca324 100644
--- 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}
diff --git a/src-web/components/ExportDataDialog.tsx b/src-web/components/ExportDataDialog.tsx
index f711fe39..03ea6aad 100644
--- 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)' : ''}
diff --git a/src-web/components/GrpcConnectionLayout.tsx b/src-web/components/GrpcConnectionLayout.tsx
index d4fc8560..e124ea26 100644
--- 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',
             )}
           >
diff --git a/src-web/components/GrpcConnectionMessagesPane.tsx b/src-web/components/GrpcConnectionMessagesPane.tsx
index 8f733ae1..5bb7be70 100644
--- 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')}
diff --git a/src-web/components/GrpcConnectionSetupPane.tsx b/src-web/components/GrpcConnectionSetupPane.tsx
index a27ce178..3de1e114 100644
--- 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',
diff --git a/src-web/components/GrpcProtoSelection.tsx b/src-web/components/GrpcProtoSelection.tsx
index e2b121d1..6bdbf1c8 100644
--- 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>
diff --git a/src-web/components/HeaderSize.tsx b/src-web/components/HeaderSize.tsx
index 7e9445c7..070ab564 100644
--- 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]',
diff --git a/src-web/components/ImportDataDialog.tsx b/src-web/components/ImportDataDialog.tsx
index ede0cbce..aea80d2b 100644
--- 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>
diff --git a/src-web/components/Overlay.tsx b/src-web/components/Overlay.tsx
index e0217a73..af6c528c 100644
--- 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',
               )}
             />
 
diff --git a/src-web/components/RecentRequestsDropdown.tsx b/src-web/components/RecentRequestsDropdown.tsx
index 0d01801e..cd5b607a 100644
--- 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)}
diff --git a/src-web/components/RecentResponsesDropdown.tsx b/src-web/components/RecentResponsesDropdown.tsx
index 71e34e50..8ef970fe 100644
--- 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"
       />
diff --git a/src-web/components/RequestMethodDropdown.tsx b/src-web/components/RequestMethodDropdown.tsx
index 65ae9cfa..23de4e9a 100644
--- 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>
diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx
index 6f7e601e..9d5d425e 100644
--- 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'}
                   />
diff --git a/src-web/components/SelectFile.tsx b/src-web/components/SelectFile.tsx
index 97eebf24..e580c7ea 100644
--- 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>
diff --git a/src-web/components/Settings/Settings.tsx b/src-web/components/Settings/Settings.tsx
index f845f550..ad8dce04 100644
--- 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}
diff --git a/src-web/components/Settings/SettingsAppearance.tsx b/src-web/components/Settings/SettingsAppearance.tsx
index e80c147c..b7cdd5b7 100644
--- 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}`}
             />
           ))}
diff --git a/src-web/components/Settings/SettingsGeneral.tsx b/src-web/components/Settings/SettingsGeneral.tsx
index 02cf4a15..38612d76 100644
--- 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>
diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx
index 9ad1eddf..90353ac3 100644
--- 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} />
               )}
diff --git a/src-web/components/UrlBar.tsx b/src-web/components/UrlBar.tsx
index a8bd5ad1..8fbe8171 100644
--- 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}
diff --git a/src-web/components/WindowControls.tsx b/src-web/components/WindowControls.tsx
index 059b7830..37277f3a 100644
--- 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">
diff --git a/src-web/components/Workspace.tsx b/src-web/components/Workspace.tsx
index 78ed1941..7e243f61 100644
--- 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>
diff --git a/src-web/components/WorkspaceActionsDropdown.tsx b/src-web/components/WorkspaceActionsDropdown.tsx
index 408229de..b54b839d 100644
--- 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}
diff --git a/src-web/components/WorkspaceHeader.tsx b/src-web/components/WorkspaceHeader.tsx
index aa012857..b700771f 100644
--- 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>
diff --git a/src-web/components/core/Banner.tsx b/src-web/components/core/Banner.tsx
index 2b171d84..6f3fcc38 100644
--- 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}
diff --git a/src-web/components/core/Button.tsx b/src-web/components/core/Button.tsx
index d5733788..b784e468 100644
--- 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);
diff --git a/src-web/components/core/Checkbox.tsx b/src-web/components/core/Checkbox.tsx
index 4c9a1d98..ea749dcc 100644
--- 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"
diff --git a/src-web/components/core/CountBadge.tsx b/src-web/components/core/CountBadge.tsx
index 5d222561..95c7efd4 100644
--- 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}
diff --git a/src-web/components/core/Dialog.tsx b/src-web/components/core/Dialog.tsx
index b5a71d41..e4db4036 100644
--- 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>
             ) : (
diff --git a/src-web/components/core/Dropdown.tsx b/src-web/components/core/Dropdown.tsx
index 829d98a9..1dbeedba 100644
--- 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}
     >
diff --git a/src-web/components/core/Editor/Editor.css b/src-web/components/core/Editor/Editor.css
index a47ad36e..e035ea24 100644
--- 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 */
diff --git a/src-web/components/core/Editor/Editor.tsx b/src-web/components/core/Editor/Editor.tsx
index 1676db1d..79f52c5a 100644
--- 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
diff --git a/src-web/components/core/Editor/extensions.ts b/src-web/components/core/Editor/extensions.ts
index bfb3e91a..32a82484 100644
--- 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 });
diff --git a/src-web/components/core/FormattedError.tsx b/src-web/components/core/FormattedError.tsx
index 48a6c4b8..7ea67337 100644
--- 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}
diff --git a/src-web/components/core/Heading.tsx b/src-web/components/core/Heading.tsx
index 7039ad56..148a840e 100644
--- 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',
diff --git a/src-web/components/core/HotKey.tsx b/src-web/components/core/HotKey.tsx
index a30ff6b2..c7611bf4 100644
--- 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) => (
diff --git a/src-web/components/core/HotKeyLabel.tsx b/src-web/components/core/HotKeyLabel.tsx
index c01faeb3..350f9752 100644
--- 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>
+  );
 }
diff --git a/src-web/components/core/HttpMethodTag.tsx b/src-web/components/core/HttpMethodTag.tsx
index e19b3a6e..dd2be67c 100644
--- 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]',
       )}
diff --git a/src-web/components/core/IconButton.tsx b/src-web/components/core/IconButton.tsx
index 5ae12c5f..6731439b 100644
--- 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',
         )}
diff --git a/src-web/components/core/InlineCode.tsx b/src-web/components/core/InlineCode.tsx
index 38bb73de..d6fe865f 100644
--- 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}
     />
diff --git a/src-web/components/core/Input.tsx b/src-web/components/core/Input.tsx
index fe94f69f..b78a9938 100644
--- 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)}
diff --git a/src-web/components/core/JsonAttributeTree.tsx b/src-web/components/core/JsonAttributeTree.tsx
index 64c0f8e4..fea404a5 100644
--- 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}
diff --git a/src-web/components/core/KeyValueRow.tsx b/src-web/components/core/KeyValueRow.tsx
index 29f18698..4d3b5c39 100644
--- 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}
diff --git a/src-web/components/core/PairEditor.tsx b/src-web/components/core/PairEditor.tsx
index 655aa452..ac7e30c2 100644
--- 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
diff --git a/src-web/components/core/PairOrBulkEditor.tsx b/src-web/components/core/PairOrBulkEditor.tsx
index a5b0b29e..5ea59201 100644
--- 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'}
diff --git a/src-web/components/core/PlainInput.tsx b/src-web/components/core/PlainInput.tsx
index b263acee..ca6a44e8 100644
--- 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)}
diff --git a/src-web/components/core/Select.tsx b/src-web/components/core/Select.tsx
index 5a086d98..f6283dbe 100644
--- 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',
diff --git a/src-web/components/core/Separator.tsx b/src-web/components/core/Separator.tsx
index 3cc324b2..9b879c00 100644
--- 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]',
diff --git a/src-web/components/core/StatusTag.tsx b/src-web/components/core/StatusTag.tsx
index 32750150..e1c0b10a 100644
--- 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}
diff --git a/src-web/components/core/Tabs/Tabs.tsx b/src-web/components/core/Tabs/Tabs.tsx
index fc65fdd2..de750dab 100644
--- 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}
                 >
diff --git a/src-web/components/core/Toast.tsx b/src-web/components/core/Toast.tsx
index ef77c673..888f74f7 100644
--- 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' }}
diff --git a/src-web/components/responseViewers/ImageViewer.tsx b/src-web/components/responseViewers/ImageViewer.tsx
index aa8b8869..0454267c 100644
--- 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>
diff --git a/src-web/components/responseViewers/TextViewer.tsx b/src-web/components/responseViewers/TextViewer.tsx
index 7729bdda..8fff7cc6 100644
--- 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,
diff --git a/src-web/components/responseViewers/WebPageViewer.tsx b/src-web/components/responseViewers/WebPageViewer.tsx
index e10992d5..ec32e290 100644
--- 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>
   );
diff --git a/src-web/hooks/Prompt.tsx b/src-web/hooks/Prompt.tsx
index 9cc9e42b..1ad7531f 100644
--- a/src-web/hooks/Prompt.tsx
+++ b/src-web/hooks/Prompt.tsx
@@ -52,7 +52,7 @@ export function Prompt({
         onChange={setValue}
       />
       <HStack space={2} justifyContent="end">
-        <Button onClick={onHide} variant="border">
+        <Button onClick={onHide} variant="border" color="secondary">
           Cancel
         </Button>
         <Button type="submit" color="primary">
diff --git a/src-web/lib/theme/appearance.ts b/src-web/lib/theme/appearance.ts
index d3fab159..2fac6fac 100644
--- a/src-web/lib/theme/appearance.ts
+++ b/src-web/lib/theme/appearance.ts
@@ -1,5 +1,6 @@
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
-import type { Appearance } from './window';
+
+type Appearance = 'light' | 'dark';
 
 export function getCSSAppearance(): Appearance {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
diff --git a/src-web/lib/theme/color.ts b/src-web/lib/theme/color.ts
deleted file mode 100644
index d9faeda7..00000000
--- a/src-web/lib/theme/color.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import parseColor from 'parse-color';
-
-export class Color {
-  private theme: 'dark' | 'light' = 'light';
-
-  private hue: number = 0;
-  private saturation: number = 0;
-  private lightness: number = 0;
-  private alpha: number = 1;
-
-  constructor(cssColor: string, theme: 'dark' | 'light') {
-    try {
-      const { hsla } = parseColor(cssColor || '');
-      this.hue = hsla[0];
-      this.saturation = hsla[1];
-      this.lightness = hsla[2];
-      this.alpha = hsla[3] ?? 1;
-      this.theme = theme;
-    } catch (err) {
-      console.log('Failed to parse CSS color', cssColor, err);
-    }
-  }
-
-  static transparent(): Color {
-    return new Color('rgb(0,0,0)', 'light').translucify(1);
-  }
-
-  static white(): Color {
-    return new Color('rgb(0,0,0)', 'light').lower(1);
-  }
-
-  static black(): Color {
-    return new Color('rgb(0,0,0)', 'light').lift(1);
-  }
-
-  private clone(): Color {
-    return new Color(this.css(), this.theme);
-  }
-
-  lower(mod: number): Color {
-    return this.theme === 'dark' ? this._darken(mod) : this._lighten(mod);
-  }
-
-  lift(mod: number): Color {
-    return this.theme === 'dark' ? this._lighten(mod) : this._darken(mod);
-  }
-
-  translucify(mod: number): Color {
-    const c = this.clone();
-    c.alpha = c.alpha - c.alpha * mod;
-    return c;
-  }
-
-  desaturate(mod: number): Color {
-    const c = this.clone();
-    c.saturation = c.saturation - c.saturation * mod;
-    return c;
-  }
-
-  saturate(mod: number): Color {
-    const c = this.clone();
-    c.saturation = this.saturation + (100 - this.saturation) * mod;
-    return c;
-  }
-
-  lighterThan(c: Color): boolean {
-    return this.lightness > c.lightness;
-  }
-
-  css(): string {
-    // If opacity is 1, allow for Tailwind modification
-    const h = Math.round(this.hue);
-    const s = Math.round(this.saturation);
-    const l = Math.round(this.lightness);
-    const a = Math.round(this.alpha * 100) / 100;
-    return `hsla(${h}, ${s}%, ${l}%, ${a})`;
-  }
-
-  hex(): string {
-    return parseColor(this.css()).hex;
-  }
-
-  private _lighten(mod: number): Color {
-    const c = this.clone();
-    c.lightness = this.lightness + (100 - this.lightness) * mod;
-    return c;
-  }
-
-  private _darken(mod: number): Color {
-    const c = this.clone();
-    c.lightness = this.lightness - this.lightness * mod;
-    return c;
-  }
-}
diff --git a/src-web/lib/theme/themes.ts b/src-web/lib/theme/themes.ts
index 20b0dbe5..6a84fa50 100644
--- a/src-web/lib/theme/themes.ts
+++ b/src-web/lib/theme/themes.ts
@@ -1,9 +1,8 @@
 import { catppuccin } from './themes/catppuccin';
-import { dracula } from './themes/dracula';
 import { github } from './themes/github';
 import { hotdogStand } from './themes/hotdog-stand';
 import { monokaiPro } from './themes/monokai-pro';
-import { moonlight } from './themes/moonlight';
+import { relaxing } from './themes/relaxing';
 import { rosePine } from './themes/rose-pine';
 import { yaak, yaakDark, yaakLight } from './themes/yaak';
 
@@ -13,10 +12,9 @@ export const defaultLightTheme = yaakLight;
 export const yaakThemes = [
   ...yaak,
   ...catppuccin,
+  ...relaxing,
   ...rosePine,
-  ...monokaiPro,
   ...github,
-  ...moonlight,
-  ...dracula,
+  ...monokaiPro,
   ...hotdogStand,
 ];
diff --git a/src-web/lib/theme/themes/catppuccin.ts b/src-web/lib/theme/themes/catppuccin.ts
index fa7b8b21..9b191318 100644
--- a/src-web/lib/theme/themes/catppuccin.ts
+++ b/src-web/lib/theme/themes/catppuccin.ts
@@ -1,32 +1,28 @@
-import { Color } from '../color';
+import { YaakColor } from '../yaakColor';
 import type { YaakTheme } from '../window';
 
 export const catppuccinLatte: YaakTheme = {
   name: 'Catppuccin Latte',
   id: 'catppuccin-latte',
-  background: new Color('#eff1f5', 'light'),
-  foreground: new Color('#4c4f69', 'dark'),
-  foregroundSubtle: new Color('#6c6f85', 'light'),
-  foregroundSubtler: new Color('#8c8fa1', 'light'),
-  colors: {
-    primary: new Color('#8839ef', 'light'),
-    secondary: new Color('#6c6f85', 'light'),
-    info: new Color('#7287fd', 'light'),
-    success: new Color('#179299', 'light'),
-    notice: new Color('#df8e1d', 'light'),
-    warning: new Color('#fe640b', 'light'),
-    danger: new Color('#e64553', 'light'),
-  },
+  surface: new YaakColor('#eff1f5', 'light'),
+  text: new YaakColor('#4c4f69', 'dark'),
+  textSubtle: new YaakColor('#6c6f85', 'light'),
+  textSubtlest: new YaakColor('#8c8fa1', 'light'),
+  primary: new YaakColor('#8839ef', 'light'),
+  secondary: new YaakColor('#6c6f85', 'light'),
+  info: new YaakColor('#7287fd', 'light'),
+  success: new YaakColor('#179299', 'light'),
+  notice: new YaakColor('#df8e1d', 'light'),
+  warning: new YaakColor('#fe640b', 'light'),
+  danger: new YaakColor('#e64553', 'light'),
   components: {
     sidebar: {
-      background: new Color('#e6e9ef', 'light'),
-      backgroundHighlight: new Color('#e6e9ef', 'light').lift(0.05),
-      foregroundSubtler: new Color('#7287fd', 'light'),
+      surface: new YaakColor('#e6e9ef', 'light'),
+      border: new YaakColor('#e6e9ef', 'light').lift(0.05),
     },
     appHeader: {
-      background: new Color('#dce0e8', 'light'),
-      backgroundHighlight: new Color('#e6e9ef', 'light').lift(0.05),
-      foregroundSubtler: new Color('#7287fd', 'light'),
+      surface: new YaakColor('#dce0e8', 'light'),
+      border: new YaakColor('#e6e9ef', 'light').lift(0.05),
     },
   },
 };
@@ -34,45 +30,41 @@ export const catppuccinLatte: YaakTheme = {
 export const catppuccinMacchiato: YaakTheme = {
   name: 'Catppuccin Macchiato',
   id: 'catppuccin-macchiato',
-  background: new Color('#1e2030', 'dark'),
-  foreground: new Color('#cad3f5', 'dark'),
-  foregroundSubtle: new Color('#a5adcb', 'dark'),
-  foregroundSubtler: new Color('#8087a2', 'dark'),
-  colors: {
-    primary: new Color('#c6a0f6', 'dark'),
-    secondary: new Color('#b8c0e0', 'dark'),
-    info: new Color('#8aadf4', 'dark'),
-    success: new Color('#a6da95', 'dark'),
-    notice: new Color('#eed49f', 'dark'),
-    warning: new Color('#f5a97f', 'dark'),
-    danger: new Color('#ed8796', 'dark'),
-  },
+  surface: new YaakColor('#1e2030', 'dark'),
+  text: new YaakColor('#cad3f5', 'dark'),
+  textSubtle: new YaakColor('#a5adcb', 'dark'),
+  textSubtlest: new YaakColor('#8087a2', 'dark'),
+  primary: new YaakColor('#c6a0f6', 'dark'),
+  secondary: new YaakColor('#b8c0e0', 'dark'),
+  info: new YaakColor('#8aadf4', 'dark'),
+  success: new YaakColor('#a6da95', 'dark'),
+  notice: new YaakColor('#eed49f', 'dark'),
+  warning: new YaakColor('#f5a97f', 'dark'),
+  danger: new YaakColor('#ed8796', 'dark'),
   components: {
     dialog: {
-      background: new Color('#181825', 'dark'),
+      surface: new YaakColor('#181825', 'dark'),
     },
     sidebar: {
-      background: new Color('#24273a', 'dark'),
-      backgroundHighlight: new Color('#24273a', 'dark').lift(0.05),
+      surface: new YaakColor('#24273a', 'dark'),
+      border: new YaakColor('#24273a', 'dark').lift(0.05),
     },
     appHeader: {
-      background: new Color('#181926', 'dark'),
-      backgroundHighlight: new Color('#181926', 'dark').lift(0.1),
+      surface: new YaakColor('#181926', 'dark'),
+      border: new YaakColor('#181926', 'dark').lift(0.1),
     },
     responsePane: {
-      background: new Color('#24273a', 'dark'),
-      backgroundHighlight: new Color('#24273a', 'dark').lift(0.05),
+      surface: new YaakColor('#24273a', 'dark'),
+      border: new YaakColor('#24273a', 'dark').lift(0.05),
     },
     button: {
-      colors: {
-        primary: new Color('#c6a0f6', 'dark').lower(0.1),
-        secondary: new Color('#b8c0e0', 'dark').lower(0.1),
-        info: new Color('#8aadf4', 'dark').lower(0.1),
-        success: new Color('#a6da95', 'dark').lower(0.1),
-        notice: new Color('#eed49f', 'dark').lower(0.1),
-        warning: new Color('#f5a97f', 'dark').lower(0.1),
-        danger: new Color('#ed8796', 'dark').lower(0.1),
-      },
+      primary: new YaakColor('#c6a0f6', 'dark').lower(0.1),
+      secondary: new YaakColor('#b8c0e0', 'dark').lower(0.1),
+      info: new YaakColor('#8aadf4', 'dark').lower(0.1),
+      success: new YaakColor('#a6da95', 'dark').lower(0.1),
+      notice: new YaakColor('#eed49f', 'dark').lower(0.1),
+      warning: new YaakColor('#f5a97f', 'dark').lower(0.1),
+      danger: new YaakColor('#ed8796', 'dark').lower(0.1),
     },
   },
 };
@@ -80,45 +72,41 @@ export const catppuccinMacchiato: YaakTheme = {
 export const catppuccinFrappe: YaakTheme = {
   name: 'Catppuccin Frappé',
   id: 'catppuccin-frappe',
-  background: new Color('#292c3c', 'dark'),
-  foreground: new Color('#c6d0f5', 'dark'),
-  foregroundSubtle: new Color('#a5adce', 'dark'),
-  foregroundSubtler: new Color('#838ba7', 'dark'),
-  colors: {
-    primary: new Color('#ca9ee6', 'dark'),
-    secondary: new Color('#b8c0e0', 'dark'),
-    info: new Color('#8caaee', 'dark'),
-    success: new Color('#a6d189', 'dark'),
-    notice: new Color('#e5c890', 'dark'),
-    warning: new Color('#ef9f76', 'dark'),
-    danger: new Color('#e78284', 'dark'),
-  },
+  surface: new YaakColor('#292c3c', 'dark'),
+  text: new YaakColor('#c6d0f5', 'dark'),
+  textSubtle: new YaakColor('#a5adce', 'dark'),
+  textSubtlest: new YaakColor('#838ba7', 'dark'),
+  primary: new YaakColor('#ca9ee6', 'dark'),
+  secondary: new YaakColor('#b8c0e0', 'dark'),
+  info: new YaakColor('#8caaee', 'dark'),
+  success: new YaakColor('#a6d189', 'dark'),
+  notice: new YaakColor('#e5c890', 'dark'),
+  warning: new YaakColor('#ef9f76', 'dark'),
+  danger: new YaakColor('#e78284', 'dark'),
   components: {
     dialog: {
-      background: new Color('#181825', 'dark'),
+      surface: new YaakColor('#181825', 'dark'),
     },
     sidebar: {
-      background: new Color('#303446', 'dark'),
-      backgroundHighlight: new Color('#303446', 'dark').lift(0.05),
+      surface: new YaakColor('#303446', 'dark'),
+      border: new YaakColor('#303446', 'dark').lift(0.05),
     },
     appHeader: {
-      background: new Color('#232634', 'dark'),
-      backgroundHighlight: new Color('#232634', 'dark').lift(0.1),
+      surface: new YaakColor('#232634', 'dark'),
+      border: new YaakColor('#232634', 'dark').lift(0.1),
     },
     responsePane: {
-      background: new Color('#303446', 'dark'),
-      backgroundHighlight: new Color('#303446', 'dark').lift(0.05),
+      surface: new YaakColor('#303446', 'dark'),
+      border: new YaakColor('#303446', 'dark').lift(0.05),
     },
     button: {
-      colors: {
-        primary: new Color('#ca9ee6', 'dark').lower(0.1),
-        secondary: new Color('#b8c0e0', 'dark').lower(0.1),
-        info: new Color('#8caaee', 'dark').lower(0.1),
-        success: new Color('#a6d189', 'dark').lower(0.1),
-        notice: new Color('#e5c890', 'dark').lower(0.1),
-        warning: new Color('#ef9f76', 'dark').lower(0.1),
-        danger: new Color('#e78284', 'dark').lower(0.1),
-      },
+      primary: new YaakColor('#ca9ee6', 'dark').lower(0.1),
+      secondary: new YaakColor('#b8c0e0', 'dark').lower(0.1),
+      info: new YaakColor('#8caaee', 'dark').lower(0.1),
+      success: new YaakColor('#a6d189', 'dark').lower(0.1),
+      notice: new YaakColor('#e5c890', 'dark').lower(0.1),
+      warning: new YaakColor('#ef9f76', 'dark').lower(0.1),
+      danger: new YaakColor('#e78284', 'dark').lower(0.1),
     },
   },
 };
@@ -126,45 +114,41 @@ export const catppuccinFrappe: YaakTheme = {
 const catppuccinMocha: YaakTheme = {
   name: 'Catppuccin Mocha',
   id: 'catppuccin-mocha',
-  background: new Color('#181825', 'dark'),
-  foreground: new Color('#cdd6f4', 'dark'),
-  foregroundSubtle: new Color('#a6adc8', 'dark'),
-  foregroundSubtler: new Color('#7f849c', 'dark'),
-  colors: {
-    primary: new Color('#c6a0f6', 'dark'),
-    secondary: new Color('#bac2de', 'dark'),
-    info: new Color('#89b4fa', 'dark'),
-    success: new Color('#a6e3a1', 'dark'),
-    notice: new Color('#f9e2af', 'dark'),
-    warning: new Color('#fab387', 'dark'),
-    danger: new Color('#f38ba8', 'dark'),
-  },
+  surface: new YaakColor('#181825', 'dark'),
+  text: new YaakColor('#cdd6f4', 'dark'),
+  textSubtle: new YaakColor('#a6adc8', 'dark'),
+  textSubtlest: new YaakColor('#7f849c', 'dark'),
+  primary: new YaakColor('#c6a0f6', 'dark'),
+  secondary: new YaakColor('#bac2de', 'dark'),
+  info: new YaakColor('#89b4fa', 'dark'),
+  success: new YaakColor('#a6e3a1', 'dark'),
+  notice: new YaakColor('#f9e2af', 'dark'),
+  warning: new YaakColor('#fab387', 'dark'),
+  danger: new YaakColor('#f38ba8', 'dark'),
   components: {
     dialog: {
-      background: new Color('#181825', 'dark'),
+      surface: new YaakColor('#181825', 'dark'),
     },
     sidebar: {
-      background: new Color('#1e1e2e', 'dark'),
-      backgroundHighlight: new Color('#1e1e2e', 'dark').lift(0.05),
+      surface: new YaakColor('#1e1e2e', 'dark'),
+      border: new YaakColor('#1e1e2e', 'dark').lift(0.05),
     },
     appHeader: {
-      background: new Color('#11111b', 'dark'),
-      backgroundHighlight: new Color('#11111b', 'dark').lift(0.1),
+      surface: new YaakColor('#11111b', 'dark'),
+      border: new YaakColor('#11111b', 'dark').lift(0.1),
     },
     responsePane: {
-      background: new Color('#1e1e2e', 'dark'),
-      backgroundHighlight: new Color('#1e1e2e', 'dark').lift(0.05),
+      surface: new YaakColor('#1e1e2e', 'dark'),
+      border: new YaakColor('#1e1e2e', 'dark').lift(0.05),
     },
     button: {
-      colors: {
-        primary: new Color('#cba6f7', 'dark').lower(0.2).desaturate(0.2),
-        secondary: new Color('#bac2de', 'dark').lower(0.2).desaturate(0.2),
-        info: new Color('#89b4fa', 'dark').lower(0.2).desaturate(0.2),
-        success: new Color('#a6e3a1', 'dark').lower(0.2).desaturate(0.2),
-        notice: new Color('#f9e2af', 'dark').lower(0.2).desaturate(0.2),
-        warning: new Color('#fab387', 'dark').lower(0.2).desaturate(0.2),
-        danger: new Color('#f38ba8', 'dark').lower(0.2).desaturate(0.2),
-      },
+      primary: new YaakColor('#cba6f7', 'dark').lower(0.2).desaturate(0.2),
+      secondary: new YaakColor('#bac2de', 'dark').lower(0.2).desaturate(0.2),
+      info: new YaakColor('#89b4fa', 'dark').lower(0.2).desaturate(0.2),
+      success: new YaakColor('#a6e3a1', 'dark').lower(0.2).desaturate(0.2),
+      notice: new YaakColor('#f9e2af', 'dark').lower(0.2).desaturate(0.2),
+      warning: new YaakColor('#fab387', 'dark').lower(0.2).desaturate(0.2),
+      danger: new YaakColor('#f38ba8', 'dark').lower(0.2).desaturate(0.2),
     },
   },
 };
diff --git a/src-web/lib/theme/themes/dracula.ts b/src-web/lib/theme/themes/dracula.ts
index 8655be31..6890a354 100644
--- a/src-web/lib/theme/themes/dracula.ts
+++ b/src-web/lib/theme/themes/dracula.ts
@@ -1,30 +1,27 @@
-import { Color } from '../color';
 import type { YaakTheme } from '../window';
+import { YaakColor } from '../yaakColor';
 
 const draculaDefault: YaakTheme = {
   id: 'dracula',
   name: 'Dracula',
-  background: new Color('#282A36', 'dark'),
-  backgroundHighlight: new Color('#343746', 'dark'),
-  backgroundHighlightSecondary: new Color('#424450', 'dark'),
-  foreground: new Color('#F8F8F2', 'dark'),
-  foregroundSubtle: new Color('hsl(232,14%,65%)', 'dark'),
-  foregroundSubtler: new Color('hsl(232,14%,50%)', 'dark'),
-  colors: {
-    primary: new Color('#BD93F9', 'dark'),
-    secondary: new Color('#6272A4', 'dark'),
-    info: new Color('#8BE9FD', 'dark'),
-    success: new Color('#50FA7B', 'dark'),
-    notice: new Color('#F1FA8C', 'dark'),
-    warning: new Color('#FFB86C', 'dark'),
-    danger: new Color('#FF5555', 'dark'),
-  },
+  surface: new YaakColor('#282A36', 'dark'),
+  surfaceHighlight: new YaakColor('#343746', 'dark'),
+  text: new YaakColor('#F8F8F2', 'dark'),
+  textSubtle: new YaakColor('hsl(232,14%,65%)', 'dark'),
+  textSubtlest: new YaakColor('hsl(232,14%,50%)', 'dark'),
+  primary: new YaakColor('#BD93F9', 'dark'),
+  secondary: new YaakColor('#6272A4', 'dark'),
+  info: new YaakColor('#8BE9FD', 'dark'),
+  success: new YaakColor('#50FA7B', 'dark'),
+  notice: new YaakColor('#F1FA8C', 'dark'),
+  warning: new YaakColor('#FFB86C', 'dark'),
+  danger: new YaakColor('#FF5555', 'dark'),
   components: {
     sidebar: {
-      background: new Color('hsl(230,15%,24%)', 'dark'),
+      backdrop: new YaakColor('hsl(230,15%,24%)', 'dark'),
     },
     appHeader: {
-      background: new Color('#21222C', 'dark'),
+      backdrop: new YaakColor('#21222C', 'dark'),
     },
   },
 };
diff --git a/src-web/lib/theme/themes/github.ts b/src-web/lib/theme/themes/github.ts
index 59f30026..dd1e5ee6 100644
--- a/src-web/lib/theme/themes/github.ts
+++ b/src-web/lib/theme/themes/github.ts
@@ -1,57 +1,52 @@
-import { Color } from '../color';
+import { YaakColor } from '../yaakColor';
 import type { YaakTheme } from '../window';
 
 const githubDark: YaakTheme = {
   id: 'github-dark',
-  name: 'GitHub Dark',
-  background: new Color('#0d1218', 'dark'),
-  backgroundHighlight: new Color('#171c23', 'dark'),
-  backgroundHighlightSecondary: new Color('#1c2127', 'dark'),
-  foreground: new Color('#dce3eb', 'dark'),
-  foregroundSubtle: new Color('#88919b', 'dark'),
-  foregroundSubtler: new Color('#6b727d', 'dark'),
-  colors: {
-    primary: new Color('#a579ef', 'dark').lift(0.1),
-    secondary: new Color('#6b727d', 'dark').lift(0.1),
-    info: new Color('#458def', 'dark').lift(0.1),
-    success: new Color('#3eb24f', 'dark').lift(0.1),
-    notice: new Color('#dca132', 'dark').lift(0.1),
-    warning: new Color('#ec7934', 'dark').lift(0.1),
-    danger: new Color('#ee5049', 'dark').lift(0.1),
-  },
+  name: 'GitHub',
+  surface: new YaakColor('#0d1218', 'dark'),
+  border: new YaakColor('#171c23', 'dark'),
+  surfaceHighlight: new YaakColor('#1c2127', 'dark'),
+  text: new YaakColor('#dce3eb', 'dark'),
+  textSubtle: new YaakColor('#88919b', 'dark'),
+  textSubtlest: new YaakColor('#6b727d', 'dark'),
+  primary: new YaakColor('#a579ef', 'dark').lift(0.1),
+  secondary: new YaakColor('#6b727d', 'dark').lift(0.1),
+  info: new YaakColor('#458def', 'dark').lift(0.1),
+  success: new YaakColor('#3eb24f', 'dark').lift(0.1),
+  notice: new YaakColor('#dca132', 'dark').lift(0.1),
+  warning: new YaakColor('#ec7934', 'dark').lift(0.1),
+  danger: new YaakColor('#ee5049', 'dark').lift(0.1),
   components: {
     button: {
-      colors: {
-        primary: new Color('#a579ef', 'dark'),
-        secondary: new Color('#6b727d', 'dark'),
-        info: new Color('#458def', 'dark'),
-        success: new Color('#3eb24f', 'dark'),
-        notice: new Color('#dca132', 'dark'),
-        warning: new Color('#ec7934', 'dark'),
-        danger: new Color('#ee5049', 'dark'),
-      },
+      primary: new YaakColor('#a579ef', 'dark'),
+      secondary: new YaakColor('#6b727d', 'dark'),
+      info: new YaakColor('#458def', 'dark'),
+      success: new YaakColor('#3eb24f', 'dark'),
+      notice: new YaakColor('#dca132', 'dark'),
+      warning: new YaakColor('#ec7934', 'dark'),
+      danger: new YaakColor('#ee5049', 'dark'),
     },
   },
 };
 
 export const githubLight: YaakTheme = {
   id: 'github-light',
-  name: 'GitHub Light',
-  background: new Color('#ffffff', 'light'),
-  backgroundHighlight: new Color('hsl(210,15%,92%)', 'light'),
-  backgroundHighlightSecondary: new Color('hsl(210,29%,94%)', 'light'),
-  foreground: new Color('#1f2328', 'light'),
-  foregroundSubtle: new Color('#636c76', 'light'),
-  foregroundSubtler: new Color('#828d94', 'light'),
-  colors: {
-    primary: new Color('#8250df', 'light'),
-    secondary: new Color('#6e7781', 'light'),
-    info: new Color('hsl(212,92%,48%)', 'light'),
-    success: new Color('hsl(137,66%,32%)', 'light'),
-    notice: new Color('hsl(40,100%,40%)', 'light'),
-    warning: new Color('hsl(24,100%,44%)', 'light'),
-    danger: new Color('#d1242f', 'light'),
-  },
+  name: 'GitHub',
+  surface: new YaakColor('#ffffff', 'light'),
+  surfaceHighlight: new YaakColor('hsl(210,29%,94%)', 'light'),
+  border: new YaakColor('hsl(210,15%,92%)', 'light'),
+  borderSubtle: new YaakColor('hsl(210,15%,92%)', 'light'),
+  text: new YaakColor('#1f2328', 'light'),
+  textSubtle: new YaakColor('#636c76', 'light'),
+  textSubtlest: new YaakColor('#828d94', 'light'),
+  primary: new YaakColor('#8250df', 'light'),
+  secondary: new YaakColor('#6e7781', 'light'),
+  info: new YaakColor('hsl(212,92%,48%)', 'light'),
+  success: new YaakColor('hsl(137,66%,32%)', 'light'),
+  notice: new YaakColor('hsl(40,100%,40%)', 'light'),
+  warning: new YaakColor('hsl(24,100%,44%)', 'light'),
+  danger: new YaakColor('#d1242f', 'light'),
 };
 
 export const github = [githubDark, githubLight];
diff --git a/src-web/lib/theme/themes/hotdog-stand.ts b/src-web/lib/theme/themes/hotdog-stand.ts
index a3e7f9a5..d954b282 100644
--- a/src-web/lib/theme/themes/hotdog-stand.ts
+++ b/src-web/lib/theme/themes/hotdog-stand.ts
@@ -1,59 +1,56 @@
-import { Color } from '../color';
+import { YaakColor } from '../yaakColor';
 import type { YaakTheme } from '../window';
 
 export const hotdogStandDefault: YaakTheme = {
   id: 'hotdog-stand',
   name: 'Hotdog Stand',
-  background: new Color('#ff0000', 'dark'),
-  backgroundHighlight: new Color('#000000', 'dark'),
-  backgroundHighlightSecondary: new Color('#000000', 'dark'),
-  foreground: new Color('#ffffff', 'dark'),
-  foregroundSubtle: new Color('#ffffff', 'dark'),
-  foregroundSubtler: new Color('#ffff00', 'dark'),
-  colors: {
-    primary: new Color('#ffff00', 'dark'),
-    secondary: new Color('#ffff00', 'dark'),
-    info: new Color('#ffff00', 'dark'),
-    notice: new Color('#ffff00', 'dark'),
-    warning: new Color('#ffff00', 'dark'),
-    danger: new Color('#ffff00', 'dark'),
-  },
+  surface: new YaakColor('#ff0000', 'dark'),
+  border: new YaakColor('#000000', 'dark'),
+  surfaceHighlight: new YaakColor('#000000', 'dark'),
+  text: new YaakColor('#ffffff', 'dark'),
+  textSubtle: new YaakColor('#ffffff', 'dark'),
+  textSubtlest: new YaakColor('#ffff00', 'dark'),
+  primary: new YaakColor('#ffff00', 'dark'),
+  secondary: new YaakColor('#ffff00', 'dark'),
+  info: new YaakColor('#ffff00', 'dark'),
+  success: new YaakColor('#ffff00', 'dark'),
+  notice: new YaakColor('#ffff00', 'dark'),
+  warning: new YaakColor('#ffff00', 'dark'),
+  danger: new YaakColor('#ffff00', 'dark'),
   components: {
     appHeader: {
-      background: new Color('#000000', 'dark'),
-      foreground: new Color('#ffffff', 'dark'),
-      foregroundSubtle: new Color('#ffff00', 'dark'),
-      foregroundSubtler: new Color('#ff0000', 'dark'),
+      surface: new YaakColor('#000000', 'dark'),
+      text: new YaakColor('#ffffff', 'dark'),
+      textSubtle: new YaakColor('#ffff00', 'dark'),
+      textSubtlest: new YaakColor('#ff0000', 'dark'),
     },
     menu: {
-      background: new Color('#000000', 'dark'),
-      backgroundHighlight: new Color('#ff0000', 'dark'),
-      backgroundHighlightSecondary: new Color('#ff0000', 'dark'),
-      foreground: new Color('#ffffff', 'dark'),
-      foregroundSubtle: new Color('#ffff00', 'dark'),
-      foregroundSubtler: new Color('#ffff00', 'dark'),
+      surface: new YaakColor('#000000', 'dark'),
+      border: new YaakColor('#ff0000', 'dark'),
+      surfaceHighlight: new YaakColor('#ff0000', 'dark'),
+      text: new YaakColor('#ffffff', 'dark'),
+      textSubtle: new YaakColor('#ffff00', 'dark'),
+      textSubtlest: new YaakColor('#ffff00', 'dark'),
     },
     button: {
-      background: new Color('#000000', 'dark'),
-      foreground: new Color('#ffffff', 'dark'),
-      colors: {
-        primary: new Color('#000000', 'dark'),
-        secondary: new Color('#ffffff', 'dark'),
-        info: new Color('#000000', 'dark'),
-        notice: new Color('#ffff00', 'dark'),
-        warning: new Color('#000000', 'dark'),
-        danger: new Color('#ff0000', 'dark'),
-      },
+      surface: new YaakColor('#000000', 'dark'),
+      text: new YaakColor('#ffffff', 'dark'),
+      primary: new YaakColor('#000000', 'dark'),
+      secondary: new YaakColor('#ffffff', 'dark'),
+      info: new YaakColor('#000000', 'dark'),
+      success: new YaakColor('#ffff00', 'dark'),
+      notice: new YaakColor('#ffff00', 'dark'),
+      warning: new YaakColor('#000000', 'dark'),
+      danger: new YaakColor('#ff0000', 'dark'),
     },
     editor: {
-      colors: {
-        primary: new Color('#ffffff', 'dark'),
-        secondary: new Color('#ffffff', 'dark'),
-        info: new Color('#ffffff', 'dark'),
-        notice: new Color('#ffff00', 'dark'),
-        warning: new Color('#ffffff', 'dark'),
-        danger: new Color('#ffffff', 'dark'),
-      },
+      primary: new YaakColor('#ffffff', 'dark'),
+      secondary: new YaakColor('#ffffff', 'dark'),
+      info: new YaakColor('#ffffff', 'dark'),
+      success: new YaakColor('#ffffff', 'dark'),
+      notice: new YaakColor('#ffff00', 'dark'),
+      warning: new YaakColor('#ffffff', 'dark'),
+      danger: new YaakColor('#ffffff', 'dark'),
     },
   },
 };
diff --git a/src-web/lib/theme/themes/monokai-pro.ts b/src-web/lib/theme/themes/monokai-pro.ts
index 12218d91..217ea885 100644
--- a/src-web/lib/theme/themes/monokai-pro.ts
+++ b/src-web/lib/theme/themes/monokai-pro.ts
@@ -1,41 +1,37 @@
-import { Color } from '../color';
+import { YaakColor } from '../yaakColor';
 import type { YaakTheme } from '../window';
 
 export const monokaiProDefault: YaakTheme = {
   id: 'monokai-pro',
   name: 'Monokai Pro',
-  background: new Color('#2d2a2e', 'dark'),
-  foreground: new Color('#fcfcfa', 'dark'),
-  foregroundSubtle: new Color('#c1c0c0', 'dark'),
-  foregroundSubtler: new Color('#939293', 'dark'),
+  surface: new YaakColor('#2d2a2e', 'dark'),
+  text: new YaakColor('#fcfcfa', 'dark'),
+  textSubtle: new YaakColor('#c1c0c0', 'dark'),
+  textSubtlest: new YaakColor('#939293', 'dark'),
 
-  colors: {
-    primary: new Color('#ab9df2', 'dark'),
-    secondary: new Color('#c1c0c0', 'dark'),
-    info: new Color('#78dce8', 'dark'),
-    success: new Color('#a9dc76', 'dark'),
-    notice: new Color('#ffd866', 'dark'),
-    warning: new Color('#fc9867', 'dark'),
-    danger: new Color('#ff6188', 'dark'),
-  },
+  primary: new YaakColor('#ab9df2', 'dark'),
+  secondary: new YaakColor('#c1c0c0', 'dark'),
+  info: new YaakColor('#78dce8', 'dark'),
+  success: new YaakColor('#a9dc76', 'dark'),
+  notice: new YaakColor('#ffd866', 'dark'),
+  warning: new YaakColor('#fc9867', 'dark'),
+  danger: new YaakColor('#ff6188', 'dark'),
 
   components: {
     appHeader: {
-      background: new Color('#221f22', 'dark'),
-      foreground: new Color('#c1c0c0', 'dark'),
-      foregroundSubtle: new Color('#939293', 'dark'),
-      foregroundSubtler: new Color('#727072', 'dark'),
+      surface: new YaakColor('#221f22', 'dark'),
+      text: new YaakColor('#c1c0c0', 'dark'),
+      textSubtle: new YaakColor('#939293', 'dark'),
+      textSubtlest: new YaakColor('#727072', 'dark'),
     },
     button: {
-      colors: {
-        primary: new Color('#ab9df2', 'dark').lower(0.1),
-        secondary: new Color('#c1c0c0', 'dark').lower(0.1),
-        info: new Color('#78dce8', 'dark').lower(0.1),
-        success: new Color('#a9dc76', 'dark').lower(0.1),
-        notice: new Color('#ffd866', 'dark').lower(0.1),
-        warning: new Color('#fc9867', 'dark').lower(0.1),
-        danger: new Color('#ff6188', 'dark').lower(0.1),
-      },
+      primary: new YaakColor('#ab9df2', 'dark').lower(0.1),
+      secondary: new YaakColor('#c1c0c0', 'dark').lower(0.1),
+      info: new YaakColor('#78dce8', 'dark').lower(0.1),
+      success: new YaakColor('#a9dc76', 'dark').lower(0.1),
+      notice: new YaakColor('#ffd866', 'dark').lower(0.1),
+      warning: new YaakColor('#fc9867', 'dark').lower(0.1),
+      danger: new YaakColor('#ff6188', 'dark').lower(0.1),
     },
   },
 };
@@ -43,38 +39,34 @@ export const monokaiProDefault: YaakTheme = {
 const monokaiProClassic: YaakTheme = {
   id: 'monokai-pro-classic',
   name: 'Monokai Pro Classic',
-  background: new Color('#272822', 'dark'),
-  foreground: new Color('#fdfff1', 'dark'),
-  foregroundSubtle: new Color('#c0c1b5', 'dark'),
-  foregroundSubtler: new Color('#919288', 'dark'),
+  surface: new YaakColor('#272822', 'dark'),
+  text: new YaakColor('#fdfff1', 'dark'),
+  textSubtle: new YaakColor('#c0c1b5', 'dark'),
+  textSubtlest: new YaakColor('#919288', 'dark'),
 
-  colors: {
-    primary: new Color('#ae81ff', 'dark'),
-    secondary: new Color('#b2b9bd', 'dark'),
-    info: new Color('#66d9ef', 'dark'),
-    success: new Color('#a6e22e', 'dark'),
-    notice: new Color('#e6db74', 'dark'),
-    warning: new Color('#fd971f', 'dark'),
-    danger: new Color('#f92672', 'dark'),
-  },
+  primary: new YaakColor('#ae81ff', 'dark'),
+  secondary: new YaakColor('#b2b9bd', 'dark'),
+  info: new YaakColor('#66d9ef', 'dark'),
+  success: new YaakColor('#a6e22e', 'dark'),
+  notice: new YaakColor('#e6db74', 'dark'),
+  warning: new YaakColor('#fd971f', 'dark'),
+  danger: new YaakColor('#f92672', 'dark'),
 
   components: {
     appHeader: {
-      background: new Color('#1d1e19', 'dark'),
-      foreground: new Color('#b2b9bd', 'dark'),
-      foregroundSubtle: new Color('#767b81', 'dark'),
-      foregroundSubtler: new Color('#696d77', 'dark'),
+      surface: new YaakColor('#1d1e19', 'dark'),
+      text: new YaakColor('#b2b9bd', 'dark'),
+      textSubtle: new YaakColor('#767b81', 'dark'),
+      textSubtlest: new YaakColor('#696d77', 'dark'),
     },
     button: {
-      colors: {
-        primary: new Color('#ae81ff', 'dark').lower(0.1),
-        secondary: new Color('#b2b9bd', 'dark').lower(0.1),
-        info: new Color('#66d9ef', 'dark').lower(0.1),
-        success: new Color('#a6e22e', 'dark').lower(0.1),
-        notice: new Color('#e6db74', 'dark').lower(0.1),
-        warning: new Color('#fd971f', 'dark').lower(0.1),
-        danger: new Color('#f92672', 'dark').lower(0.1),
-      },
+      primary: new YaakColor('#ae81ff', 'dark').lower(0.1),
+      secondary: new YaakColor('#b2b9bd', 'dark').lower(0.1),
+      info: new YaakColor('#66d9ef', 'dark').lower(0.1),
+      success: new YaakColor('#a6e22e', 'dark').lower(0.1),
+      notice: new YaakColor('#e6db74', 'dark').lower(0.1),
+      warning: new YaakColor('#fd971f', 'dark').lower(0.1),
+      danger: new YaakColor('#f92672', 'dark').lower(0.1),
     },
   },
 };
@@ -82,38 +74,34 @@ const monokaiProClassic: YaakTheme = {
 const monokaiProMachine: YaakTheme = {
   id: 'monokai-pro-machine',
   name: 'Monokai Pro Machine',
-  background: new Color('#273136', 'dark'),
-  foreground: new Color('#eaf2f1', 'dark'),
-  foregroundSubtle: new Color('#8b9798', 'dark'),
-  foregroundSubtler: new Color('#6b7678', 'dark'),
+  surface: new YaakColor('#273136', 'dark'),
+  text: new YaakColor('#eaf2f1', 'dark'),
+  textSubtle: new YaakColor('#8b9798', 'dark'),
+  textSubtlest: new YaakColor('#6b7678', 'dark'),
 
-  colors: {
-    primary: new Color('#baa0f8', 'dark'),
-    secondary: new Color('#b8c4c3', 'dark'),
-    info: new Color('#7cd5f1', 'dark'),
-    success: new Color('#a2e57b', 'dark'),
-    notice: new Color('#ffed72', 'dark'),
-    warning: new Color('#ffb270', 'dark'),
-    danger: new Color('#ff6d7e', 'dark'),
-  },
+  primary: new YaakColor('#baa0f8', 'dark'),
+  secondary: new YaakColor('#b8c4c3', 'dark'),
+  info: new YaakColor('#7cd5f1', 'dark'),
+  success: new YaakColor('#a2e57b', 'dark'),
+  notice: new YaakColor('#ffed72', 'dark'),
+  warning: new YaakColor('#ffb270', 'dark'),
+  danger: new YaakColor('#ff6d7e', 'dark'),
 
   components: {
     appHeader: {
-      background: new Color('#1d2528', 'dark'),
-      foreground: new Color('#b2b9bd', 'dark'),
-      foregroundSubtle: new Color('#767b81', 'dark'),
-      foregroundSubtler: new Color('#696d77', 'dark'),
+      surface: new YaakColor('#1d2528', 'dark'),
+      text: new YaakColor('#b2b9bd', 'dark'),
+      textSubtle: new YaakColor('#767b81', 'dark'),
+      textSubtlest: new YaakColor('#696d77', 'dark'),
     },
     button: {
-      colors: {
-        primary: new Color('#baa0f8', 'dark').lower(0.1),
-        secondary: new Color('#b8c4c3', 'dark').lower(0.1),
-        info: new Color('#7cd5f1', 'dark').lower(0.1),
-        success: new Color('#a2e57b', 'dark').lower(0.1),
-        notice: new Color('#ffed72', 'dark').lower(0.1),
-        warning: new Color('#ffb270', 'dark').lower(0.1),
-        danger: new Color('#ff6d7e', 'dark').lower(0.1),
-      },
+      primary: new YaakColor('#baa0f8', 'dark').lower(0.1),
+      secondary: new YaakColor('#b8c4c3', 'dark').lower(0.1),
+      info: new YaakColor('#7cd5f1', 'dark').lower(0.1),
+      success: new YaakColor('#a2e57b', 'dark').lower(0.1),
+      notice: new YaakColor('#ffed72', 'dark').lower(0.1),
+      warning: new YaakColor('#ffb270', 'dark').lower(0.1),
+      danger: new YaakColor('#ff6d7e', 'dark').lower(0.1),
     },
   },
 };
@@ -121,38 +109,34 @@ const monokaiProMachine: YaakTheme = {
 const monokaiProOctagon: YaakTheme = {
   id: 'monokai-pro-octagon',
   name: 'Monokai Pro Octagon',
-  background: new Color('#282a3a', 'dark'),
-  foreground: new Color('#eaf2f1', 'dark'),
-  foregroundSubtle: new Color('#b2b9bd', 'dark'),
-  foregroundSubtler: new Color('#767b81', 'dark'),
+  surface: new YaakColor('#282a3a', 'dark'),
+  text: new YaakColor('#eaf2f1', 'dark'),
+  textSubtle: new YaakColor('#b2b9bd', 'dark'),
+  textSubtlest: new YaakColor('#767b81', 'dark'),
 
-  colors: {
-    primary: new Color('#c39ac9', 'dark'),
-    secondary: new Color('#b2b9bd', 'dark'),
-    info: new Color('#9cd1bb', 'dark'),
-    success: new Color('#bad761', 'dark'),
-    notice: new Color('#ffd76d', 'dark'),
-    warning: new Color('#ff9b5e', 'dark'),
-    danger: new Color('#ff657a', 'dark'),
-  },
+  primary: new YaakColor('#c39ac9', 'dark'),
+  secondary: new YaakColor('#b2b9bd', 'dark'),
+  info: new YaakColor('#9cd1bb', 'dark'),
+  success: new YaakColor('#bad761', 'dark'),
+  notice: new YaakColor('#ffd76d', 'dark'),
+  warning: new YaakColor('#ff9b5e', 'dark'),
+  danger: new YaakColor('#ff657a', 'dark'),
 
   components: {
     appHeader: {
-      background: new Color('#1e1f2b', 'dark'),
-      foreground: new Color('#b2b9bd', 'dark'),
-      foregroundSubtle: new Color('#767b81', 'dark'),
-      foregroundSubtler: new Color('#696d77', 'dark'),
+      surface: new YaakColor('#1e1f2b', 'dark'),
+      text: new YaakColor('#b2b9bd', 'dark'),
+      textSubtle: new YaakColor('#767b81', 'dark'),
+      textSubtlest: new YaakColor('#696d77', 'dark'),
     },
     button: {
-      colors: {
-        primary: new Color('#c39ac9', 'dark').lower(0.1).desaturate(0.1),
-        secondary: new Color('#b2b9bd', 'dark').lower(0.1).desaturate(0.1),
-        info: new Color('#9cd1bb', 'dark').lower(0.1).desaturate(0.1),
-        success: new Color('#bad761', 'dark').lower(0.1).desaturate(0.1),
-        notice: new Color('#ffd76d', 'dark').lower(0.1).desaturate(0.1),
-        warning: new Color('#ff9b5e', 'dark').lower(0.1).desaturate(0.1),
-        danger: new Color('#ff657a', 'dark').lower(0.1).desaturate(0.1),
-      },
+      primary: new YaakColor('#c39ac9', 'dark').lower(0.1).desaturate(0.1),
+      secondary: new YaakColor('#b2b9bd', 'dark').lower(0.1).desaturate(0.1),
+      info: new YaakColor('#9cd1bb', 'dark').lower(0.1).desaturate(0.1),
+      success: new YaakColor('#bad761', 'dark').lower(0.1).desaturate(0.1),
+      notice: new YaakColor('#ffd76d', 'dark').lower(0.1).desaturate(0.1),
+      warning: new YaakColor('#ff9b5e', 'dark').lower(0.1).desaturate(0.1),
+      danger: new YaakColor('#ff657a', 'dark').lower(0.1).desaturate(0.1),
     },
   },
 };
@@ -160,38 +144,34 @@ const monokaiProOctagon: YaakTheme = {
 const monokaiProRistretto: YaakTheme = {
   id: 'monokai-pro-ristretto',
   name: 'Monokai Pro Ristretto',
-  background: new Color('#2c2525', 'dark'),
-  foreground: new Color('#fff1f3', 'dark'),
-  foregroundSubtle: new Color('#c3b7b8', 'dark'),
-  foregroundSubtler: new Color('#948a8b', 'dark'),
+  surface: new YaakColor('#2c2525', 'dark'),
+  text: new YaakColor('#fff1f3', 'dark'),
+  textSubtle: new YaakColor('#c3b7b8', 'dark'),
+  textSubtlest: new YaakColor('#948a8b', 'dark'),
 
-  colors: {
-    primary: new Color('#a8a9eb', 'dark'),
-    secondary: new Color('#c3b7b8', 'dark'),
-    info: new Color('#85dacc', 'dark'),
-    success: new Color('#adda78', 'dark'),
-    notice: new Color('#f9cc6c', 'dark'),
-    warning: new Color('#f38d70', 'dark'),
-    danger: new Color('#fd6883', 'dark'),
-  },
+  primary: new YaakColor('#a8a9eb', 'dark'),
+  secondary: new YaakColor('#c3b7b8', 'dark'),
+  info: new YaakColor('#85dacc', 'dark'),
+  success: new YaakColor('#adda78', 'dark'),
+  notice: new YaakColor('#f9cc6c', 'dark'),
+  warning: new YaakColor('#f38d70', 'dark'),
+  danger: new YaakColor('#fd6883', 'dark'),
 
   components: {
     appHeader: {
-      background: new Color('#211c1c', 'dark'),
-      foreground: new Color('#c3b7b8', 'dark'),
-      foregroundSubtle: new Color('#948a8b', 'dark'),
-      foregroundSubtler: new Color('#72696a', 'dark'),
+      surface: new YaakColor('#211c1c', 'dark'),
+      text: new YaakColor('#c3b7b8', 'dark'),
+      textSubtle: new YaakColor('#948a8b', 'dark'),
+      textSubtlest: new YaakColor('#72696a', 'dark'),
     },
     button: {
-      colors: {
-        primary: new Color('#a8a9eb', 'dark').lower(0.1),
-        secondary: new Color('#c3b7b8', 'dark').lower(0.1),
-        info: new Color('#85dacc', 'dark').lower(0.1),
-        success: new Color('#adda78', 'dark').lower(0.1),
-        notice: new Color('#f9cc6c', 'dark').lower(0.1),
-        warning: new Color('#f38d70', 'dark').lower(0.1),
-        danger: new Color('#fd6883', 'dark').lower(0.1),
-      },
+      primary: new YaakColor('#a8a9eb', 'dark').lower(0.1),
+      secondary: new YaakColor('#c3b7b8', 'dark').lower(0.1),
+      info: new YaakColor('#85dacc', 'dark').lower(0.1),
+      success: new YaakColor('#adda78', 'dark').lower(0.1),
+      notice: new YaakColor('#f9cc6c', 'dark').lower(0.1),
+      warning: new YaakColor('#f38d70', 'dark').lower(0.1),
+      danger: new YaakColor('#fd6883', 'dark').lower(0.1),
     },
   },
 };
@@ -199,38 +179,34 @@ const monokaiProRistretto: YaakTheme = {
 const monokaiProSpectrum: YaakTheme = {
   id: 'monokai-pro-spectrum',
   name: 'Monokai Pro Spectrum',
-  background: new Color('#222222', 'dark'),
-  foreground: new Color('#f7f1ff', 'dark'),
-  foregroundSubtle: new Color('#bab6c0', 'dark'),
-  foregroundSubtler: new Color('#8b888f', 'dark'),
+  surface: new YaakColor('#222222', 'dark'),
+  text: new YaakColor('#f7f1ff', 'dark'),
+  textSubtle: new YaakColor('#bab6c0', 'dark'),
+  textSubtlest: new YaakColor('#8b888f', 'dark'),
 
-  colors: {
-    primary: new Color('#948ae3', 'dark'),
-    secondary: new Color('#bab6c0', 'dark'),
-    info: new Color('#5ad4e6', 'dark'),
-    success: new Color('#7bd88f', 'dark'),
-    notice: new Color('#fce566', 'dark'),
-    warning: new Color('#fd9353', 'dark'),
-    danger: new Color('#fc618d', 'dark'),
-  },
+  primary: new YaakColor('#948ae3', 'dark'),
+  secondary: new YaakColor('#bab6c0', 'dark'),
+  info: new YaakColor('#5ad4e6', 'dark'),
+  success: new YaakColor('#7bd88f', 'dark'),
+  notice: new YaakColor('#fce566', 'dark'),
+  warning: new YaakColor('#fd9353', 'dark'),
+  danger: new YaakColor('#fc618d', 'dark'),
 
   components: {
     appHeader: {
-      background: new Color('#191919', 'dark'),
-      foreground: new Color('#bab6c0', 'dark'),
-      foregroundSubtle: new Color('#8b888f', 'dark'),
-      foregroundSubtler: new Color('#69676c', 'dark'),
+      surface: new YaakColor('#191919', 'dark'),
+      text: new YaakColor('#bab6c0', 'dark'),
+      textSubtle: new YaakColor('#8b888f', 'dark'),
+      textSubtlest: new YaakColor('#69676c', 'dark'),
     },
     button: {
-      colors: {
-        primary: new Color('#948ae3', 'dark').lower(0.1),
-        secondary: new Color('#bab6c0', 'dark').lower(0.1),
-        info: new Color('#5ad4e6', 'dark').lower(0.1),
-        success: new Color('#7bd88f', 'dark').lower(0.1),
-        notice: new Color('#fce566', 'dark').lower(0.1),
-        warning: new Color('#fd9353', 'dark').lower(0.1),
-        danger: new Color('#fc618d', 'dark').lower(0.1),
-      },
+      primary: new YaakColor('#948ae3', 'dark').lower(0.1),
+      secondary: new YaakColor('#bab6c0', 'dark').lower(0.1),
+      info: new YaakColor('#5ad4e6', 'dark').lower(0.1),
+      success: new YaakColor('#7bd88f', 'dark').lower(0.1),
+      notice: new YaakColor('#fce566', 'dark').lower(0.1),
+      warning: new YaakColor('#fd9353', 'dark').lower(0.1),
+      danger: new YaakColor('#fc618d', 'dark').lower(0.1),
     },
   },
 };
diff --git a/src-web/lib/theme/themes/moonlight.ts b/src-web/lib/theme/themes/moonlight.ts
index a24a0cae..c381e940 100644
--- a/src-web/lib/theme/themes/moonlight.ts
+++ b/src-web/lib/theme/themes/moonlight.ts
@@ -1,5 +1,5 @@
-import { Color } from '../color';
 import type { YaakTheme } from '../window';
+import { YaakColor } from '../yaakColor';
 
 export const colors = {
   lightRed: '#ff98a4',
@@ -40,25 +40,23 @@ export const colors = {
 const moonlightDefault: YaakTheme = {
   id: 'moonlight',
   name: 'Moonlight',
-  background: new Color('#222436', 'dark'),
-  foreground: new Color('#d5def8', 'dark'),
-  foregroundSubtle: new Color('#828bb8', 'dark'),
-  foregroundSubtler: new Color('hsl(232,26%,43%)', 'dark'),
-  colors: {
-    primary: new Color(colors.purple, 'dark'),
-    secondary: new Color(colors.desaturatedGray, 'dark'),
-    info: new Color(colors.blue, 'dark'),
-    success: new Color(colors.teal, 'dark'),
-    notice: new Color(colors.yellow, 'dark'),
-    warning: new Color(colors.orange, 'dark'),
-    danger: new Color(colors.red, 'dark'),
-  },
+  surface: new YaakColor('#222436', 'dark'),
+  text: new YaakColor('#d5def8', 'dark'),
+  textSubtle: new YaakColor('#828bb8', 'dark'),
+  textSubtlest: new YaakColor('hsl(232,26%,43%)', 'dark'),
+  primary: new YaakColor(colors.purple, 'dark'),
+  secondary: new YaakColor(colors.desaturatedGray, 'dark'),
+  info: new YaakColor(colors.blue, 'dark'),
+  success: new YaakColor(colors.teal, 'dark'),
+  notice: new YaakColor(colors.yellow, 'dark'),
+  warning: new YaakColor(colors.orange, 'dark'),
+  danger: new YaakColor(colors.red, 'dark'),
   components: {
     appHeader: {
-      background: new Color(colors.gray3, 'dark'),
+      surface: new YaakColor(colors.gray3, 'dark'),
     },
     sidebar: {
-      background: new Color(colors.gray3, 'dark'),
+      surface: new YaakColor(colors.gray3, 'dark'),
     },
   },
 };
diff --git a/src-web/lib/theme/themes/relaxing.ts b/src-web/lib/theme/themes/relaxing.ts
new file mode 100644
index 00000000..86cd2924
--- /dev/null
+++ b/src-web/lib/theme/themes/relaxing.ts
@@ -0,0 +1,18 @@
+import { YaakColor } from '../yaakColor';
+import type { YaakTheme } from '../window';
+
+const relaxingDefault: YaakTheme = {
+  name: 'Relaxing',
+  id: 'relaxing',
+  surface: new YaakColor('#2b1e3b', 'dark'),
+  text: new YaakColor('#ede2f5', 'dark'),
+  primary: new YaakColor('#cba6f7', 'dark'),
+  secondary: new YaakColor('#bac2de', 'dark'),
+  info: new YaakColor('#89b4fa', 'dark'),
+  success: new YaakColor('#a6e3a1', 'dark'),
+  notice: new YaakColor('#f9e2af', 'dark'),
+  warning: new YaakColor('#fab387', 'dark'),
+  danger: new YaakColor('#f38ba8', 'dark'),
+};
+
+export const relaxing = [relaxingDefault];
diff --git a/src-web/lib/theme/themes/rose-pine.ts b/src-web/lib/theme/themes/rose-pine.ts
index 479ecbab..34b6e0b3 100644
--- a/src-web/lib/theme/themes/rose-pine.ts
+++ b/src-web/lib/theme/themes/rose-pine.ts
@@ -1,33 +1,31 @@
-import { Color } from '../color';
+import { YaakColor } from '../yaakColor';
 import type { YaakTheme } from '../window';
 
 export const rosePineDefault: YaakTheme = {
   id: 'rose-pine',
   name: 'Rosé Pine',
-  background: new Color('#191724', 'dark'),
-  foreground: new Color('#e0def4', 'dark'),
-  foregroundSubtle: new Color('#908caa', 'dark'),
-  foregroundSubtler: new Color('#6e6a86', 'dark'),
-  colors: {
-    primary: new Color('#c4a7e7', 'dark'),
-    secondary: new Color('#6e6a86', 'dark'),
-    info: new Color('#67abcb', 'dark'),
-    success: new Color('#9cd8d8', 'dark'),
-    notice: new Color('#f6c177', 'dark'),
-    warning: new Color('#f1a3a1', 'dark'),
-    danger: new Color('#eb6f92', 'dark'),
-  },
+  surface: new YaakColor('#191724', 'dark'),
+  text: new YaakColor('#e0def4', 'dark'),
+  textSubtle: new YaakColor('#908caa', 'dark'),
+  textSubtlest: new YaakColor('#6e6a86', 'dark'),
+  primary: new YaakColor('#c4a7e7', 'dark'),
+  secondary: new YaakColor('#6e6a86', 'dark'),
+  info: new YaakColor('#67abcb', 'dark'),
+  success: new YaakColor('#9cd8d8', 'dark'),
+  notice: new YaakColor('#f6c177', 'dark'),
+  warning: new YaakColor('#f1a3a1', 'dark'),
+  danger: new YaakColor('#eb6f92', 'dark'),
   components: {
     responsePane: {
-      background: new Color('#1f1d2e', 'dark'),
+      surface: new YaakColor('#1f1d2e', 'dark'),
     },
     sidebar: {
-      background: new Color('#1f1d2e', 'dark'),
+      surface: new YaakColor('#1f1d2e', 'dark'),
     },
     menu: {
-      background: new Color('#393552', 'dark'),
-      foregroundSubtle: new Color('#908caa', 'dark').lift(0.15),
-      foregroundSubtler: new Color('#6e6a86', 'dark').lift(0.15),
+      surface: new YaakColor('#393552', 'dark'),
+      textSubtle: new YaakColor('#908caa', 'dark').lift(0.15),
+      textSubtlest: new YaakColor('#6e6a86', 'dark').lift(0.15),
     },
   },
 };
@@ -35,30 +33,28 @@ export const rosePineDefault: YaakTheme = {
 const rosePineMoon: YaakTheme = {
   id: 'rose-pine-moon',
   name: 'Rosé Pine Moon',
-  background: new Color('#232136', 'dark'),
-  foreground: new Color('#e0def4', 'dark'),
-  foregroundSubtle: new Color('#908caa', 'dark'),
-  foregroundSubtler: new Color('#6e6a86', 'dark'),
-  colors: {
-    primary: new Color('#c4a7e7', 'dark'),
-    secondary: new Color('#908caa', 'dark'),
-    info: new Color('#68aeca', 'dark'),
-    success: new Color('#9ccfd8', 'dark'),
-    notice: new Color('#f6c177', 'dark'),
-    warning: new Color('#ea9a97', 'dark'),
-    danger: new Color('#eb6f92', 'dark'),
-  },
+  surface: new YaakColor('#232136', 'dark'),
+  text: new YaakColor('#e0def4', 'dark'),
+  textSubtle: new YaakColor('#908caa', 'dark'),
+  textSubtlest: new YaakColor('#6e6a86', 'dark'),
+  primary: new YaakColor('#c4a7e7', 'dark'),
+  secondary: new YaakColor('#908caa', 'dark'),
+  info: new YaakColor('#68aeca', 'dark'),
+  success: new YaakColor('#9ccfd8', 'dark'),
+  notice: new YaakColor('#f6c177', 'dark'),
+  warning: new YaakColor('#ea9a97', 'dark'),
+  danger: new YaakColor('#eb6f92', 'dark'),
   components: {
     responsePane: {
-      background: new Color('#2a273f', 'dark'),
+      surface: new YaakColor('#2a273f', 'dark'),
     },
     sidebar: {
-      background: new Color('#2a273f', 'dark'),
+      surface: new YaakColor('#2a273f', 'dark'),
     },
     menu: {
-      background: new Color('#393552', 'dark'),
-      foregroundSubtle: new Color('#908caa', 'dark').lift(0.15),
-      foregroundSubtler: new Color('#6e6a86', 'dark').lift(0.15),
+      surface: new YaakColor('#393552', 'dark'),
+      textSubtle: new YaakColor('#908caa', 'dark').lift(0.15),
+      textSubtlest: new YaakColor('#6e6a86', 'dark').lift(0.15),
     },
   },
 };
@@ -66,39 +62,39 @@ const rosePineMoon: YaakTheme = {
 const rosePineDawn: YaakTheme = {
   id: 'rose-pine-dawn',
   name: 'Rosé Pine Dawn',
-  background: new Color('#faf4ed', 'light'),
-  backgroundHighlight: new Color('#dfdad9', 'light'),
-  backgroundHighlightSecondary: new Color('#f4ede8', 'light'),
-  foreground: new Color('#575279', 'light'),
-  foregroundSubtle: new Color('#797593', 'light'),
-  foregroundSubtler: new Color('#9893a5', 'light'),
-  colors: {
-    primary: new Color('#9070ad', 'light'),
-    secondary: new Color('#6e6a86', 'light'),
-    info: new Color('#2d728d', 'light'),
-    success: new Color('#4f8c96', 'light'),
-    notice: new Color('#cb862d', 'light'),
-    warning: new Color('#ce7b78', 'light'),
-    danger: new Color('#b4637a', 'light'),
-  },
+  surface: new YaakColor('#faf4ed', 'light'),
+  border: new YaakColor('#dfdad9', 'light'),
+  surfaceHighlight: new YaakColor('#f4ede8', 'light'),
+  text: new YaakColor('#575279', 'light'),
+  textSubtle: new YaakColor('#797593', 'light'),
+  textSubtlest: new YaakColor('#9893a5', 'light'),
+  primary: new YaakColor('#9070ad', 'light'),
+  secondary: new YaakColor('#6e6a86', 'light'),
+  info: new YaakColor('#2d728d', 'light'),
+  success: new YaakColor('#4f8c96', 'light'),
+  notice: new YaakColor('#cb862d', 'light'),
+  warning: new YaakColor('#ce7b78', 'light'),
+  danger: new YaakColor('#b4637a', 'light'),
   components: {
     responsePane: {
-      backgroundHighlight: new Color('#e8e4e2', 'light'),
+      border: new YaakColor('#e8e4e2', 'light'),
     },
     sidebar: {
-      backgroundHighlight: new Color('#e8e4e2', 'light'),
+      border: new YaakColor('#e8e4e2', 'light'),
     },
     appHeader: {
-      backgroundHighlight: new Color('#e8e4e2', 'light'),
+      border: new YaakColor('#e8e4e2', 'light'),
     },
     input: {
-      backgroundHighlight: new Color('#dfdad9', 'light'),
+      border: new YaakColor('#dfdad9', 'light'),
     },
     dialog: {
-      backgroundHighlight: new Color('#e8e4e2', 'light'),
+      border: new YaakColor('#e8e4e2', 'light'),
     },
     menu: {
-      background: new Color('#f2e9e1', 'light'),
+      surface: new YaakColor('#f2e9e1', 'light'),
+      border: new YaakColor('#dfdad9', 'light'),
+      surfaceHighlight: new YaakColor('#6e6a86', 'light'),
     },
   },
 };
diff --git a/src-web/lib/theme/themes/yaak.ts b/src-web/lib/theme/themes/yaak.ts
index 1a495f68..04251353 100644
--- a/src-web/lib/theme/themes/yaak.ts
+++ b/src-web/lib/theme/themes/yaak.ts
@@ -1,82 +1,72 @@
-import { Color } from '../color';
+import { YaakColor } from '../yaakColor';
 import type { YaakTheme } from '../window';
 
 export const yaakLight: YaakTheme = {
   id: 'yaak-light',
-  name: 'Yaak Light',
-  background: new Color('hsl(216,24%,100%)', 'light'),
-  backgroundHighlight: new Color('hsl(216,24%,93%)', 'light'),
-  backgroundHighlightSecondary: new Color('hsl(216,24%,87%)', 'light'),
-  foreground: new Color('hsl(219,23%,15%)', 'light'),
-  foregroundSubtle: new Color('hsl(219,23%,15%)', 'light').lower(0.3),
-  foregroundSubtler: new Color('hsl(219,23%,15%)', 'light').lower(0.5),
-  colors: {
-    primary: new Color('hsl(266,100%,70%)', 'light'),
-    secondary: new Color('hsl(220,24%,59%)', 'light'),
-    info: new Color('hsl(206,100%,48%)', 'light'),
-    success: new Color('hsl(155,95%,33%)', 'light'),
-    notice: new Color('hsl(45,100%,41%)', 'light'),
-    warning: new Color('hsl(30,100%,43%)', 'light'),
-    danger: new Color('hsl(335,75%,57%)', 'light'),
-  },
+  name: 'Yaak',
+  surface: new YaakColor('hsl(216,24%,100%)', 'light'),
+  border: new YaakColor('hsl(216,24%,93%)', 'light'),
+  surfaceHighlight: new YaakColor('hsl(216,24%,87%)', 'light'),
+  text: new YaakColor('hsl(219,23%,15%)', 'light'),
+  textSubtle: new YaakColor('hsl(219,23%,15%)', 'light').lower(0.3),
+  textSubtlest: new YaakColor('hsl(219,23%,15%)', 'light').lower(0.5),
+  primary: new YaakColor('hsl(266,100%,70%)', 'light'),
+  secondary: new YaakColor('hsl(220,24%,59%)', 'light'),
+  info: new YaakColor('hsl(206,100%,48%)', 'light'),
+  success: new YaakColor('hsl(155,95%,33%)', 'light'),
+  notice: new YaakColor('hsl(45,100%,41%)', 'light'),
+  warning: new YaakColor('hsl(30,100%,43%)', 'light'),
+  danger: new YaakColor('hsl(335,75%,57%)', 'light'),
   components: {
     sidebar: {
-      background: new Color('hsl(216,24%,97%)', 'light'),
-      backgroundHighlight: new Color('hsl(216,24%,93%)', 'light'),
-      backgroundHighlightSecondary: new Color('hsl(216,24%,90%)', 'light'),
+      surface: new YaakColor('hsl(216,24%,97%)', 'light'),
+      border: new YaakColor('hsl(216,24%,93%)', 'light'),
+      surfaceHighlight: new YaakColor('hsl(216,24%,90%)', 'light'),
     },
   },
 };
 
 export const yaakDark: YaakTheme = {
   id: 'yaak-dark',
-  name: 'Yaak Dark',
-  background: new Color('hsl(244,23%,14%)', 'dark'),
-  backgroundHighlight: new Color('hsl(244,23%,23%)', 'dark'),
-  backgroundHighlightSecondary: new Color('hsl(244,23%,20%)', 'dark'),
-  foreground: new Color('hsl(245,23%,83%)', 'dark'),
-  foregroundSubtle: new Color('hsl(245,20%,65%)', 'dark'),
-  foregroundSubtler: new Color('hsl(245,18%,51%)', 'dark'),
-
-  colors: {
-    primary: new Color('hsl(266,100%,79%)', 'dark'),
-    secondary: new Color('hsl(245,23%,60%)', 'dark'),
-    info: new Color('hsl(206,100%,63%)', 'dark'),
-    success: new Color('hsl(150,99%,44%)', 'dark'),
-    notice: new Color('hsl(48,80%,63%)', 'dark'),
-    warning: new Color('hsl(28,100%,61%)', 'dark'),
-    danger: new Color('hsl(342,90%,68%)', 'dark'),
-  },
+  name: 'Yaak',
+  surface: new YaakColor('hsl(244,23%,14%)', 'dark'),
+  border: new YaakColor('hsl(244,23%,25%)', 'dark'),
+  surfaceHighlight: new YaakColor('hsl(244,23%,20%)', 'dark'),
+  text: new YaakColor('hsl(245,23%,84%)', 'dark'),
+  textSubtle: new YaakColor('hsl(245,18%,58%)', 'dark'),
+  textSubtlest: new YaakColor('hsl(245,18%,45%)', 'dark'),
+  primary: new YaakColor('hsl(266,100%,79%)', 'dark'),
+  secondary: new YaakColor('hsl(245,23%,60%)', 'dark'),
+  info: new YaakColor('hsl(206,100%,63%)', 'dark'),
+  success: new YaakColor('hsl(150,99%,44%)', 'dark'),
+  notice: new YaakColor('hsl(48,80%,63%)', 'dark'),
+  warning: new YaakColor('hsl(28,100%,61%)', 'dark'),
+  danger: new YaakColor('hsl(342,90%,68%)', 'dark'),
 
   components: {
     button: {
-      colors: {
-        primary: new Color('hsl(266,100%,79%)', 'dark').lower(0.1),
-        secondary: new Color('hsl(245,23%,60%)', 'dark').lower(0.1),
-        info: new Color('hsl(206,100%,63%)', 'dark').lower(0.1),
-        success: new Color('hsl(150,99%,44%)', 'dark').lower(0.15),
-        notice: new Color('hsl(48,80%,63%)', 'dark').lower(0.2),
-        warning: new Color('hsl(28,100%,61%)', 'dark').lower(0.1),
-        danger: new Color('hsl(342,90%,68%)', 'dark').lower(0.1),
-      },
-    },
-    input: {
-      backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
+      primary: new YaakColor('hsl(266,100%,79%)', 'dark').lower(0.1),
+      secondary: new YaakColor('hsl(245,23%,60%)', 'dark').lower(0.1),
+      info: new YaakColor('hsl(206,100%,63%)', 'dark').lower(0.1),
+      success: new YaakColor('hsl(150,99%,44%)', 'dark').lower(0.15),
+      notice: new YaakColor('hsl(48,80%,63%)', 'dark').lower(0.2),
+      warning: new YaakColor('hsl(28,100%,61%)', 'dark').lower(0.1),
+      danger: new YaakColor('hsl(342,90%,68%)', 'dark').lower(0.1),
     },
     dialog: {
-      backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
+      border: new YaakColor('hsl(244,23%,24%)', 'dark'),
     },
     sidebar: {
-      background: new Color('hsl(243,23%,16%)', 'dark'),
-      backgroundHighlight: new Color('hsl(244,23%,22%)', 'dark'),
+      surface: new YaakColor('hsl(243,23%,16%)', 'dark'),
+      border: new YaakColor('hsl(244,23%,22%)', 'dark'),
     },
     responsePane: {
-      background: new Color('hsl(243,23%,16%)', 'dark'),
-      backgroundHighlight: new Color('hsl(244,23%,16%)', 'dark').lift(0.08),
+      surface: new YaakColor('hsl(243,23%,16%)', 'dark'),
+      border: new YaakColor('hsl(244,23%,16%)', 'dark').lift(0.08),
     },
     appHeader: {
-      background: new Color('hsl(244,23%,12%)', 'dark'),
-      backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.1),
+      surface: new YaakColor('hsl(244,23%,12%)', 'dark'),
+      border: new YaakColor('hsl(244,23%,12%)', 'dark').lift(0.1),
     },
   },
 };
diff --git a/src-web/lib/theme/window.ts b/src-web/lib/theme/window.ts
index eae18eef..fea9b9e1 100644
--- a/src-web/lib/theme/window.ts
+++ b/src-web/lib/theme/window.ts
@@ -1,138 +1,166 @@
-import { Color } from './color';
+import { defaultDarkTheme, defaultLightTheme } from './themes';
+import { YaakColor } from './yaakColor';
 
-export type Appearance = 'dark' | 'light' | 'system';
+export type YaakColors = {
+  surface: YaakColor;
+  surfaceHighlight?: YaakColor;
+  surfaceActive?: YaakColor;
 
-interface ThemeComponent {
-  background?: Color;
-  backgroundHighlight?: Color;
-  backgroundHighlightSecondary?: Color;
-  backgroundActive?: Color;
-  foreground?: Color;
-  foregroundSubtle?: Color;
-  foregroundSubtler?: Color;
-  shadow?: Color;
-  colors?: Partial<RootColors>;
-}
+  text: YaakColor;
+  textSubtle?: YaakColor;
+  textSubtlest?: YaakColor;
 
-export interface YaakTheme extends ThemeComponent {
+  border?: YaakColor;
+  borderSubtle?: YaakColor;
+  borderFocus?: YaakColor;
+
+  shadow?: YaakColor;
+  backdrop?: YaakColor;
+  selection?: YaakColor;
+
+  primary?: YaakColor;
+  secondary?: YaakColor;
+  info?: YaakColor;
+  success?: YaakColor;
+  notice?: YaakColor;
+  warning?: YaakColor;
+  danger?: YaakColor;
+};
+
+export type YaakTheme = YaakColors & {
   id: string;
   name: string;
-  components?: {
-    dialog?: ThemeComponent;
-    menu?: ThemeComponent;
-    toast?: ThemeComponent;
-    sidebar?: ThemeComponent;
-    responsePane?: ThemeComponent;
-    appHeader?: ThemeComponent;
-    button?: ThemeComponent;
-    banner?: ThemeComponent;
-    placeholder?: ThemeComponent;
-    urlBar?: ThemeComponent;
-    editor?: ThemeComponent;
-    input?: ThemeComponent;
-  };
-}
+  components?: Partial<{
+    dialog: Partial<YaakColors>;
+    menu: Partial<YaakColors>;
+    toast: Partial<YaakColors>;
+    sidebar: Partial<YaakColors>;
+    responsePane: Partial<YaakColors>;
+    appHeader: Partial<YaakColors>;
+    button: Partial<YaakColors>;
+    banner: Partial<YaakColors>;
+    placeholder: Partial<YaakColors>;
+    urlBar: Partial<YaakColors>;
+    editor: Partial<YaakColors>;
+    input: Partial<YaakColors>;
+  }>;
+};
 
-interface RootColors {
-  primary: Color;
-  secondary: Color;
-  info: Color;
-  success: Color;
-  notice: Color;
-  warning: Color;
-  danger: Color;
-}
+export type YaakColorKey = keyof YaakColors;
 
-type ColorName = keyof RootColors;
 type ComponentName = keyof NonNullable<YaakTheme['components']>;
 
-type CSSVariables = Record<string, string | undefined>;
+type CSSVariables = Record<YaakColorKey, YaakColor | undefined>;
 
-function themeVariables(theme?: ThemeComponent, base?: CSSVariables): CSSVariables | null {
+function themeVariables(theme?: Partial<YaakColors>, base?: CSSVariables): CSSVariables | null {
   const vars: CSSVariables = {
-    '--background': theme?.background?.css(),
-    '--background-highlight':
-      theme?.backgroundHighlight?.css() ?? theme?.background?.lift(0.11).css(),
-    '--background-highlight-secondary':
-      theme?.backgroundHighlightSecondary?.css() ?? theme?.background?.lift(0.06).css(),
-    '--background-active':
-      theme?.backgroundActive?.css() ?? theme?.colors?.primary?.lower(0.2).translucify(0.8).css(),
-    '--background-backdrop': theme?.background?.lower(0.2).translucify(0.2).css(),
-    '--background-selection': theme?.colors?.primary?.lower(0.1).translucify(0.7).css(),
-    '--fg': theme?.foreground?.css(),
-    '--fg-subtle': theme?.foregroundSubtle?.css() ?? theme?.foreground?.lower(0.2).css(),
-    '--fg-subtler': theme?.foregroundSubtler?.css() ?? theme?.foreground?.lower(0.3).css(),
-    '--border-focus': theme?.colors?.info?.css(),
-    '--shadow':
-      theme?.shadow?.css() ??
-      Color.black()
-        .translucify(isThemeDark(theme ?? {}) ? 0.7 : 0.93)
-        .css(),
+    surface: theme?.surface,
+    surfaceHighlight: theme?.surfaceHighlight ?? theme?.surface?.lift(0.06),
+    surfaceActive: theme?.surfaceActive ?? theme?.primary?.lower(0.2).translucify(0.8),
+    backdrop: theme?.surface?.lower(0.2).translucify(0.2),
+    selection: theme?.primary?.lower(0.1).translucify(0.7),
+    border: theme?.border ?? theme?.surface?.lift(0.11),
+    borderSubtle: theme?.borderSubtle ?? theme?.border?.lower(0.06),
+    borderFocus: theme?.info?.translucify(0.5),
+    text: theme?.text,
+    textSubtle: theme?.textSubtle ?? theme?.text?.lower(0.2),
+    textSubtlest: theme?.textSubtlest ?? theme?.text?.lower(0.3),
+    shadow:
+      theme?.shadow ??
+      YaakColor.black().translucify(isThemeDark(theme ?? ({} as Partial<YaakColors>)) ? 0.7 : 0.93),
+    primary: theme?.primary,
+    secondary: theme?.primary,
+    info: theme?.info,
+    success: theme?.success,
+    notice: theme?.notice,
+    warning: theme?.warning,
+    danger: theme?.danger,
   };
 
-  for (const [color, value] of Object.entries(theme?.colors ?? {})) {
-    vars[`--fg-${color}`] = (value as Color).css();
-  }
-
   // Extend with base
   for (const [k, v] of Object.entries(vars)) {
-    if (!v && base?.[k]) {
-      vars[k] = base[k];
+    if (!v && base?.[k as YaakColorKey]) {
+      vars[k as YaakColorKey] = base[k as YaakColorKey];
     }
   }
 
   return vars;
 }
 
-function placeholderColorVariables(color: Color): CSSVariables {
+function placeholderColorVariables(color: YaakColor): Partial<CSSVariables> {
   return {
-    '--fg': color.lift(0.6).css(),
-    '--fg-subtle': color.lift(0.4).css(),
-    '--fg-subtler': color.css(),
-    '--background': color.lower(0.2).translucify(0.8).css(),
-    '--background-highlight': color.lower(0.2).translucify(0.2).css(),
-    '--background-highlight-secondary': color.lower(0.1).translucify(0.7).css(),
+    text: color.lift(0.6),
+    textSubtle: color.lift(0.4),
+    textSubtlest: color,
+    surface: color.lower(0.2).translucify(0.8),
+    border: color.lower(0.2).translucify(0.2),
+    surfaceHighlight: color.lower(0.1).translucify(0.7),
   };
 }
 
-function bannerColorVariables(color: Color): CSSVariables {
+function bannerColorVariables(color: YaakColor): Partial<CSSVariables> {
   return {
-    '--fg': color.lift(0.8).css(),
-    '--fg-subtle': color.translucify(0.3).css(),
-    '--fg-subtler': color.css(),
-    '--background': color.css(),
-    '--background-highlight': color.lift(0.3).translucify(0.4).css(),
-    '--background-highlight-secondary': color.translucify(0.9).css(),
+    text: color.lift(0.8),
+    textSubtle: color.translucify(0.3),
+    textSubtlest: color,
+    surface: color,
+    border: color.lift(0.3).translucify(0.4),
+    surfaceHighlight: color.translucify(0.9),
   };
 }
 
-function buttonSolidColorVariables(color: Color): CSSVariables {
-  return {
-    '--fg': new Color('white', 'dark').css(),
-    '--background': color.lower(0.15).css(),
-    '--background-highlight': color.css(),
-    '--background-highlight-secondary': color.lower(0.3).css(),
+function buttonSolidColorVariables(
+  color: YaakColor,
+  isDefault: boolean = false,
+): Partial<CSSVariables> {
+  const theme: Partial<YaakTheme> = {
+    text: new YaakColor('white', 'dark'),
+    surface: color.lower(0.3),
+    surfaceHighlight: color.lower(0.1),
+    border: color,
   };
+
+  if (isDefault) {
+    theme.text = color.lift(0.8);
+    theme.surface = undefined; // Inherit from root
+    theme.surfaceHighlight = color.lift(0.08);
+  }
+
+  return theme;
 }
 
-function buttonBorderColorVariables(color: Color): CSSVariables {
-  return {
-    '--fg': color.lift(0.6).css(),
-    '--fg-subtle': color.lift(0.4).css(),
-    '--fg-subtler': color.lift(0.4).translucify(0.6).css(),
-    '--background': Color.transparent().css(),
-    '--background-highlight': color.translucify(0.8).css(),
+function buttonBorderColorVariables(
+  color: YaakColor,
+  isDefault: boolean = false,
+): Partial<CSSVariables> {
+  const theme = {
+    text: color.lift(0.8),
+    textSubtle: color.lift(0.55),
+    textSubtlest: color.lift(0.4).translucify(0.6),
+    surfaceHighlight: color.translucify(0.8),
+    borderSubtle: color.translucify(0.5),
+    border: color.translucify(0.3),
   };
+
+  if (isDefault) {
+    theme.borderSubtle = color.lift(0.28);
+    theme.border = color.lift(0.5);
+  }
+
+  return theme;
 }
 
-function variablesToCSS(selector: string | null, vars: CSSVariables | null): string | null {
+function variablesToCSS(
+  selector: string | null,
+  vars: Partial<CSSVariables> | null,
+): string | null {
   if (vars == null) {
     return null;
   }
 
   const css = Object.entries(vars ?? {})
     .filter(([, value]) => value)
-    .map(([name, value]) => `${name}: ${value};`)
+    .map(([name, value]) => `--${name}: ${value?.css()};`)
     .join('\n');
 
   return selector == null ? css : `${selector} {\n${indent(css)}\n}`;
@@ -150,41 +178,43 @@ function componentCSS(
   return variablesToCSS(`.x-theme-${component}`, themeVars);
 }
 
-function buttonCSS(color: ColorName, colors?: Partial<RootColors>): string | null {
-  const cssColor = colors?.[color];
-  if (cssColor == null) {
+function buttonCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string | null {
+  const yaakColor = colors?.[color];
+  if (yaakColor == null) {
     return null;
   }
 
   return [
-    variablesToCSS(`.x-theme-button--solid--${color}`, buttonSolidColorVariables(cssColor)),
-    variablesToCSS(`.x-theme-button--border--${color}`, buttonBorderColorVariables(cssColor)),
+    variablesToCSS(`.x-theme-button--solid--${color}`, buttonSolidColorVariables(yaakColor)),
+    variablesToCSS(`.x-theme-button--border--${color}`, buttonBorderColorVariables(yaakColor)),
   ].join('\n\n');
 }
 
-function bannerCSS(color: ColorName, colors?: Partial<RootColors>): string | null {
-  const cssColor = colors?.[color];
-  if (cssColor == null) {
+function bannerCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string | null {
+  const yaakColor = colors?.[color];
+  if (yaakColor == null) {
     return null;
   }
 
-  return [variablesToCSS(`.x-theme-banner--${color}`, bannerColorVariables(cssColor))].join('\n\n');
+  return [variablesToCSS(`.x-theme-banner--${color}`, bannerColorVariables(yaakColor))].join(
+    '\n\n',
+  );
 }
 
-function placeholderCSS(color: ColorName, colors?: Partial<RootColors>): string | null {
-  const cssColor = colors?.[color];
-  if (cssColor == null) {
+function placeholderCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string | null {
+  const yaakColor = colors?.[color];
+  if (yaakColor == null) {
     return null;
   }
 
   return [
-    variablesToCSS(`.x-theme-placeholder--${color}`, placeholderColorVariables(cssColor)),
+    variablesToCSS(`.x-theme-placeholder--${color}`, placeholderColorVariables(yaakColor)),
   ].join('\n\n');
 }
 
-export function isThemeDark(theme: ThemeComponent): boolean {
-  if (theme.background && theme.foreground) {
-    return theme.foreground.lighterThan(theme.background);
+export function isThemeDark(theme: Partial<YaakColors>): boolean {
+  if (theme.surface && theme.text) {
+    return theme.text.lighterThan(theme.surface);
   }
 
   return false;
@@ -193,35 +223,49 @@ export function isThemeDark(theme: ThemeComponent): boolean {
 export function getThemeCSS(theme: YaakTheme): string {
   theme.components = theme.components ?? {};
   // Toast defaults to menu styles
-  theme.components.toast = theme.components.toast ?? theme.components.menu;
+  theme.components.toast = theme.components.toast ?? theme.components.menu ?? {};
+  const { components, id, name } = theme;
+  const colors = Object.keys(theme)
+    .filter((key) => theme[key as YaakColorKey] instanceof YaakColor)
+    .reduce((prev, key) => {
+      return { ...prev, [key]: theme[key as YaakColorKey] };
+    }, {});
 
   let themeCSS = '';
   try {
     const baseCss = variablesToCSS(null, themeVariables(theme));
-    const { components, colors } = theme;
     themeCSS = [
       baseCss,
       ...Object.keys(components ?? {}).map((key) =>
         componentCSS(key as ComponentName, theme.components),
       ),
-      ...Object.keys(colors ?? {}).map((key) =>
-        buttonCSS(key as ColorName, theme.components?.button?.colors ?? colors),
+      variablesToCSS(
+        `.x-theme-button--solid--default`,
+        buttonSolidColorVariables(theme.surface, true),
+      ),
+      variablesToCSS(
+        `.x-theme-button--border--default`,
+        buttonBorderColorVariables(theme.surface, true),
       ),
       ...Object.keys(colors ?? {}).map((key) =>
-        bannerCSS(key as ColorName, theme.components?.banner?.colors ?? colors),
+        buttonCSS(key as YaakColorKey, theme.components?.button ?? colors),
       ),
       ...Object.keys(colors ?? {}).map((key) =>
-        placeholderCSS(key as ColorName, theme.components?.placeholder?.colors ?? colors),
+        bannerCSS(key as YaakColorKey, theme.components?.banner ?? colors),
+      ),
+      ...Object.keys(colors ?? {}).map((key) =>
+        placeholderCSS(key as YaakColorKey, theme.components?.placeholder ?? colors),
       ),
     ].join('\n\n');
   } catch (err) {
-    console.error(err);
+    console.error('Failed to generate CSS', err);
   }
 
-  return [`/* ${theme.name} */`, `[data-theme="${theme.id}"] {`, indent(themeCSS), '}'].join('\n');
+  return [`/* ${name} */`, `[data-theme="${id}"] {`, indent(themeCSS), '}'].join('\n');
 }
 
 export function addThemeStylesToDocument(theme: YaakTheme) {
+  theme = completeTheme(theme);
   let styleEl = document.head.querySelector(`style[data-theme]`);
   if (!styleEl) {
     styleEl = document.createElement('style');
@@ -229,6 +273,7 @@ export function addThemeStylesToDocument(theme: YaakTheme) {
   }
 
   styleEl.setAttribute('data-theme', theme.id);
+  styleEl.setAttribute('data-updated-at', new Date().toISOString());
   styleEl.textContent = getThemeCSS(theme);
 }
 
@@ -242,3 +287,74 @@ export function indent(text: string, space = '    '): string {
     .map((line) => space + line)
     .join('\n');
 }
+
+export function completeTheme(theme: YaakTheme): YaakTheme {
+  const isDark = isThemeDark(theme);
+
+  // Clone the theme
+  theme = deserializeTheme(serializeTheme(theme), isDark ? 'dark' : 'light');
+
+  const base = isDark ? defaultDarkTheme : defaultLightTheme;
+
+  theme.primary = theme.primary ?? base.primary;
+  theme.secondary = theme.secondary ?? base.secondary;
+  theme.info = theme.info ?? base.info;
+  theme.success = theme.success ?? base.success;
+  theme.notice = theme.notice ?? base.notice;
+  theme.warning = theme.warning ?? base.warning;
+  theme.danger = theme.danger ?? base.danger;
+
+  theme.surface = theme.surface ?? base.surface;
+  theme.surfaceHighlight = theme.surfaceHighlight ?? theme.surface?.lift(0.06);
+  theme.surfaceActive = theme.surfaceActive ?? theme.primary?.lower(0.2).translucify(0.8);
+
+  theme.border = theme.border ?? theme.surface?.lift(0.12);
+  theme.borderSubtle = theme.borderSubtle ?? theme.border?.lower(0.08);
+  console.log('HELLO', { theme });
+
+  theme.text = theme.text ?? theme.border?.lift(1).lower(0.2);
+  theme.textSubtle = theme.textSubtle ?? theme.text?.lower(0.3);
+  theme.textSubtlest = theme.textSubtlest ?? theme.text?.lower(0.5);
+
+  return theme;
+}
+
+export function serializeTheme(theme: YaakTheme): string {
+  function next(o: Record<string, unknown>) {
+    o = { ...o }; // Clone first
+
+    for (const k of Object.keys(o)) {
+      const v = o[k];
+      if (v instanceof YaakColor) {
+        o[k] = v.css();
+      } else if (Object.prototype.toString.call(v) === '[object Object]') {
+        o[k] = next(v as Record<string, unknown>);
+      } else {
+        o[k] = v;
+      }
+    }
+    return o;
+  }
+
+  return JSON.stringify(next(theme));
+}
+
+export function deserializeTheme(theme: string, appearance: 'dark' | 'light'): YaakTheme {
+  function next(o: Record<string, unknown>) {
+    for (const k of Object.keys(o)) {
+      const v = o[k];
+      if (v instanceof YaakColor) {
+        o[k] = v;
+      } else if (typeof v === 'string' && v.match(/^(#|hsla\()/)) {
+        o[k] = new YaakColor(v, appearance);
+      } else if (Object.prototype.toString.call(v) === '[object Object]') {
+        o[k] = next(v as Record<string, unknown>);
+      } else {
+        o[k] = v;
+      }
+    }
+    return o;
+  }
+
+  return next(JSON.parse(theme)) as YaakTheme;
+}
diff --git a/src-web/lib/theme/yaakColor.ts b/src-web/lib/theme/yaakColor.ts
new file mode 100644
index 00000000..3cf88555
--- /dev/null
+++ b/src-web/lib/theme/yaakColor.ts
@@ -0,0 +1,140 @@
+import parseColor from 'parse-color';
+
+export class YaakColor {
+  private readonly appearance: 'dark' | 'light' = 'light';
+
+  private hue: number = 0;
+  private saturation: number = 0;
+  private lightness: number = 0;
+  private alpha: number = 1;
+
+  constructor(cssColor: string, appearance: 'dark' | 'light' = 'light') {
+    try {
+      this.set(cssColor);
+      this.appearance = appearance;
+    } catch (err) {
+      console.log('Failed to parse CSS color', cssColor, err);
+    }
+  }
+
+  static transparent(): YaakColor {
+    return new YaakColor('rgb(0,0,0)', 'light').translucify(1);
+  }
+
+  static white(): YaakColor {
+    return new YaakColor('rgb(0,0,0)', 'light').lower(1);
+  }
+
+  static black(): YaakColor {
+    return new YaakColor('rgb(0,0,0)', 'light').lift(1);
+  }
+
+  set(cssColor: string): YaakColor {
+    if (cssColor.startsWith('#') && cssColor.length === 9) {
+      const [r, g, b, a] = hexToRgba(cssColor);
+      cssColor = `rgba(${r},${g},${b},${a})`;
+    }
+    const { hsla } = parseColor(cssColor);
+    this.hue = hsla[0];
+    this.saturation = hsla[1];
+    this.lightness = hsla[2];
+    this.alpha = hsla[3] ?? 1;
+    return this;
+  }
+
+  clone(): YaakColor {
+    return new YaakColor(this.css(), this.appearance);
+  }
+
+  lower(mod: number): YaakColor {
+    return this.appearance === 'dark' ? this._darken(mod) : this._lighten(mod);
+  }
+
+  lift(mod: number): YaakColor {
+    return this.appearance === 'dark' ? this._lighten(mod) : this._darken(mod);
+  }
+
+  minLightness(n: number): YaakColor {
+    const c = this.clone();
+    if (c.lightness < n) {
+      c.lightness = n;
+    }
+    return c;
+  }
+
+  isDark(): boolean {
+    return this.lightness < 50;
+  }
+
+  translucify(mod: number): YaakColor {
+    const c = this.clone();
+    c.alpha = c.alpha - c.alpha * mod;
+    return c;
+  }
+
+  opacify(mod: number): YaakColor {
+    const c = this.clone();
+    c.alpha = this.alpha + (100 - this.alpha) * mod;
+    return c;
+  }
+
+  desaturate(mod: number): YaakColor {
+    const c = this.clone();
+    c.saturation = c.saturation - c.saturation * mod;
+    return c;
+  }
+
+  saturate(mod: number): YaakColor {
+    const c = this.clone();
+    c.saturation = this.saturation + (100 - this.saturation) * mod;
+    return c;
+  }
+
+  lighterThan(c: YaakColor): boolean {
+    return this.lightness > c.lightness;
+  }
+
+  css(): string {
+    const h = this.hue;
+    const s = this.saturation;
+    const l = this.lightness;
+    const a = this.alpha; // Convert from 0-1 to 0-255
+
+    const [r, g, b] = parseColor(`hsl(${h},${s}%,${l}%)`).rgb;
+    return rgbaToHex(r, g, b, a);
+  }
+
+  private _lighten(mod: number): YaakColor {
+    const c = this.clone();
+    c.lightness = this.lightness + (100 - this.lightness) * mod;
+    return c;
+  }
+
+  private _darken(mod: number): YaakColor {
+    const c = this.clone();
+    c.lightness = this.lightness - this.lightness * mod;
+    return c;
+  }
+}
+
+function rgbaToHex(r: number, g: number, b: number, a: number): string {
+  const toHex = (n: number): string => {
+    const hex = Number(Math.round(n)).toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+  return '#' + [toHex(r), toHex(g), toHex(b), toHex(a * 255)].join('').toUpperCase();
+}
+
+function hexToRgba(hex: string): [number, number, number, number] {
+  const fromHex = (h: string): number => {
+    if (h === '') return 255;
+    return Number(`0x${h}`);
+  };
+
+  const r = fromHex(hex.slice(1, 3));
+  const g = fromHex(hex.slice(3, 5));
+  const b = fromHex(hex.slice(5, 7));
+  const a = fromHex(hex.slice(7, 9));
+
+  return [r, g, b, a / 255];
+}
diff --git a/src-web/main.css b/src-web/main.css
index 19eef518..f191d784 100644
--- a/src-web/main.css
+++ b/src-web/main.css
@@ -6,7 +6,7 @@
   html,
   body,
   #root {
-    @apply w-full h-full overflow-hidden text-fg bg-background;
+    @apply w-full h-full overflow-hidden text-text bg-surface;
   }
 
   * {
@@ -62,7 +62,7 @@
     &:hover {
       &.scrollbar-thumb,
       &::-webkit-scrollbar-thumb {
-        @apply bg-background-highlight-secondary hover:bg-fg-subtler rounded-full;
+        @apply bg-surface-highlight hover:bg-surface-highlight rounded-full;
       }
     }
   }
@@ -74,7 +74,7 @@
   iframe {
     &::-webkit-scrollbar-corner,
     &::-webkit-scrollbar {
-      @apply bg-background-highlight-secondary !important;
+      @apply bg-surface-highlight !important;
     }
   }
 
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 7b196091..bbd68da6 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -52,49 +52,55 @@ module.exports = {
       '4xs': '0.6rem',
       '3xs': '0.675rem',
       '2xs': '0.75rem',
-      'xs': '0.8rem',
-      'sm': '0.9rem',
-      'base': '1rem',
-      'xl': '1.25rem',
+      xs: '0.8rem',
+      sm: '0.9rem',
+      base: '1rem',
+      xl: '1.25rem',
       '2xl': '1.5rem',
       '3xl': '2rem',
       '4xl': '2.5rem',
       '5xl': '3rem',
-      'editor': 'var(--editor-font-size)',
-      'shrink': '0.8em',
+      editor: 'var(--editor-font-size)',
+      shrink: '0.8em',
     },
     boxShadow: {
       DEFAULT: '0 1px 3px 0 var(--shadow);',
       lg: '0 10px 15px -3px var(--shadow)',
     },
     colors: {
-      'transparent': 'transparent',
-      'placeholder': 'var(--fg-subtler)',
-      'selection': 'var(--background-selection)',
+      transparent: 'transparent',
+
+      // placeholder: 'var(--fg-subtler)', // Now a component?
+      shadow: 'var(--shadow)',
+      backdrop: 'var(--backdrop)',
+      selection: 'var(--selection)',
 
       // New theme values
 
-      'border-focus': 'var(--border-focus)',
-      'fg': 'var(--fg)',
-      'fg-danger': 'var(--fg-danger)',
-      'fg-subtle': 'var(--fg-subtle)',
-      'fg-subtler': 'var(--fg-subtler)',
-      'fg-primary': 'var(--fg-primary)',
-      'fg-secondary': 'var(--fg-secondary)',
-      'fg-success': 'var(--fg-success)',
-      'fg-info': 'var(--fg-info)',
-      'fg-notice': 'var(--fg-notice)',
-      'fg-warning': 'var(--fg-warning)',
-      'background': 'var(--background)',
-      'background-active': 'var(--background-active)',
-      'background-highlight': 'var(--background-highlight)',
-      'background-highlight-secondary': 'var(--background-highlight-secondary)',
-      'background-backdrop': 'var(--background-backdrop)',
+      surface: 'var(--surface)',
+      'surface-highlight': 'var(--surfaceHighlight)',
+      'surface-active': 'var(--surfaceActive)',
+
+      text: 'var(--text)',
+      'text-subtle': 'var(--textSubtle)',
+      'text-subtlest': 'var(--textSubtlest)',
+
+      border: 'var(--border)',
+      'border-subtle': 'var(--borderSubtle)',
+      'border-focus': 'var(--borderFocus)',
+
+      primary: 'var(--primary)',
+      danger: 'var(--danger)',
+      secondary: 'var(--secondary)',
+      success: 'var(--success)',
+      info: 'var(--info)',
+      notice: 'var(--notice)',
+      warning: 'var(--warning)',
     },
   },
   plugins: [
     require('@tailwindcss/container-queries'),
-    plugin(function ({addVariant}) {
+    plugin(function ({ addVariant }) {
       addVariant('hocus', ['&:hover', '&:focus-visible', '&.focus:focus']);
       addVariant('focus-visible-or-class', ['&:focus-visible', '&.focus:focus']);
     }),
diff --git a/tsconfig.json b/tsconfig.json
index 05f14ac2..20a51b5f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,7 +20,8 @@
   "include": [
     "src-web",
     "src-web/modules.d.ts",
-    "vite.config.ts"
+    "vite.config.ts",
+    "tailwind.config.cjs"
   ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }