More theme tweaks

src-web/components/Button.tsx

@@ -9,8 +9,8 @@ import { forwardRef } from 'react';
 import { Icon } from './Icon';
 
 const colorStyles = {
-  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',
+  default: 'hover:bg-gray-700/10 text-gray-700 hover:text-gray-1000',
+  gray: 'text-gray-800 bg-gray-100 hover:bg-gray-500/20 hover:text-gray-1000',
   primary: 'bg-blue-400 text-white',
   secondary: 'bg-violet-400 text-white',
   warning: 'bg-orange-400 text-white',
@@ -45,11 +45,10 @@ export const Button = forwardRef(function Button<T extends ElementType>(
       type="button"
       className={classnames(
         className,
-        'outline-none', // TODO: Add focus styles
+        'outline-none',
         'border border-transparent focus-visible:border-blue-300',
-        'transition-all rounded-md flex items-center hover:text-white',
+        'transition-all rounded-md flex items-center',
         'bg-opacity-90 hover:bg-opacity-100',
-        // 'active:translate-y-[0.5px] active:scale-[0.99]',
         colorStyles[color || 'default'],
         justify === 'start' && 'justify-start',
         justify === 'center' && 'justify-center',

src-web/components/Editor/Editor.css

@@ -5,6 +5,10 @@
 .cm-editor {
     @apply w-full block text-base;
 
+    * {
+        @apply cursor-text;
+    }
+
     &.cm-focused {
         outline: none !important;
     }
@@ -31,8 +35,13 @@
     }
 
     .placeholder-widget {
-        @apply text-[0.9em] text-gray-900 bg-gray-200 px-1.5 py-[0.1em] border-y border-gray-50
-        rounded cursor-default hover:bg-gray-300 hover:text-white;
+        @apply text-[0.9em] text-gray-800 dark:text-gray-1000 px-1 rounded cursor-default dark:shadow;
+
+        /* NOTE: Background and border are translucent so we can see text selection through it */
+        @apply bg-gray-300/40 border border-gray-300 border-opacity-40 hover:border-opacity-80;
+
+        /* Bring above on hover */
+        @apply hover:z-10 relative;
     }
 }
 
@@ -110,10 +119,6 @@
     @apply text-gray-800;
 }
 
-.cm-editor * {
-    @apply cursor-text;
-}
-
 .cm-editor .cm-cursor {
     @apply border-l-2 border-gray-800;
 }
@@ -132,19 +137,23 @@
     }
 }
 
-.cm-scroller {
+.cm-scroller, .cm-tooltip-autocomplete > ul {
     &::-webkit-scrollbar-corner,
     &::-webkit-scrollbar {
-        @apply w-1 h-1 bg-transparent;
+        @apply w-1.5 h-1.5 bg-transparent;
     }
 
     &::-webkit-scrollbar-thumb {
-        @apply bg-gray-400 bg-opacity-30 rounded-full;
+        @apply bg-gray-200 rounded-full;
     }
 }
 
+.cm-editor .cm-scroller::-webkit-scrollbar-thumb {
+    @apply bg-opacity-50;
+}
+
 .cm-editor.cm-focused .cm-scroller::-webkit-scrollbar-thumb {
-    @apply bg-opacity-80;
+    @apply bg-opacity-100;
 }
 
 /* <-- */

src-web/components/Editor/extensions.ts

@@ -135,7 +135,7 @@ export const multiLineExtensions = [
   rectangularSelection(),
   crosshairCursor(),
   highlightActiveLine(),
-  highlightSelectionMatches(),
+  highlightSelectionMatches({ minSelectionLength: 2 }),
   keymap.of([
     ...closeBracketsKeymap,
     ...defaultKeymap,

src-web/components/IconButton.tsx

@@ -21,7 +21,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
         spin={spin}
         className={classnames(
           iconClassName,
-          'text-gray-700 group-hover:text-gray-900',
+          'text-gray-700 group-hover:text-gray-1000',
           props.disabled && 'opacity-70',
         )}
       />

src-web/components/Input.tsx

@@ -62,7 +62,7 @@ export function Input({
         items="center"
         className={classnames(
           containerClassName,
-          'relative w-full rounded-md text-gray-900 bg-gray-200/10',
+          'relative w-full rounded-md text-gray-900',
           'border border-gray-200 focus-within:border-blue-400/40',
           size === 'md' && 'h-10',
           size === 'sm' && 'h-8',

src-web/components/RequestPane.tsx

@@ -22,7 +22,6 @@ export function RequestPane({ fullHeight, request, className }: Props) {
     >
       <div className="pl-2">
         <UrlBar
-          className="bg-transparent shadow dark:shadow-none shadow-gray-200"
           key={request.id}
           method={request.method}
           url={request.url}

src-web/components/ResponsePane.tsx

@@ -53,7 +53,7 @@ export function ResponsePane({ requestId, className }: Props) {
           className,
           'max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 ',
           'dark:bg-gray-100 rounded-md overflow-hidden border border-gray-200',
-          'shadow dark:shadow-none shadow-gray-200',
+          'shadow shadow-gray-100 dark:shadow-gray-0',
         )}
       >
         {/*<HStack as={WindowDragRegion} items="center" className="pl-1.5 pr-1">*/}

src-web/components/ScrollArea.tsx

@@ -24,8 +24,8 @@ function ScrollBar({ orientation }: { orientation: 'vertical' | 'horizontal' })
       orientation={orientation}
       className={classnames(
         'flex bg-transparent rounded-full',
-        orientation === 'vertical' && 'w-1',
-        orientation === 'horizontal' && 'h-1 flex-col',
+        orientation === 'vertical' && 'w-1.5',
+        orientation === 'horizontal' && 'h-1.5 flex-col',
       )}
     >
       <S.Thumb className="flex-1 bg-gray-50 group-hover:bg-gray-100 rounded-full" />

src-web/components/StatusColor.tsx

@@ -10,11 +10,11 @@ export function StatusColor({ statusCode, children }: Props) {
   return (
     <span
       className={classnames(
-        statusCode >= 100 && statusCode < 200 && 'text-green-500',
-        statusCode >= 200 && statusCode < 300 && 'text-green-500',
-        statusCode >= 300 && statusCode < 400 && 'text-pink-500',
-        statusCode >= 400 && statusCode < 500 && 'text-orange-500',
-        statusCode >= 500 && statusCode < 600 && 'text-red-500',
+        statusCode >= 100 && statusCode < 200 && 'text-green-600',
+        statusCode >= 200 && statusCode < 300 && 'text-green-600',
+        statusCode >= 300 && statusCode < 400 && 'text-pink-600',
+        statusCode >= 400 && statusCode < 500 && 'text-orange-600',
+        statusCode >= 500 && statusCode < 600 && 'text-red-600',
       )}
     >
       {children}

src-web/components/UrlBar.tsx

@@ -11,18 +11,9 @@ interface Props {
   url: string;
   onMethodChange: (method: string) => void;
   onUrlChange: (url: string) => void;
-  className?: string;
 }
 
-export function UrlBar({
-  className,
-  sendRequest,
-  loading,
-  onMethodChange,
-  method,
-  onUrlChange,
-  url,
-}: Props) {
+export function UrlBar({ sendRequest, loading, onMethodChange, method, onUrlChange, url }: Props) {
   const handleSendRequest = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     sendRequest();
@@ -37,7 +28,7 @@ export function UrlBar({
         className="font-mono px-0"
         name="url"
         label="Enter URL"
-        containerClassName={className}
+        containerClassName="shadow shadow-gray-100 dark:shadow-gray-0"
         onChange={onUrlChange}
         defaultValue={url}
         placeholder="Enter a URL..."
@@ -55,13 +46,7 @@ export function UrlBar({
               { label: 'HEAD', value: 'HEAD' },
             ]}
           >
-            <Button
-              type="button"
-              disabled={loading}
-              size="xs"
-              className="mx-0.5 !text-gray-800"
-              justify="start"
-            >
+            <Button type="button" disabled={loading} size="xs" className="mx-0.5" justify="start">
               {method.toUpperCase()}
             </Button>
           </DropdownMenuRadio>

src-web/lib/theme/theme.ts

@@ -20,9 +20,23 @@ const colorNames: AppThemeColor[] = [
   'pink',
   'violet',
 ];
-export type AppThemeColorVariant = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+export type AppThemeColorVariant =
+  | 0
+  | 50
+  | 100
+  | 200
+  | 300
+  | 400
+  | 500
+  | 600
+  | 700
+  | 800
+  | 900
+  | 950
+  | 1000;
+
 export const appThemeVariants: AppThemeColorVariant[] = [
-  50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950,
+  0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1000,
 ];
 
 export type AppThemeLayer = 'root' | 'sidebar' | 'titlebar' | 'content' | 'above';
@@ -87,6 +101,7 @@ export function generateColors(
 
 const lightnessMap: Record<Appearance, Record<AppThemeColorVariant, number>> = {
   light: {
+    0: 1,
     50: 1,
     100: 0.9,
     200: 0.7,
@@ -98,8 +113,10 @@ const lightnessMap: Record<Appearance, Record<AppThemeColorVariant, number>> = {
     800: -0.6,
     900: -0.8,
     950: -0.9,
+    1000: -1,
   },
   dark: {
+    0: -1,
     50: -0.9,
     100: -0.8,
     200: -0.6,
@@ -111,6 +128,7 @@ const lightnessMap: Record<Appearance, Record<AppThemeColorVariant, number>> = {
     800: 0.6,
     900: 0.8,
     950: 0.9,
+    1000: 1,
   },
 };
 
@@ -128,6 +146,7 @@ export function generateColorVariant(
     lightnessMod > 0
       ? hsl[2] + (100 * whitePoint - hsl[2]) * lightnessMod
       : hsl[2] + hsl[2] * (1 - blackPoint) * lightnessMod;
+  console.log('NEWL', color, newL);
   return `hsl(${hsl[0]},${hsl[1]}%,${newL.toFixed(1)}%)`;
 }
 

src-web/lib/theme/window.ts

@@ -8,8 +8,7 @@ const darkTheme: AppTheme = {
   appearance: 'dark',
   layers: {
     root: {
-      blackPoint: 0.1,
-      whitePoint: 0.95,
+      blackPoint: 0.3,
       colors: {
         gray: '#656196',
         red: '#ee3b3b',
@@ -18,7 +17,7 @@ const darkTheme: AppTheme = {
         green: '#44cb44',
         blue: '#2e91ff',
         pink: '#f670f6',
-        violet: '#ae70ff',
+        violet: '#b176ff',
       },
     },
   },
@@ -29,17 +28,16 @@ const lightTheme: AppTheme = {
   appearance: 'light',
   layers: {
     root: {
-      blackPoint: 0.1,
-      whitePoint: 1,
+      whitePoint: 0.98,
       colors: {
         gray: '#7f8fb0',
-        red: '#e13939',
-        orange: '#da881f',
-        yellow: '#cb9f2a',
-        green: '#37c237',
+        red: '#da4545',
+        orange: '#e38511',
+        yellow: '#e0c514',
+        green: '#29d229',
         blue: '#1365ff',
-        pink: '#e861e8',
-        violet: '#8d47ff',
+        pink: '#ff69dc',
+        violet: '#9959ff',
       },
     },
   },

src-web/main.css

@@ -28,8 +28,7 @@ html, body, #root {
 * {
     transition: background-color var(--transition-duration),
     border-color var(--transition-duration),
-    box-shadow var(--transition-duration),
-;
+    box-shadow var(--transition-duration);
 }
 
 /*.hide-scrollbar {*/

tailwind.config.cjs

@@ -39,6 +39,7 @@ module.exports = {
 
 function color(name) {
     return {
+        0: `hsl(var(--color-${name}-0) / <alpha-value>)`,
         50: `hsl(var(--color-${name}-50) / <alpha-value>)`,
         100: `hsl(var(--color-${name}-100) / <alpha-value>)`,
         200: `hsl(var(--color-${name}-200) / <alpha-value>)`,
@@ -50,5 +51,6 @@ function color(name) {
         800: `hsl(var(--color-${name}-800) / <alpha-value>)`,
         900: `hsl(var(--color-${name}-900) / <alpha-value>)`,
         950: `hsl(var(--color-${name}-950) / <alpha-value>)`,
+        1000: `hsl(var(--color-${name}-1000) / <alpha-value>)`,
     };
 }