import { Meta, Unstyled } from '@storybook/addon-docs/blocks';
import { CustomThemeProvider } from '../theme';

import RadiusSection from './RadiusDocumentation';

<Meta title="Foundations/Border Radius" />

<CustomThemeProvider>
  # Border Radius System

  The border radius system provides consistent border radius values across the Little World Design System. These values are used to create rounded corners on various UI elements, from subtle to dramatic effects.

  ## Border Radius Tokens

  <Unstyled>
    <RadiusSection />
  </Unstyled>

  ## Usage Guidelines

  - **xxxsmall (4px)**: Use for subtle rounding on small elements like buttons
  - **xxsmall (8px)**: Use for standard rounding on cards and containers
  - **xsmall (12px)**: Use for comfortable rounding on medium-sized elements
  - **small (16px)**: Use for noticeable rounding on larger elements
  - **medium (20px)**: Use for prominent rounding on major UI elements
  - **large (24px)**: Use for generous rounding on hero sections
  - **xlarge (32px)**: Use for substantial rounding on large containers
  - **xxlarge (40px)**: Use for maximum rounding on very large elements
  - **massive (100px)**: Use for dramatic rounding on special elements
  - **half (50%)**: Use for creating circular elements
  - **full (100%)**: Use for creating fully rounded elements

  ## Implementation

  ```tsx
  // Use radius tokens in styled-components
  const Card = styled.div`
    border-radius: ${({ theme }) => theme.radius.medium};
    padding: ${({ theme }) => theme.spacing.medium};
  `;

  const Circle = styled.div`
    border-radius: ${({ theme }) => theme.radius.half};
    width: 100px;
    height: 100px;
  `;
  ```
</CustomThemeProvider> 