Use new theme vars (#63)

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

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

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

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

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

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

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

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

    // Borders
    variant === 'border' && 'border',
    variant === 'border' &&
      color !== 'custom' &&
-      color !== 'default' &&
-      'border-fg-subtler text-fg-subtle enabled:hocus:border-fg-subtle enabled:hocus:bg-background-highlight enabled:hocus:text-fg ring-fg-subtler',
-    variant === 'border' &&
-      color === 'default' &&
-      'border-background-highlight enabled:hocus:border-fg-subtler enabled:hocus:bg-background-highlight-secondary',
+      'border-border-subtle text-text-subtle enabled:hocus:border-border ' +
+        'enabled:hocus:bg-surface-highlight enabled:hocus:text-text ring-border-subtler',
  );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &:hover {
      @apply underline;
    }

    &::after {
-      @apply text-fg bg-fg-secondary h-3 w-3 ml-1;
+      @apply text-text bg-surface-highlight h-3 w-3 ml-1;
      content: '';
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='black' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
      -webkit-mask-size: contain;
@@ -210,7 +213,7 @@
 /* NOTE: Extra selector required to override default styles */
 .cm-tooltip.cm-tooltip-autocomplete,
 .cm-tooltip.cm-completionInfo {
-  @apply shadow-lg bg-background rounded text-fg-subtle border border-background-highlight z-50 pointer-events-auto text-editor;
+  @apply shadow-lg bg-surface rounded text-text-subtle border border-border-subtle z-50 pointer-events-auto text-editor;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  const actions = useMemo<ReactNode[]>(() => {
-    const result: ReactNode[] = [];
+    const nodes: ReactNode[] = [];

-    if (!canFilter) return result;
+    if (!canFilter) return nodes;

    if (isSearching) {
-      result.push(
+      nodes.push(
        <div key="input" className="w-full !opacity-100">
          <Input
            key={response.id}
            validate={!filteredResponse.error}
            hideLabel
            autoFocus
-            containerClassName="bg-background"
+            containerClassName="bg-surface"
            size="sm"
            placeholder={isJson ? 'JSONPath expression' : 'XPath expression'}
            label="Filter expression"
@@ -93,21 +93,18 @@ export function TextViewer({ response, pretty, className }: Props) {
      );
    }

-    result.push(
+    nodes.push(
      <IconButton
        key="icon"
        size="sm"
        icon={isSearching ? 'x' : 'filter'}
        title={isSearching ? 'Close filter' : 'Filter response'}
        onClick={toggleSearch}
-        className={classNames(
-          'bg-background border !border-background-highlight',
-          isSearching && '!opacity-100',
-        )}
+        className={classNames('border !border-border-subtle', isSearching && '!opacity-100')}
      />,
    );

-    return result;
+    return nodes;
  }, [
    canFilter,
    filterText,
--- a/src-web/components/responseViewers/WebPageViewer.tsx
+++ b/src-web/components/responseViewers/WebPageViewer.tsx
@@ -24,7 +24,7 @@ export function WebPageViewer({ response }: Props) {
        title="Response preview"
        srcDoc={contentForIframe}
        sandbox="allow-scripts allow-same-origin"
-        className="h-full w-full rounded border border-background-highlight-secondary"
+        className="h-full w-full rounded border border-border-subtle"
      />
    </div>
  );
--- 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">
--- 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';
--- a/src-web/lib/theme/color.ts
+++ b/src-web/lib/theme/color.ts
@@ -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;
-  }
-}
--- 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,
 ];
--- 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),
    },
  },
 };
--- 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'),
    },
  },
 };
--- 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];
--- 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'),
    },
  },
 };
--- 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),
    },
  },
 };
--- 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'),
    },
  },
 };
--- a/src-web/lib/theme/themes/relaxing.ts
+++ 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];
--- 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'),
    },
  },
 };
--- 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),
    },
  },
 };
--- 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;
+}
--- a/src-web/lib/theme/yaakColor.ts
+++ 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];
+}
--- 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;
    }
  }

--- 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']);
    }),
--- 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" }]
 }