From 620dd7d3efe44504228e97c9ed43bc3845de6807 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Tue, 7 Mar 2023 21:52:21 -0800
Subject: [PATCH] Lots more theme stuff

---
 src-tauri/icons/icon.icns            | Bin 616124 -> 616124 bytes
 src-web/App.tsx                      |   2 +-
 src-web/components/Button.tsx        |   5 +-
 src-web/components/Colors.tsx        | 105 +++++++++++++++++++++++++++
 src-web/components/Dialog.tsx        |   7 +-
 src-web/components/Dropdown.tsx      |   2 +-
 src-web/components/Editor/Editor.css |  24 +++---
 src-web/components/Grid.tsx          |   6 +-
 src-web/components/Input.tsx         |   2 +-
 src-web/components/ResponsePane.tsx  |  15 ++--
 src-web/components/Sidebar.tsx       |  23 +-----
 src-web/components/UrlBar.tsx        |   2 +-
 src-web/lib/theme/theme.test.ts      |  36 +++------
 src-web/lib/theme/theme.ts           |  60 ++++++++++-----
 src-web/lib/theme/window.ts          |  31 +++++---
 tailwind.config.cjs                  |   7 +-
 16 files changed, 219 insertions(+), 108 deletions(-)
 create mode 100644 src-web/components/Colors.tsx

diff --git a/src-tauri/icons/icon.icns b/src-tauri/icons/icon.icns
index e4468139e68f2959ddbd84868af8559dacb80661..97dcfacddc5c73643eb3e94e20901b8795271fa8 100644
GIT binary patch
delta 93
zcmV-j0HXiA%_Y3eB?xI_ZgT($X1uqJECvZYfeM8R0fh<zg$e_;3Iv~Rw@iElPYJh{
zXa;Ychnj^1x0;0o^rp831_uWOx2bIer4F|a3I}hUw{cDhOBjcHrw6xtrwH_>5@8|@

delta 100
zcmdmUR&~!=RgTQ$ykZ8<v^~xIHtqa2j6lo;#LV0IZCDoOZqNM9wv=!Crj;zdobCAm
ztlRSg*gh}Y$jM=|{r@JG{JGnczO%8jFee)tZ)e=hk~g>g)PDBur}lGvTDHA<IlHd}
E09qd>QUCw|

