laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
51 lines (50 loc) • 1.91 kB
JavaScript
"use client";
const e = {
// Interaction states
focusRing: "focus-visible:ring-d-ring/50 focus-visible:ring-[3px] focus-visible:border-d-ring outline-none transition-all duration-200",
focusRingWithin: "focus-within:ring-d-ring/50 focus-within:ring-[3px] focus-within:border-d-ring outline-none transition-all duration-200",
activeRing: "ring-d-ring/50 ring-[3px] border-d-ring",
// Base shapes
radius: {
default: "rounded-md",
sm: "rounded-sm",
lg: "rounded-lg",
full: "rounded-full"
},
// Input & Button heights/paddings
sizes: {
default: "h-9 px-3 py-2 text-sm",
sm: "h-8 px-2.5 py-1.5 text-xs",
lg: "h-10 px-4 py-2 text-base",
icon: {
default: "size-9"
}
},
// Text styles for inputs/buttons
text: {
base: "text-sm font-medium whitespace-nowrap",
placeholder: "placeholder:text-d-muted-foreground"
},
// Common interactive behaviors
interaction: {
active: "active:scale-[0.98] active:shadow-sm transform-gpu",
disabled: "disabled:cursor-not-allowed disabled:opacity-50"
},
// Input specific
input: {
base: "flex w-full border border-d-border/50 bg-d-input transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium",
invalid: "aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive"
},
// Badge specific
badge: {
base: "inline-flex items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1"
},
// Dropdown item specific
dropdownItem: {
selected: "bg-d-primary/10 text-d-primary font-medium data-[selected=true]:text-d-primary data-[selected=true]:bg-d-primary/30 hover:text-d-primary hover:bg-d-primary/30",
hover: "data-[selected=true]:bg-d-accent/50 data-[selected=true]:text-d-accent-foreground hover:bg-d-accent/50 hover:text-d-accent-foreground"
}
};
export {
e as designTokens
};