LathanDevers
33 lines
1.4 KiB
TypeScript
33 lines
1.4 KiB
TypeScript
// Styles neumorphiques réutilisables.
|
|
|
|
export const NEUMORPHISM = {
|
|
|
|
// Reliefs au repos
|
|
lightShadow: "shadow-[6px_6px_12px_#c5c5c5,-6px_-6px_12px_#ffffff]",
|
|
darkShadow: "dark:shadow-[6px_6px_12px_#121926,-6px_-6px_12px_#2a3850]",
|
|
|
|
lightShadowHover: "hover:shadow-[6px_6px_12px_#c5c5c5,-6px_-6px_12px_#ffffff]",
|
|
darkShadowHover: "dark:hover:shadow-[6px_6px_12px_#121926,-6px_-6px_12px_#2a3850]",
|
|
|
|
// Ombres Neumorphic quand on clique (enfoncé)
|
|
lightActive: "active:shadow-[4px_4px_12px_#c5c5c5,-4px_-4px_12px_#ffffff]",
|
|
darkActive: "dark:active:shadow-[4px_4px_12px_#121926,-4px_-4px_12px_#2a3850]",
|
|
|
|
|
|
insetLightActive: "active:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
|
|
insetDarkActive: "dark:active:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
|
|
|
|
insetLightHover: "hover:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
|
|
insetDarkHover: "dark:hover:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
|
|
|
|
sizeStyles: {
|
|
sm: "px-5 py-2 text-sm rounded-md",
|
|
md: "px-[1.7em] py-[0.7em] text-[18px] rounded-[0.5em]",
|
|
lg: "px-10 py-4 text-xl rounded-xl",
|
|
icon: "p-3 rounded-lg",
|
|
},
|
|
// Ombres du bouton ACTIF (effet enfoncé/creusé "inset")
|
|
insetLight: "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
|
|
insetDark: "dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
|
|
|
|
} as const; |