From 880bce157b529460d53fa1e47c24ca31195761ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 25 Feb 2026 16:09:29 +0100
Subject: [PATCH] style: improve light theme border and input visibility

---
 app/(app)/pastel/batch/page.tsx      |  6 +++---
 app/(app)/pastel/colorblind/page.tsx |  6 +++---
 app/(app)/pastel/contrast/page.tsx   | 10 +++++-----
 app/(app)/pastel/distinct/page.tsx   |  4 ++--
 app/(app)/pastel/gradient/page.tsx   |  8 ++++----
 app/(app)/pastel/harmony/page.tsx    |  6 +++---
 app/(app)/pastel/page.tsx            | 10 +++++-----
 app/(app)/pastel/textcolor/page.tsx  |  4 ++--
 app/globals.css                      |  6 +++---
 components/figlet/FontPreview.tsx    |  4 ++--
 components/figlet/FontSelector.tsx   |  4 ++--
 components/units/MainConverter.tsx   |  4 ++--
 12 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/app/(app)/pastel/batch/page.tsx b/app/(app)/pastel/batch/page.tsx
index 3aab25b..b38e4c9 100644
--- a/app/(app)/pastel/batch/page.tsx
+++ b/app/(app)/pastel/batch/page.tsx
@@ -105,7 +105,7 @@ export default function BatchPage() {
           <div className="space-y-6">
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">Input Colors</CardTitle>
+                <CardTitle>Input Colors</CardTitle>
               </CardHeader>
               <CardContent>
                 <p className="text-sm text-muted-foreground mb-4">
@@ -127,7 +127,7 @@ export default function BatchPage() {
 
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">Operation</CardTitle>
+                <CardTitle>Operation</CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
                 <Select
@@ -187,7 +187,7 @@ export default function BatchPage() {
               <>
                 <Card>
                   <CardHeader>
-                    <CardTitle className="text-sm font-medium">
+                    <CardTitle>
                       Output Colors ({outputColors.length})
                     </CardTitle>
                   </CardHeader>
diff --git a/app/(app)/pastel/colorblind/page.tsx b/app/(app)/pastel/colorblind/page.tsx
index 58715ca..7b81703 100644
--- a/app/(app)/pastel/colorblind/page.tsx
+++ b/app/(app)/pastel/colorblind/page.tsx
@@ -80,7 +80,7 @@ export default function ColorBlindPage() {
           <div className="space-y-6">
             <Card>
               <CardHeader className="flex flex-row items-center justify-between space-y-0">
-                <CardTitle className="text-sm font-medium">Colors to Test</CardTitle>
+                <CardTitle>Colors to Test</CardTitle>
                 <Button
                   onClick={addColor}
                   variant="outline"
@@ -118,7 +118,7 @@ export default function ColorBlindPage() {
 
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">Blindness Type</CardTitle>
+                <CardTitle>Blindness Type</CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
                 <Select
@@ -166,7 +166,7 @@ export default function ColorBlindPage() {
               <>
                 <Card>
                   <CardHeader>
-                    <CardTitle className="text-sm font-medium">Simulation Results</CardTitle>
+                    <CardTitle>Simulation Results</CardTitle>
                   </CardHeader>
                   <CardContent className="space-y-4">
                     <p className="text-sm text-muted-foreground mb-2">
diff --git a/app/(app)/pastel/contrast/page.tsx b/app/(app)/pastel/contrast/page.tsx
index e9c19c6..a74f34c 100644
--- a/app/(app)/pastel/contrast/page.tsx
+++ b/app/(app)/pastel/contrast/page.tsx
@@ -71,7 +71,7 @@ export default function ContrastPage() {
           <div className="space-y-6">
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">Foreground Color</CardTitle>
+                <CardTitle>Foreground Color</CardTitle>
               </CardHeader>
               <CardContent>
                 <ColorPicker color={foreground} onChange={setForeground} />
@@ -91,7 +91,7 @@ export default function ContrastPage() {
 
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">Background Color</CardTitle>
+                <CardTitle>Background Color</CardTitle>
               </CardHeader>
               <CardContent>
                 <ColorPicker color={background} onChange={setBackground} />
@@ -104,7 +104,7 @@ export default function ContrastPage() {
             {/* Preview */}
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">Preview</CardTitle>
+                <CardTitle>Preview</CardTitle>
               </CardHeader>
               <CardContent>
                 <div
@@ -121,7 +121,7 @@ export default function ContrastPage() {
             {ratio !== null && (
               <Card>
                 <CardHeader>
-                  <CardTitle className="text-sm font-medium">Contrast Ratio</CardTitle>
+                  <CardTitle>Contrast Ratio</CardTitle>
                 </CardHeader>
                 <CardContent>
                   <div className="text-center mb-6">
@@ -144,7 +144,7 @@ export default function ContrastPage() {
             {compliance && (
               <Card>
                 <CardHeader>
-                  <CardTitle className="text-sm font-medium">WCAG 2.1 Compliance</CardTitle>
+                  <CardTitle>WCAG 2.1 Compliance</CardTitle>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <div>
diff --git a/app/(app)/pastel/distinct/page.tsx b/app/(app)/pastel/distinct/page.tsx
index 5196cfa..3c37efa 100644
--- a/app/(app)/pastel/distinct/page.tsx
+++ b/app/(app)/pastel/distinct/page.tsx
@@ -52,7 +52,7 @@ export default function DistinctPage() {
           <div className="lg:col-span-1">
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">Settings</CardTitle>
+                <CardTitle>Settings</CardTitle>
               </CardHeader>
 
               <CardContent className="space-y-6">
@@ -119,7 +119,7 @@ export default function DistinctPage() {
           <div className="lg:col-span-2 space-y-6">
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">
+                <CardTitle>
                   Generated Colors {colors.length > 0 && `(${colors.length})`}
                 </CardTitle>
               </CardHeader>
diff --git a/app/(app)/pastel/gradient/page.tsx b/app/(app)/pastel/gradient/page.tsx
index 1f9377c..7a428e6 100644
--- a/app/(app)/pastel/gradient/page.tsx
+++ b/app/(app)/pastel/gradient/page.tsx
@@ -62,7 +62,7 @@ export default function GradientPage() {
           <div className="space-y-6">
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">Color Stops</CardTitle>
+                <CardTitle>Color Stops</CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
                 <div className="space-y-4">
@@ -96,7 +96,7 @@ export default function GradientPage() {
 
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">Settings</CardTitle>
+                <CardTitle>Settings</CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
                 <div>
@@ -137,7 +137,7 @@ export default function GradientPage() {
               <>
                 <Card>
                   <CardHeader>
-                    <CardTitle className="text-sm font-medium">Gradient Preview</CardTitle>
+                    <CardTitle>Gradient Preview</CardTitle>
                   </CardHeader>
                   <CardContent>
                     <div
@@ -151,7 +151,7 @@ export default function GradientPage() {
 
                 <Card>
                   <CardHeader>
-                    <CardTitle className="text-sm font-medium">
+                    <CardTitle>
                       Colors ({gradient.length})
                     </CardTitle>
                   </CardHeader>
diff --git a/app/(app)/pastel/harmony/page.tsx b/app/(app)/pastel/harmony/page.tsx
index 10a0e2f..ecbffb9 100644
--- a/app/(app)/pastel/harmony/page.tsx
+++ b/app/(app)/pastel/harmony/page.tsx
@@ -73,7 +73,7 @@ export default function HarmonyPage() {
           <div className="space-y-6">
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">Base Color</CardTitle>
+                <CardTitle>Base Color</CardTitle>
               </CardHeader>
               <CardContent>
                 <ColorPicker color={baseColor} onChange={setBaseColor} />
@@ -82,7 +82,7 @@ export default function HarmonyPage() {
 
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">Harmony Type</CardTitle>
+                <CardTitle>Harmony Type</CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
                 <Select
@@ -133,7 +133,7 @@ export default function HarmonyPage() {
               <>
                 <Card>
                   <CardHeader>
-                    <CardTitle className="text-sm font-medium">
+                    <CardTitle>
                       Generated Palette ({palette.length} colors)
                     </CardTitle>
                   </CardHeader>
diff --git a/app/(app)/pastel/page.tsx b/app/(app)/pastel/page.tsx
index 216d76e..54fba93 100644
--- a/app/(app)/pastel/page.tsx
+++ b/app/(app)/pastel/page.tsx
@@ -87,7 +87,7 @@ function PlaygroundContent() {
           <div className="space-y-6">
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">Color Picker</CardTitle>
+                <CardTitle>Color Picker</CardTitle>
               </CardHeader>
               <CardContent>
                 <ColorPicker color={color} onChange={setColor} />
@@ -96,7 +96,7 @@ function PlaygroundContent() {
 
             <Card>
               <CardHeader className="flex flex-row items-center justify-between space-y-0">
-                <CardTitle className="text-sm font-medium">Preview</CardTitle>
+                <CardTitle>Preview</CardTitle>
                 <Button onClick={handleShare} variant="outline" size="sm">
                   <Share2 className="h-4 w-4 mr-2" />
                   Share
@@ -114,7 +114,7 @@ function PlaygroundContent() {
                 <CardHeader className="flex flex-row items-center justify-between space-y-0">
                   <div className="flex items-center gap-2">
                     <History className="h-5 w-5" />
-                    <CardTitle className="text-sm font-medium">Recent Colors</CardTitle>
+                    <CardTitle>Recent Colors</CardTitle>
                   </div>
                   <Button
                     onClick={clearHistory}
@@ -167,7 +167,7 @@ function PlaygroundContent() {
           <div className="space-y-6">
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">Color Information</CardTitle>
+                <CardTitle>Color Information</CardTitle>
               </CardHeader>
               <CardContent>
                 {isLoading && (
@@ -189,7 +189,7 @@ function PlaygroundContent() {
 
             <Card>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">Color Manipulation</CardTitle>
+                <CardTitle>Color Manipulation</CardTitle>
               </CardHeader>
               <CardContent>
                 <ManipulationPanel color={color} onColorChange={setColor} />
diff --git a/app/(app)/pastel/textcolor/page.tsx b/app/(app)/pastel/textcolor/page.tsx
index 8b07423..fe9a983 100644
--- a/app/(app)/pastel/textcolor/page.tsx
+++ b/app/(app)/pastel/textcolor/page.tsx
@@ -69,7 +69,7 @@ export default function TextColorPage() {
           <div className="space-y-6">
             <Card>
               <CardHeader className="flex flex-row items-center justify-between space-y-0">
-                <CardTitle className="text-sm font-medium">Background Colors</CardTitle>
+                <CardTitle>Background Colors</CardTitle>
                 <Button
                   onClick={addBackground}
                   disabled={backgrounds.length >= 10}
@@ -142,7 +142,7 @@ export default function TextColorPage() {
               <>
                 <Card>
                   <CardHeader>
-                    <CardTitle className="text-sm font-medium">Optimized Results</CardTitle>
+                    <CardTitle>Optimized Results</CardTitle>
                   </CardHeader>
                   <CardContent className="space-y-4">
                     {results.map((result, index) => (
diff --git a/app/globals.css b/app/globals.css
index cbddfd8..11fd235 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -153,9 +153,9 @@
   --accent-foreground: oklch(15% 0.05 255);
   --destructive: oklch(60% 0.2 25);
   --destructive-foreground: oklch(100% 0 0);
-  --border: rgba(0, 0, 0, 0.12);
-  --input: rgba(0, 0, 0, 0.01);
-  --ring: rgba(139, 92, 246, 0.2);
+  --border: rgba(0, 0, 0, 0.2);
+  --input: rgba(0, 0, 0, 0.08);
+  --ring: rgba(139, 92, 246, 0.4);
 }
 
 @layer base {
diff --git a/components/figlet/FontPreview.tsx b/components/figlet/FontPreview.tsx
index b1c36fd..287cdc3 100644
--- a/components/figlet/FontPreview.tsx
+++ b/components/figlet/FontPreview.tsx
@@ -57,9 +57,9 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
   };
   return (
     <Card className={cn('relative', className)}>
-      <CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2 space-y-0">
+      <CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
         <div className="flex items-center gap-2">
-          <CardTitle className="text-sm font-medium">Preview</CardTitle>
+          <CardTitle>Preview</CardTitle>
           {font && (
             <span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-md font-mono">
               {font}
diff --git a/components/figlet/FontSelector.tsx b/components/figlet/FontSelector.tsx
index 52f6621..f9058a5 100644
--- a/components/figlet/FontSelector.tsx
+++ b/components/figlet/FontSelector.tsx
@@ -93,8 +93,8 @@ export function FontSelector({
 
   return (
     <Card className={cn("flex flex-col min-h-0 overflow-hidden", className)}>
-      <CardHeader className="flex flex-row items-center justify-between shrink-0 space-y-0">
-        <CardTitle className="text-sm font-medium">Select Font</CardTitle>
+      <CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2 space-y-0">
+        <CardTitle>Select Font</CardTitle>
         {onRandomFont && (
           <Button
             variant="outline"
diff --git a/components/units/MainConverter.tsx b/components/units/MainConverter.tsx
index 102bfc3..a67bfa9 100644
--- a/components/units/MainConverter.tsx
+++ b/components/units/MainConverter.tsx
@@ -121,7 +121,7 @@ export default function MainConverter() {
 
       {/* Quick Access Row */}
       <Card>
-        <CardContent className="flex flex-col md:flex-row md:items-center gap-4 justify-between pt-6">
+        <CardContent className="flex flex-col md:flex-row md:items-center gap-4 justify-between">
           <div className="flex-1">
             <SearchUnits onSelectUnit={handleSearchSelect} />
           </div>
@@ -156,7 +156,7 @@ export default function MainConverter() {
         <CardHeader>
           <CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-6 pt-0">
+        <CardContent className="space-y-6">
           {/* Input row, stacks vertically on mobile, horizontal on desktop */}
           <div className="flex flex-col gap-4 md:flex-row md:items-end md:gap-2">
             {/* Value Input */}