TalexDreamSoul/teatea-pension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: adopt kumo green ui system

Browse Source
This commit is contained in:
admin
2026-07-02 07:12:31 -07:00
parent 4bb4312b08
commit 0f0bd8813d
32 changed files with 1453 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/ui/card.tsx
View File

@@ -1,43 +1,29 @@
import * as React from "react";
import { LayerCard } from "@cloudflare/kumo/components/layer-card";
import { cn } from "@/lib/utils";
export function Card({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>): React.ReactElement {
export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement {
return (
<div
className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
<LayerCard
className={cn("rounded-lg border border-kumo-line bg-kumo-base text-card-foreground shadow-sm", className)}
{...props}
/>
);
}
export function CardHeader({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>): React.ReactElement {
return <div className={cn("flex flex-col gap-1.5 p-5", className)} {...props} />;
export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement {
return <LayerCard.Secondary className={cn("flex flex-col gap-1.5 p-5", className)} {...props} />;
}
export function CardTitle({
className,
...props
}: React.HTMLAttributes<HTMLHeadingElement>): React.ReactElement {
return <h3 className={cn("text-base font-semibold leading-none", className)} {...props} />;
export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.ReactElement {
return <h3 className={cn("text-base font-semibold leading-none text-kumo-strong", className)} {...props} />;
}
export function CardDescription({
className,
...props
}: React.HTMLAttributes<HTMLParagraphElement>): React.ReactElement {
return <p className={cn("text-sm text-muted-foreground", className)} {...props} />;
export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.ReactElement {
return <p className={cn("text-sm text-kumo-subtle", className)} {...props} />;
}
export function CardContent({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>): React.ReactElement {
return <div className={cn("p-5 pt-0", className)} {...props} />;
export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement {
return <LayerCard.Primary className={cn("p-5 pt-0", className)} {...props} />;
}