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

fix: old styling with new shadcn components

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-24 16:58:17 +01:00
parent 9c6b184f7e
commit 5d6ace4e46
11 changed files with 25 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -127,7 +127,7 @@ export default function BatchPage() {
value={operation} value={operation}
onValueChange={(value) => setOperation(value as Operation)} onValueChange={(value) => setOperation(value as Operation)}
> >
<SelectTrigger> <SelectTrigger className="w-full">
<SelectValue placeholder="Select operation" /> <SelectValue placeholder="Select operation" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>

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

@@ -122,7 +122,7 @@ export default function ColorBlindPage() {
value={blindnessType} value={blindnessType}
onValueChange={(value) => setBlindnessType(value as ColorBlindnessType)} onValueChange={(value) => setBlindnessType(value as ColorBlindnessType)}
> >
<SelectTrigger> <SelectTrigger className="w-full">
<SelectValue placeholder="Select type" /> <SelectValue placeholder="Select type" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>

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

@@ -39,7 +39,7 @@ export default function ContrastPage() {
}) => ( }) => (
<div className="flex items-center justify-between p-3 bg-muted rounded-lg"> <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
<span className="text-sm">{label}</span> <span className="text-sm">{label}</span>
<Badge variant={passed ? 'secondary' : 'destructive'}> <Badge variant={passed ? 'default' : 'destructive'}>
{passed ? ( {passed ? (
<> <>
<Check className="h-3 w-3 mr-1" /> <Check className="h-3 w-3 mr-1" />

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

@@ -79,7 +79,7 @@ export default function DistinctPage() {
value={metric} value={metric}
onValueChange={(value) => setMetric(value as 'cie76' | 'ciede2000')} onValueChange={(value) => setMetric(value as 'cie76' | 'ciede2000')}
> >
<SelectTrigger> <SelectTrigger className="w-full">
<SelectValue placeholder="Select metric" /> <SelectValue placeholder="Select metric" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>

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

@@ -82,7 +82,7 @@ export default function HarmonyPage() {
value={harmonyType} value={harmonyType}
onValueChange={(value) => setHarmonyType(value as HarmonyType)} onValueChange={(value) => setHarmonyType(value as HarmonyType)}
> >
<SelectTrigger> <SelectTrigger className="w-full">
<SelectValue placeholder="Select harmony" /> <SelectValue placeholder="Select harmony" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>

2
app/(app)/pastel/names/page.tsx
View File

@@ -64,7 +64,7 @@ export default function NamedColorsPage() {
</div> </div>
<div className="w-full sm:w-48"> <div className="w-full sm:w-48">
<Select value={sortBy} onValueChange={(value) => setSortBy(value as 'name' | 'hue')}> <Select value={sortBy} onValueChange={(value) => setSortBy(value as 'name' | 'hue')}>
<SelectTrigger> <SelectTrigger className="w-full">
<SelectValue placeholder="Sort by..." /> <SelectValue placeholder="Sort by..." />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>

114
app/globals.css
View File

@@ -1,8 +1,4 @@
@import "tailwindcss"; @import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@custom-variant dark (&:is(.dark *));
@source "../components/*.{js,ts,jsx,tsx}"; @source "../components/*.{js,ts,jsx,tsx}";
@source "../components/ui/*.{js,ts,jsx,tsx}"; @source "../components/ui/*.{js,ts,jsx,tsx}";
@@ -226,113 +222,3 @@ html {
@utility gradient-brand { @utility gradient-brand {
background: linear-gradient(to right, #a78bfa, #f472b6, #22d3ee); background: linear-gradient(to right, #a78bfa, #f472b6, #22d3ee);
} }
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-2xl: calc(var(--radius) + 8px);
--radius-3xl: calc(var(--radius) + 12px);
--radius-4xl: calc(var(--radius) + 16px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}

27
components/layout/AppHeader.tsx
View File

@@ -18,20 +18,11 @@ export function AppHeader() {
const pathSegments = pathname.split('/').filter(Boolean); const pathSegments = pathname.split('/').filter(Boolean);
return ( return (
<header className="h-16 border-b border-border bg-background/10 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between px-4 lg:px-8"> <header className="h-16 border-b border-border bg-background/10 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between pl-8 pr-5 md:pr-9">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Button
variant="ghost"
size="icon"
className="lg:hidden text-muted-foreground hover:text-foreground"
onClick={toggle}
>
{isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
</Button>
<nav className="flex items-center text-sm font-medium"> <nav className="flex items-center text-sm font-medium">
<Link href="/" className="flex items-center gap-2 group"> <Link href="/" className="flex items-center gap-2 group">
<Logo size={20} className="md:hidden" /> <Logo size={20} className="lg:hidden" />
<span className="font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400 group-hover:opacity-80 transition-opacity"> <span className="font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400 group-hover:opacity-80 transition-opacity">
Kit Kit
</span> </span>
@@ -46,8 +37,8 @@ export function AppHeader() {
<Link <Link
href={href} href={href}
className={cn( className={cn(
"capitalize transition-colors", "capitalize transition-colors text-foreground",
isLast ? "text-foreground font-semibold" : "text-muted-foreground hover:text-foreground font-medium" isLast ? "font-semibold" : "font-medium"
)} )}
> >
{segment.replace(/-/g, ' ')} {segment.replace(/-/g, ' ')}
@@ -58,8 +49,16 @@ export function AppHeader() {
</nav> </nav>
</div> </div>
<div className="flex items-center gap-2 sm:gap-4"> <div className="flex items-center gap-2">
<ThemeToggleComponent /> <ThemeToggleComponent />
<Button
variant="ghost"
size="icon"
className="lg:hidden text-muted-foreground hover:text-foreground"
onClick={toggle}
>
{isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
</Button>
</div> </div>
</header> </header>
); );

9
components/layout/AppSidebar.tsx
View File

@@ -148,9 +148,9 @@ export function AppSidebar() {
href={item.href} href={item.href}
onClick={() => { if (window.innerWidth < 1024) close(); }} onClick={() => { if (window.innerWidth < 1024) close(); }}
className={cn( className={cn(
"flex items-center px-3 py-2 rounded-xl text-sm font-medium transition-all duration-300 relative group/item", "flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300 relative group/item",
isActive isActive
? "bg-primary/10 text-primary shadow-[0_0_15px_rgba(139,92,246,0.15)] ring-1 ring-primary/20" ? "bg-primary/10 text-primary ring-1 ring-primary/20"
: "text-muted-foreground hover:bg-accent/50 hover:text-foreground", : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
isCollapsed ? "justify-center" : "justify-between" isCollapsed ? "justify-center" : "justify-between"
)} )}
@@ -172,11 +172,6 @@ export function AppSidebar() {
pathname.startsWith(item.href) && "rotate-90" pathname.startsWith(item.href) && "rotate-90"
)} /> )} />
)} )}
{/* Collapsed Active Indicator */}
{isCollapsed && isActive && (
<div className="absolute left-0 w-1 h-6 bg-primary rounded-r-full" />
)}
</Link> </Link>
{item.items && pathname.startsWith(item.href) && !isCollapsed && ( {item.items && pathname.startsWith(item.href) && !isCollapsed && (

2
components/pastel/tools/ExportMenu.tsx
View File

@@ -92,7 +92,7 @@ export function ExportMenu({ colors, className }: ExportMenuProps) {
value={format} value={format}
onValueChange={(value) => setFormat(value as ExportFormat)} onValueChange={(value) => setFormat(value as ExportFormat)}
> >
<SelectTrigger> <SelectTrigger className="w-full">
<SelectValue placeholder="Select format" /> <SelectValue placeholder="Select format" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>

6
components/units/converter/MainConverter.tsx
View File

@@ -136,7 +136,7 @@ export default function MainConverter() {
onValueChange={(value) => setSelectedMeasure(value as Measure)} onValueChange={(value) => setSelectedMeasure(value as Measure)}
> >
<SelectTrigger <SelectTrigger
className="h-10 text-sm" className="w-full"
style={{ style={{
borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`, borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
}} }}
@@ -181,7 +181,7 @@ export default function MainConverter() {
value={selectedUnit} value={selectedUnit}
onValueChange={(value) => setSelectedUnit(value)} onValueChange={(value) => setSelectedUnit(value)}
> >
<SelectTrigger> <SelectTrigger className="w-full">
<SelectValue placeholder="From" /> <SelectValue placeholder="From" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -210,7 +210,7 @@ export default function MainConverter() {
value={targetUnit} value={targetUnit}
onValueChange={(value) => setTargetUnit(value)} onValueChange={(value) => setTargetUnit(value)}
> >
<SelectTrigger> <SelectTrigger className="w-full">
<SelectValue placeholder="To" /> <SelectValue placeholder="To" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>