import { Meta } from "@storybook/blocks";
import '../styles/shared.css';

<Meta title="Design Tokens/Arrondis" />



<div className="header">
  <h1>Les arrondis</h1>
  <p>Les arrondis disponibles dans notre Design System.</p>
</div>

Les angles des éléments permettent de créer du contraste entre les formes et de suggérer l’utilisation des composants

Il existe 4 radius disponibles :

- <b>rounded-0 : 0px</b><br/>
Dès lors que l’on ne souhaite pas utiliser de radius

- <b>rounded : 4px</b><br/>
Ce radius peut être utilisé sur des éléments interactifs tels que les boutons, les inputs, les alerts,

- <b>rounded-lg : 8px</b><br/>
Ce radius peut être utilisé sur des blocs de structure (cards, tableaux...)

- <b>rounded-pill : 96px</b><br/>
Ce radius peut être utilisé sur des éléments (intéractifs ou non) présentant de la donnée, comme des tags, des filtres, des status...

<br />
<img alt="Radius" src={'/radius.jpg'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />