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">
<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>

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

@@ -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">

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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} />

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

@@ -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) => (