import {Meta} from '@storybook/addon-docs';
import PageHeader from 'blocks/PageHeader';

<Meta title="Foundation ✨/Border radius" />

<PageHeader type="foundation">Border radius</PageHeader>

A border radius refers to the amount of curvature or rounding applied to the corners of a rectangular shape or element. Essentially, it determines how None or smooth the corners of an element appear. In addition to its aesthetic impact, border radius can also affect the perceived weight and texture of an element. Overall, border radius is a critical element in creating visually appealing and user-friendly interfaces, helping to guide users' attention and enhance their experience with the design.

<table style={{width: '100%', marginBottom: '30px'}}>
  <tr>
    <td>
      <strong>CSS</strong>
    </td>
    <td>
      <strong>SASS</strong>
    </td>
    <td style={{width: '20%', minWidth: '60px'}}>
      <strong>Value</strong>
    </td>
    <td>
      <strong>Usage</strong>
    </td>
  </tr>
  <tr>
    <td>
      <code>--border-radius-none</code>
    </td>
    <td>
      <code>$borderRadiusNone</code>
    </td>
    <td>0px</td>
    <td>landing page containers, marketing materials, marketing pages</td>
  </tr>
  <tr>
    <td>
      <code>--border-radius-xxxs</code>
    </td>
    <td>
      <code>$borderRadiusXXXS</code>
    </td>
    <td>4px</td>
    <td>icons, badges</td>
  </tr>
  <tr>
    <td>
      <code>--border-radius-xxs</code>
    </td>
    <td>
      <code>$borderRadiusXXS</code>
    </td>
    <td>6px</td>
    <td>labels</td>
  </tr>
  <tr>
    <td>
      <code>--border-radius-xs</code>
    </td>
    <td>
      <code>$borderRadiusXS</code>
    </td>
    <td>8px</td>
    <td>
      tertiary containers, (containers inside of other containers), clickable
      tabs
    </td>
  </tr>
  <tr>
    <td>
      <code>--border-radius-s</code>
    </td>
    <td>
      <code>$borderRadiusS</code>
    </td>
    <td>12px</td>
    <td>
      tertiary containers (containers inside of other containers), clickable
      tabs
    </td>
  </tr>
  <tr>
    <td>
      <code>--border-radius-m</code>
    </td>
    <td>
      <code>$borderRadiusM</code>
    </td>
    <td>16px</td>
    <td>secondary containers (Questions, Answers, Side-Rail Boxes)</td>
  </tr>
  <tr>
    <td>
      <code>--border-radius-l</code>
    </td>
    <td>
      <code>$borderRadiusL</code>
    </td>
    <td>24px</td>
    <td>primary containers (Modals, Tooltips, Bottom Drawers)</td>
  </tr>
  <tr>
    <td>
      <code>--border-radius-xl</code>
    </td>
    <td>
      <code>$borderRadiusXL</code>
    </td>
    <td>32px</td>
    <td>inputs, primary containers</td>
  </tr>
  <tr>
    <td>
      <code>--border-radius-xxl</code>
    </td>
    <td>
      <code>$borderRadiusXXL</code>
    </td>
    <td>40px</td>
    <td>tooltips, bottom drawer/sheet menus</td>
  </tr>
  <tr>
    <td>
      <code>--border-radius-pill</code>
    </td>
    <td>
      <code>$borderRadiusPill</code>
    </td>
    <td>999px</td>
    <td>buttons, chips, tabs</td>
  </tr>
</table>