mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Refactor frontend system primitives and surfaces

Browse Source
This commit is contained in:
MOH
2026-03-09 06:15:01 +01:00
parent 3e835ee620
commit a65037e3b3
22 changed files with 1363 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ui/app-card.tsx
+2 -2
View File
@@ -10,8 +10,8 @@ const appCardVariants = cva(
variants: {
level: {
1: "border border-border/80 bg-card text-card-foreground shadow-card",
2: "border border-border/80 bg-card text-card-foreground shadow-card",
3: "border border-border/80 bg-card text-card-foreground shadow-panel",
2: "border border-input bg-background text-foreground shadow-xs",
3: "border border-border/80 bg-surface-2 text-foreground shadow-panel",
inverse: "border-transparent bg-foreground text-background shadow-card",
},
padding: {
components/ui/dialog.tsx
+3 -3
View File
@@ -36,13 +36,13 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:w-full sm:rounded-lg",
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-surface border border-border/80 bg-card p-6 text-card-foreground shadow-panel duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:w-full",
className,
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
<DialogPrimitive.Close className="absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-nested text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
@@ -56,7 +56,7 @@ const DialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
<div className={cn("flex flex-col gap-1.5 text-center sm:text-left", className)} {...props} />
);
const DialogFooter = ({
components/ui/sheet.tsx
+8 -8
View File
@@ -17,7 +17,7 @@ const SheetOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out",
"fixed inset-0 z-50 bg-foreground/30 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className,
)}
{...props}
@@ -29,13 +29,13 @@ SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
const sheetVariants = {
right:
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right sm:max-w-sm",
"inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm sm:rounded-l-surface data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
left:
"inset-y-0 left-0 h-full w-3/4 border-r data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left sm:max-w-sm",
"inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm sm:rounded-r-surface data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
top:
"inset-x-0 top-0 border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
"inset-x-0 top-0 border-b rounded-b-surface data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
bottom:
"inset-x-0 bottom-0 border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
"inset-x-0 bottom-0 border-t rounded-t-surface data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
};
type SheetContentProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & {
@@ -51,14 +51,14 @@ const SheetContent = React.forwardRef<
<SheetPrimitive.Content
ref={ref}
className={cn(
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out",
"fixed z-50 gap-4 border-border/80 bg-card p-6 text-card-foreground shadow-panel transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out",
sheetVariants[side],
className,
)}
{...props}
>
{children}
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
<SheetPrimitive.Close className="absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-nested text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
@@ -72,7 +72,7 @@ const SheetHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn("flex flex-col space-y-2 text-left", className)} {...props} />
<div className={cn("flex flex-col gap-2 text-left", className)} {...props} />
);
const SheetTitle = React.forwardRef<
components/ui/tabs.tsx
+2 -2
View File
@@ -70,7 +70,7 @@ function TabsTrigger({
type="button"
className={cn(
"inline-flex items-center justify-center rounded-nested px-3 py-2 text-sm font-medium text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50",
isActive && "bg-background text-foreground shadow-sm",
isActive && "border border-border/80 bg-background text-foreground shadow-xs",
className,
)}
onClick={(event) => {
@@ -101,7 +101,7 @@ function TabsContent({
return (
<div
className={cn(
"mt-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"mt-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0",
className,
)}
{...props}
components/ui/ui-kit-showcase.tsx
+3 -3
View File
@@ -545,10 +545,10 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
</div>
<p className="text-sm text-muted-foreground">{copy.workspaceMainText}</p>
<div className="grid gap-3 md:grid-cols-2">
<div className="rounded-lg border border-input bg-background p-4 text-sm text-muted-foreground">
<div className="rounded-nested border border-input bg-background p-4 text-sm text-muted-foreground">
Step 1
</div>
<div className="rounded-lg border border-input bg-background p-4 text-sm text-muted-foreground">
<div className="rounded-nested border border-input bg-background p-4 text-sm text-muted-foreground">
Step 2
</div>
</div>
@@ -562,7 +562,7 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
<div className="space-y-3">
<Badge variant="success">Ready</Badge>
<Badge variant="warning">Open</Badge>
<div className="rounded-lg border border-input bg-background p-4 text-sm text-muted-foreground">
<div className="rounded-nested border border-input bg-background p-4 text-sm text-muted-foreground">
Checklist / status / focus details
</div>
</div>