Rayons

Associer rayon et ombre

Les échelles de rayon et d'ombre sont intentionnellement alignées :

• radius-sm + shadow-sm : puces, badges, éléments en ligne.
• radius-md + shadow-md : boutons, champs, petites cartes.
• radius-lg + shadow-lg : cartes, panneaux, surfaces relevées.
• radius-xl + shadow-xl : menus déroulables, popovers, cartes vedettes.
• radius-2xl + shadow-overlay : modales, tiroirs, panneaux vedettes.

Ce qu'il faut éviter

• Mélanger les échelles de rayons au sein d'un même composant.
• Appliquer radius-full à des éléments non circulaires.
• Oublier que radius-none est un choix valide et intentionnel.
• Utiliser les valeurs par défaut de Tailwind (rounded-lg, rounded-xl) au lieu des jetons ep- — cela contourne le système de design.

Où c'est utilisé

Composants et surfaces mappés à leur jeton de rayon :

• radius-none: tableaux de données, images plein écran, blocs de code.
• radius-sm: Badge, Chip, Tag, petit Input.
• radius-md: Button, Textarea, Select, petite Card.
• radius-lg: Card, Modal, Drawer, Panel, Popover.
• radius-xl: FeatureCard, contenu de Dropdown.
• radius-2xl: Panneau héros, section marketing, Toast.
• radius-full: Avatar, IconButton (circulaire), Pill.

Comment l'utiliser

Dans les composants, utilisez les classes utilitaires Tailwind (rounded-ep-sm, rounded-ep-md, rounded-ep-lg, etc.). En CSS personnalisé, référencez la variable CSS directement (var(--ep-radius-sm), var(--ep-radius-md), etc.). Les deux pointent vers le même jeton, donc changer une valeur dans globals.css met à jour partout. Les rayons sont indépendants du thème — le même rayon s'applique en mode clair et sombre.