Просмотр исходного кода

style(studio): fix contrast, shrink chat bar, remove header border

Dark theme: foreground 0.88→0.92, muted-foreground 0.62→0.68,
  border 0.33→0.35, secondary-foreground 0.82→0.88
Light theme: muted-foreground 0.45→0.42
Header: removed bottom border line
Chat bar: border /60, bg /40, smaller padding (py-2.5 px-4)
Empty state: heading /40→/70, subtitle removed /60
Ma 7 месяцев назад
Родитель
Сommit
ac258397ef

+ 1 - 1
packages/studio/src/App.tsx

@@ -75,7 +75,7 @@ export function App() {
 
       <div className="flex-1 flex flex-col min-w-0">
         {/* Thin utility strip — pushed inward */}
-        <div className="h-12 shrink-0 border-b border-border flex items-center justify-end px-8 gap-4">
+        <div className="h-12 shrink-0 flex items-center justify-end px-8 gap-4">
           <button
             onClick={() => setTheme(isDark ? "light" : "dark")}
             className="w-8 h-8 flex items-center justify-center rounded-full bg-secondary text-muted-foreground hover:text-foreground hover:bg-secondary/80 transition-all text-sm"

+ 2 - 2
packages/studio/src/components/ChatBar.tsx

@@ -118,7 +118,7 @@ export function ChatBar({ t, sse }: {
     : "Tell InkOS what to do...";
 
   return (
-    <div className="border border-border bg-card/60 backdrop-blur-md mx-4 mb-3 rounded-lg">
+    <div className="border border-border/60 bg-card/40 mx-6 mb-4 rounded-md">
       {/* Expanded message area */}
       {expanded && messages.length > 0 && (
         <div className="max-w-3xl mx-auto">
@@ -151,7 +151,7 @@ export function ChatBar({ t, sse }: {
       )}
 
       {/* Input bar — centered to match main content */}
-      <div className="max-w-3xl mx-auto px-10 py-3.5 flex items-center gap-4">
+      <div className="max-w-3xl mx-auto px-4 py-2.5 flex items-center gap-3">
         <div className="flex-1 relative">
           <input
             ref={inputRef}

+ 21 - 21
packages/studio/src/index.css

@@ -48,7 +48,7 @@
   --secondary: oklch(0.93 0.01 80);
   --secondary-foreground: oklch(0.25 0.02 55);
   --muted: oklch(0.93 0.008 80);
-  --muted-foreground: oklch(0.45 0.025 55);
+  --muted-foreground: oklch(0.42 0.03 55);
   --accent: oklch(0.93 0.012 55);
   --accent-foreground: oklch(0.25 0.02 55);
   --destructive: oklch(0.55 0.2 25);
@@ -62,27 +62,27 @@
 
 /* ── Dark: midnight study ── */
 .dark {
-  --background: oklch(0.13 0.012 55);
-  --foreground: oklch(0.88 0.02 75);
-  --card: oklch(0.17 0.015 55);
-  --card-foreground: oklch(0.88 0.02 75);
-  --popover: oklch(0.17 0.015 55);
-  --popover-foreground: oklch(0.88 0.02 75);
-  --primary: oklch(0.72 0.15 65);
-  --primary-foreground: oklch(0.13 0.012 55);
-  --secondary: oklch(0.22 0.018 55);
-  --secondary-foreground: oklch(0.82 0.025 75);
-  --muted: oklch(0.22 0.015 55);
-  --muted-foreground: oklch(0.62 0.025 70);
-  --accent: oklch(0.25 0.02 55);
-  --accent-foreground: oklch(0.85 0.025 75);
-  --destructive: oklch(0.60 0.2 25);
+  --background: oklch(0.14 0.01 55);
+  --foreground: oklch(0.92 0.015 75);
+  --card: oklch(0.18 0.012 55);
+  --card-foreground: oklch(0.92 0.015 75);
+  --popover: oklch(0.18 0.012 55);
+  --popover-foreground: oklch(0.92 0.015 75);
+  --primary: oklch(0.75 0.15 65);
+  --primary-foreground: oklch(0.12 0.01 55);
+  --secondary: oklch(0.24 0.015 55);
+  --secondary-foreground: oklch(0.88 0.02 75);
+  --muted: oklch(0.24 0.012 55);
+  --muted-foreground: oklch(0.68 0.02 70);
+  --accent: oklch(0.26 0.018 55);
+  --accent-foreground: oklch(0.90 0.02 75);
+  --destructive: oklch(0.62 0.2 25);
   --destructive-foreground: oklch(0.98 0 0);
-  --border: oklch(0.33 0.025 55);
-  --input: oklch(0.30 0.02 55);
-  --ring: oklch(0.72 0.15 65);
-  --amber: oklch(0.72 0.15 65);
-  --amber-foreground: oklch(0.13 0.012 55);
+  --border: oklch(0.35 0.02 55);
+  --input: oklch(0.30 0.018 55);
+  --ring: oklch(0.75 0.15 65);
+  --amber: oklch(0.75 0.15 65);
+  --amber-foreground: oklch(0.12 0.01 55);
 }
 
 body {

+ 2 - 2
packages/studio/src/pages/Dashboard.tsx

@@ -52,8 +52,8 @@ export function Dashboard({ nav, sse, theme, t }: { nav: Nav; sse: { messages: R
     return (
       <div className="flex flex-col items-center justify-center min-h-[60vh]">
         <div className="text-5xl mb-8 opacity-15 select-none">✦</div>
-        <h2 className="font-serif text-3xl italic text-foreground/40 mb-3">{t("dash.noBooks")}</h2>
-        <p className="text-sm text-muted-foreground/60 mb-10">{t("dash.createFirst")}</p>
+        <h2 className="font-serif text-3xl italic text-foreground/70 mb-3">{t("dash.noBooks")}</h2>
+        <p className="text-sm text-muted-foreground mb-10">{t("dash.createFirst")}</p>
         <button
           onClick={nav.toBookCreate}
           className="px-7 py-3 rounded-md text-sm font-medium bg-primary text-primary-foreground hover:opacity-90 transition-opacity"