valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: improve light theme border and input visibility

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-25 16:09:29 +01:00
parent 2fb2eaa54c
commit 880bce157b
12 changed files with 36 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/(app)/pastel/batch/page.tsx
View File

@@ -105,7 +105,7 @@ export default function BatchPage() {
<div className="space-y-6"> <div className="space-y-6">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Input Colors</CardTitle> <CardTitle>Input Colors</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-muted-foreground mb-4"> <p className="text-sm text-muted-foreground mb-4">
@@ -127,7 +127,7 @@ export default function BatchPage() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Operation</CardTitle> <CardTitle>Operation</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<Select <Select
@@ -187,7 +187,7 @@ export default function BatchPage() {
<> <>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium"> <CardTitle>
Output Colors ({outputColors.length}) Output Colors ({outputColors.length})
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>

6
app/(app)/pastel/colorblind/page.tsx
View File

@@ -80,7 +80,7 @@ export default function ColorBlindPage() {
<div className="space-y-6"> <div className="space-y-6">
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0"> <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 <Button
onClick={addColor} onClick={addColor}
variant="outline" variant="outline"
@@ -118,7 +118,7 @@ export default function ColorBlindPage() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Blindness Type</CardTitle> <CardTitle>Blindness Type</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<Select <Select
@@ -166,7 +166,7 @@ export default function ColorBlindPage() {
<> <>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Simulation Results</CardTitle> <CardTitle>Simulation Results</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<p className="text-sm text-muted-foreground mb-2"> <p className="text-sm text-muted-foreground mb-2">

10
app/(app)/pastel/contrast/page.tsx
View File

@@ -71,7 +71,7 @@ export default function ContrastPage() {
<div className="space-y-6"> <div className="space-y-6">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Foreground Color</CardTitle> <CardTitle>Foreground Color</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ColorPicker color={foreground} onChange={setForeground} /> <ColorPicker color={foreground} onChange={setForeground} />
@@ -91,7 +91,7 @@ export default function ContrastPage() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Background Color</CardTitle> <CardTitle>Background Color</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ColorPicker color={background} onChange={setBackground} /> <ColorPicker color={background} onChange={setBackground} />
@@ -104,7 +104,7 @@ export default function ContrastPage() {
{/* Preview */} {/* Preview */}
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Preview</CardTitle> <CardTitle>Preview</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div <div
@@ -121,7 +121,7 @@ export default function ContrastPage() {
{ratio !== null && ( {ratio !== null && (
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Contrast Ratio</CardTitle> <CardTitle>Contrast Ratio</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-center mb-6"> <div className="text-center mb-6">
@@ -144,7 +144,7 @@ export default function ContrastPage() {
{compliance && ( {compliance && (
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">WCAG 2.1 Compliance</CardTitle> <CardTitle>WCAG 2.1 Compliance</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div> <div>

4
app/(app)/pastel/distinct/page.tsx
View File

@@ -52,7 +52,7 @@ export default function DistinctPage() {
<div className="lg:col-span-1"> <div className="lg:col-span-1">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Settings</CardTitle> <CardTitle>Settings</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
@@ -119,7 +119,7 @@ export default function DistinctPage() {
<div className="lg:col-span-2 space-y-6"> <div className="lg:col-span-2 space-y-6">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium"> <CardTitle>
Generated Colors {colors.length > 0 && `(${colors.length})`} Generated Colors {colors.length > 0 && `(${colors.length})`}
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>

8
app/(app)/pastel/gradient/page.tsx
View File

@@ -62,7 +62,7 @@ export default function GradientPage() {
<div className="space-y-6"> <div className="space-y-6">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Color Stops</CardTitle> <CardTitle>Color Stops</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="space-y-4"> <div className="space-y-4">
@@ -96,7 +96,7 @@ export default function GradientPage() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Settings</CardTitle> <CardTitle>Settings</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div> <div>
@@ -137,7 +137,7 @@ export default function GradientPage() {
<> <>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Gradient Preview</CardTitle> <CardTitle>Gradient Preview</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div <div
@@ -151,7 +151,7 @@ export default function GradientPage() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium"> <CardTitle>
Colors ({gradient.length}) Colors ({gradient.length})
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>

6
app/(app)/pastel/harmony/page.tsx
View File

@@ -73,7 +73,7 @@ export default function HarmonyPage() {
<div className="space-y-6"> <div className="space-y-6">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Base Color</CardTitle> <CardTitle>Base Color</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ColorPicker color={baseColor} onChange={setBaseColor} /> <ColorPicker color={baseColor} onChange={setBaseColor} />
@@ -82,7 +82,7 @@ export default function HarmonyPage() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Harmony Type</CardTitle> <CardTitle>Harmony Type</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<Select <Select
@@ -133,7 +133,7 @@ export default function HarmonyPage() {
<> <>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium"> <CardTitle>
Generated Palette ({palette.length} colors) Generated Palette ({palette.length} colors)
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>

10
app/(app)/pastel/page.tsx
View File

@@ -87,7 +87,7 @@ function PlaygroundContent() {
<div className="space-y-6"> <div className="space-y-6">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Color Picker</CardTitle> <CardTitle>Color Picker</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ColorPicker color={color} onChange={setColor} /> <ColorPicker color={color} onChange={setColor} />
@@ -96,7 +96,7 @@ function PlaygroundContent() {
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0"> <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"> <Button onClick={handleShare} variant="outline" size="sm">
<Share2 className="h-4 w-4 mr-2" /> <Share2 className="h-4 w-4 mr-2" />
Share Share
@@ -114,7 +114,7 @@ function PlaygroundContent() {
<CardHeader className="flex flex-row items-center justify-between space-y-0"> <CardHeader className="flex flex-row items-center justify-between space-y-0">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<History className="h-5 w-5" /> <History className="h-5 w-5" />
<CardTitle className="text-sm font-medium">Recent Colors</CardTitle> <CardTitle>Recent Colors</CardTitle>
</div> </div>
<Button <Button
onClick={clearHistory} onClick={clearHistory}
@@ -167,7 +167,7 @@ function PlaygroundContent() {
<div className="space-y-6"> <div className="space-y-6">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Color Information</CardTitle> <CardTitle>Color Information</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{isLoading && ( {isLoading && (
@@ -189,7 +189,7 @@ function PlaygroundContent() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Color Manipulation</CardTitle> <CardTitle>Color Manipulation</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ManipulationPanel color={color} onColorChange={setColor} /> <ManipulationPanel color={color} onColorChange={setColor} />

4
app/(app)/pastel/textcolor/page.tsx
View File

@@ -69,7 +69,7 @@ export default function TextColorPage() {
<div className="space-y-6"> <div className="space-y-6">
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0"> <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 <Button
onClick={addBackground} onClick={addBackground}
disabled={backgrounds.length >= 10} disabled={backgrounds.length >= 10}
@@ -142,7 +142,7 @@ export default function TextColorPage() {
<> <>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-medium">Optimized Results</CardTitle> <CardTitle>Optimized Results</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
{results.map((result, index) => ( {results.map((result, index) => (

6
app/globals.css
View File

@@ -153,9 +153,9 @@
--accent-foreground: oklch(15% 0.05 255); --accent-foreground: oklch(15% 0.05 255);
--destructive: oklch(60% 0.2 25); --destructive: oklch(60% 0.2 25);
--destructive-foreground: oklch(100% 0 0); --destructive-foreground: oklch(100% 0 0);
--border: rgba(0, 0, 0, 0.12); --border: rgba(0, 0, 0, 0.2);
--input: rgba(0, 0, 0, 0.01); --input: rgba(0, 0, 0, 0.08);
--ring: rgba(139, 92, 246, 0.2); --ring: rgba(139, 92, 246, 0.4);
} }
@layer base { @layer base {

4
components/figlet/FontPreview.tsx
View File

@@ -57,9 +57,9 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
}; };
return ( return (
<Card className={cn('relative', className)}> <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"> <div className="flex items-center gap-2">
<CardTitle className="text-sm font-medium">Preview</CardTitle> <CardTitle>Preview</CardTitle>
{font && ( {font && (
<span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-md font-mono"> <span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-md font-mono">
{font} {font}

4
components/figlet/FontSelector.tsx
View File

@@ -93,8 +93,8 @@ export function FontSelector({
return ( return (
<Card className={cn("flex flex-col min-h-0 overflow-hidden", className)}> <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"> <CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2 space-y-0">
<CardTitle className="text-sm font-medium">Select Font</CardTitle> <CardTitle>Select Font</CardTitle>
{onRandomFont && ( {onRandomFont && (
<Button <Button
variant="outline" variant="outline"

4
components/units/MainConverter.tsx
View File

@@ -121,7 +121,7 @@ export default function MainConverter() {
{/* Quick Access Row */} {/* Quick Access Row */}
<Card> <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"> <div className="flex-1">
<SearchUnits onSelectUnit={handleSearchSelect} /> <SearchUnits onSelectUnit={handleSearchSelect} />
</div> </div>
@@ -156,7 +156,7 @@ export default function MainConverter() {
<CardHeader> <CardHeader>
<CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle> <CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-6 pt-0"> <CardContent className="space-y-6">
{/* Input row, stacks vertically on mobile, horizontal on desktop */} {/* 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"> <div className="flex flex-col gap-4 md:flex-row md:items-end md:gap-2">
{/* Value Input */} {/* Value Input */}