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

style(pastel): unify card title sizes with figlet

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-23 09:25:51 +01:00
parent fd2ada4438
commit 8ce12c4c70
8 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -97,7 +97,7 @@ export default function BatchPage() {
{/* Input */}
<div className="space-y-6">
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Input Colors</h2>
<h2 className="text-sm font-medium mb-4">Input Colors</h2>
<p className="text-sm text-muted-foreground mb-4">
Enter colors (one per line or comma-separated). Supports hex format
</p>
@@ -115,7 +115,7 @@ export default function BatchPage() {
</div>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Operation</h2>
<h2 className="text-sm font-medium mb-4">Operation</h2>
<div className="space-y-4">
<Select
label="Operation"
@@ -169,7 +169,7 @@ export default function BatchPage() {
{outputColors.length > 0 ? (
<>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">
<h2 className="text-sm font-medium mb-4">
Output Colors ({outputColors.length})
</h2>
<PaletteGrid colors={outputColors} />

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

@@ -73,7 +73,7 @@ export default function ColorBlindPage() {
<div className="space-y-6">
<div className="p-6 border rounded-lg bg-card">
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold">Colors to Test</h2>
<h2 className="text-sm font-medium">Colors to Test</h2>
<Button
onClick={addColor}
variant="outline"
@@ -110,7 +110,7 @@ export default function ColorBlindPage() {
</div>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Blindness Type</h2>
<h2 className="text-sm font-medium mb-4">Blindness Type</h2>
<div className="space-y-4">
<Select
label="Type"
@@ -152,7 +152,7 @@ export default function ColorBlindPage() {
{simulations.length > 0 ? (
<>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Simulation Results</h2>
<h2 className="text-sm font-medium mb-4">Simulation Results</h2>
<p className="text-sm text-muted-foreground mb-6">
Compare original colors (left) with how they appear to people with{' '}
{blindnessType} (right)

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

@@ -70,7 +70,7 @@ export default function ContrastPage() {
<div className="space-y-6">
<div className="p-6 border rounded-lg bg-card">
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold">Foreground Color</h2>
<h2 className="text-sm font-medium">Foreground Color</h2>
</div>
<ColorPicker color={foreground} onChange={setForeground} />
</div>
@@ -87,7 +87,7 @@ export default function ContrastPage() {
</div>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Background Color</h2>
<h2 className="text-sm font-medium mb-4">Background Color</h2>
<ColorPicker color={background} onChange={setBackground} />
</div>
</div>
@@ -96,7 +96,7 @@ export default function ContrastPage() {
<div className="space-y-6">
{/* Preview */}
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Preview</h2>
<h2 className="text-sm font-medium mb-4">Preview</h2>
<div
className="rounded-lg p-8 text-center"
style={{ backgroundColor: background, color: foreground }}
@@ -109,7 +109,7 @@ export default function ContrastPage() {
{/* Contrast Ratio */}
{ratio !== null && (
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Contrast Ratio</h2>
<h2 className="text-sm font-medium mb-4">Contrast Ratio</h2>
<div className="text-center mb-6">
<div className="text-5xl font-bold">{ratio.toFixed(2)}:1</div>
<p className="text-sm text-muted-foreground mt-2">
@@ -128,7 +128,7 @@ export default function ContrastPage() {
{/* WCAG Compliance */}
{compliance && (
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">WCAG 2.1 Compliance</h2>
<h2 className="text-sm font-medium mb-4">WCAG 2.1 Compliance</h2>
<div className="space-y-4">
<div>
<h3 className="text-sm font-semibold mb-2">Level AA</h3>

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

@@ -51,7 +51,7 @@ export default function DistinctPage() {
<div className="lg:col-span-1">
<div className="p-6 border rounded-lg bg-card space-y-6">
<div>
<h2 className="text-xl font-semibold mb-4">Settings</h2>
<h2 className="text-sm font-medium mb-4">Settings</h2>
</div>
<div>
@@ -128,7 +128,7 @@ export default function DistinctPage() {
{/* Results */}
<div className="lg:col-span-2 space-y-6">
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">
<h2 className="text-sm font-medium mb-4">
Generated Colors {colors.length > 0 && `(${colors.length})`}
</h2>
<PaletteGrid colors={colors} />

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

@@ -65,7 +65,7 @@ export default function GradientPage() {
{/* Controls */}
<div className="space-y-6">
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Color Stops</h2>
<h2 className="text-sm font-medium mb-4">Color Stops</h2>
<div className="space-y-4">
{stops.map((stop, index) => (
<div key={index} className="flex items-start gap-3">
@@ -95,7 +95,7 @@ export default function GradientPage() {
</div>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Settings</h2>
<h2 className="text-sm font-medium mb-4">Settings</h2>
<div className="space-y-4">
<div>
<label htmlFor="count" className="text-sm font-medium mb-2 block">
@@ -159,7 +159,7 @@ export default function GradientPage() {
{gradient && gradient.length > 0 && (
<>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Gradient Preview</h2>
<h2 className="text-sm font-medium mb-4">Gradient Preview</h2>
<div
className="h-32 rounded-lg"
style={{
@@ -169,7 +169,7 @@ export default function GradientPage() {
</div>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">
<h2 className="text-sm font-medium mb-4">
Colors ({gradient.length})
</h2>
<PaletteGrid colors={gradient} />

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

@@ -65,12 +65,12 @@ export default function HarmonyPage() {
{/* Controls */}
<div className="space-y-6">
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Base Color</h2>
<h2 className="text-sm font-medium mb-4">Base Color</h2>
<ColorPicker color={baseColor} onChange={setBaseColor} />
</div>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Harmony Type</h2>
<h2 className="text-sm font-medium mb-4">Harmony Type</h2>
<div className="space-y-4">
<Select
label="Harmony"
@@ -115,7 +115,7 @@ export default function HarmonyPage() {
{palette.length > 0 && (
<>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">
<h2 className="text-sm font-medium mb-4">
Generated Palette ({palette.length} colors)
</h2>
<PaletteGrid colors={palette} />

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

@@ -71,13 +71,13 @@ function PlaygroundContent() {
{/* Left Column: Color Picker and Display */}
<div className="space-y-6">
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Color Picker</h2>
<h2 className="text-sm font-medium mb-4">Color Picker</h2>
<ColorPicker color={color} onChange={setColor} />
</div>
<div className="p-6 border rounded-lg bg-card">
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold">Preview</h2>
<h2 className="text-sm font-medium">Preview</h2>
<Button onClick={handleShare} variant="outline" size="sm">
<Share2 className="h-4 w-4 mr-2" />
Share
@@ -93,7 +93,7 @@ function PlaygroundContent() {
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<History className="h-5 w-5" />
<h2 className="text-xl font-semibold">Recent Colors</h2>
<h2 className="text-sm font-medium">Recent Colors</h2>
</div>
<Button
onClick={clearHistory}
@@ -143,7 +143,7 @@ function PlaygroundContent() {
{/* Right Column: Color Information */}
<div className="space-y-6">
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Color Information</h2>
<h2 className="text-sm font-medium mb-4">Color Information</h2>
{isLoading && (
<div className="flex items-center justify-center py-12">
@@ -162,7 +162,7 @@ function PlaygroundContent() {
</div>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Color Manipulation</h2>
<h2 className="text-sm font-medium mb-4">Color Manipulation</h2>
<ManipulationPanel color={color} onColorChange={setColor} />
</div>
</div>

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

@@ -68,7 +68,7 @@ export default function TextColorPage() {
<div className="space-y-6">
<div className="p-6 border rounded-lg bg-card">
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold">Background Colors</h2>
<h2 className="text-sm font-medium">Background Colors</h2>
<Button
onClick={addBackground}
disabled={backgrounds.length >= 10}
@@ -136,7 +136,7 @@ export default function TextColorPage() {
{results.length > 0 ? (
<>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Optimized Results</h2>
<h2 className="text-sm font-medium mb-4">Optimized Results</h2>
<div className="space-y-4">
{results.map((result, index) => (
<div