diff --git a/src-web/App.tsx b/src-web/App.tsx
index 5cf1c9b6..30ee0ef2 100644
--- a/src-web/App.tsx
+++ b/src-web/App.tsx
@@ -33,7 +33,7 @@ function App() {
           <div className="grid grid-rows-[auto_1fr] h-full overflow-hidden">
             <HStack
               as={WindowDragRegion}
-              className="px-3 bg-background text-sm text-gray-900 border-b border-b-gray-100 pt-[1px]"
+              className="px-3 bg-background text-sm text-gray-900 border-b border-b-gray-200 pt-[1px]"
               items="center"
             >
               {request.name}
diff --git a/src-web/components/Button.tsx b/src-web/components/Button.tsx
index 9f4feba3..0914f89b 100644
--- a/src-web/components/Button.tsx
+++ b/src-web/components/Button.tsx
@@ -9,9 +9,8 @@ import { forwardRef } from 'react';
 import { Icon } from './Icon';
 
 const colorStyles = {
-  default: 'hover:bg-gray-500/10 text-gray-600',
-  gray: 'text-gray-800 bg-gray-100 hover:bg-gray-500/20',
-  tint: 'text-white/90 hover:text-white hover:bg-white/20',
+  default: 'hover:bg-gray-700/10 text-gray-700 hover:text-gray-900',
+  gray: 'text-gray-800 bg-gray-100 hover:bg-gray-500/20 hover:text-gray-900',
   primary: 'bg-blue-400',
   secondary: 'bg-violet-400',
   warning: 'bg-orange-400',
diff --git a/src-web/components/Colors.tsx b/src-web/components/Colors.tsx
new file mode 100644
index 00000000..7ee58f30
--- /dev/null
+++ b/src-web/components/Colors.tsx
@@ -0,0 +1,105 @@
+import classnames from 'classnames';
+import React from 'react';
+import { HStack, VStack } from './Stacks';
+
+export function Colors() {
+  return (
+    <HStack>
+      <VStack>
+        <Color className="bg-gray-50" />
+        <Color className="bg-gray-100" />
+        <Color className="bg-gray-200" />
+        <Color className="bg-gray-300" />
+        <Color className="bg-gray-400" />
+        <Color className="bg-gray-500" />
+        <Color className="bg-gray-600" />
+        <Color className="bg-gray-700" />
+        <Color className="bg-gray-800" />
+        <Color className="bg-gray-900" />
+        <Color className="bg-gray-950" />
+      </VStack>
+      <VStack>
+        <Color className="bg-red-50" />
+        <Color className="bg-red-100" />
+        <Color className="bg-red-200" />
+        <Color className="bg-red-300" />
+        <Color className="bg-red-400" />
+        <Color className="bg-red-500" />
+        <Color className="bg-red-600" />
+        <Color className="bg-red-700" />
+        <Color className="bg-red-800" />
+        <Color className="bg-red-900" />
+        <Color className="bg-red-950" />
+      </VStack>
+      <VStack>
+        <Color className="bg-orange-50" />
+        <Color className="bg-orange-100" />
+        <Color className="bg-orange-200" />
+        <Color className="bg-orange-300" />
+        <Color className="bg-orange-400" />
+        <Color className="bg-orange-500" />
+        <Color className="bg-orange-600" />
+        <Color className="bg-orange-700" />
+        <Color className="bg-orange-800" />
+        <Color className="bg-orange-900" />
+        <Color className="bg-orange-950" />
+      </VStack>
+      <VStack>
+        <Color className="bg-yellow-50" />
+        <Color className="bg-yellow-100" />
+        <Color className="bg-yellow-200" />
+        <Color className="bg-yellow-300" />
+        <Color className="bg-yellow-400" />
+        <Color className="bg-yellow-500" />
+        <Color className="bg-yellow-600" />
+        <Color className="bg-yellow-700" />
+        <Color className="bg-yellow-800" />
+        <Color className="bg-yellow-900" />
+        <Color className="bg-yellow-950" />
+      </VStack>
+      <VStack>
+        <Color className="bg-green-50" />
+        <Color className="bg-green-100" />
+        <Color className="bg-green-200" />
+        <Color className="bg-green-300" />
+        <Color className="bg-green-400" />
+        <Color className="bg-green-500" />
+        <Color className="bg-green-600" />
+        <Color className="bg-green-700" />
+        <Color className="bg-green-800" />
+        <Color className="bg-green-900" />
+        <Color className="bg-green-950" />
+      </VStack>
+      <VStack>
+        <Color className="bg-blue-50" />
+        <Color className="bg-blue-100" />
+        <Color className="bg-blue-200" />
+        <Color className="bg-blue-300" />
+        <Color className="bg-blue-400" />
+        <Color className="bg-blue-500" />
+        <Color className="bg-blue-600" />
+        <Color className="bg-blue-700" />
+        <Color className="bg-blue-800" />
+        <Color className="bg-blue-900" />
+        <Color className="bg-blue-950" />
+      </VStack>
+      <VStack>
+        <Color className="bg-violet-50" />
+        <Color className="bg-violet-100" />
+        <Color className="bg-violet-200" />
+        <Color className="bg-violet-300" />
+        <Color className="bg-violet-400" />
+        <Color className="bg-violet-500" />
+        <Color className="bg-violet-600" />
+        <Color className="bg-violet-700" />
+        <Color className="bg-violet-800" />
+        <Color className="bg-violet-900" />
+        <Color className="bg-violet-950" />
+      </VStack>
+    </HStack>
+  );
+}
+
+function Color({ className }: { className: string }) {
+  return <div className={classnames(className, 'w-full h-5')} />;
+}
diff --git a/src-web/components/Dialog.tsx b/src-web/components/Dialog.tsx
index 4f68cbb3..df66eeb3 100644
--- a/src-web/components/Dialog.tsx
+++ b/src-web/components/Dialog.tsx
@@ -28,14 +28,15 @@ export function Dialog({
     <D.Root open={open} onOpenChange={onOpenChange}>
       <D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
         <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
-          <D.Overlay className="fixed inset-0 bg-gray-900 dark:bg-background opacity-80 shadow-lg" />
+          <D.Overlay className="fixed inset-0 bg-gray-900 dark:bg-black/50" />
           <D.Content>
-            <div className={classnames(className, 'fixed inset-0 pointer-events-none')}>
+            <div className={classnames(className, 'fixed inset-0')}>
               <div
                 className={classnames(
                   className,
-                  'absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-50',
+                  'absolute z-10 top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-100',
                   'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto',
+                  'border border-gray-200 shadow-lg',
                   wide && 'w-[80vw] max-w-[50rem]',
                 )}
               >
diff --git a/src-web/components/Dropdown.tsx b/src-web/components/Dropdown.tsx
index 2a4e1dbd..a8dd1c4b 100644
--- a/src-web/components/Dropdown.tsx
+++ b/src-web/components/Dropdown.tsx
@@ -137,7 +137,7 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProp
         align="start"
         className={classnames(
           className,
-          'bg-background rounded-md shadow-lg p-1.5 border border-gray-100',
+          'bg-background rounded-md shadow-lg p-1.5 border border-gray-200',
           'overflow-auto m-1',
         )}
         style={styles}
diff --git a/src-web/components/Editor/Editor.css b/src-web/components/Editor/Editor.css
index 045ef282..420fed0f 100644
--- a/src-web/components/Editor/Editor.css
+++ b/src-web/components/Editor/Editor.css
@@ -6,13 +6,12 @@
 
         .cm-editor {
             @apply inset-0;
-            position: absolute !important;
         }
     }
 }
 
 .cm-editor {
-    @apply w-full block text-[0.85rem];
+    @apply w-full block text-base;
 
     &.cm-focused {
         outline: none !important;
@@ -28,6 +27,7 @@
 
     .cm-gutters {
         @apply border-0 text-gray-500 text-opacity-30;
+
         .cm-gutterElement {
             @apply cursor-default;
         }
@@ -39,8 +39,8 @@
     }
 
     .placeholder-widget {
-        @apply text-xs text-white/90 bg-blue-400/80 py-[0.5px] px-1 mx-[1px] rounded cursor-default hover:bg-blue-400 hover:text-white;
-        text-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
+        @apply text-[0.9em] text-gray-900 bg-gray-200 px-2 border border-background py-0.5
+        rounded cursor-default hover:bg-gray-300 hover:text-white;
     }
 }
 
@@ -51,7 +51,6 @@
     }
 
     .cm-scroller {
-        font-family: inherit;
         overflow: hidden !important;;
     }
 
@@ -62,7 +61,8 @@
 
 .cm-multiline {
     .cm-editor {
-        @apply h-full;
+        @apply h-full text-[0.95em];
+        position: absolute !important;
     }
 
     .cm-scroller {
@@ -128,7 +128,7 @@
 }
 
 .cm-editor .cm-selectionBackground {
-    @apply bg-gray-200;
+    @apply bg-gray-400;
 }
 
 .cm-editor.cm-focused .cm-selectionBackground {
@@ -148,7 +148,7 @@
     }
 
     &::-webkit-scrollbar-thumb {
-        @apply bg-gray-100 bg-opacity-30 rounded-full;
+        @apply bg-gray-400 bg-opacity-30 rounded-full;
     }
 }
 
@@ -160,7 +160,7 @@
 
 /* NOTE: Extra selector required to override default styles */
 .cm-tooltip.cm-tooltip {
-    @apply shadow-lg bg-background rounded overflow-hidden text-gray-900 border border-gray-100/70 z-50 pointer-events-auto;
+    @apply shadow-lg bg-background rounded overflow-hidden text-gray-900 border border-gray-200 z-50 pointer-events-auto;
 
     * {
         @apply transition-none;
@@ -172,15 +172,15 @@
         }
 
         & > ul > li {
-            @apply cursor-default px-2 rounded-sm text-gray-500 h-7 flex items-center;
+            @apply cursor-default px-2 rounded-sm text-gray-600 h-7 flex items-center;
         }
 
         & > ul > li[aria-selected] {
-            @apply bg-gray-50 text-gray-800;
+            @apply bg-gray-100 text-gray-900;
         }
 
         & > ul > li:hover {
-            @apply text-gray-700;
+            @apply text-gray-800;
         }
 
         .cm-completionIcon {
diff --git a/src-web/components/Grid.tsx b/src-web/components/Grid.tsx
index 7409e7ea..27c28977 100644
--- a/src-web/components/Grid.tsx
+++ b/src-web/components/Grid.tsx
@@ -5,14 +5,16 @@ const colsClasses = {
   none: 'grid-cols-none',
   1: 'grid-cols-1',
   2: 'grid-cols-2',
-  3: 'grid-cols-2',
+  3: 'grid-cols-3',
+  11: 'grid-cols-11',
 };
 
 const rowsClasses = {
   none: 'grid-rows-none',
   1: 'grid-rows-1',
   2: 'grid-rows-2',
-  3: 'grid-rows-2',
+  3: 'grid-rows-3',
+  11: 'grid-rows-11',
 };
 
 const gapClasses = {
diff --git a/src-web/components/Input.tsx b/src-web/components/Input.tsx
index de843123..28a83043 100644
--- a/src-web/components/Input.tsx
+++ b/src-web/components/Input.tsx
@@ -56,7 +56,7 @@ export function Input({
         className={classnames(
           containerClassName,
           'relative w-full rounded-md text-gray-900 bg-gray-200/10',
-          'border border-gray-50 focus-within:border-blue-400/40',
+          'border border-gray-200 focus-within:border-blue-400/40',
           size === 'md' && 'h-10',
           size === 'sm' && 'h-8',
         )}
diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx
index 195165bc..b75d11ab 100644
--- a/src-web/components/ResponsePane.tsx
+++ b/src-web/components/ResponsePane.tsx
@@ -46,19 +46,16 @@ export function ResponsePane({ requestId, className }: Props) {
       <div
         className={classnames(
           className,
-          'max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 bg-gray-100 rounded-md overflow-hidden border border-gray-50',
+          'max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 bg-gray-100 rounded-md overflow-hidden border border-gray-200',
         )}
       >
         {/*<HStack as={WindowDragRegion} items="center" className="pl-1.5 pr-1">*/}
         {/*</HStack>*/}
-        {response?.error && (
-          <div className="text-white bg-red-500 px-2 py-1 rounded">{response.error}</div>
-        )}
         {response && (
           <>
             <HStack
               items="center"
-              className="italic text-gray-500 text-sm w-full mb-1 flex-shrink-0 pl-2"
+              className="italic text-gray-600 text-sm w-full mb-1 flex-shrink-0 pl-2"
             >
               <div className="whitespace-nowrap">
                 {response.status}
@@ -107,7 +104,11 @@ export function ResponsePane({ requestId, className }: Props) {
               </HStack>
             </HStack>
 
-            {viewMode === 'pretty' && contentForIframe !== null ? (
+            {response?.error ? (
+              <div className="p-1">
+                <div className="text-white bg-red-500 px-3 py-2 rounded">{response.error}</div>
+              </div>
+            ) : viewMode === 'pretty' && contentForIframe !== null ? (
               <div className="px-2 pb-2">
                 <iframe
                   title="Response preview"
@@ -118,7 +119,7 @@ export function ResponsePane({ requestId, className }: Props) {
               </div>
             ) : response?.body ? (
               <Editor
-                className="mr-1 !bg-gray-100"
+                className="!bg-gray-100"
                 valueKey={`${contentType}:${response.body}`}
                 defaultValue={response?.body}
                 contentType={contentType}
diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx
index 0694d7bc..a6e77008 100644
--- a/src-web/components/Sidebar.tsx
+++ b/src-web/components/Sidebar.tsx
@@ -24,10 +24,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
   const [open, setOpen] = useState<boolean>(false);
   return (
     <div
-      className={classnames(
-        className,
-        'w-52 bg-violet-600 dark:bg-violet-50 h-full border-gray-100/50 relative z-10',
-      )}
+      className={classnames(className, 'w-52 bg-gray-100 h-full border-r border-gray-200')}
       {...props}
     >
       <HStack as={WindowDragRegion} items="center" justify="end">
@@ -37,6 +34,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
             Save
           </Button>
         </Dialog>
+        <IconButton size="sm" icon="camera" onClick={() => setOpen(true)} />
         <IconButton
           size="sm"
           icon={appearance === 'dark' ? 'moon' : 'sun'}
@@ -54,19 +52,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
         {requests.map((r) => (
           <SidebarItem key={r.id} request={r} active={r.id === activeRequestId} />
         ))}
-        <div>
-          <div className="w-10 h-5 bg-blue-50" />
-          <div className="w-10 h-5 bg-blue-100" />
-          <div className="w-10 h-5 bg-blue-200" />
-          <div className="w-10 h-5 bg-blue-300" />
-          <div className="w-10 h-5 bg-blue-400" />
-          <div className="w-10 h-5 bg-blue-500" />
-          <div className="w-10 h-5 bg-blue-600" />
-          <div className="w-10 h-5 bg-blue-700" />
-          <div className="w-10 h-5 bg-blue-800" />
-          <div className="w-10 h-5 bg-blue-900" />
-          <div className="w-10 h-5 bg-blue-950" />
-        </div>
+        {/*<Colors />*/}
       </VStack>
     </div>
   );
@@ -77,9 +63,8 @@ function SidebarItem({ request, active }: { request: HttpRequest; active: boolea
     <li key={request.id}>
       <Button
         as={Link}
-        color="tint"
         to={`/workspaces/${request.workspaceId}/requests/${request.id}`}
-        className={classnames('w-full', active && 'bg-gray-500/[0.1] text-gray-900')}
+        className={classnames('w-full', active ? 'bg-gray-200/70 text-gray-900' : 'text-gray-500')}
         size="xs"
         justify="start"
       >
diff --git a/src-web/components/UrlBar.tsx b/src-web/components/UrlBar.tsx
index 04f324e5..b13945ac 100644
--- a/src-web/components/UrlBar.tsx
+++ b/src-web/components/UrlBar.tsx
@@ -34,7 +34,7 @@ export function UrlBar({
         hideLabel
         useEditor={{ useTemplating: true, contentType: 'url' }}
         size="sm"
-        className="font-mono text-sm"
+        className="font-mono"
         name="url"
         label="Enter URL"
         containerClassName={className}
diff --git a/src-web/lib/theme/theme.test.ts b/src-web/lib/theme/theme.test.ts
index d0776dcd..48a81088 100644
--- a/src-web/lib/theme/theme.test.ts
+++ b/src-web/lib/theme/theme.test.ts
@@ -1,32 +1,18 @@
 import { describe, expect, it } from 'vitest';
 import { generateColorVariant, toTailwindVariable } from './theme';
 
-describe('suite name', () => {
-  it('Generates dark variants', () => {
-    expect(generateColorVariant('blue', 50, 'dark')).toEqual('hsl(240,100%,5.0%)');
-    expect(generateColorVariant('blue', 100, 'dark')).toEqual('hsl(240,100%,10.0%)');
-    expect(generateColorVariant('blue', 200, 'dark')).toEqual('hsl(240,100%,20.0%)');
-    expect(generateColorVariant('blue', 300, 'dark')).toEqual('hsl(240,100%,30.0%)');
-    expect(generateColorVariant('blue', 400, 'dark')).toEqual('hsl(240,100%,40.0%)');
-    expect(generateColorVariant('blue', 500, 'dark')).toEqual('hsl(240,100%,50.0%)');
-    expect(generateColorVariant('blue', 600, 'dark')).toEqual('hsl(240,100%,60.0%)');
-    expect(generateColorVariant('blue', 700, 'dark')).toEqual('hsl(240,100%,70.0%)');
-    expect(generateColorVariant('blue', 800, 'dark')).toEqual('hsl(240,100%,80.0%)');
-    expect(generateColorVariant('blue', 900, 'dark')).toEqual('hsl(240,100%,90.0%)');
-    expect(generateColorVariant('blue', 950, 'dark')).toEqual('hsl(240,100%,95.0%)');
+describe('Generate colors', () => {
+  it('Generates dark colors', () => {
+    expect(generateColorVariant('hsl(0,0%,50%)', 50, 'dark', 0.2, 0.8)).toBe('hsl(0,0%,14.0%)');
+    expect(generateColorVariant('hsl(0,0%,50%)', 950, 'dark', 0.2, 0.8)).toBe('hsl(0,0%,77.0%)');
+    expect(generateColorVariant('hsl(0,0%,50%)', 50, 'dark', 0.4, 0.6)).toBe('hsl(0,0%,23.0%)');
+    expect(generateColorVariant('hsl(0,0%,50%)', 950, 'dark', 0.4, 0.6)).toBe('hsl(0,0%,59.0%)');
   });
-  it('Generates light variants', () => {
-    expect(generateColorVariant('blue', 50, 'light')).toEqual('hsl(240,100%,95.0%)');
-    expect(generateColorVariant('blue', 100, 'light')).toEqual('hsl(240,100%,90.0%)');
-    expect(generateColorVariant('blue', 200, 'light')).toEqual('hsl(240,100%,80.0%)');
-    expect(generateColorVariant('blue', 300, 'light')).toEqual('hsl(240,100%,70.0%)');
-    expect(generateColorVariant('blue', 400, 'light')).toEqual('hsl(240,100%,60.0%)');
-    expect(generateColorVariant('blue', 500, 'light')).toEqual('hsl(240,100%,50.0%)');
-    expect(generateColorVariant('blue', 600, 'light')).toEqual('hsl(240,100%,40.0%)');
-    expect(generateColorVariant('blue', 700, 'light')).toEqual('hsl(240,100%,30.0%)');
-    expect(generateColorVariant('blue', 800, 'light')).toEqual('hsl(240,100%,20.0%)');
-    expect(generateColorVariant('blue', 900, 'light')).toEqual('hsl(240,100%,10.0%)');
-    expect(generateColorVariant('blue', 950, 'light')).toEqual('hsl(240,100%,5.0%)');
+  it('Generates light colors', () => {
+    expect(generateColorVariant('hsl(0,0%,50%)', 50, 'light', 0.2, 0.8)).toBe('hsl(0,0%,77.0%)');
+    expect(generateColorVariant('hsl(0,0%,50%)', 950, 'light', 0.2, 0.8)).toBe('hsl(0,0%,14.0%)');
+    expect(generateColorVariant('hsl(0,0%,50%)', 50, 'light', 0.4, 0.6)).toBe('hsl(0,0%,59.0%)');
+    expect(generateColorVariant('hsl(0,0%,50%)', 950, 'light', 0.4, 0.6)).toBe('hsl(0,0%,23.0%)');
   });
 });
 
diff --git a/src-web/lib/theme/theme.ts b/src-web/lib/theme/theme.ts
index 71935b62..f51c8847 100644
--- a/src-web/lib/theme/theme.ts
+++ b/src-web/lib/theme/theme.ts
@@ -29,6 +29,8 @@ export type AppThemeLayer = 'root' | 'sidebar' | 'titlebar' | 'content' | 'above
 
 export interface AppThemeLayerStyle {
   colors: Record<AppThemeColor, string>;
+  blackPoint?: number;
+  whitePoint?: number;
 }
 
 interface ThemeColorObj {
@@ -51,7 +53,15 @@ export function generateCSS(t: AppTheme): ThemeColorObj[] {
   for (const color of colorNames) {
     const rawValue = rootColors[color];
     if (!rawValue) continue;
-    colors.push(...generateColors(color, rawValue, t.appearance));
+    colors.push(
+      ...generateColors(
+        color,
+        rawValue,
+        t.appearance,
+        t.layers.root?.blackPoint,
+        t.layers.root?.whitePoint,
+      ),
+    );
   }
 
   return colors;
@@ -61,39 +71,45 @@ export function generateColors(
   name: AppThemeColor,
   color: string,
   appearance: Appearance,
+  blackPoint = 0,
+  whitePoint = 1,
 ): ThemeColorObj[] {
   const colors = [];
   for (const variant of appThemeVariants) {
-    colors.push({ name, variant, cssColor: generateColorVariant(color, variant, appearance) });
+    colors.push({
+      name,
+      variant,
+      cssColor: generateColorVariant(color, variant, appearance, blackPoint, whitePoint),
+    });
   }
   return colors;
 }
 
 const lightnessMap: Record<Appearance, Record<AppThemeColorVariant, number>> = {
   light: {
-    50: 1,
-    100: 0.8,
+    50: 0.98,
+    100: 0.88,
     200: 0.7,
     300: 0.5,
     400: 0.3,
-    500: 0.1,
+    500: 0,
     600: -0.2,
     700: -0.3,
-    800: -0.5,
-    900: -0.7,
+    800: -0.45,
+    900: -0.6,
     950: -0.8,
   },
   dark: {
-    50: -0.95,
-    100: -0.8,
-    200: -0.6,
-    300: -0.4,
-    400: -0.2,
-    500: 0,
-    600: 0.2,
-    700: 0.4,
-    800: 0.5,
-    900: 0.7,
+    50: -0.98,
+    100: -0.93,
+    200: -0.78,
+    300: -0.63,
+    400: -0.44,
+    500: -0.2,
+    600: 0,
+    700: 0.3,
+    800: 0.6,
+    900: 0.8,
     950: 0.9,
   },
 };
@@ -102,10 +118,16 @@ export function generateColorVariant(
   color: string,
   variant: AppThemeColorVariant,
   appearance: Appearance,
+  blackPoint = 0,
+  whitePoint = 1,
 ): string {
   const { hsl } = parseColor(color || '');
-  const lightnessMod = lightnessMap[appearance][variant];
-  const newL = hsl[2] + (100 - hsl[2]) * lightnessMod;
+  // const lightnessMod = lightnessMap[appearance][variant];
+  const lightnessMod = (appearance === 'dark' ? 1 : -1) * ((variant / 1000) * 2 - 1);
+  const newL =
+    lightnessMod > 0
+      ? hsl[2] + (100 * whitePoint - hsl[2]) * lightnessMod
+      : hsl[2] + hsl[2] * (1 - blackPoint) * lightnessMod;
   return `hsl(${hsl[0]},${hsl[1]}%,${newL.toFixed(1)}%)`;
 }
 
diff --git a/src-web/lib/theme/window.ts b/src-web/lib/theme/window.ts
index 32ed4f82..9fa62805 100644
--- a/src-web/lib/theme/window.ts
+++ b/src-web/lib/theme/window.ts
@@ -8,15 +8,17 @@ const darkTheme: AppTheme = {
   appearance: 'dark',
   layers: {
     root: {
+      blackPoint: 0.15,
+      whitePoint: 0.95,
       colors: {
-        gray: '#69789b',
-        red: '#ff1c1c',
+        gray: '#656196',
+        red: '#ff2727',
         orange: '#ff9411',
-        yellow: '#ffff1f',
-        green: '#35ff35',
-        blue: '#1365ff',
+        yellow: '#dede34',
+        green: '#39da39',
+        blue: '#2e91ff',
         pink: '#ff74ff',
-        violet: '#873fff',
+        violet: '#a853ff',
       },
     },
   },
@@ -27,8 +29,10 @@ const lightTheme: AppTheme = {
   appearance: 'light',
   layers: {
     root: {
+      blackPoint: 0.1,
+      whitePoint: 1,
       colors: {
-        gray: '#69789b',
+        gray: '#7f8fb0',
         red: '#e13939',
         orange: '#da881f',
         yellow: '#e3b22d',
@@ -63,7 +67,7 @@ export function setAppearance(a?: Appearance) {
   document.documentElement.setAttribute('data-appearance', appearance);
   document.documentElement.setAttribute('data-theme', theme.name);
 
-  let existingStyleEl = document.head.querySelector(`style[data-theme-definition="${theme.name}"]`);
+  let existingStyleEl = document.head.querySelector(`style[data-theme-definition]`);
   if (!existingStyleEl) {
     const styleEl = document.createElement('style');
     document.head.appendChild(styleEl);
@@ -71,11 +75,16 @@ export function setAppearance(a?: Appearance) {
   }
 
   existingStyleEl.textContent = [
-    `[data-theme="${theme.name}"] {`,
-    ...generateCSS(theme).map(toTailwindVariable),
+    `/* ${darkTheme.name} */`,
+    `[data-appearance="dark"] {`,
+    ...generateCSS(darkTheme).map(toTailwindVariable),
+    '}',
+    `/* ${lightTheme.name} */`,
+    `[data-appearance="light"] {`,
+    ...generateCSS(lightTheme).map(toTailwindVariable),
     '}',
   ].join('\n');
-  existingStyleEl.setAttribute('data-theme-definition', theme.name);
+  existingStyleEl.setAttribute('data-theme-definition', '');
 }
 
 export function getPreferredAppearance(): Appearance {
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 7a4fcfd4..faffb33d 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -20,14 +20,15 @@ module.exports = {
             white: 'hsl(0 100% 100% / <alpha-value>)',
             black: 'hsl(0 100% 0% / <alpha-value>)',
             background: 'hsl(var(--color-background) / <alpha-value>)',
-            placeholder: 'hsl(var(--color-gray-200) / <alpha-value>)',
-            gray: color('gray'),
+            placeholder: 'hsl(var(--color-gray-300) / <alpha-value>)',
+            red: color('red'),
             orange: color('orange'),
+            yellow: color('yellow'),
+            gray: color('gray'),
             blue: color('blue'),
             green: color('green'),
             pink: color('pink'),
             violet: color('violet'),
-            red: color('red'),
         }
     },
     plugins: [],